...

View Full Version : Div positioning woes



Daakuryu
07-16-2008, 04:11 AM
I'm having a bit of difficulty getting my positioning css to behave the way I want it to, I'm pretty sure it's something silly but I'm having dificulty figuring it out for some reason.

Basically my site is split into 5 parts.

A Banner part at the top; banner
2 sidebars left and right,
A center portion for content with a scrollbar; content
And a bottom Banner; Bottom

I placed filler text in all sections and tested at different resolutions, resized my browser in every direction, it was all good

The moment I placed an image in everything went to hell.

www.salonatouchofclass.com/main.shtml

If I switch resolution of resize the browser the image overlaps the content portion of the site.


This is the css that goes with my test site.




html {
overflow: hidden;
}

body
{
background-color: 006699;
color: #ffffff
}

ul.Menu
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

a.Menu
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid blue;
}

a.Menu:hover
{
background-color:#ff3300
}

li.Menu
{
display:inline
}


Div.Maindiv
{
position: absolute;
top:0px;
left:0px;
height:100%;
width:100%;
Z-index:0;
}

Div.Banner
{
position: absolute;
top:0px;
left:0px;
width:100%;
height:110px;
Z-index:1;
}

Div.Menu
{
position: absolute;
top:110px;
left:0px;
height:1.6em;
width: 100%;
background-color:purple;
Z-index:1;
}

Div.Leftbar
{
position: absolute;
top:140px;
left:0px;
height:100%;
width:15%;
Z-index:1;
}

Div.Rightbar
{
position: absolute;
top:140;
left:85%;
height:100%;
width:15%;
Z-index:1;
}

Div.Content
{
position: absolute;
top:140px;
left:15%;
height:60%;
width:70%;
overflow: auto;
Z-index:1;
}

Div.Bottom
{
position: absolute;
top:78%;
left:0px
height:100px;
width:100%;
Z-index:1;
}




If anyone can point me in the direction of what I'm doing wrong, I would appreciate it.

What I would like it to do is if the resolution or browser shrinks, the site will shrink along with it so everything always looks the same, as far as the top and bottom banner and the left and right sidebar goes.


Thanks

macwiz
07-16-2008, 04:41 AM
Can you post an image of what the page should look like?

Thanks.

bazz
07-16-2008, 04:42 AM
Hi,

welcome to CF.

I would strat with a few changes.

1. add a full doctype so that IE will show your site as you code it rather than how it guesses you want it to display.

2. remove the position:absolutes and see what differecne that makes. If you leave them out, the site will be better able to adjust to different resolutions.

3. In case you have yet to do it, validate your code. http://validator.w3.org

hth


top tips too:
design in FF and then tweak for IE.
use the add-on for FF called 'lorem ipsum generator'. saves a lot of typing when using filler text


bazz

Daakuryu
07-16-2008, 07:36 AM
Picture of the breakdown of the site:
http://www.salonatouchofclass.com/shell.jpg

Basicaly everything that isn't the big center square should remain the same no matter the resolution




Bazz:

Removing the absolute makes everything disappear

Didn't even realize my doctype was missing its url :eek:

Thanks for the validator links that helped me fix up the css after I put in the right doctype address


The only thing that seems to not follow the rules, is that logo. everything else seems to work fine



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum