Fiddle: http://jsfiddle.net/Slayerk96/384vy/
My header is very wacky and unprofessional. I've been playing around with this header and I can't seem to get it right. Current header: (notice line between home and my name)
Name(underlined)
Home_blog_contact
I have tried to position these items using css but the css won't adjust it right.
What I'm trying to make it look like:
Name(bold and big no underline) Home Blog Contact(on same line)
current css
.nav {
background-color: #000000;
color: #CCCCCC;
font-style: italic;
font-size: 30px;
border-color: 000000;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.Menu
{
display: inline-block;
float: right;
text-decoration: none;
width: 40%;
}
.Menu li{
display: inline;
background-color: #000000;
}
.Menu li a{
color: #CCCCCC;
font-style: italic;
font-size: 20px;
text-decoration: none;
}
.Name {
float: left;
}
.Menu li a:hover {
color: #FFFFFF;
}
current html:
<!DOCTYPE html>
<html>
<head>
<Title>Name</Title>
<link rel="stylesheet" href="My Site Template.css">
<script src="Page on googleapis.com"></script>
<script src="styling my site.js"></script>
</head>
<body>
<div class='nav'>
<ul class='Menu'>
<li><a href='#'><span>Home</span></li>
<li><a href='#'><span>Blog</span></li>
<li><a href='#'><span>Contact</span></li>
</ul>
<h1 class='Name'>Name</h1>
</div>
As Roko C. Buljan correctly noted, you forgot to close your anchor tags:
http://jsfiddle.net/LimitedWard/9xh5L/
<div class='nav'>
<ul class='Menu'>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Blog</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
<h1 class='Name'>Name</h1>
</div>
A good text editor (like Sublime Text) helps solve this problem by using syntax highlighting and autocompletion.
EDIT: you can also add padding-top
to your .menu to make it align better vertically with .Name.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.