View Full Version : How do I position a UL in this example?

09-12-2007, 12:44 PM
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.

09-12-2007, 02:22 PM
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;


<ul id="centerlist">
<li><a href="#">centerlist one</a></li>
<li><a href="#">centerlist two</a></li>
<li><a href="#">centerlist three</a></li>
<br style="clear: both;">


09-12-2007, 03:50 PM
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!

09-12-2007, 04:33 PM
ul#centerlist {
margin:17px 0 0 -65px;

09-12-2007, 06:18 PM
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.