Web Analytics Made Easy -
StatCounter Trying the CSS approach to positioning--couple questions... - CodingForum

Announcement

Collapse
No announcement yet.

Trying the CSS approach to positioning--couple questions...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trying the CSS approach to positioning--couple questions...

    Ok,

    I think I'm starting to understand the benefits of CSS for positioning. However, there are a couple things I'm having trouble grasping.

    1 - How can I force one DIV to be "footer"?
    2 - I made one DIV 145px wide. How can I make the one next to it take up the rest of the space? Meaning in the top DIV, I set the width to 100%. The width of the DIV in question should be 100% - 145px - 10px(for padding).

    I posted what I have so far. The colors are pretty strange right now. They're just for testing purposes. The DIV that I want to change in item 2 is the YELLOW one. The DIV that I want to force to the bottom is the RED one.

    TIA


    Here's the code from the two files:

    body {
    background-color:Blue;
    }
    #top{
    position:absolute;
    justification:center;
    width:100%;
    Height:20;
    background-color:lightblue;
    valign:center;
    padding-left:10;
    }
    #left{
    position:absolute;
    width:140px;
    top:75px;
    height:85%;
    background-color:green;
    }
    #right{
    position:absolute;
    top:75px;
    left:155px;
    background-color:yellow;
    }
    #bottom{
    position:relative;
    height:15px;
    background-color:red;
    }

    <html>
    <LINK REL="stylesheet" type="text/css" href="newstyle.css">
    <body>
    <div id="top">
    <h1>New Horizon Properties & Investments, L.L.C.</h1>
    </div>
    <div id="left">
    This is the "Left" div.
    </div>
    <div id="right">
    This is the "Right" div.
    </div>
    <div id="bottom">
    <center>Copyright New Horizon Properties & Investments, L.L.C.</center>
    </div>
    </body>
    </html>

  • #2
    layers (DIV) will automatically expand to the full width.

    I dont have time to go into a detailed explanation but you may want to have a look at the "float" property as it will be your main way of positioning.

    some sites to look at that use CSS:

    http://www.ithium.net
    http://www.mindlesslemming.au.ms
    <plug type="shameless">
    http://www.freeipb.net/ibe
    </plug>

    If you look over how each site has been made and have a go you will learn alot.
    PHP Weekly - A PHP Developers Resource
    PHP 5.1.4 and Ruby on Rails web hosting
    Moderator of PHP and Work offers and Requests
    Install Apache/PHP/MySQL
    (by marek_mar) | TinyPlugin Architecture

    Comment


    • #3
      Originally posted by missing-score

      http://www.mindlesslemming.au.ms
      <plug type="shameless">
      LOL
      Thanks for that, none of my work has been used as an example to others before...
      Although, that site was made when I had only known about CSS for three months.
      My current project's use is far more advanced.
      Navigate Australia

      *Seeing as you're using absolute positioning, just give
      #bottom{position:absolute;bottom:10px;}.

      This isn't the best fix, but I feel the next step might be a little much for you at this point. (no offense )

      You should know that position:absolute takes elements out of the natural flow of the page, which often causes problems if you want an inline element to fall beneath the absolutely positioned div.

      Andrew
      Last edited by mindlessLemming; Feb 21, 2004, 10:48 PM.

      I take no responsibility for the above nonsense.


      Left Justified

      Comment


      • #4
        thats the one! I couldnt remember the address so I just found your profile and took the link, didnt think to check if it was the right one.

        Having said that, your mindlessLemming site is still very cool
        PHP Weekly - A PHP Developers Resource
        PHP 5.1.4 and Ruby on Rails web hosting
        Moderator of PHP and Work offers and Requests
        Install Apache/PHP/MySQL
        (by marek_mar) | TinyPlugin Architecture

        Comment


        • #5
          Originally posted by mindlessLemming
          *Seeing as you're using absolute positioning, just give
          #bottom{position:absolute;bottom:10px;}.

          This isn't the best fix, but I feel the next step might be a little much for you at this point. (no offense )

          You should know that position:absolute takes elements out of the natural flow of the page, which often causes problems if you want an inline element to fall beneath the absolutely positioned div.
          I was trying to avoid using absolute for that very reason--but I couldn't find a better way to accomplish it.

          The goal is to have a header, two colums (the left is my link menu and needs to be around 120-135 px wide & the right should be the width of the window - the width of the left column - some padding between the columns) and one footer.

          Comment


          • #6
            3 Columns, header, footer always at bottom unless content extends.
            Here you go


            (ignore the gross colours!)

            I take no responsibility for the above nonsense.


            Left Justified

            Comment

            Working...
            X