CSS Help: Nav Bar

  • Raquel Wilson

    (@belindasuperstarr)


    17 years, 9 months ago

    I’m looking at the code and the CSS and I can’t quite figure out what’s wrong with the navbar on this site.

    A second pair of eyes would be great.

    The logo image should be a link, but not have a background color on mouseover. Also, the text for “current issue” should be aligned with the other text.

    The CSS code for the navigation is:

    ul#nav { list-style: none; width: 650px; padding: 0 0 90px 0; float: left; clear: both; }

ul#nav li { padding: 0 10px 0 0; font: bold 1.4em Helvetica, Arial, sans-serif; text-transform: uppercase; float: left; }

ul#nav li a, ul#nav li a:visited { display: block; height: 3.0em; padding: 0 1.2em; line-height: 3.0em; color: #fff; text-decoration: none; background: #141415; }

ul#nav li a:hover { color: #fff; background: #434220; text-decoration: none; }

ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover { color: #090; text-decoration: underline; }

    The HTML for the navbar is:

    <ul id="nav">
		<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" width="215" height="87" alt="<?php bloginfo('name'); ?> </a></li>
               <li><a href="<?php bloginfo('url'); ?>/current/">current issue</a></li>
		<li><a href="<?php bloginfo('url'); ?>/archives/">archives</a></li>
		<li><a href="<?php bloginfo('url'); ?>/sign-up/">sign-up</a></li>

	</ul>

    I’ve been trying to find the problem a couple days now so any help is greatly appreciated.

Viewing 1 replies (of 1 total)

  • I’m no expert but I think you need to stop the highlighting appearing when you mouseover the image.

    Your CSS, creates a background colour when you rollover any link in the menu – this includes an image.

    Plus the code for the link/image is all over the place.

    <a href="https://www.vergeculture.com">
<img width="215" height="87" https://www.vergeculture.com/current=""
alt="Taste Magazine </a></li> <li>
<a href=" src="https://www.vergeculture.com/wp/wp-content/themes/Cutline 1.1/images/logo.gif"/>
current issue
</a>

    There is an inside the <img> tag. It looks like you need to close the image tag first.

    Hope that’s of some help.

Viewing 1 replies (of 1 total)
  • The topic ‘CSS Help: Nav Bar’ is closed to new replies.