#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    35
    Rep Power
    13

    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?
    Jeff
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    jmiller...

    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

    http://www.google.com/search?hl=en&i...8&q=css+layout

IMN logo majestic logo threadwatch logo seochat tools logo