html - background image and text horizontal nav bar -
i'm student relatively new css3. i'm trying style horizontal nav bar using background image icon , text links @ block level, , inline well. also, i'm trying same on hover states well.
here's link i'm stuck far:
http://visionsic.github.io/dsw_ii/test.html
#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 { 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 positioning of nav bar, thank sir! now, i'm trying achieve state same allowing clickable hover link area fill whole block of each button region. hover width correct, bg image on center of link text. want position in it's normal "up" state.
here's updated sample:
http://visionsic.github.io/dsw_ii/test.html
#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 { 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>
**you can use following structure link tag** #aside_sect_mm nav ul li a{ position: relative; display: block; max-height: 60px; /*max-width: 60px; -- remove max width*/ /*margin: 0 auto --- if want use max width should use margin o auto*/ text-decoration: none; color: #f6ef1b; } #aside_sect_mm nav ul li a:hover{ background-color: #f6ef1b; background-position: 0 center; background-repeat: no-repeat; color: #004e27; display: block; line-height: 2.5em; max-height: 60px; /*max-width: 60px; remove max-width*/ position: relative; text-decoration: none; }
Comments
Post a Comment