#menu li

Discussion in 'CSS' started by grungina, Jun 8, 2008.

0
  1. #1
    Hi everyone, I've just started to have a look at CSS and I have to create a menu but can't understand how to put the written words on the bottom of the dashed line. Probably the more stupid question ever. sorry :eek:
    Here the code I create. Thank you!

    ...
    <style>
    #menu {
    padding:0;
    margin:0;
    height:2em;
    list-style-type:none;
    border-left:1px dashed #bbb;
    }
    #menu li {
    float:left;
    margin-left:7px;
    width:8em;
    height:2em;
    position:relative;
    border-right:1px dashed #bbb;
    margin-bottom: 100px;
    text-align:left;

    }
    #menu li a:hover {
    border:0; /* needed to trigger IE */
    color:#bbb;
    }
    </style>
    </head>

    <body>
    <div>
    <ul id="menu">
    <li>home</li><li>soluzioni</li><li>offerte</li><li>pacchetto</li>
    </ul>

    </body>
    </html>


    Chiara
     
    grungina, Jun 8, 2008 IP
  2. Jongusmoe

    Jongusmoe Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #2
    Not quite sure exactly what you're asking, but you can change the "border-left" to "border-right", "border-bottom", or "border-top" if that answers your question. :confused:
     
    Jongusmoe, Jun 8, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I also can't see what it is you want. However, I noticed you are floating the li's left and have no a's. I assume this will be a menu of clickable links? So you'll have to add the a's in? IE7 sometimes does this stupid staircase thing with left-floated li's when there's stuff (like a's) in them. I usually set my li's to
    display: inline; just to send something to IE7
    and then float my a's left instead of the li's.

    I find that when you float the a's (which makes them blocks) you have more control over where the words sit, the sizing of the a's themselves, and so since your menu will change one there are links inside, maybe try working from that.

    For "dummy" links (until the real links appear) I use this:
    <ul id="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">solutioni</a></li>
    <li><a href="#">offerte</a></li>
    <li><a href="#">pacchetto</a></li>
    </ul>

    Then the css.

    Show a picture of where you want the words in relation to the borders pls.
     
    Stomme poes, Jun 9, 2008 IP