Jump to content

Converting a table to DIVs


ThePsion5
 Share

Recommended Posts

Solved! See 3rd reply.Hi,I am trying to set up some CSS for a web page that will allow me to create several sections that display images and text, similar to using a table, which i'm trying to avoid. Instead of this:

(header/navigation html code)...<table><tr><td><img src="...">some text</td><td><img src="...">some text</td><td><img src="...">some text</td><td><img src="...">some text</td></tr></table>...(footer code)

I have something like this:

<div id="events">  <div class="event"><img src="...">text</div>  <div class="event"><img src="...">text</div>  <div class="event"><img src="...">text</div>  <div class="event"><img src="...">text</div></div>

Since this will allow the events to be dispayed in a different format if needed.However, I havn't been able to find a good way to allow the text to be displayed on a different line than the images without inserting a <br /> into it, which alters and could break different styles...any ideas?

Link to comment
Share on other sites

However, I havn't been able to find a good way to allow the text to be displayed on a different line than the images without inserting a <br /> into it, which alters and could break different styles...any ideas?

put this in the head
<style>img{display:block;}</style>

that will knock the text to the line below the image.

Link to comment
Share on other sites

Unfortunately, I would like the divs to be displayed sequentially like table cells in a single row...setting the display setting of the images to 'block' forces the divs after them onto the next row as well, which I want to try and avoid. :)

Sorry, i misread your table code :ph34r: I think this might be what you want:
<head><style>img{display:block;}div div{border:1px solid black;width:15%; float:left;</style></head><div id="events"><div class="event"><img src="...">text</div><div class="event"><img src="...">text</div><div class="event"><img src="...">text</div><div class="event"><img src="...">text</div></div>

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...