Hey there, I hope the title of my page makes sense!
I created a full-page navigation menu wrapped in a list as it should be... I think. Now, I have a few queries:
1. How can I vertically center the links within the list items?
2. Is it possible to make sure the text fits properly inside the list items when the viewport is scaled up or down?
3. And why are the changes I made to link:visited not showing?
Jquery solutions are welcome ;)
I've tried various online solutions like using vertical-align and wrapping links in paragraph tags or using display:table, but nothing seems to work for me.
Here's my code, I hope it's somewhat understandable (please don't laugh at my newbie coding style):
Greetings from Djlzz
You can check out the full site @ http://codepen.io/DJLZZ/pen/BeLHl to understand my coding logic visually :)
All kinds of help are appreciated
HTML:
<div class="nav">
<ul id="navsound">
<li> <a href="index.html" > Home </a> </li>
<li> <a href="music.html" > Music </a> </li>
<li> <a href="about.html" > About </a> </li>
<li> <a href="pics.html" > Pics </a> </li>
<li> <a href="video.html" > Video </a> </li>
<li> <a href="guestbook.html" > Guestbook </a> </li>
<li> <a href="agenda.html" > Agenda </a> </li>
<li> <a href="store.html" > Store </a> </li>
<li> <a href="contact.html" > Contact </a> </li>
<li> <a href="links.html" > Links </a> </li>
</ul>
Css
.nav {
z-index:10;
display:block;
position:absolute;
height:75%;
width:90%;
margin-top:0.5%;
margin-left:5%;
margin-right:5%;
margin-bottom:2%;
}
.nav ul {
display:block;
height:100%;
list-style-type:none;
}
.nav li {
display:inline-block;
height:9%;
margin-bottom:0.5%;
width:100%;
float:left;
clear:both;
background:rgba(0, 0, 0, 0.33);
}
.nav a:link {
display:inline-block;
height:100%;
width:100%;
cursor:pointer;
color:#ff9900;
text-decoration: none;
text-align:center;
vertical-align: middle;
}
.nav a:hover{
display:inline-block;
background:rgba(0, 0, 0, 0.5);
color: #ffffff;
transform: scale(1.05,1);
-ms-transform: scale(1.05,1); /* IE 9 */
-webkit-transform: scale(1.05,1); /* Safari en Chrome */
transition-property:transform;
transition-duration:0.4s;
}
.nav a:visited {
display:inline-block;
color: #ff9900;
background:rgba(0, 0, 0, 0.5)
}
Thanks to all my fellow "Code-junkies"