PDA

View Full Version : Divs and there Order?


africano
09-25-2008, 04:33 PM
Hi, Im playing around with slicing my design and setting it up in Dreamweaver and was wondering what determines the order of the divs? What I mean is how do you determine which one is ontop of the other....?

Ive got my header, my menu bar and my content...My header is slightly ontop of my header..(fine) but its slightly under my content(an image)...It hides underneath and should be ontop?

make any sense? no? ask and Ill try and clarify!:)

domedia
09-25-2008, 05:45 PM
Unless you're absolutely positioning iitems, floating them, or use negative margins, I can't see why some elements are on top of others.

africano
09-25-2008, 05:59 PM
Ummh...Im not sure... Heres my code for the divs implicated:

#top {
height: 212px;
width: 100%;
position: relative;
left: 0%;
background-image: url(IMGS/images/HEADER.jpg);
background-repeat: no-repeat;
background-position: center;
}
#navbar {
height: 99px;
width: 100%;
position: relative;
bottom:73px;
right: 5%;
background-repeat: no-repeat;
background-position: center;
background-image: url(IMGS/images/MENU.png);
}



#content {
float: right;
width: 100%;
position: relative;
border: 0px solid #000000;
bottom:100px;
background-image: url(IMGS/images/CONTENT.jpg);
background-repeat: no-repeat;
}

The menu overlaps partly ontop of the header div(this is correct as it must appear to be slightly ontop)
But it should do the same for the Content div. The menu div should overlap slightly ontop of the content, but it doesnt, It appears to be under it.

africano
09-25-2008, 06:10 PM
Ummh...Im not sure... Heres my code for the divs implicated:

#top {
height: 212px;
width: 100%;
position: relative;
left: 0%;
background-image: url(IMGS/images/HEADER.jpg);
background-repeat: no-repeat;
background-position: center;
}
#navbar {
height: 99px;
width: 100%;
position: relative;
bottom:73px;
right: 5%;
background-repeat: no-repeat;
background-position: center;
background-image: url(IMGS/images/MENU.png);
}



#content {
float: right;
width: 100%;
position: relative;
border: 0px solid #000000;
bottom:100px;
background-image: url(IMGS/images/CONTENT.jpg);
background-repeat: no-repeat;
}

The menu overlaps partly ontop of the header div(this is correct as it must appear to be slightly ontop)
But it should do the same for the Content div. The menu div should overlap slightly ontop of the content, but it doesnt, It appears to be under it.

domedia
09-25-2008, 07:34 PM
You're mixing absolute positioning attributes with your code. bottom, left etc. But it's impossible to tell from looking at your CSS alone.

africano
09-26-2008, 09:50 AM
Thanks Domedia, Ill have a look at my css and the position atributes.

Here is a graphical example of what I mean:
http://www.adventuretrekking.com/


As you can see the Image with the mountain is slightly ontop of the righthands side column.....How did they achieve this? through css or just cutting up the images in a certain way in Photoshop?

How can you achieve this type of overlap?

POSTED THIS IN THE WRONG THREAD BEFORE. Sorry:(

domedia
09-26-2008, 12:49 PM
You need Firefox and the Web Developer toolbar plugin. This should be n every web designers box of tools :)

That page is using absolute positioning to put one above the other.
I misunderstood your question initially, thinking that the overlap was the problem.