Issue
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 don't have any 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.
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;
}
Solution
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;
}
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 up to 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 */
}
Answered By - Mr. Alien
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.