afcbob Posted November 5, 2006 Share Posted November 5, 2006 Here is the link here.I want the images to sit under each other the the text at the side of each image, but it wont go.I tried a few things but can't get it.Thanks Link to comment Share on other sites More sharing options...
Skullmonkey Posted November 5, 2006 Share Posted November 5, 2006 add another <br /> <div class="tab"><a class="tab" href="tanks/walltank.htm"><img src="images/walltank_tab.jpg" align="left" width="80" hieght="80" alt="Marine fish link" /></a>This is a 6x2x2ft thank with a 4x1x1ft sump, this tank is my latest tank.</div><br /><br /><div class="tab"><a class="tab" href="tanks/juwel.htm"><img src="images/juweltab.jpg" align="left" width="80" height="80" alt="Juwel fish tank link" /></a>This is my old tank a Juwel Trigon 190, It was a great tank for my to start with but just was to small for what i wanted.</div> Link to comment Share on other sites More sharing options...
jlhaslip Posted November 7, 2006 Share Posted November 7, 2006 Something like this?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>Image and (3 div) Text Layout</title> <style type="text/css">body{ background: #e0ffe0; margin: 0; padding: 0;}#header { margin-left:auto; margin-right:auto; text-align:center; border: 1px dotted #999;}#wrapper { border: 1px dotted #999;}#content { text-align: justify; border: 1px dotted #999; border-bottom:0px; border-top:0px;}#footer { margin-left:auto; margin-right:auto; text-align:center; clear:both; border: 1px dotted #999;}h1 { font-size: 2em;}.content_main { margin: 1em; border: 1px dotted red;}.image { margin: 0; padding: 1em; float:left;}.words { margin-left: 20%; padding: .25em; border: 1px dotted blue;}.sub_head { font-weight: bold;}.class_red { color: red;}.class_blue { color: blue;}.class_green { color: green;}</style></head><body><div id="wrapper"><div id="header"><h1>Layout for Pix and Text Blocks</h1></div> <div id="content"> <div class="content_main"> <div class="image"> <img src="test.gif" alt="alt" title="title" width="120px" /><br /> </div> <div id="test_wrap"> <div class="words"> <span class="sub_head class_red">Red Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> <div class="words"> <span class="sub_head class_blue">Blue Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> <div class="words"> <span class="sub_head class_green">Green Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> </div> </div> <!-- end class content_main - this occurence --> <div class="content_main"> <div class="image"> <img src="test.gif" alt="alt" title="title" width="120px" /><br /> </div> <div class="words"> <span class="sub_head class_red">Red Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> <div class="words"> <span class="sub_head class_blue">Blue Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> <div class="words"> <span class="sub_head class_green">Green Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> </div> <!-- end class content_main - this occurence --> <div class="content_main"> <div class="image"> <img src="test.gif" alt="alt" title="title" width="120px" /><br /> </div> <div class="words"> <span class="sub_head class_red">Red Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> <div class="words"> <span class="sub_head class_blue">Blue Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> <div class="words"> <span class="sub_head class_green">Green Sub Heading</span> Content He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent He re Cont ent </div> </div> <!-- end class content_main - this occurence --> </div><!-- end id=content div --> </div> <!-- end wrapper div here --> <div id="footer">Footer here</div></body></html> Link to comment Share on other sites More sharing options...
Skullmonkey Posted November 7, 2006 Share Posted November 7, 2006 No, He has it fixed. Link to comment Share on other sites More sharing options...
jlhaslip Posted November 7, 2006 Share Posted November 7, 2006 Adding <br /> tags isn't necessarily the right fix, although it seemed to work in this instance. Might as well go back to using tables and spacer gifs. Link to comment Share on other sites More sharing options...
Skullmonkey Posted November 7, 2006 Share Posted November 7, 2006 Meh...Its always worked for me... I did test it before posting it. Link to comment Share on other sites More sharing options...
Naive Amoeba Posted November 7, 2006 Share Posted November 7, 2006 Tables and spacer gifs? Hmmm... how about, you don't?I've noticed some problems. First, it's not valid XHTML. In your image tags, you've put align, width and height, along with emitting the title property.Plus, on the wall tank one, you've written hieght not height.I didn't see the page before you added that extra BR, but i've noticed that you've labeled both your div and anchor tags with the class "tab". Two elements inside each other don't need the same tag. Plus, you've set "tab" to being display:inline. That may explain why it's messing up.You've used width="" and height="" a lot in that page, when really you should use css to do all the sizing. Including with the images.Hope this helps! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now