Posts: 255
Name: John Nerush
Location: Milton Keynes, UK
|
Firstly, sort out your indentation and code presentation, it will make life alot better when you try to re-read your files and bug fix!
There are two errors with this code, can you spot them?
HTML Code:
<p>Here Is A Showcase of My Latest Work
<div class="portfoliogallery">
<a href="http://s9.photobucket.com/albums/a76/haydos/?action=view¤t=Picture1.png" target="_blank">
<img src="http://i9.photobucket.com/albums/a76/haydos/Picture1.png" border="0" alt="Nick Hayden">
</a>
</div>
<div class="desc">My Freelance Site</div>
<div class="portfoliogallery">
<a href="http://s9.photobucket.com/albums/a76/haydos/?action=view¤t=Picture1-1.png" target="_blank">
<img src="http://i9.photobucket.com/albums/a76/haydos/Picture1-1.png" border="0" alt="Fourth Chamber">
</a>
</div>
<div class="desc">My Personal Blog</div>
<div class="portfoliogallery">
<a href="http://s9.photobucket.com/albums/a76/haydos/?action=view¤t=1222909676DJztsT-1.jpg" target="_blank">
<img src="http://i9.photobucket.com/albums/a76/haydos/1222909676DJztsT-1.jpg" border="0" alt="Coming Soon">
</a>
<div class="desc">Coming soon</div>
Answer (select the white text below):
1. Line 1 is missing the closing P tag.
2. Second from last div is missing its closing tag.
These errors could be avoided by running your site through the W3C Validator.
Now, im sure there will be a few more of these types of errors however im at work and dont have the time to go through the whole file. But now you know to look for them!
The <div>'s you are using to create the thumbnails should really be a list, example:
HTML Code:
<p>Here Is A Showcase of My Latest Work</p>
<ul id="portfoliogallery">
<li><a href="link1"><img src="img1" alt="" /></a><span>Image 1 Description</span></li>
<li><a href="link2"><img src="img2" alt="" /></a><span>Image 2 Description</span></li>
<li><a href="link3"><img src="img3" alt="" /></a><span>Image 3 Description</span></li>
</ul>
Using CSS like:
Code:
#portfoliogallery,#portfoliogallery li {
list-style:none;
float:left;
}
#portfoliogallery {
width:600px; /* I am using example figures */
}
#portfoliogallery li {
width: 180px;
margin: 10px;
}
#portfoliogallery li a img {
border:none;
}
#portfoliogallery li span {
float:left;
width:170px;
padding:10px 5px;
}
Obviously this is just a rough idea to get you towards the right direction, please note this is done of the top of my head so I cant bug test your or my code (due to restrictions at my workplace).
I hope this has helped in some way.
Last edited by LadynRed; 05-18-2010 at 03:08 PM..
Reason: To finish constructing
|
