Hi,
My header.php:
<div id="navbox" role="navigation">
<ul class="navtop">
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
Output:
<li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2" title="Beispiel-Seite">Beispiel-Seite</a></li>
Now my problem is that i want an output like that:
<li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2" title="Beispiel-Seite"><strong>Beispiel-Seite</strong></a></li>
How can I do that? I've done a lot of research and did not found anything :(
Why do you need the <strong></strong> tags on each link? Not only would that be bad for SEO but it sounds like a presentational issue that could be fixed with pure CSS.
[CSS moderated as per the Forum Rules. Please just post a link to your site.]
That's because i don't know how to get the other picture in, in another way :(
EDIT: CSS
This is the CSS only because the wordpress install is not online!
By picture, do you mean a background for the menu links?
yeah, you can see how it should look like on csw Link
You should be able to get the same effect by adding the background images to the li and a tags.
If i only delete the strong tags in css it's messed up because the l and r picture gets the same
Add the background images to the li and a tags.
when i understand you right you mean it should look like this
.navtop li{
float:left;
list-style-type:none;
background:url(weiss-button-l.jpg) no-repeat left;
}
.navtop li a{
color:#000000;
cursor:pointer;
display:block;
float:left;
font-size:13px;
font-weight:bold;
height:68px;
line-height:45px;
padding:23px 0px 0px 21px;
text-align:center;
text-decoration:none;
background:url(weiss-button-r.jpg) no-repeat right top;
}
but when i do that the graphics are shown on every link but they only should show up when someone hovers over a link and on the active page.
Use .navtop li:hover and .navtop li a:hover.
Hi,
yeah now i know what you meaned but i only have one problem left
When i Mouseover the left graphic only the left graphic will be shown.
<div id="navbox">
<div class="navtop">
<ul>
<li class="current"><a href="index.php">Home</a></li>
<li><a href="aktuelles.php">Aktuelles</a></li>
<li><a href="service.php">Service</a></li>
<li><a href="kontakt.php"><strong>Kontakt</strong></a></li>
<li><a href="anfahrt.php"><strong>Anfahrt</strong></a></li>
<li><a href="mitarbeiter.php"><strong>Über uns</strong></a></li>
<li><a href="quicksupport.php"><strong>QuickSupport</strong></a></li>
</ul>
</div>
</div>
Here the CSS part:
#navbox{
float:left;
position:absolute;
width:100%;
min-width:1000px;
}
.navtop{
list-style:none;
margin:0px auto 0px auto;
padding:0px 0px 0px 30px;
}
.navtop li{
color:#000000;
cursor:pointer;
display:block;
float:left;
font-size:13px;
font-weight:bold;
height:68px;
line-height:45px;
padding:23px 0px 0px 20px;
text-align:center;
text-decoration:none;
list-style-type:none;
}
.navtop li a{
color:#000000;
cursor:pointer;
display:block;
float:left;
font-size:13px;
font-weight:bold;
height:68px;
line-height:45px;
padding:0px 19px 0px 0px;
text-align:center;
text-decoration:none;
}
.navtop li.current,.navtop li:hover{
background:url(weiss-button-l.jpg) no-repeat left;
color:#000;
}
.navtop li.current a,.navtop li a:hover{
background:url(weiss-button-r.jpg) no-repeat right top;
color:#000;
}
CyberAlien
Member
Posted 1 year ago #
replace .navtop li a:hover with .navtop li:hover a
oh cool thank you! both :)
ok now i have the problem that the left graphic is not clickable, i think with this version it can't work. Or do you have another suggestion? :)
tnt22
