By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,781 Members | 1,345 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,781 IT Pros & Developers. It's quick & easy.

How to center nested divs

P: n/a
I'm trying to style a kind of minimalist welcome page where each of X
number of (gray?) boxes will be links to a part of the site.

I want to implement the navbar (ie, set of boxes linking to other
pages) as an unordered list, with the <ulitem being linked to an ID
that sets layout, etc., and each <lilinked to an ID that renders its
box a different height.

So far, body looks as follows:
<body>
<div id="container">

<h1 id="header"><a href="#">site name</a></h1>

<ul id="navmenu">
<li id="blog"><a href="#">blog</a></li>
<li id="writing"><a href="#">writing</a></li>
<li id="photos"><a href="#">photos</a></li>
</ul>

</div>
</body>

The container ID is meant to center the entire menu on the page. It
has worked to a degree--the container is, itself, centered, but the
elements inside it are not.

Now, for the CSS:
@import "style.css";

#header {
text-align: center;
}

#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
}

ul#navmenu {
padding: 0;
list-style: none;
}

li {
padding: .6em 0 0 .8em;
float: left;
margin-left: 1em;
width: 5em;
height: 18em;
}

li, li a:link {
display: block;
font-family: "Lucida Grande", sans-serif;
font-size: 10pt/1.25;
color: #BBBBBB;
text-decoration: none;
background-color: #BBBBBB;
}

li a:hover {
color: #FFF;
}

li#blog {
height: 12em;
}

li#writing {
height: 15em
}

li#photos {
height: 10em;
}

What is in the imported file isn't relevant, as far as I can tell, as
the <uland <lielements are always 'namespaced' under specific IDs
in that stylesheet.

So: how do I center the blocks within the container? It's easy enough
to center a single element within another one... but how do you center
those 3 blocks with a 1em spacing in between each one?

As a quick aside, how can I make it so hovering over any portion of
the box triggers a:hover?

Thanks,
David
Jun 27 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2008-05-05, David <db******@gmail.comwrote:
I'm trying to style a kind of minimalist welcome page where each of X
number of (gray?) boxes will be links to a part of the site.

I want to implement the navbar (ie, set of boxes linking to other
pages) as an unordered list, with the <ulitem being linked to an ID
that sets layout, etc., and each <lilinked to an ID that renders its
box a different height.

So far, body looks as follows:
<body>
<div id="container">

<h1 id="header"><a href="#">site name</a></h1>

<ul id="navmenu">
<li id="blog"><a href="#">blog</a></li>
<li id="writing"><a href="#">writing</a></li>
<li id="photos"><a href="#">photos</a></li>
</ul>

</div>
</body>
[...]
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
}
[...]
li {
padding: .6em 0 0 .8em;
float: left;
margin-left: 1em;
width: 5em;
height: 18em;
}
[...]
So: how do I center the blocks within the container? It's easy enough
to center a single element within another one... but how do you center
those 3 blocks with a 1em spacing in between each one?
You can't centre floats-- they float to one side or the other.

You could make them display: inline-block and vertical-align: top
instead of float: left and then put text-align: center on the container.

But that won't work in (at least) Firefox 2.

Alternatively, you could shrink-to-fit and center the container by
putting display: table and margin: 0 auto on ul#navmenu.

That won't work in IE, but see also

http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

for a possible workaround.

But you can get away without centred shrink-to-fit here since you are
setting the widths of the LIs to 5em anyway. You want 1em between each,
so that's 17em altogether (3*5+2). Set the UL to width: 17em and margin:
0 auto and that should work.

Make sure you also set padding and margin to 0 on the ul-- one or other
of those will usually be 40px on the left from the default stylesheet.
As a quick aside, how can I make it so hovering over any portion of
the box triggers a:hover?
Do something like li:hover a { color: #fff }. That matches an A inside a
hovered-over LI.
Jun 27 '08 #2

P: n/a
On May 5, 4:19*pm, Ben C <spams...@spam.eggswrote:
On 2008-05-05, David <dbjac...@gmail.comwrote:
I'm trying to style a kind of minimalist welcome page where each of X
number of (gray?) boxes will be links to a part of the site.
I want to implement the navbar (ie, set of boxes linking to other
pages) as an unordered list, with the <ulitem being linked to an ID
that sets layout, etc., and each <lilinked to an ID that renders its
box a different height.
So far, body looks as follows:
<body>
<div id="container">
<h1 id="header"><a href="#">site name</a></h1>
<ul id="navmenu">
* *<li id="blog"><a href="#">blog</a></li>
* *<li id="writing"><a href="#">writing</a></li>
* *<li id="photos"><a href="#">photos</a></li>
</ul>
</div>
</body>
[...]
#container {
* *position: relative;
* *margin-left: auto;
* *margin-right: auto;
* *width: 600px;
}
[...]
li {
* *padding: .6em 0 0 .8em;
* *float: left;
* *margin-left: 1em;
* *width: 5em;
* *height: 18em;
}
[...]
So: how do I center the blocks within the container? It's easy enough
to center a single element within another one... but how do you center
those 3 blocks with a 1em spacing in between each one?

You can't centre floats-- they float to one side or the other.

You could make them display: inline-block and vertical-align: top
instead of float: left and then put text-align: center on the container.

But that won't work in (at least) Firefox 2.

Alternatively, you could shrink-to-fit and center the container by
putting display: table and margin: 0 auto on ul#navmenu.

That won't work in IE, but see also

* *http://netweaver.com.au/alt/shrinkTo...ingShrinkToFit....

for a possible workaround.

But you can get away without centred shrink-to-fit here since you are
setting the widths of the LIs to 5em anyway. You want 1em between each,
so that's 17em altogether (3*5+2). Set the UL to width: 17em and margin:
0 auto and that should work.

Make sure you also set padding and margin to 0 on the ul-- one or other
of those will usually be 40px on the left from the default stylesheet.
As a quick aside, how can I make it so hovering over any portion of
the box triggers a:hover?

Do something like li:hover a { color: #fff }. That matches an A inside a
hovered-over LI.
Thanks so much for the info. This has irked me for a while.

David
Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.