Menu
I'm pretty new to programming and a complete beginner with HTML. I was messing around with an unordered list to make a semblance of a navigation page, and I've had a problem I can't fix. Each border around the words are very closed in, and I have no idea how to make the area inside the borders bigger meaning I want the border to be farther away from the word. I know it looks horrible, but I'm really just focused on making it work properly rather than making it look good. Any help would be great, thanks!
Here is my HTML:
<!doctype=html>
<html>
<head>
<meta charset="utf-8" />
<title> Test Title </title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div class="wrap">
<h1 class="test"> Blah Blah </h1>
<ul>
<li class="navigation"><a class="navitem" href="#"> Blog </a></li>
<li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
<li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
<li class="navigation"><a class="navitem" href="#"> About </a></li>
</ul>
</div>
</body>
</html>
And this is my CSS:
.wrap
{
width: 1000px;
height: 800px;
margin: auto;
background-color: black;
color: white;
font-family: sans-serif;
text-align: center;
}
.navigation
{
display: inline;
list-style: none;
padding-right: 50px;
}
.navitem
{
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
}
.navitem:hover
{
color: 339900;
border-color: 339900;
}
497
If you want to have some space between the words and the border, than you need to use padding property for that
.navitem {
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
padding: 5px;
}
Demo
Also, you can write the same thing as border: 1px solid green; which is nothing but the border shorthand.
Also, you told us that you are a fresher, make sure you reset the default margin and padding which are applied by the browser by using
* {
margin: 0;
padding: 0;
}
Or by using CSS Reset Stylesheet so that your menu styles position stays consistent across the browsers.
Lastly, you do not need to call classes on each of your element, you can leave it upto CSS selectors to select them... So get rid of all the classes, and just assign a class to the parent element, and use the selectors below..
Am assigning class to ul which is main_navigation so now we will select all the first level li using
.main_navigation > li {
/* Target direct child to .main_navigation */
}
And to target direct a inside those li we will use
.main_navigation li a {
/* Target direct child to .main_navigation > li */
}
Refactored Demo
153
Just add padding in NavItem
.navitem
{
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
padding: 5px 10px; //1st 5px is for Height, 2nd 10px is for Width adjust it for your need
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
