html - Images Not Displaying In Table -
i working on assignment , need place images in table, isn't problem me. today when added images table displays square border alt text written in it. pretty sure pointing right directory.
my folder structure is:
website css fonts html (page table in here) js images (images table in here) 
@font-face{ font-family:customfont; src: url('../fonts/balkeno.ttf'); } * { margin: 0; border: 0; padding: 0; font-size: 12px; font-family: arial, sans-serif; } body { width: 100%; height: 300%; background-color: #d8d8d8; } nav { font-family: customfont; font-size: 30px; width: 100%; height: 40px; position: fixed; z-index: 50; } .nav-background { width: 100%; height: 100%; background: #12a7cb; opacity: 0; position: absolute; } .nav-content { position: relative; top: 50%; transform: translatey(-50%); } header { width: 100%; height: 320px; } #slideshow { position:relative; height:320px; width: 100%; } #slideshow img { position:absolute; top:0; left:0; z-index:8; width: 100%; height: 320px; box-shadow: 0px 5px 10px #5e5e5e; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } #logo { float: left; padding-left: 100px; padding-right: 200px; } #nav { 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; width:100%; height:50px; box-shadow: 0px 1px 10px #5e5e5e; position:fixed; top:0px; } .title { display:none; color:#ededed; font-size:25px; width:350px; margin-top:6px; margin-left:150px; font-weight:bold; float:left; } .navigation li{ list-style-image: url('navicon.png'); float: left; padding-right:45px; margin-bottom: 25px; color: black; } li { } .navigation { font-size: 19px; font-family: customfont; text-decoration:none; color: #01ebfe; } .navigation a:hover { } .wrapper { width: 900px; height: 1000%; margin-top: 25px; margin-left: auto; margin-right: auto; padding: 20px; background-color: white; padding-top: 100px; box-shadow: 10px 10px 5px #888888; } p{ font-size: 14px; padding-bottom: 32px; } p:first-letter { font-size: 32px; color: #71cae0; } h1 { font-family: customfont; font-size: 32px; font-weight: bolder; color: #12a7cb; text-align: center; } h2 { font-family: customfont; font-size: 22px; font-weight: bold; color: #12a7cb; text-align: left; text-decoration: underline; } section { width: 100%; height: 100%; background-color: #d8d8d8; } img.logo { text-align: center; margin: auto; display: block; } img.slideshow { width: 100%; height: 480px; } footer { width: 900px; margin: 25px auto 0 auto; padding-top: 20px; padding-left: 20px; padding-right: 20px; background-color: white; text-align: center; box-shadow: 10px 10px 5px #888888; } .members { padding: 10px; display: inline-block; background-color: #e4f4f8; margin-top: 15px; margin-left: 15px; border: 1px solid #12a7cb; float: right; } ol.test { list-style-type: lower-alpha; } .members ol { list-style-type: lower-alpha; } .members li { display: list-item; color: #6c6c6c; list-style-type: lower-alpha; padding: 5px; margin-bottom: 5px; margin-left: 10px; } /* table stuff */ table, tr, th, td { border: 1px solid black; border-collapse: collapse; } th { padding: 5px; color: #12a7cb; background-color: #e4f4f8; } td { background-color: #f2eded; width: 150px; height: 150px; } /* end table stuff */ .video-wrapper { width: 100%; text-align: center; } .video-wrapper { color: blue; text-decoration: none; font-size: 12px; font-family: arial, sans-serif; } .social img { padding-top: 32px; padding-right: 8px; width: 48px; height: 48px; border: none; }<!doctype html> <html> <!-- author: ##### date: 11/08/2014 --> <head> <meta charset="utf-8" /> <title>home - 3 doors down</title> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <link href='http://fonts.googleapis.com/css?family=ubuntu' rel='stylesheet' type='text/css'> <script src="../js/jquery.js"></script> <script type="text/javascript" src="../js/scroll.js"></script> <script type="text/javascript" src="../js/header.js"></script> </head> <body> <nav class="nav"> <div class="nav-background"> </div> <div class="nav-content"> <img src="../images/navtitle.png" alt="three doors down" id="logo" width=250 /> <ul class='navigation'> <li><a href="../index.html">home</a></li> <li><a href="biography.html">biography</a></li> <li><a href="discography.html">discography</a></li> <li><a href="video.html">video</a></li> </ul> </div> </nav> <header class="header"> <div id="slideshow"> <img src="../images/header1.jpg" alt="three doors down" class="active" /> <img src="../images/header2.jpg" alt="three doors down" /> <img src="../images/header3.jpg" alt="three doors down" /> </div> </header> <section> <div class="wrapper"> <h1>discography</h1> <div class="disco" > <table > <tr> <th> album </th> <th> year </th> <th> record label </th> <th> cd cover </th> </tr> <tr> <td > the better life </td> <td> 2000 </td> <td> universal republic </td> <td> <img href="../images/thebetterlifecover.jpg" alt="the better life" width="100" height="100" /> </td> </tr> <tr> <td > away sun </td> <td> 2002 </td> <td> universal republic </td> <td> <image href="../images/awayfromthesuncover.jpg" alt="test" width="100" height="100" /> </td> </tr> <tr> <td > seventeen days </td> <td> 2005 </td> <td> universal republic </td> <td> cover </td> </tr> <tr> <td > 3 doors down </td> <td> 2008 </td> <td> universal republic </td> <td> <image /> </td> </tr> <tr> <td > time of life </td> <td> 2011 </td> <td> universal republic </td> <td> cover </td> </tr> </table> </div> </div> </section> <footer> <div class="nav-content"> <ul class='navigation'> <li><a href="../index.html">home</a></li> <li><a href="biography.html">biography</a></li> <li><a href="discography.html">discography</a></li> <li><a href="video.html">video</a></li> </ul> </div> </footer> </body> </html>
changed href="../images/imagename.png" src="../images/imagename.png"
Comments
Post a Comment