Can’t See Images In Horizontal Navigation Bar

  • Okay so I just tried posting my code for my problem and it automatically closed it.

    Essentially I have a horizontal navigation bar underneath my header. It is 900 pixels wide and 22 pixels high. I have 9 images that total in length 900 pixels which I would like to use as navigation buttons in the navigation bar. They would be links to the various categories that I have for my page.

    I currently have each image as the background image in its respective class (for example “.cse-fashion” is the class for the category “Fashion”) which is referenced in the list element of the unordered list.

    So the order is essentialy <div id="nav">
    <ul><li class="cse-fashion"><a href="category/fashion/">Fashion</a></li>...other categories with their respective classes being called by the list elements...</li>
    </ul></div>

    Please let me know the easiest way to make a navigation bar below the header with clickable images. I’ve looked everywhere and can’t find anything remotely close.

    thx.

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

  • In order to post code, you have to enclose it in “backticks” – the key to the left of the 1.

    At any rate, it sounds like you have two problems. First, that your images don’t appear. The perhaps too-obvious question is: did you upload the images? Sometimes people forget that.

    Secondly, without seeing the CSS for that section, it’s difficult to guess why the images might not be displaying. If you’d post a link, or the code itself (just for that section, not your entire CSS file), that would help.

    Thread Starter joemccann

    (@joemccann)

    No problem…I did post the CSS and the Header code (with the backticks) but the system automatically closed the post…And it wasn’t the entire file…just the important parts.

    Here are the links for the CSS and the Header Files:

    https://www.coolestshitever.com/nav_css.txt

    https://www.coolestshitever.com/header.txt

    thanks a lot!

    Thanks. But you didn’t answer the question: did you upload the images to the server?

    Thread Starter joemccann

    (@joemccann)

    Yes. They are uploaded. I checked and then doublechecked.

    “checked and doublechecked”

    https://www.coolestshitever.com/wp-content/themes/CSE/images/nav/cse-menu_c1_r1.jpg
    404 not found

    Thread Starter joemccann

    (@joemccann)

    I don’t understand. If I go here:

    https://www.coolestshitever.com/wp-content/themes/CSE/images/nav/

    I see them fine.

    Thread Starter joemccann

    (@joemccann)

    Wow…just noticed the ‘c’ and the ‘r’ are reversed…I see if this works. I’m dumb. ??

    c1_r1 is NOT the same as r1_c1 ??

    Thread Starter joemccann

    (@joemccann)

    So I can see them now, but in order for them to be “clickable” and “viewable” I have to have some sort of text on top of them. I have a “.” for now because you can barely see it, but is there a way around this? Without any text the code would look like this:
    <li class="cse-fashion"><a href="category/fashion></a></li>

    That shows nothing though so I had to insert the “.” between the a tags.

    Personally, since this is just the header, I wouldn’t bother with doing the buttons as background; I’d just insert the buttons into the header and be done with it. Then you wouldn’t have the “need to have text on it” problem.

    Nor the problem that the only clickable “text” is a period.

    Thread Starter joemccann

    (@joemccann)

    Diane, so you’re suggesting list them as images in the list elements of an unordered list?

    Thread Starter joemccann

    (@joemccann)

    Also, the images showup fine in IE 6 (but header shows a small portion of the background color which it shouldn’t), but they are cutoff in FF 2.0 (yet the header is fine with no background poking thru on the right hand side). Any suggestions?

    Hi Joe; sorry for the delay.

    Yes, I’m suggesting putting the images into the list (lis).

    The reason you’d have images as *backgrounds* in a list is because you want the “link text” itself to be text. Since you don’t, just using the images is more direct.

    You *may* have to set the height of the LIs — that’s if you have problems with cut-offs.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Can’t See Images In Horizontal Navigation Bar’ is closed to new replies.