I'm a student relatively new to CSS3. I'm trying to properly style a horizontal nav bar using a background image icon and text links at the block level, and to which are inline as well. Also, I'm trying to do the same on the hover states as well.
Here's a link to what I'm stuck with so far:
#aside_sect_mm {
margin: 0px;
background-position: 0%;
background-color: #004E27;
max-width: 704px;
max-height: 100px;
background-repeat: no-repeat;
position: relative;
}
#aside_sect_mm nav {
text-align: center;
max-width: 704px;
width: 100%;
max-height: 60px;
margin-top: 0%;
display: block;
position: relative;
}
#aside_sect_mm nav:after {
content: "";
display: table;
clear: both;
}
#aside_sect_mm nav ul {
padding: 0;
margin: 0;
max-height: 100px;
max-width: 704px;
position: relative;
}
#aside_sect_mm nav ul li {
font-size: 1.1em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: lighter;
text-align: center;
list-style: none;
line-height: 1.1em;
position: relative;
padding: 6.5% 0% 0% 0%;
max-height: 60px;
color: #FCE011;
display: inline-block;
float: left;
min-width: 20%;
background-color: #004E27;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
position: relative;
max-height: 60px;
max-width: 60px;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 40px 40px;
display: block;
}
#aside_sect_mm nav ul li.bio_icon {
background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
position: relative;
display: block;
text-align: center;
max-height: 60px;
max-width: 60px;
text-decoration: none;
color: #F6EF1B;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
position: relative;
max-height: 60px;
max-width: 60px;
display: block;
background-color: #F6EF1B;
background-repeat: no-repeat;
background-position: 0%;
text-decoration: none;
line-height: 2.5em;
color: #004E27;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
background-image: url(../svg/fut_ore_grn.svg);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<section id="aside_sect_mm">
<nav>
<ul>
<li class="bio_icon"><a href="#bio">Bio</a>
</li>
<li class="stat_icon"><a href="#stats">Stats</a>
</li>
<li class="img_icon"><a href="#images">Images</a>
</li>
<li class="vid_icon"><a href="#videos">Videos</a>
</li>
<li class="fut_icon"><a href="#future">Future</a>
</ul>
</nav>
</section>
</body>
</html>
UPDATE:
Ashwani corrected the positioning of the nav bar, thank you sir! Now, I'm just trying to achieve the state to be the same by allowing the clickable hover link area to fill the whole block of each button region. The hover width is correct, but the bg image is over center of the link text. I want it to position just like in it's normal "up" state.
Here's the updated sample:
#aside_sect_mm {
margin: 0px;
background-position: 0%;
background-color: #004E27;
max-width: 704px;
max-height: 100px;
background-repeat: no-repeat;
position: relative;
}
#aside_sect_mm nav {
text-align: center;
max-width: 704px;
width: 100%;
height: 100%;
margin-top: 0%;
display: block;
position: relative;
}
#aside_sect_mm nav:after {
content: "";
display: table;
clear: both;
}
#aside_sect_mm nav ul {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
position: relative;
}
#aside_sect_mm nav ul li {
font-size: 1.1em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: lighter;
text-align: center;
list-style: none;
line-height: 1.1em;
position: relative;
padding: 6.5% 0% 0% 0%;
height: 100%;
width: 100%;
color: #FCE011;
display: inline-block;
float: left;
min-width: 20%;
background-color: #004E27;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
position: relative;
max-height: 100%;
max-width: 140.8px;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 40px 40px;
display: block;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
clear: left;
position: relative;
display: block;
max-height: 60px;
text-decoration: none;
color: #F6EF1B;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
position: relative;
height: 100%;
display: block;
background-repeat: no-repeat;
background-color: #F6EF1B;
background-position: 50% 50%;
background-size: 40px 40px;
text-decoration: none;
line-height: 1.1em;
color: #004E27;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
background-image: url(../svg/fut_ore_grn.svg);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<section id="aside_sect_mm">
<nav>
<ul>
<li class="bio_icon"><a href="#bio">Bio</a>
</li>
<li class="stat_icon"><a href="#stats">Stats</a>
</li>
<li class="img_icon"><a href="#images">Images</a>
</li>
<li class="vid_icon"><a href="#videos">Videos</a>
</li>
<li class="fut_icon"><a href="#future">Future</a>
</ul>
</nav>
</section>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire