Prev: Problem with CSS Horizontal Dropdown Menu
Next: rows of thumbs
From: David on 4 May 2008 21:38
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 <ul> item being linked to an ID
that sets layout, etc., and each <li> linked 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 <ul> and <li> elements 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
From: Ben C on 5 May 2008 16:19
On 2008-05-05, David <dbjacobs(a)gmail.com> wrote:
> 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 <ul> item being linked to an ID
> that sets layout, etc., and each <li> linked 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/shrinkToFitCentring/centeringShrinkToFit.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.
From: David on 6 May 2008 11:32
On May 5, 4:19 pm, Ben C <spams...(a)spam.eggs> wrote:
> On 2008-05-05, David <dbjac...(a)gmail.com> wrote:
>
>
>
> > 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 <ul> item being linked to an ID
> > that sets layout, etc., and each <li> linked 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/shrinkToFitCentring/centeringShrinkToFit....
>
> 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
 | 
Pages: 1
Prev: Problem with CSS Horizontal Dropdown Menu
Next: rows of thumbs