Jump to content

format without tables


Guest alforddm
 Share

Recommended Posts

Guest alforddm

I'm trying to implement layout without using tables but i'm having problems. I've scoured the web without having much success. The web site currently has this format <TABLE WIDTH="100%"> <TR> <TD><IMG SRC="cotton1.jpg" ALT="Cotton on Fire"></TD> <TD ALIGN="center"> <H3>Cotton On Fire</H3>2003 Cremello Filly <BR> Out of <A HREF="reference sires.php#dandy" TARGET="_blank">Legacies Dandy</A> and <A HREF="mares.php#fire" TARGET="_blank">Golden Fire Bar</A> <BR> <A HREF="http://dipperaranch.com/gallery/cotton">More Pictures</A> </TD> </TR></table> but with more rows. I've tried img.middle {verticle-align: middle} in my .css file but from what i can tell that only works on the first line for example i'd have to do something like <h3><img src="cotton1.jpg" class="middle" alt=""> Cotton on Fire</h3> but if i put a break and try to add more text it puts it back at the bottom of the img. Does anyone know how to do this or am i stuck with tables? Thanks, Daylene

Link to comment
Share on other sites

you should first creat <div> tags for each table data cell then using the-> position: (absolute/relative); top/bottom: #px/%; left/right: #px/&; <-- to place everything the way you want it. Your main problem is going to be centering the <div> tags. You will ok using properties -> align="left/center/right" <- you will want your image in one <div> tag and everything else in another <div> tag. Now it looks like you will want to use the float properties using css to make your image on the left and your content on the right.try something like this:---------------------------html-----<div id="left"> <img src='name.gif' ...........</div><div id="right"> text images more text or whatever</div>------------------------css---#left { }#right { float:left; // This will make your second div tag flush up to your first div tag.}---------------keep on reading your CSS bible and try google sometimes, but W3schools usually will have an answer for you somewhere in their tutorials. hope that gets you started.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...