I'm trying to learn CSS here by re-doing this page without tables: http://www.sticksite.com/cottage/ Am having trouble lining up text with pictures. I want it all lined up just like on the original page but I'm getting this mess: http://www.sticksite.com/cottage/index-NEWWWWWW.htm It is sort of like what I need is an imaginary line after each pic and its accompanying text, after which the next image with its text will follow. I'm using a huge lot of BR statements but if somebody looks at it with a different font size than what I use, it will be messed up anyway, so that's no good. Am trying to use the "floatLeft" and "floatRight" classes with little success. Will some genius please put me back on the straight and narrow? Thanks!
sometimes its still ok to use tables in your site design - in this case i dont necessarily think its that bad of an idea to keep the tables in. but if you really want css.....then it can obviously be done but you are going to have to use div's as well search two column layout or something similar in google and you should find some good tutorials there..... basically if it was me, i would have one overall div thats basically 100% by 100% and then two divs (left and right column) inside that are using float left and right classes that have a fixed width...that way it wont spread across the screen like it is now. then it will just be a matter of copying all the content into each of the divs.
Yah, you will want to create a Div structure (a wrapper) for each grouping so you would do to emulate your Table Structure Add the CSS: div.col { float:left; width:49%; } Add the xHTML: <div class="row"> <div class="col">Here is my left column Data</div> <div class="col">Here is my right column Data</div> </div> <div class="row"> <div class="col">Here is my left column Data</div> <div class="col">Here is my right column Data</div> </div> Code (markup):
Thank you both. It looked like changing my "P" tags to: <p class="clear"> HTML: would do it but while it seems to work 100% in another sample page I played with, it does not work here.
did you look at the page he had originally - it was a 2 column layout with the content being a step guide to cabin maintenance on the left and a supporting image on the right. IMO that kind of content would justify the use of a simple 2 column table!
Actually, not. Tabular data, tables if you will, derive their meanings from their positions in the record. Eg., if you decide to put a phone number in the address slot, the data validity is destroyed. In this case, the pics could be to either side without affecting the information. So it is, in no way, a table. cheers, gary
@StickMaker: I made a short version of your page. I included variations so that you could see how to handle different aspects. See my Enclosing Float Elements demo, and note how it was applied here. As you move your content into a well structured document, validate the html and css often. Fix errors immediately. Don't let them pile up, or debugging will be a cast iron b!tch. Take a look at your background image. At window sizes larger than 1024×768px, the page breaks. Blend the edges to a solid color, and use that color as your base background color. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } body { font: 100% verdana, helvetica, sans-serif; line-height: 1.4; color: #333; background: #fefefe url(http://www.sticksite.com/cottage/cabinback.jpg) center fixed no-repeat; } p { font-size: 1em; margin-bottom: 0; } p.enclosing { overflow: hidden; width: 100%; /*required for IE6*/ } h1, h2, h3 { font-family: georgia, serif; } img { margin: 0 20px; border: 5px solid #008000; } a img, h1 img { border: none; } ul { list-style: none; padding: 0; margin: 0; } li { margin-top: 2.8em; overflow: hidden; width: 100%; /*required by IE6*/ } li p:first-child:first-line { font-weight: bold; } #wrapper { width: 90%; margin: 0 auto; } .side-a { float: left; } .side-b { float: right; } /*allows you to flip-flop sides without confusion*/ /*]]>*/ </style> </head> <body> <div id="wrapper"> <h1> <img src="http://www.sticksite.com/cottage/tipshead.jpg" class="no-border" alt="Tips, Ideas and Suggestions" /> </h1> <h2> For Cottage / Cabin Owners </h2> <p> This list will, hopefully, be changing constantly as YOU offer your suggestions. If YOU have suggestions, I'd love to hear from you. Thanks - ken </p> <p> These are not grouped under headings nor in any particular sequence, as many of them would have to be listed under several headings. </p> <ul> <li> <p> <img src= "http://www.sticksite.com/cottage/bluebirds.jpg" class="side-a" width="300" height="225" alt="blue birds at the feeder" title="bluebirds" /><img src= "http://www.sticksite.com/cottage/birdfeeder.jpg" class="side-b" width="225" height="559" alt="bird feeder" title="birdfeeder" />Set up a bird feeder. To make the feeder more "user friendly" add a branch from a tree. Tape a piece of pipe to the bird-feeder pole and set a can of water under it. This way when the branch dies you can replace it with a fresh one. Here is mine. (see below for an <a href= "#improved-birdfeeder" rel="no-follow">improved version</a>) <!-- Notice the named ref, rather than depending on that item being #71. Doing it this way lets you insert or move things without breaking cross-references --> </p> <p> The birds are sometimes uncomfortable with a feeder and a branch helps overcome any fears. Plus, often, one will feed while another keeps watch, sitting in the branch. Here it is being enjoyed: </p> <p> I put the feeder "just the right" distance from the window so as to give them as little reason for discomfort and to give me the maximum opportunity to take their pictures." </p> </li> <li> <p> <img src="http://www.sticksite.com/cottage/shower.jpg" class="side-a" width="350" height="371" alt="solar heated shower" title="portable shower" />If you do not have a hot shower, rig one up as we did at very low cost. You can get the bag in many stores which sell camping gear and we made a rig so that when it is not too hot out, we can put this thing into an insulated box with a glass top. It got so hot that the seam at the top of the bag gave out. We put a strong handle on it as you can see here. At night we lay the bag with its plywood support, on a shelf at a slope. We stand in a rubber tub intended as a cattle watering trough, and we hung plastic from a mattress around it. Works GREAT and the cost was near zero. The only downside: it is tough in such a small tub, to shower with a friend. </p> </li> <li id="improved-birdfeeder"> <p> <img src= "http://www.sticksite.com/cottage/birdfeed.jpg" class="side-b" width="250" height="606" alt="improved bird feeder" title="birdfeeder" />Our "New - Improved" bird-feeder pole, made from, of course, Diamond Willow! </p> <p> The base is made of 2 short pieces of 2x8 and is held down with short pieces of metal pipe loosely inserted through holes in that lumber. The idea here is to have it so that if a bear attacks it, the damage might be minimal. </p> <p> Now, I guess it is only "right" that I design a nicer, wood bird-feeder to replace this tacky plastic one. </p> </li> <li> <p class="enclosing"> <img src="http://www.sticksite.com/cottage/log.jpg" class="side-b" width="350" height="262" alt="log fence" title="divider" />If your driveway looks a bit "lame" you might be able to dress it up with a few spruce trees planted along it. We did that on one side and laid two logs (on blocks) along the other side, well painted with wood preserver to keep out those miserable ants. </p> <p class="enclosing"> <img src= "http://www.sticksite.com/cottage/witerock.jpg" class="side-a" width="350" height="262" alt="white rocks" title="white boulders" /> A couple of big white rocks at the end help too. I poured small concrete blocks to set the rocks on. </p> <p class="enclosing"> <img src="http://www.sticksite.com/cottage/antler.jpg" class="side-b" width="350" height="262" alt="moose antlers" title="antler sign" />So does a moose antler with your name on it. </p> </li> </ul> </div><!-- end wrapper --> </body> </html> Code (markup): cheers, gary
Thats why i said that its MY opinion. I know technically what you are saying is correct - my 3 and half year uni multimedia degree did teach me some things and i know personally i would have been using div's (like i said in my original post).... all i was also saying is that its not the worst thing in the world to have used tables as well........ im sure we have both seen much WORSE examples of tables being used when they shouldnt have. but alas, looking over your code now, you definately helped him out heaps and it looks good...so alls well that ends well