Designing a navigation menu with image in back ground?

  • Anyway to add a navigation menu with an image right behind it? I want to match it with my site here. https://www.northeastsurfing.com on my wordpress area here https://www.northeastsurfing.com/news On my site it is an enabled image, also if it is easyer someone said I could just use the same image from the site, but I can not get the code right, any tips. I entered the code below. But it did not work.

    <img src="/images/general/header_.gif" width="820" height="258" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
  <area shape="rect" coords="107,168,195,194" href="https://www.northeastsurfing.com/forecast.htm" />
  <area shape="rect" coords="51,169,105,195" href="https://www.northeastsurfing.com/eventsnews.htm" />
  <area shape="rect" coords="1,168,50,194" href="https://northeastsurfing.com/" />
  <area shape="rect" coords="331,168,424,194" href="https://www.northeastsurfing.com/education.htm" />
  <area shape="rect" coords="278,168,329,194" href="https://www.northeastsurfing.com/cams.htm" />
  <area shape="rect" coords="426,168,481,194" href="https://www.northeastsurfing.com/links.htm" />
  <area shape="rect" coords="197,168,274,194" href="https://www.northeastsurfing.com/surfreports.htm" />
  <area shape="rect" coords="542,168,624,194" href="https://www.northeastsurfing.com/surfschools.htm" />
  <area shape="rect" coords="626,169,685,195" href="https://www.northeastsurfing.com/surfspots.htm" />
  <area shape="rect" coords="687,169,742,195" href="https://www.northeastsurfing.com/media.htm" />
  <area shape="rect" coords="744,169,818,195" href="https://www.northeastsurfing.com/contact.htm" />
  <area shape="rect" coords="482,168,541,194" href="https://www.northeastsurfing.com/surfshops.htm" />
</map>
Viewing 4 replies - 1 through 4 (of 4 total)

  • This article about making custom headers from the documentation might be helpful.

    Because of the way that themes are constructed in WordPress, it is going to be a lot easier to separate the content and the style, and add these images in your stylesheet, similar to this CSS navigation list example.

    Thread Starter northeastsurfing

    (@northeastsurfing)

    Thanks for the information but I just dont understand it. I know basic html and have not really gotten into css. All I would like to do is insert the above code into my stylesheet.css so that it will appear on my site as a header with navigation. I am not sure what code goes before it or after it, or where the code goes. Any tips would be great, does not seam that hard to do. Ronnie Lees.

    All I would like to do is insert the above code into my stylesheet.css

    Actually, that code should never be inserted in the style.css because it is not CSS code… So, the short answer is: you can’t.

    If it is html code (as it is) – put in in your html.

    If you want image map by CSS -> google for it. That’s a different technique.

    If you look at that header documentation, you can get a better idea of where(header.php) in the theme you need make these changes.

    Moshu is right of course, to use the stylesheet, you would have to break it apart, and put the links in the header, and the images references and positioning in the stylesheet.

    To help you pinpoint where in the header the buttons you want to add should go, I would recommend Firebug.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Designing a navigation menu with image in back ground?’ is closed to new replies.