January 7th, 2003, 12:07 PM
aligning text and images with css
I'm trying to convert a site to css and eliminate all tables and am having trouble lining up images with text. For instance, I want some text to be centered vertically and horizontally and have a grey background and have it line up next to and be the same height as a rounded gif of the same color. This is easy to do with tables but is giving me grief in css. Here is a link to my page: http://www.co.jefferson.wa.us/idms/d...html10_ssi.asp
The trouble is in the "Central Services" block at top left and the page footer.
The style sheet is: http://www.co.jefferson.wa.us/idms/devtest/layout1.css
It looks close to how I want it in Netscape 7.0 but seems to be unnecessarily complicated and looks horrible in IE. How can I line up text with an image and give the text a background color of the same height as the image?
January 7th, 2003, 06:48 PM
Do yourself a favor & start from scratch. Everything on the page should be organized within blocks of layout - no 'free-floating' groups of images, for example. <div> header, two <div> blocks for menu/content, with float:left specified for side-by-side placement, <div> footer, etc. Your best bet is to spend an hour or so playing around with template-based layouts until you get the hang of it; then set up your page and add content, dialing in CSS as needed to arrange things. hth