Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    How do I position a UL in this example?

    I have a masthead, with a wrapper div. The div has a small background gif set to repeat-x to fill the div horizontally.

    The very top of the masthead has a horizontal ul for a menu. Underneath the menu is a banner image floated to the left. Floated right is a second horizontal ul.

    I want to add another third horizontal UL over part of the banner image - starting where the 45 degree part is to sit over the red strip but I cant sit it underneath the 45 degree part becuase the banner image is not a background image.

    Here is a link to the masthead - http://www.tomkilbourn.com/newsite/test/masthead.html

    How do I do it? Do I need to change the banner image into a background image also? If so, how do I use two background images? I want to keep the gradient image as it is (repeat-x) to keep its size down.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    ul#centerlist { 
    margin:17px 0 0 -45px;
    }
    
    ul#toplist li, ul#sidelist  li , ul#centerlist li{
    display: inline;
    padding: 1px 0 0 0;
    border-right: 1px solid white;
    
    }
    
    ul#toplist li a, ul#sidelist  li a, ul#centerlist li a {
    padding: 0 5px;
    color: #ccc;
    text-decoration: none;
    }
    Code:
    .
    .
    
    <ul id="centerlist">
    <li><a href="#">centerlist one</a></li>
    <li><a href="#">centerlist two</a></li>
    <li><a href="#">centerlist three</a></li>
    </ul>
    <br style="clear: both;">
    </div>
    
    </body></html>

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Hi thanks for replying, the list works well, but I wanted it over where the 45 degree part of the bannerimage is - just slightly more to the left. Thats why I need to find a way of changing the banner image into say a backround image. But I already have the gradient background image set to repeat-x.

    Is there a way to use 2 background images? Sorry If I havent explained clearly, your help is much appreciated!

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    ul#centerlist {
    float:left;
    margin:17px 0 0 -65px;
    padding-left:40px;
    }

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    I was wondering wether to just make another UL, float it left and use my banner image as the Ul's background, and then style the items of the list to place them further to the right.


  •  

    Posting Permissions

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