converting a table layout to CSS

Discussion in 'HTML' started by DavidB, Nov 19, 2004.

  1. DavidB

    DavidB Guest

    I have been lurking in the shadows for a while, and am now in need of
    assistance.

    I have been creating pages for an in-house project using tables for the
    layout. You can see an example at
    http://www.drburrows.com/deskmanual/desk_manual_index.html

    I have been taking an online class that has included sections on using
    CSS for controlling page layout, and so have tried my hand at converting
    the above referenced page to CSS. What I have gotten so far can be found
    at http://www.drburrows.com/deskmanual/testpage_with_styles.html

    Below is a copy of the stylesheet that I am using.

    The two things I have questions on are:

    1. In the menu box <div id="menu">, the links display at the top of the
    box, and I would like them more centered vertically. I have v-align set
    to middle, to no effect.

    2. Also in the menu box, I have the menu height set at 600px; I would
    prefer the height to scale with the content of the page, so that it ends
    at the footer box.

    TIA
    --
    David Burrows
    VIP Technical Support
    www.volcano.net
    (209) 296-7574
    888-9VOLCANO

    stylesheet:

    body {font-size: 10pt;
    font-family: Verdana, sans-serif;
    color: Black;
    background-color: #ffffcc;
    }
    h1 {font-size: 2.5em;
    font-family: serif;
    color: Black;
    text-align: center;
    }
    h2 {font-size: 1.8em;
    font-family: serif;
    color: Black;
    text-align: center;
    }
    h3 {font-size : 1.5em;}
    p {text-indent: 0.5in;}
    a:link {color: blue; text-decoration: none;}
    a:visited {color: red; text-decoration: none;}
    a:active {color: red; text-decoration: none;}
    a:hover {color: red; text-decoration: underline;}
    #banner {
    float : right;
    text-align : center;
    width : 90%;
    background-image : url(../images/bgcolor1.bmp);
    }
    #menu {
    float: left;
    height: 600px;
    width: 10%;
    vertical-align : middle;
    background-image : url(../images/bgcolor1.bmp);
    }
    #textcol{
    float: right;
    width:90%;
    background-color: #ffffcc;
    }
    #footer {
    text-align: center;
    background-image : url(../images/bgcolor1.bmp);
    }
     
    DavidB, Nov 19, 2004
    #1
    1. Advertising

  2. in alt.html, DavidB <"davidb<AT>volcano <DOT> wrote:
    > I have been lurking in the shadows for a while, and am now in need of
    > assistance.


    Surely...

    > at http://www.drburrows.com/deskmanual/testpage_with_styles.html
    >
    > The two things I have questions on are:
    >
    > 1. In the menu box <div id="menu">, the links display at the top of the
    > box, and I would like them more centered vertically. I have v-align set
    > to middle, to no effect.


    http://www.student.oulu.fi/~laurirai/www/css/middle/

    > 2. Also in the menu box, I have the menu height set at 600px; I would
    > prefer the height to scale with the content of the page, so that it ends
    > at the footer box.


    Use em unit to width of menu, that way your links dont overflow it.

    You could absolutely position the menu, and make the background
    differently:

    body, #content {background:ffc;}
    div {backgroud:#90f;margin-left:10em;}
    #menu {position:absolute;top:0;left:0;width:10em}

    <div><h1>H</h1><h2></h2><div id="content">content</div><div
    id="menu"></div><div id="footer">footer</div></div>

    Or if you might have longer menu, float, and use same way to colour it.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
     
    Lauri Raittila, Nov 19, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    735
    clintonG
    Dec 24, 2004
  2. shank
    Replies:
    5
    Views:
    474
    Wayfarer
    Sep 28, 2003
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,015
  4. Replies:
    1
    Views:
    588
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,019
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page