Results 1 to 3 of 3

Thread: Navigation menu with fixed lenght underline

  1. #1
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Navigation menu with fixed lenght underline

    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 !

    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

  2. #2
    Join Date
    Jan 2008
    Location
    Colorado
    Posts
    38
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    #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
    Last edited by euphoriastudio; 01-07-2008 at 05:19 AM.

  3. #3
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks for helping...looks good ! ;-)

    By the way, I have another problem...

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •