Hi,
I wonder if anyone can help. I'm fairly new to web design and, using
Blueprint, I'm trying to create a header for my site that has a bottom-
right aligned nav menu.
I've created a separate style sheet (style.css) in which I apply
styles specific to my site. To create my nav menu I used an unordered
list (I didn't use the nav tag as I was concerned about older
browsers). I've put the list in a div called "header" and given it an
absolute positioning of bottom: 0; and right:0;.
I thought this would algn the menu tightly with the right-hand edge of
the "header" div. But it doesn't. It looks as if there's a border of
about 10px or so. I've looked through screen.css: "span-24 last" has a
right margin of 0 and I can't see any padding on the main divs.
Can anyone tell me what I'm doing wrong? This is driving me nuts.
My mark-up is below for refernce,
Thank you very much
Karl
So far, style.css contains the following:
@charset "utf-8";
/* CSS Document */
/* defining divs */
#header {height: 100px; position: relative; background-
color:#CCCCCC; }
#header ul {position: absolute; bottom: 0px; right: 0px; list-
style:none; }
#header li {float: left; min-width:80px; text-align: right; margin: 0;
padding: 0; border: 1px solid black;}
My html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My site | Home</title>
<link rel="stylesheet" href="blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css"
media="print">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css"
type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
<div class="container">
<div class="span-24 last" id="header">
<ul id="menu">
<li>one</li>
<li>two</li>
<li>three</li>
</div>
<p>Page content goes here.</p>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
