...

View Full Version : Trying the CSS approach to positioning--couple questions...



doni
02-22-2004, 02:55 AM
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>

missing-score
02-22-2004, 03:29 AM
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.

mindlessLemming
02-22-2004, 03:39 AM
Originally posted by missing-score

http://www.mindlesslemming.au.ms
<plug type="shameless">


LOL :D
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 (http://studentwork.qantm.com.au/akrespanis/NavAust/index.htm)

*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

missing-score
02-22-2004, 03:42 AM
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. :p

Having said that, your mindlessLemming site is still very cool :)

doni
02-22-2004, 04:47 AM
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.

mindlessLemming
02-22-2004, 08:54 AM
3 Columns, header, footer always at bottom unless content extends.
Here you go (http://www.pmob.co.uk/temp/3colfixedtest_explained.htm)
:D

(ignore the gross colours!)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum