|
Subject:
|
divs inside divs: theory?
|
|
Posted By:
|
Giant_robot_sandwich
|
Post Date:
|
9/8/2006 4:37:12 PM
|
Hi, I'm just starting out making a website but I'm not getting anywhere fast. My design requires that I have a div centered in the middle of the page, and inside that other divs positioned relatively (so that the other items I want to display don't stray outside the contents area). But I have no idea how to manage that. If anyone can let me in on the theory I'd be really greatful. thanks for reading this far.
PS I don't think there would be much of a point of showing you the code I have right now, I broke the only working feature (centered div) to try and get divs inside.
|
|
Reply By:
|
DJB1954
|
Reply Date:
|
9/8/2006 4:51:45 PM
|
I don't understand your problem. You have created a <div> and styled it for centering etc... Until this <div> is closed any succeeding <divs> must inherit from that original and therefore can only "live inside its constraints" - such as "centered". Where is your problem?
|
|
Reply By:
|
Giant_robot_sandwich
|
Reply Date:
|
9/8/2006 5:00:08 PM
|
That's the thing, when I'm writing something like
<div class="center">
<div class="brand"> something here
</div>
</div>
brand is behaving as if center isn't there at all.
|
|
Reply By:
|
meow
|
Reply Date:
|
9/8/2006 5:03:18 PM
|
Then you do something to make that happen. What do the rules .center and .brand contain?
--
http://yupapa.com
|
|
Reply By:
|
Giant_robot_sandwich
|
Reply Date:
|
9/8/2006 5:09:46 PM
|
.centre {
text-align: center;
min-width: 600px;
}
.corporate {
position:absolute;
float: left;
top:0;
}
|
|
Reply By:
|
Giant_robot_sandwich
|
Reply Date:
|
9/8/2006 5:16:34 PM
|
If someone could give me an example of a <div> that should contain other <divs> in the center that'll probably help me out quite a lot. The effect I'm going for is something like this: http://www.mtv.com.au/shows/shows.php?view=VDM
|
|
Reply By:
|
meow
|
Reply Date:
|
9/8/2006 5:27:06 PM
|
Yes, that second DIV would "know" nothing about the first DIV.
Two things. text-align aligns inline content (text level), not other block level elements (even if IE6 in Quirks Mode and previous versions of IE think differently).
You may want to read up about what 'position: absolute' does, relative *what* it positions an element.
http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position
http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details
In your case this is true "If there is no such ancestor, the content edge of the root element's box establishes the containing block." .corporate will be glued to the top of the browser window.
If you want to position it relative .centre you have to make .centre 'position: relative' first. But you don't have to do anything at all to keep ..corporate inside .centre. Just don't position anything at all.
--
http://yupapa.com
|
|
Reply By:
|
Giant_robot_sandwich
|
Reply Date:
|
9/8/2006 5:50:37 PM
|
Yeah, thanks meow, DJB1954. I'll see what I can do tomorrow with that information. Your right meow with your prediction, as is it just sticks to the top.
|
|
Reply By:
|
meow
|
Reply Date:
|
9/8/2006 5:58:59 PM
|
I sort of forgot you wanted to center the second div. There are different ways to center a block level element. One way is to give it equal left and right margins.
.corporate { margin: 0 10% }
or if you prefer to write it out
.corporate { margin-left: 10%; margin-right: 10% }
--
http://yupapa.com
|
|
Reply By:
|
Giant_robot_sandwich
|
Reply Date:
|
9/8/2006 6:09:29 PM
|
I actually want the second <div> to be on the border of the first, in the place of a nav bar, for example.
|
|
Reply By:
|
Giant_robot_sandwich
|
Reply Date:
|
9/13/2006 2:55:14 PM
|
Thanks meow, the links you have me really helped. 
|
|
Reply By:
|
DJB1954
|
Reply Date:
|
9/13/2006 3:56:24 PM
|
Sorry guys,
I've been out of it for days - not nice to post and disappear so I apologise.
Denis
|
