Navigation menu with fixed lenght underline

[gasma1975]

Hi,

There is a nice navigation menu that I saw on www.orange.fr

it as the text navigation with a list style image and a continous gray underline

I'm trying to do the same, but really its a mess ! :mad:

This is my navigation Box

#navigation {
float: left;
width: 175px;
padding: 10px;
background-color: #FFFFFF;
height: 200px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
list-style-position: outside;
list-style-image: url(../images/bulletarrow.gif);
list-style-type: none;
line-height: 30px;
}

a, a:link {
color:#0554AD;
text-decoration: none;
font-weight: bold;
width: 150px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FF6600;
}

How can I create an uderline (longer than the navigation text) and under each line.

Also, it must not affect the position of my list image

Any idea ?

thx

[euphoriastudio]

hey I took a quick look and this is what I came up with:



#nav {position:absolute;
padding:10px;
float: left;
text-align:center;
width: 175px;
height: 200px;}
#nav a {display:block;
color:#0554AD;
border-top: 1px solid #FF6600;
border-bottom: 1px solid #FF6600;
background-color: #FFFFFF;
font-weight: bold;}


you want to use the borders to accomplish the lines extending out, to make the lines smaller decrease the width and to lengthen the lines increase the width. if you need anything else feel free to PM me. hope this helps ;)

[gasma1975]

By the way, I have another problem... :confused:

On my page first thing, I'm calling a PHP script (require function) wich loads a button who is in a DIV container

#LanguageContainer {
position: relative;
width: 150px;
}

but after that, I have my main page layout, topsection (image logo) and under, aligned with the above box is my navigation bar. BUT I WOULD LIKE MY BUTTON to appear under this bar ! Is it possible ?

--------------------------------------------------
---width 700px-- LOGO ZONE div (topsection)------
--------------------------------------------------
--------- Nav bar ------------------ (button)----


#topsection{
background-image: url(../images/topmainlogo.gif);
background-repeat: no-repeat;
width: 700px;
height: 100px;
position: relative;
left: 100px;
padding: 0px;
}

#navigationcontent{
position: relative;
width: 700px;
left: 60px;
}


How can I put my button aligned (relative to right) just under my nav ?

thx