Hi! I need some help correctly laying out some element on my website.
Currently I have everything functioning using different divs. I know that using a detailed list would actually be the correct way of doing this. I am just having a pain trying to figure out how to do it. Here is what i am trying to achieve :http://www.joshtilton.com/websites.jpg
This is currently the code i am using within a <div> wrapper :
<div id="level1">
<div id= "one"><img src="webcontentimages/swthumb.jpg" /><span class="style2">SERVICES:</span> Logo, site design, and Flash.
<p> <dt class="view-site"><a href="images/sw.jpg" rel="lightbox[sites]" title="Salisbury Woodworks website">image #1</a></dt></div>
<div id= "two">
<div class="twocnt"><img src="webcontentimages/hsthumb.jpg" /><span class="style2">SERVICES:</span> Logo,
photography, site
design,
<p> <img src="webcontentimages/viewbtn.jpg" /></div>
</div>
<div id= "three"><img src="webcontentimages/v2thumb.jpg" /><span class="style2">SERVICES:</span> Flash,
gallery, design
and html.
<p> <img src="webcontentimages/viewbtn.jpg" /></div>
and for the css:
div#one{
float:left;
width:137px;
height: 300px;
}
div#two{
float : left;
width:265px;
height: 300px;
}
div#three{
float : right;
width:137px;
height: 300px;
}
.view-site a {
display: block;
text-indent: -9999px;
width: 137px;
height: 20px;
border: 0;
background: url(webcontentimages/viewbtn.jpg) no-repeat; }
I’m still a newb at this and im doing what i can with what I know. I know that the above code works (only in firefox and safari, forget IE6 and 7) If anyone can help me out, please do so!
