Will it slide beneath?

marksk · #1 Apr 25th, 2007, 15:44

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 · #2 Apr 25th, 2007, 16:15

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 · #3 Apr 25th, 2007, 16:25

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 · #4 Apr 25th, 2007, 22:54

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 · #5 Apr 25th, 2007, 22:55

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 · #6 Apr 25th, 2007, 22:59

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 · #7 Apr 26th, 2007, 08:44

Quote:

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 · #8 Apr 26th, 2007, 08:58

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
High Slide?	byrd80	JavaScript Forum	2	Mar 21st, 2008 20:02
Slide up and down	DregondRahl	JavaScript Forum	6	Oct 30th, 2007 21:10
Making div to drop down when div beneath it change it's height dimension ?	gitarista	Web Page Design	2	Oct 15th, 2007 23:59
slide slide slid	Bcullen	JavaScript Forum	9	Oct 2nd, 2007 10:02
Slide show/s :)	OmiE	Flash & Multimedia Forum	4	May 25th, 2007 04:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Will it slide beneath?