CSS similar to Stack Overflow's top navigation menu
I am trying to create a navigation menu similar to that of Stack Overflow (Questions, Tags, Users, Badges, Unanswered, Ask Q开发者_JAVA技巧uestion).
I tried doing it by having a logo, 5 menu options. These were being placed on top of the container. I can't align them.
How can I create it so that they are aligned?
HTML:
<body>
<div id="logoimg">
<a href="http://www.domain.com">
<img src="http://www.domain.com/domain.png" border="0"></img>
</a>
</div>
<div id="navi">
<a href="http://www.domain.com/home.php">Home</a>
<a href="http://www.domain.com/profile.php">Profile</a>
<a href="http://www.domain.com/settings.php">Settings</a>
<a href="http://www.domain.com/logout.php">Logout</a>
</div>
<div id="my">
<div id="box">
<div id="pic">
<div id="myname">
<?php echo "$angelinajolie";?>
</div>
</div>
</div>
</body>
CSS:
div#logimg {
margin-left: 213px;
}
#box {
background-color: #FFFFFF;
margin:0 auto;
height: 300px;
width:830px;
border:1px solid #E2E2E2;
}
Give this a shot:
HTML:
<div id="header">
<h1><a href="http://www.domain.com">Name of Site</a></h1>
<ul class="nav">
<li><a href="http://www.domain.com/home.php">Home</a></li>
<li><a href="http://www.domain.com/profile.php">Profile</a></li>
<li><a href="http://www.domain.com/settings.php">Settings</a></li>
<li><a href="http://www.domain.com/logout.php">Logout</a></li>
</ul>
<ul class="nav extra">
<li><a href="http://www.domain.com/logout.php">Ask a Question</a></li>
</ul>
</div>
Wrap the whole thing in a container div. The logo of the site should probably be an h1 with the title of the site in text (to be friendly to screen readers and the like). The list of links should be unordered lists. That structure will keep things nicely contained and CSS can do the rest.
CSS:
#header h1{
float: left;
width: 100px;
height: 50px;
}
Float the site title/logo and give it a width and height.
#header h1 a{
background-image: url(http://www.domain.com/domain.png);
display: block;
text-indent: -9999px;
overflow: hidden;
width: 100px;
height: 50px;
}
Place your logo as a background image on the anchor tag, make the anchor tag a block-level element, hide the text with a text-indent property combined with an overflow of hidden (this shoves the text way to the left).
#header a{ text-decoration: none; }
#header .nav li{
background: #eee;
border:1px solid #E2E2E2;
float:left;
margin-right: 0.5em;
padding: 0.2em 0.5em;
}
Float the list elements in the ul tags and give them some styling.
#header .extra{
float: right;
margin-right: 0;
top: 0;
right: 0;
}
Float the 'extra' nav over to the right rather than the left.
See it in action here: http://jsfiddle.net/6F5ky/
加载中,请稍侯......
精彩评论