Results 1 to 2 of 2

Thread: bottom text menu

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

    Default bottom text menu

    Hello, I am pretty new to CSS. I have to create a menu like the one in the pic I enclose but first of all, to semplify, I'd like to fix the problem I have with the code I created. What I can't do is align bottom the text to the dashed line.
    I'd like to understand that before going on with the menu in the pic, just to make sure where I'm wrong.
    Here's the code:

    ...
    <style>
    #menu {
    padding:0;
    margin:0;
    height:2em;
    list-style-type:none;
    border-left:1px dashed #bbb}
    #menu li {
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#009900;
    font-size:13px;
    float:left;
    margin-left:7px;
    width:8em;
    height:2em;
    border-right:1px dashed #bbb}

    #menu li a:hover {
    border:0; /* needed to trigger IE */
    color:#000;
    }

    </style>

    </head>

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

    </body>
    </html>


    After fixing the problem above, I need to understand how to put in Css the menu in the picture.
    If someone could give me an hand..thank u! Hope to could return the favour one day!
    Chiara

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    You can position something based on the bottom of a certain div.

    So, say you want to have a link at the very bottom of a certain div. Something like:

    Code:
    <div id="container">
       <!-- Rest of Content Here -->
       <a href="#">Link</a>
    </div>
    You could apply the following CSS to position link relative to the bottom of the container div:

    Code:
    #container {
       position:relative
    }
    #container a {
       position:absolute;
       bottom:10px;  /*  This will make it 10 px from the bottom */
    }
    HTH

Tags for this Thread

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
  •