HTML Tags before and after the Navigation Links in Header

  • 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="https://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="https://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 ??

Viewing 13 replies - 1 through 13 (of 13 total)

  • 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.

    Thread Starter tnt22

    (@tnt22)

    [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?

    Thread Starter tnt22

    (@tnt22)

    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.

    Thread Starter tnt22

    (@tnt22)

    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.

    Thread Starter tnt22

    (@tnt22)

    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.

    Thread Starter tnt22

    (@tnt22)

    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>&Uuml;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;
}

    replace .navtop li a:hover with .navtop li:hover a

    Thread Starter tnt22

    (@tnt22)

    oh cool thank you! both ??

    Thread Starter tnt22

    (@tnt22)

    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? ??

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘HTML Tags before and after the Navigation Links in Header’ is closed to new replies.