New Topic/Question
Reply
I am just beginning to build my first Wordpress theme and I am having some weird problems with creating a horizontal menu that uses image rollovers and dynamic highlighting.
I have created the menu with no problem using the Wordpress codex and old threads here on the forum, but once I insert the images they seem to half disappear,so I fixed them with some padding. But it seems the images only work when there is text in between the tags. Is there anyway to just have images inserted by themselves?
If someone could help me troubleshoot my code I'd be much obliged.
PHP/HTML:
<div id="nav">
<ul id="menu">
<!-- To show "current" on the home page -->
<li class="home"<?php
if (is_home())
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>">Home</a>
</li>
<!-- To show "current" on the Blog Page -->
<li id="spacer" class="weblog"<?php
if (is_page('Weblog'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/weblog">Weblog</a>
</li>
<!-- To show "current" on any posts in category 10, called Art -->
<li id="spacer" class="art"<?php
if (is_category('Art') || in_category('10'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/art">Art</a>
</li>
<!-- To show "current" on the About Page -->
<li id="spacer" class="resume"<?php
if (is_page('Resume'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/resume">Resume</a>
</li>
</ul>
</div>
CSS:
#nav {
width:431px;
height:44px;
float:left;
}
#menu {
padding:0;
margin:0;
list-style-type:square;
text-transform:uppercase;
font:Verdana, Geneva, sans-serif;
font-size:18px;
margin-left:1px;
margin-top:2px;
}
#menu li {
display:inline;
}
li.home a {
width:85px;
height:26px;
background:url(images/buttons/Home_inactive.png) no-repeat top left;
}
li.home a:hover {
width:85px;
height:26px;
background:url(images/buttons/home_active.png) no-repeat top left;
}
li.home a.active {
width:85px;
height:26px;
background:url(images/buttons/home_active.png) no-repeat top left;
}
li.weblog a {
width:109px;
height:26px;
background:url(images/buttons/weblog_inactive.png) no-repeat top left;
}
li.weblog a:hover {
width:109px;
height:26px;
background:url(images/buttons/weblog_active.png) no-repeat top left;
}
li.weblog a.active {
width:109px;
height:26px;
background:url(images/buttons/weblog_active.png) no-repeat top left;
}
li.art a {
width:64px;
height:26px;
background:url(images/buttons/art_inactive.png) no-repeat top left;
}
li.art a:hover {
width:64px;
height:26px;
background:url(images/buttons/art_active.png) no-repeat top left;
}
li.art a.active {
width:64px;
height:26px;
background:url(images/buttons/art_active.png) no-repeat top left;
}
li.resume a {
width:109px;
height:26px;
background:url(images/buttons/resume_inactive.png) no-repeat top left;
}
li.resume a:hover {
width:109px;
height:26px;
background:url(images/buttons/resume_active.png) no-repeat top left;
}
li.resume a.active {
width:109px;
height:26px;
background:url(images/buttons/resume_active.png) no-repeat top left;
}
Also here is the site live so you can understand my problem easier
http://www.georgehaj...co.nz/wordpress
Cheers
This post has been edited by AUAN: 25 February 2010 - 04:04 PM
MultiQuote
| 