Sidbar positioning using CSS

Discussion in 'HTML' started by Don G, Feb 11, 2005.

  1. Don G

    Don G Guest

    I am working on a website that has a menu sidebar. I have the menu
    worked out just fine, but I would like to put a few more elements in the
    the sidebar. The catch is, that I would like these elements to be
    placed at the very bottom of the sidebar area. The content area changes
    size depending on what I put in it, but I don't want to use absolute
    positioning for this; I would rather have it done dynamically.

    If any one has any suggestions, I would appreciate it.

    Thank you,

    Don

    Here is some sample code:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style>
    /* At-Rules */

    body {
    background-color: gray;
    font-size: 15px;
    font-family: cursive;
    }

    #menu {
    float: left;
    width: 90px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }

    #menu ul {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
    }

    #menu a {
    display: block;
    color: white;
    background-color: #0066cc;
    width: 93px;
    padding: 3px 12px 3px 8px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    font-size: 12px;
    }

    *html #menu a {
    width: 110px;
    padding: 3px 12px 3px 8px;
    }

    #menu a:hover {
    background-color: #82A3CC;
    color: white;}

    #menu a:active {
    background-color: #3033cc;
    color: white;}

    #container {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    background-color: #0066cc;
    color: white;
    line-height: 130%;
    width: 598px;
    }

    #top {
    padding: .25em .25em .25em .25em;
    background-color: #0066cc;
    text-align: center;
    border: 1px solid blue;
    }

    #top h1 {
    font-size: 2em;
    font-weight: bolder;
    padding: 0 0 0 0;
    }

    #contentwindow {
    background-color: #dadada;
    margin-left: 113px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0;
    width: 484px;
    height: 500px;
    }

    *html #contentwindow {
    margin-left: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    /* End of style section. Generated by AceHTML at 2/8/2005 9:10:14 AM */

    </style>

    </head>
    <body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test Page</title>
    </head>
    <body>
    <div id="container">
    <div id="top"><h1>Test Page</h1></div>
    <div id="menu">
    <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">This link should be at the bottom.</a></li>
    </ul>
    </div>
    <div id="contentwindow"></div>
    </div>
    </body>
    </html>
     
    Don G, Feb 11, 2005
    #1
    1. Advertising

  2. Don G

    Karl Core Guest

    "Don G" <> wrote in message
    news:420d1575$...
    >I am working on a website that has a menu sidebar. I have the menu worked
    >out just fine, but I would like to put a few more elements in the the
    >sidebar. The catch is, that I would like these elements to be placed at
    >the very bottom of the sidebar area. The content area changes size
    >depending on what I put in it, but I don't want to use absolute positioning
    >for this; I would rather have it done dynamically.
    >
    > If any one has any suggestions, I would appreciate it.
    >


    If the code you've listed here is supposed to be a complete page, I
    recommend that you look at it a tad bit closer before asking for help -
    particularly in the fact that you've re-started the whole document after the
    close of your CSS


    --
    Karl Core
    Hell To Pay, Baltimore Hardcore: http://www.eightninethree.com
     
    Karl Core, Feb 11, 2005
    #2
    1. Advertising

  3. Don G

    Don G Guest

    Re: Sidebar positioning using CSS

    > If the code you've listed here is supposed to be a complete page, I
    > recommend that you look at it a tad bit closer before asking for help -
    > particularly in the fact that you've re-started the whole document after the
    > close of your CSS


    Doh! I was cutting and pasting a couple of files together to make it
    all in one file, and I guess I got a little something extra. I hope
    this is better:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style>
    body {
    background-color: gray;
    font-size: 15px;
    font-family: cursive;
    }

    #menu {
    float: left;
    width: 90px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }

    #menu ul {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
    }

    #menu a {
    display: block;
    color: white;
    background-color: #0066cc;
    width: 93px;
    padding: 3px 12px 3px 8px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    font-size: 12px;
    }

    *html #menu a {
    width: 110px;
    padding: 3px 12px 3px 8px;
    }

    #menu a:hover {
    background-color: #82A3CC;
    color: white;}

    #menu a:active {
    background-color: #3033cc;
    color: white;}

    #container {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    background-color: #0066cc;
    color: white;
    line-height: 130%;
    width: 598px;
    height: 1000px;
    }

    #top {
    padding: .25em .25em .25em .25em;
    background-color: #0066cc;
    text-align: center;
    border: 1px solid blue;
    }

    #top h1 {
    font-size: 2em;
    font-weight: bolder;
    padding: 0 0 0 0;
    }

    #contentwindow {
    background-color: #dadada;
    margin-left: 113px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0;
    width: 484px;
    height: 100%;
    }

    *html #contentwindow {
    margin-left: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="top">
    <h1>Test Page</h1>
    </div>
    <div id="menu">
    <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    </ul>
    <ul style="vertical-align: bottom;"><li><a href="">This link should be
    at the bottom.</a></li><ul>
    </div>
    <div id="contentwindow">
    </div>
    </div>
    </body>
    </html>
     
    Don G, Feb 11, 2005
    #3
  4. Don G

    Don G Guest

    > If the code you've listed here is supposed to be a complete page, I
    > recommend that you look at it a tad bit closer before asking for help -
    > particularly in the fact that you've re-started the whole document after the
    > close of your CSS


    Doh! Thank you for the correction. I was cutting and pasting files
    together, and I guess I got a little something extra. I have corrected
    the problem that you mentioned, and I validated the code to make sure
    that it is correct.

    Thanks again,

    Don

    Here is the corrected code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    body {
    background-color: gray;
    font-size: 15px;
    font-family: cursive;
    }

    #menu {
    float: left;
    width: 90px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }

    #menu ul {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
    }

    #menu a {
    display: block;
    color: white;
    background-color: #0066cc;
    width: 93px;
    padding: 3px 12px 3px 8px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    font-size: 12px;
    }

    *html #menu a {
    width: 110px;
    padding: 3px 12px 3px 8px;
    }

    #menu a:hover {
    background-color: #82A3CC;
    color: white;}

    #menu a:active {
    background-color: #3033cc;
    color: white;}

    #container {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    background-color: #0066cc;
    color: white;
    line-height: 130%;
    width: 598px;
    height: 1000px;
    }

    #top {
    padding: .25em .25em .25em .25em;
    background-color: #0066cc;
    text-align: center;
    border: 1px solid blue;
    }

    #top h1 {
    font-size: 2em;
    font-weight: bolder;
    padding: 0 0 0 0;
    }

    #contentwindow {
    background-color: #dadada;
    margin-left: 113px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0;
    width: 484px;
    height: 910px;
    }

    *html #contentwindow {
    margin-left: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="top">
    <h1>Test Page</h1>
    </div>
    <div id="menu">
    <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    </ul>
    <ul><li><a href="">This link should be at the bottom.</a></li></ul>
    </div>
    <div id="contentwindow">
    </div>
    </div>
    </body>
    </html>
     
    Don G, Feb 11, 2005
    #4
  5. Don G

    Richard Guest

    On Fri, 11 Feb 2005 15:36:35 -0500 Karl Core wrote:


    > "Don G" <> wrote in message
    > news:420d1575$...
    >>I am working on a website that has a menu sidebar. I have the menu
    >>worked
    >>out just fine, but I would like to put a few more elements in the the
    >>sidebar. The catch is, that I would like these elements to be placed
    >>at
    >>the very bottom of the sidebar area. The content area changes size
    >>depending on what I put in it, but I don't want to use absolute
    >>positioning
    >>for this; I would rather have it done dynamically.


    >> If any one has any suggestions, I would appreciate it.



    > If the code you've listed here is supposed to be a complete page, I
    > recommend that you look at it a tad bit closer before asking for help -
    > particularly in the fact that you've re-started the whole document
    > after the
    > close of your CSS


    He was showing the CSS seperately from the actual page coding.
    Any fool can easily cut and paste it to where it should be.
    But you're no fool are you?
     
    Richard, Feb 12, 2005
    #5
  6. Don G

    rf Guest

    "Richard" <Anonymous@127.001> wrote
    > On Fri, 11 Feb 2005 15:36:35 -0500 Karl Core wrote:


    > > particularly in the fact that you've re-started the whole document
    > > after the
    > > close of your CSS

    >
    > He was showing the CSS seperately from the actual page coding.


    No, RtS, he was not.

    That is shown by the fact that he corrected himself and reposted the code,
    only an hour or so after Karls post.

    > Any fool can easily cut and paste it to where it should be.


    So, being any fool you would have done so? What is the op's solution then?
     
    rf, Feb 12, 2005
    #6
    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. Guest

    OT ...CSS positioning

    Guest, Apr 7, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    365
    Kevin Spencer
    Apr 7, 2004
  2. Eric

    Datalist and CSS positioning

    Eric, Sep 14, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    567
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 14, 2005
  3. PeterMcC

    Re: css positioning vs. tables

    PeterMcC, Jun 23, 2003, in forum: HTML
    Replies:
    0
    Views:
    851
    PeterMcC
    Jun 23, 2003
  4. Deryck
    Replies:
    3
    Views:
    631
    SpaceGirl
    Oct 8, 2004
  5. JB
    Replies:
    1
    Views:
    1,475
    bruce barker
    Mar 3, 2009
Loading...

Share This Page