I am trying to get the AOL pictures inside the featured offers section to be aligned vertically. I want then in the center of their own boxes, but instead they are staying near the top of there own boxes. I can not figure out how to get them in the middle. Also on IE the alignment of the paragraphs right next to them is messed up and i want to fix that.
<!-- m --><a class="postlink" href="http://www.draglok.lunarpages.com/offers.phpyou">http://www.draglok.lunarpages.com/offers.phpyou</a><!-- m --> could try having the aol images outside the UL and make a new style to it with a float:leftSince your 'featured offers' are sort-of tabular data, you could probably justify using a table for it.
Short answer: CSS can't really do vertical centering. There's strange +50% -50% mechanisms out there, but none of them are really reliable for a dynamic page.
*puts on flamesuit*Without knowing the height of the container, you only option is a table.ok so everyone agrees that i should put this in a table?An alternative is using a background image, but that would mean no animated image and faking the image link.Well im going to be getting all this stuff from a database so it might be hard to do like that.Originally posted by BlackDragon1012
ok so everyone agrees that i should put this in a table?
I'd go with a table. No point making your life difficult just for the sake of it.
One other thing you might be able to do, since the height of the content-to-be-centered (the image) is known:
<div class="blurbbox">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"x" style="top: -###px" />
<div>
Lorem Ipsum...
</div>
</div>
.blurbbox img { float: left; margin-top: 50%; position: relative; }
.blurbbox div { padding-left: 140px; }
Where '###' is half of the height of the image in question, dynamically generated by your server side scripts. Just cache in the table what the height and width of the images are, or use GD to find it out.
Not the most elegant, but I think it should work, or work with some testing.
<!-- m --><a class="postlink" href="http://www.draglok.lunarpages.com/offers.phpyou">http://www.draglok.lunarpages.com/offers.phpyou</a><!-- m --> could try having the aol images outside the UL and make a new style to it with a float:leftSince your 'featured offers' are sort-of tabular data, you could probably justify using a table for it.
Short answer: CSS can't really do vertical centering. There's strange +50% -50% mechanisms out there, but none of them are really reliable for a dynamic page.
*puts on flamesuit*Without knowing the height of the container, you only option is a table.ok so everyone agrees that i should put this in a table?An alternative is using a background image, but that would mean no animated image and faking the image link.Well im going to be getting all this stuff from a database so it might be hard to do like that.Originally posted by BlackDragon1012
ok so everyone agrees that i should put this in a table?
I'd go with a table. No point making your life difficult just for the sake of it.
One other thing you might be able to do, since the height of the content-to-be-centered (the image) is known:
<div class="blurbbox">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"x" style="top: -###px" />
<div>
Lorem Ipsum...
</div>
</div>
.blurbbox img { float: left; margin-top: 50%; position: relative; }
.blurbbox div { padding-left: 140px; }
Where '###' is half of the height of the image in question, dynamically generated by your server side scripts. Just cache in the table what the height and width of the images are, or use GD to find it out.
Not the most elegant, but I think it should work, or work with some testing.