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 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!
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.
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…
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.
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!