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
