PDA

View Full Version : CSS Help


Fehm
13-07-2009, 05:54 PM
Right, I've only just begun coding very basic CSS. And i was wondering whether anyone could help me.


How do I position two div's so that they are on top of each other e.g

theres a navigation box and another underneath? :)

Thanks for any help! +rep! :)
xD
=]
Fehm
13-07-2009, 06:29 PM
Bump. I really need this as soon as possible :):) Would be extremely grateful to anyone!! =D!
Zhris
13-07-2009, 06:55 PM
You have asked quite a broad question considering xhtml and css development is usually based on nested structures.

If you are using divs then in your xhtml should look something like...

<div id="div1">
<div id="div2">

</div>
</div>

Div 2 is nested within (and in front of) div 1.

Then you would then use css to style each of the 2 divs so that they are displayed how you want.

You mentioned navigation menus, could you explain a little more what you are trying to achieve?

Chris
BoyBetterKnow
13-07-2009, 07:03 PM
erm. Well if u are just doing a div ontop of another div, to force it onto a "new line" you would use clear:both;

But it's good to have a navigation container and have a width set on it, but i always use clear:both just incase.
Fehm
13-07-2009, 07:24 PM
http://i31.tinypic.com/10zy903.jpg

Thats the sorta layout I want.... Just the layout not what I want it to look like. Trying to achieve using pure CSS
Zhris
13-07-2009, 07:42 PM
I've got to go but I very quickly made a template based on your image, although this structure was used on the link I showed you. Its very rough and would need work i.e the widths, heights etc

Save this as index.htm

<html>
<head>
<style type="text/css">
#wrapper{
padding:10px;
width:1000px;
height:1000px;
border:1px solid black;
}
#left{
float:left;
width:300px;
height:1000px;
}
#right{
width:674px;
height:1000px;
border:1px solid black;
}
#upper{
width:290px;
height:200px;
border:1px solid black;
}
#lower{
margin-top: 10px;
width:290px;
height:790px;
border:1px solid black;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="upper">
</div>
<div id="lower">
</div>
</div>
<div id="right">
</div>
</div>
</body>
</html>
BoyBetterKnow
13-07-2009, 08:14 PM
A good idea would be to do something like


<div id="left">
Content for left.
</div>

<div id="right">
</div>

And float left both of them and set a width on them. Then inside them u can have, for instance "navHeader" and set clear:both that to dodge potential side elements (but it obviously won't dodge the right div, the navHeader will only dodge the stuff in it's parent div.
Fehm
13-07-2009, 08:20 PM
hmmm.... Now I've done that but the like second box (the one underneath the small one) just goes to the right of small one, How would I make it go underneath without it ruining the big content one? :D =D
BoyBetterKnow
13-07-2009, 08:33 PM
hmmm.... Now I've done that but the like second box (the one underneath the small one) just goes to the right of small one, How would I make it go underneath without it ruining the big content one? :D =D

clear:both ?
Jam-ez
13-07-2009, 08:34 PM
I'd say (based on my low CSS knowledge...)



<div id="wrapper">

<div id="left_wrapper">

<div id="left_top"></div>
<div id="left_bottom"></div>

</div>

<div id="right_wrapper">

<div id="right_content">

</div>

</div>

</div>

Then float right_wrapper right, left wrapper left, and clear: both; the left_bottom.
Fehm
13-07-2009, 09:14 PM
I don't know CSS. That just completely confused me, Ill just get a friend to help :) Thanks anyway though!
Zhris
13-07-2009, 10:41 PM
Just got back and looking at the CSS and what others have already suggested, I should have floated #right to the right, as it didn't display properly in firefox, or use another method that suits you and works cross browser. Then you would probably make use of clearing at some point because further content/nesting of floated divs etc may create problems, particularly in older browsers. Anyway, just a rough start. Goodluck.
Johno
13-07-2009, 11:01 PM
This is how I done it, but its not great because I got bored whilst trying to get the right content box to be sized correctly.

http://zoidec.com/random/johno/lol/
http://zoidec.com/random/johno/Archive.zip

Want to hide these adverts? Register an account for free!