First, I would recommend closing all your tags. It looks like the UL is
missing the closing tag.
Second, I think the margin on the UL is your problem. I don't have time to
describe how to figure this out ;) but Firebug can be your friend here.
CSS:
#header{
text-align: right;
}
#header ul{
list-style: none;
margin:0;
}
#header li{
display: inline;
}
HTML:
<div id="header">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
---
As a bonus, some extra CSS to get you going is below. My div is called "nav"
and this is only part of it so it is somewhat a mess. NOTE I am not a "pro"
and this has not been cross browser tested!
CSS:
#nav {
padding: 0;
background-color: #AFAFAF;
height: 30px;
margin-bottom: 20px;
text-align: left;
border-bottom: 2px solid black;
}
#nav a{
padding: 7px 12px 8px 12px;
text-decoration: none;
line-height: 1.1em;
font-weight: bold;
background-color: #AFAFAF;
color: #000000;
}
#nav ul{
margin-top:7px;
margin-left:0px;
padding-left:0px;
}
#nav li{
display: inline;
font-size: 1.1em;
}
#nav a:visited{
color: #000000;
}
#nav a:hover{
background-color: #5F5F5F;
color: #FFFFFF;
}
#nav .selected a{
background-color: #5F5F5F;
color: #FFFFFF;
}
HTML:
<div id="nav">
<ul>
<li><a href="http://example.com/";>Item one</a></li>
<li><a href="http://example.com/";>Item two</a></li>
<li class="selected"><a href="http://example.com/";>Item
three</a></li>
</ul>
</div>
Enjoy,
Sunny
On Tue, Jul 27, 2010 at 6:15 PM, karl74 <[email protected]> wrote:
> 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]<blueprintcss%[email protected]>
> .
> For more options, visit this group at
> http://groups.google.com/group/blueprintcss?hl=en.
>
>
--
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.
