2 replies [Last post]
vantar
Offline
newbie
Last seen: 10 years 31 weeks ago
Timezone: GMT+2
Joined: 2010-04-21
Posts: 2
Points: 3

Hi guys,

My fist post here. Have a question:

I have a menu. With 7 diffrent sized texts. Already have an image done with ps. The image have rounded corners on left and right top. And the color is blue with gardient.

Did cut the image into 2 pieces. Left and right. But don´t really know how to put them into the menu.

heres some code:

<div id="TopMenu">
                        <ul>
                            <li><a href="#"><span>Start</span></a></li>
                            <li><a href="#"><span>Project</span></a></li>
                            <li><a href="#"><span>How to</span></a></li>
                            <li><a href="#"><span>Forum</span></a></li>
                            <li><a href="#"><span>Q&A</span></a></li>
                            <li><a href="#"><span>Help</span></a></li>
                            <li><a href="#"><span>Contact</span></a></li>
                        </ul>
                    </div>

CSS
#menu
{
    width: 980px;
    height:26px;
    margin:29px 0 0 0px;
}
 
 
 
#menu ul
{
    margin: 0 0 0 10px;
    padding:0px;
}
 
#menu li
{
    margin:0px;
    padding:0px;
    display:inline;
 }
 
 
#menu li a
{
    background:url(../images/left.png) left top no-repeat;
    float:left;    
    display:block;
    height:10px;
    margin:1px;
    text-align:center;
    text-decoration:none;
    color:#FFFFFF;
    outline:none;
 
    }
 
 #menu li a span
 {
    background:url(../images/right.png) right top no-repeat;
    padding:8px;
 }

As u see, it works. But Not as good as it could. What I want to do is that I want the left and the right to merge together. After that is done, I´ll put the text in center.

Would be really grateful if someone would help me.

Sorry for my english guys!

vantar
Offline
newbie
Last seen: 10 years 31 weeks ago
Timezone: GMT+2
Joined: 2010-04-21
Posts: 2
Points: 3

Forgot to change the menu

Forgot to change the menu name:

TopMenu -> menu

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need to see the image slices

Need to see the image slices and preferably the links working on a live page.

Why have you not floated the list elements and used the li element for one of the slices?

The last paragraph of your question isn't absolutely clear thus we could do with seeing the slices, which should really be unequal i.e one being all but the extreme edge and the other being that thin slice missing from the other or at least the width of the original image is best if it's far wider than would need to be and use use overlapping of the two slices when placed as backgrounds.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me