Creating links for my navigation in the header graphic

keyword will be: position: absolute;

In example:

<div id="nav">
  <ul>
    <li class="home"><a href="/">home</li>
    <li class="contact"><a href="/contact">contact</li>
    <li class="about"><a href="/about">about</li>
    <li class="links"><a href="/links">links</li>
  </ul>
</div> <!-- end nav -->

and your css

#nav {
  background: (your.picture.jpg) no-repeat;
  position: relative;
}

#nav li {
  text-indent: -9999px;
}

li.home {
  position: absolute;
  left: 10px;
  top: 100px;
  width: 25px;
}

You need to experiment with the left/top/width parameters, and you’ll probably need more css, but this gives you something to start with.

Peter

where does the top section go? which file? or do you need to create a new one?

and thankyou!

header.php is the normal place to put navigation bars in, but YMMV.

Peter

in my header.php file all i have is a big gap and a bullet point and when i paste the code in all the background, header and everything dissapears.

link to your site?

Peter

https://www.bellefantaisie.net/test

i’ve put in the orignal header.php file so it’s gone back to normal

oke, most of the xhtml is already in place, now you just want to map the top menu on the graphics.

The only place to do that is in your stylesheet, so do not change anything to your xhtml anymore (except for creating another list item for home).

What I called ‘#nav li’ is in your case ‘#menu li’

Peter

yeh but the only thing is i don’t want the words showing, i want it to look as if the graphics are the button? do you know what i mean? i want to get rid of those links at the top

try first (with words) to position them. We can always make them ‘invisible’.

Peter

sorry to be so thick haha but this is all i have in my menu section in the stylesheet

#menu{
	padding: 0;
	white-space: nowrap;
	margin: 20px 0 0 0;
	width: 750px;
}
#menu ul {
	margin: 0px;
	padding: 0px;
}
#menu li {
	display: inline;
	list-style-type: none;
	margin: 0 10px 0 0;
}
#menu li a:link, #menu li a:visited {
	text-decoration: none;
	padding: 3px;
}
#menu li a:hover {
	text-decoration: underline;

i dont know how to make each one move?
i thought there was a way where you could just put invisible zones over the graphic and set it as a link

position: absolute;!

??

Peter

ah ok! haha i’m so thick. i’ve added that in to the #menu li section and all the links have gone on top of one another, how do assign the top and left adjustments to the different links?

All those li’s have their own class (page-item-2, page-item-3, etc)

example:

#menu li.page-item-2 {
top: 100px;
left: 10px;
}

Peter

it’s just not working, i’m trying putting the page name in but they are just staying bullet pointed now. thanks for trying to help me anyway!

change this

#menu li.page_id=2 {

into this

#menu li.page-id-2 {

(no underscores, no equal signs)

Peter