Problem with my menu! plz help!

[tobbsis]

Hi everyone!

I have a picture with 6 buttons

its 800px wide and 50px high.

I have placed the image in a div tag
And under that div tag i have a div tag with the text for my menu: Menu, About, Service, projekts and so on.


The problem is that I want the text to be in the middle of each button! how do I do it in the simplest way?

I also have trouble getting the text to be on the picture.
as it is now so is the text under the picture and I have tried with padding-bottom but nothing happens!


How can I solve it?

Would you like to see my codes, so let me know, and I work with css and html just so you know

Thanks in advance

[Black Max]

A link to the actual page would be best.

Why not just use a set of CSS-generated buttons and ditch the image?

[doni]

You could do something like this, however seperating the images would make things alot easier.

First the HTML:

<div id="menu">
    <ul class="links">
        <li class="link1"><a href="#">Link1</a></li>
        <li class="link2"><a href="#">Link2</a></li>
        <li class="link3"><a href="#">Link3</a></li>
        <li class="link4"><a href="#">Link4</a></li>
        <li class="link5"><a href="#">Link5</a></li>
        <li class="link6"><a href="#">Link6</a></li>
    </ul>
</div>

Now the CSS: note: you will have to adjust the top and left positions for each link to align with each button

    #menu {
        width 800px;
        height: 50px;
        position: relative;
        background: url(images/yourimage.jpg) no-repeat top left;
    }
    
    #menu .links li {
        position: absolute;
    }
    
    #menu .links li.link1 {
        top: 0;
        left: 1px;
    }
    #menu .links li.link2 {
        top: 0;
        left: 1px;
    }
    #menu .links li.link3 {
        top: 0;
        left: 1px;
    }
    #menu .links li.link4 {
        top: 0;
        left: 1px;
    }
    #menu .links li.link5 {
        top: 0;
        left: 1px;
    }
    #menu .links li.link6 {
        top: 0;
        left: 1px;
    }

[tobbsis]

Thanks for the code, i will try it this afternoon to see if it can help me.


and yeah it would be easier to seperate the buttons but then i get the problem that there is some space between the buttons and i dont want that.
Or can i somehow solv that?

I will link to send a link to my page when i come home!

[tobbsis]

http://hedlofdesign.se/

Here is the link to my page! It is only the first page that comes up as my question is about!


As you can see it says home home home home in Swedish.

What I want is for home home home to be placed on the buttons/immage above !

I tried your code doni as you wrote above but it was too complicated for me so I did not get to it!

someone who can help me?

[Dr John]

Cut out one of your images.
Set it as the background to your nav div.
Solved.

To be even nicer, change the image for the hover for the <li>- the simplest way is to flip the image upside down, or make it lighter in colour.

here's some code I lifted from a site giving free menus. just substitute your own images.

#menu {
	position:relative;
	display:block;
	height:42px;
	font-size:100%;
	font-weight:normal;
	background:transparent url(images/menu_background.gif) repeat-x top left;
	

	}
#menu ul {
	margin:0px;
	padding:0;
	list-style-type:none;
	width:auto;
	}
#menu ul li {
	display:block;
	float:left;
	margin:0 1px 0 0;
	}
#menu ul li a {
	display:block;
	float:left;
	color:#000;
	text-decoration:none;
	padding:14px 16px 0 15px;
	height:28px;
	}
#menu ul li a:hover {
	color:#fff;
	background:transparent url(images/menu_backgroundOVER.gif) no-repeat top center;
	}

you can add other styles to the various parts if so desired - eg text-decoration:underlined for the hover.
You can add an id of current to the menu item on each page and style that slightly different so the user gets a hint as to what page they are on.

I'm assuming that you have a div called menu, and use an unordered list for the menu.

Can't find a link to the site I found the code on, but it's one of the simplest menus you can make.

[tobbsis]

Cut out one of your images.
Set it as the background to your nav div.
Solved.

To be even nicer, change the image for the hover for the <li>- the simplest way is to flip the image upside down, or make it lighter in colour.

here's some code I lifted from a site giving free menus. just substitute your own images.

#menu {
	position:relative;
	display:block;
	height:42px;
	font-size:100%;
	font-weight:normal;
	background:transparent url(images/menu_background.gif) repeat-x top left;
	

	}
#menu ul {
	margin:0px;
	padding:0;
	list-style-type:none;
	width:auto;
	}
#menu ul li {
	display:block;
	float:left;
	margin:0 1px 0 0;
	}
#menu ul li a {
	display:block;
	float:left;
	color:#000;
	text-decoration:none;
	padding:14px 16px 0 15px;
	height:28px;
	}
#menu ul li a:hover {
	color:#fff;
	background:transparent url(images/menu_backgroundOVER.gif) no-repeat top center;
	}

you can add other styles to the various parts if so desired - eg text-decoration:underlined for the hover.
You can add an id of current to the menu item on each page and style that slightly different so the user gets a hint as to what page they are on.

I'm assuming that you have a div called menu, and use an unordered list for the menu.

Can't find a link to the site I found the code on, but it's one of the simplest menus you can make.

Thank you very much for your help!

But I'm not so good at codes so I do not get it to work.

I think I do so that I separate the keys individually.

But if I have a few buttons and put them beside each other, then there will be a small gap.


Should I use the code: position: absolute; to get rid of the gap or which way is best?


Thank you again!

[Dr John]

No, you only need one little image (two if you want a hover effect), just name the images as above. This is as basic as it gets, just copy and paste the code, and make sure you menu is in a div named named #menu

Oh, here's where I got the sample code from, as feel I should acknowledge the source having now found the link..

http://13styles.com/css-menus/slate/

[Dr John]

I got bored
so I made this.
http://kidneydialysis.org.uk/your-menu.htm
just copy and paste the code.
And download the two images to your images folder.

I've added a #current to the second menu item. you can use that and add the id="current" to each page's on menu item, or not.
Adjust the width of #menu as required.

[tobbsis]

I solved the problem. I made the image into a background and then I made a divtagg in the divtagg in which the image was in.

Then I used the top: ** px, to come down at the bottom of the picture and then wrote the margin: 0 auto; to get it in the middle and lots of other stuff but I have what I want now,

Thanks for the help everyone!


Check oute my webbpage and se how i made it.
www.hedlofdesign.se
There are som changes but you helpt me anyway!