Will it slide beneath?

[marksk]

I've just rebuilt my site using CSS and it works fine. However, if a browser has a lot of toolbars at the top the page is vertically compressed and the menu at the top slips behind a large SWF at the base of each page. I'm guessing that it is possible to effectively dictate what sits uppermost on the page, so can anyone tell me how it's done? As you've probably guessed I ain't a developer!

The site is www.marksk.co.uk and if you move the base of the browser up you'll see what happens!

And here's my amateurish CSS...

Code: Select all

body {
margin: 10px 0px 0px 0px;
padding: 0px;
}
 
#topleft {
float: left;
left: 0px;
top: 10px;
width: 235px;
height: 109px; 
}
 
#topleftthin {
top: 0px;
height: 4px;
width: 224px;
background-color: #FFFFFF;
padding-left: 11px;
font-size: 0;
}
 
#topleftlogo {
height:44px;
width: 224px;
background-color: #FFFFFF;
padding-left: 11px;
}
 
#topleftprofile {
top: 0px;
height: 25px;
width: 224px;
background-color: #FFFFFF;
padding-left: 11px;
}
 
#topspacer {
top: 10px;
margin-left: 235px;
height: 109px;
border-bottom: 1px;
border-bottom-color: #CCCCCC;
border-bottom-style: solid; 
}
 
#topright {
position: absolute;
right: 0px;
top: 10px;
width: 720px;
height: 109px;
border-bottom: 1px;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
font-size: 0; 
}
 
#toprightthin {
top: 0px;
height: 4px;
background-color: #FFFFFF;
font-size: 0;
}
 
#toprightnav {
width: 720px;
height:25px;
background-color: #FFFFFF;
padding-left: 25px;
}
 
#toprightnavdesc1 {
height:15px;
background-color: #FFFFFF;
padding-left: 25px;
}
 
#toprightnavdesc2 {
height:28px;
background-color: #FFFFFF;
padding-left: 25px;
}
 
#bottom {
position: absolute;
width: 99%;
height: 486px;
bottom: 0px;
}
 
#bottomleft {
position: absolute;
float: left;
left: 0px;
bottom: 0px;
width: 235px;
height: 450px;
background-color: #FFFFFF;
}
 
#bottomspacer {
top: 104px;
margin-left: 235px;
height: 450px;
}
 
#bottomright {
position: absolute;
right: 0px;
bottom: 0px;
width: 723px;
height: 450px;
}

[Lchad]

The bottom div that contains the swf is set for absolute positioning. So no matter what size the window is, it will position itself where you told it to be.

[marksk]

So does Absolute set the 'layer order'? The swf always sits in the right position on the screen but I need the menu section to remain uppermost!

[Lchad]

I'm not sure... I place my div's in the html in the "order" I want them to appear. I rarely use absolute... but I'm sure there are situations where you would. However you want this design to be liquid.. so absolute is denying you that.

[Ryan Fait]

I've seen Safari do this on a site once before... I get nothing after it loads. Just a title, HTML in the source and a blank page.

[Lchad]

Try changing your #bottom div to

Code: Select all

#bottom {
position: relative;
width: 99%;
height: 486px;
bottom: 0px;
}

That starts to free things up...

[ukgeoff]

Originally Posted by marksk

So does Absolute set the 'layer order'? The swf always sits in the right position on the screen but I need the menu section to remain uppermost!

No, absolute doesn't set the 'order' of anything. It takes that element out of any natural flow and positions it where you have specified, either relative to the browser window as a whole of its (the element) parent element.

When people talk about 'layering' of elements, usually divs, then they are talking about the z-axis, i.e., front to back if you think in three dimentions.

The element with the highest z-index is nearest the front.

In general, divs appear top to bottom in the sequence they are in the (x)html code.

Also look at position: relative and floating elements for a complete picture.

As already stated in an earlier post - avoid using position: absolute where at all possible.

Hope this helps.

[Ryan Fait]

Just to fix Geoff's minor mistake, it's z-index, not z-axis. That is a very nice explanation of it though