Today was my first day diving into the world of HTML and CSS. Instead of just reading text, I decided to learn by building something.
[ http://jsfiddle.net/GUkrK/ ]
I chose to create a sample navigation bar.
<html>
<head>
<title> navigation bar </title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul id="menu">
<li id="menu1">
<a href="http://www.google.com">
<span>GOOGLE</span>
</a>
</li>
<li id="menu2">
<a href="http://www.github.com">
<span>GITHUB</span>
</a>
</li>
<li id="menu3">
<a href="http://www.quora.com">
<span>QUORA</span>
</a>
</li>
<li id="menu4">
<a href="http://www.facebook.com">
<span>FACEBOOK</span>
</a>
</li>
</ul>
<hr/>
</body>
</html>
Here is the accompanying CSS:
ul {
list-style:none;
color:red;
}
#menu {
float:left;
vertical-align:middle;
display:block;
width:600px;
height:108px;
}
#menu li {
display:inline;
font-size:20px;
padding:0px;
}
#menu a:link {
color:white;
font-weight:bold;
padding:20px;
background-color:#27A285;
}
#menu a:hover {
background-color:#E1C618;
color:brown;
}
hr {
height:5px;
background-color:red;
}
I'm currently struggling with positioning the horizontal line in the design. Should I set it using absolute or relative positioning? Is there a way to make it adjust automatically? Also, why doesn't it span the entire width of the browser and can its width be adjusted?
EDIT: Thank you for all the input. Here's the updated sample http://jsfiddle.net/sunu0000/zdDU5/