Navigation with images/hovering?
First of all I'd like to thank for this wonderful theme. For someone like me, who's never been that much into coding, this literally awesome. Thanks!
I'm trying to finalize a design I've made for some time ago, and have so far succeed pretty well. However, I can't seem to figure out how to change the site navigation.
My intention is to change the navigation into images instead of the original one, either with .css or html. I believe I've found a .css code that allows this, but as I don't really know alot about this, I'm only assuming.
My mock up version of the menu looks like this: http://www.cdjgfx.dk/menu_mock.png
And the .css file I've "created" (with a tutorial) looks like this:
Code:
<ul class="menu">
<li class="nyheder"><a href="#">nyheder</a></li>
<li class="holdet"><a href="#">holdet</a></li>
<li class="kampe"><a href="#">kampe</a></li>
<li class="omos"><a href="#">om os</a></li>
<li class="partnere"><a href="#">partnere</a></li>
</ul>
.menu {
margin: 0;
padding: 0;
list-style: none;
background: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/menu_bg.png)
}
.menu li {
padding: 0;
margin: 0;
height: 34px;
width: 900px;
margin-right: 1em;
list-style: none;
background-repeat: repeat top left;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 34px;
background-repeat: repeat top left;
}
.nyheder {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder.png); width: 77px;}
.nyheder a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder_g.png);}
.holdet {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet.png); width: 77px;}
.holdet a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet_g.png);}
.kampe {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe.png); width: 77px;}
.kampe a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe_g.png);}
.omos {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos.png); width: 77px;}
.omos a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos_g.png);}
.partnere {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere.png); width: 77px;}
.partnere a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere_g.png);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
( http://www.cdjgfx.dk/menu.css)
Is this possible to create this menu (with a static background as well as hovering images) within this template? If so, how?
Edit: The URL for the site is http://skoven-gaming.dk/wordpress/.. I'm sure that the .css "file" I uploaded are lacking some links and stuff, so guess the link could be somewhat vital. |
