Jump to content
Guest alforddm

format without tables

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...