0
저는 과제를 수행 중이며 일반적으로 저에게 문제가되지 않는 표에 일부 이미지를 배치해야합니다. 오늘 테이블에 이미지를 추가하면 alt 텍스트가 표시된 사각형 테두리가 표시됩니다. 나는 내가 올바른 디렉토리를 가리키고 있다고 확신한다.이미지가 표에 표시되지 않습니다.
내 폴더 구조는 다음과 같습니다
Website
css
fonts
html (Page with table in here)
js
images (Images for table in here)
@font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
\t margin: 0;
\t border: 0;
\t padding: 0;
\t font-size: 12px;
\t font-family: arial, sans-serif;
}
body {
\t width: 100%;
\t height: 300%;
\t background-color: #D8D8D8;
}
nav {
\t font-family: customFont;
\t font-size: 30px;
\t width: 100%;
\t height: 40px;
\t position: fixed;
\t z-index: 50;
}
.nav-background {
\t width: 100%;
\t height: 100%;
\t background: #12A7CB;
\t opacity: 0;
\t position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
\t width: 100%;
\t height: 320px;
}
#slideshow {
position:relative;
height:320px;
\t width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
\t width: 100%;
\t height: 320px;
\t box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
\t float: left;
\t padding-left: 100px;
\t padding-right: 200px;
}
#nav {
\t background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
\t width:100%;
\t height:50px;
\t box-shadow: 0px 1px 10px #5E5E5E;
\t position:fixed;
\t top:0px;
}
.title {
\t display:none;
\t color:#EDEDED;
\t font-size:25px;
\t width:350px;
\t margin-top:6px;
\t margin-left:150px;
\t font-weight:bold;
\t float:left;
}
.navigation li{
\t list-style-image: url('navIcon.png');
\t float: left;
\t padding-right:45px;
\t margin-bottom: 25px;
\t color: black;
}
li {
\t
}
.navigation a {
\t font-size: 19px;
\t font-family: customFont;
\t text-decoration:none;
\t color: #01ebfe;
}
.navigation a:hover {
\t
}
.wrapper {
\t width: 900px;
\t height: 1000%;
\t margin-top: 25px;
\t margin-left: auto;
\t margin-right: auto;
\t padding: 20px;
\t background-color: white;
\t padding-top: 100px;
\t box-shadow: 10px 10px 5px #888888;
}
p{
\t font-size: 14px;
\t padding-bottom: 32px;
}
p:first-letter {
\t font-size: 32px;
\t color: #71CAE0;
}
h1 {
\t font-family: customFont;
\t font-size: 32px;
\t font-weight: bolder;
\t color: #12A7CB;
\t text-align: center;
}
h2 {
\t font-family: customFont;
\t font-size: 22px;
\t font-weight: bold;
\t color: #12A7CB;
\t text-align: left;
\t text-decoration: underline;
}
section {
\t width: 100%;
\t height: 100%;
\t background-color: #D8D8D8;
}
img.logo {
\t text-align: center;
\t margin: auto;
\t display: block;
}
img.slideshow {
\t width: 100%;
\t height: 480px;
}
footer {
\t width: 900px;
\t margin: 25px auto 0 auto;
\t padding-top: 20px;
\t padding-left: 20px;
\t padding-right: 20px;
\t background-color: white;
\t text-align: center;
\t box-shadow: 10px 10px 5px #888888;
}
.members {
\t padding: 10px;
\t display: inline-block;
\t background-color: #e4f4f8;
\t margin-top: 15px;
\t margin-left: 15px;
\t border: 1px solid #12A7CB;
\t float: right;
}
ol.test {
\t list-style-type: lower-alpha;
}
.members ol {
\t list-style-type: lower-alpha;
}
.members li {
\t display: list-item;
\t color: #6c6c6c;
\t list-style-type: lower-alpha;
\t padding: 5px;
\t margin-bottom: 5px;
\t margin-left: 10px;
}
/* TABLE STUFF */
table, tr, th, td {
\t border: 1px solid black;
\t border-collapse: collapse;
}
th {
\t padding: 5px;
\t color: #12A7CB;
\t background-color: #e4f4f8;
}
td {
\t background-color: #f2eded;
\t width: 150px;
\t height: 150px;
}
/* END TABLE STUFF */
.video-wrapper {
\t width: 100%;
\t text-align: center;
}
.video-wrapper a {
\t color: blue;
\t text-decoration: none;
\t font-size: 12px;
\t font-family: arial, sans-serif;
}
.social img {
\t padding-top: 32px;
\t padding-right: 8px;
\t width: 48px;
\t height: 48px;
\t border: none;
}<!DOCTYPE html>
<html>
\t <!--
\t Author: #####
\t Date: 11/08/2014
\t -->
\t <head>
\t \t <meta charset="utf-8" />
\t \t <title>Home - Three Doors Down</title>
\t \t
\t \t <link rel="stylesheet" type="text/css" href="../css/style.css" />
\t \t <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
\t \t
\t \t <script src="../js/jquery.js"></script>
\t \t <script type="text/javascript" src="../js/scroll.js"></script>
\t \t <script type="text/javascript" src="../js/header.js"></script>
\t \t
\t </head>
\t
\t <body>
\t \t <nav class="nav">
\t \t \t <div class="nav-background">
\t \t \t </div>
\t \t \t
\t \t \t <div class="nav-content">
\t \t \t \t <img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
\t \t \t \t <ul class='navigation'>
\t \t \t \t \t <li><a href="../index.html">Home</a></li>
\t \t \t \t \t <li><a href="biography.html">Biography</a></li>
\t \t \t \t \t <li><a href="discography.html">Discography</a></li>
\t \t \t \t \t <li><a href="video.html">Video</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </nav>
\t \t
\t \t <header class="header">
\t \t \t <div id="slideshow">
\t \t \t \t <img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
\t \t \t \t <img src="../images/header2.jpg" alt="Three Doors Down" />
\t \t \t \t <img src="../images/header3.jpg" alt="Three Doors Down" />
\t \t \t </div>
\t \t </header>
\t \t
\t \t <section>
\t \t \t <div class="wrapper">
\t \t \t \t <h1>Discography</h1>
\t \t \t \t
\t \t \t \t <div class="disco" >
\t \t \t \t \t <table >
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t Album
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t Year
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t Record Label
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t CD Cover
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t The Better Life
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2000
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t <img href="../images/theBetterLifeCover.jpg" alt="The Better Life" width="100" height="100" />
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t Away from the Sun
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t 2002
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
\t \t \t \t \t \t \t </td> \t \t \t \t \t \t
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t Seventeen Days
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2005
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Cover
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t 3 Doors Down
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2008
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t <image />
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t Time of My Life
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2011
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Cover
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr> \t \t \t \t \t
\t \t \t \t \t </table>
\t \t \t \t </div> \t \t \t
\t \t \t </div>
\t \t </section>
\t \t
\t \t <footer> \t \t \t
\t \t \t <div class="nav-content">
\t \t \t \t <ul class='navigation'>
\t \t \t \t \t <li><a href="../index.html">Home</a></li>
\t \t \t \t \t <li><a href="biography.html">Biography</a></li>
\t \t \t \t \t <li><a href="discography.html">Discography</a></li>
\t \t \t \t \t <li><a href="video.html">Video</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </footer>
\t </body>
</html>
검사를 위해 이미지에 URL을, 그들은 정확하지 않을 수 – jondinham
그건'
'이 아닌'![]()
'... navTitle.png 이미지가 하나의 I가에 문제가 있어요되지 –
jlahd