...

View Full Version : Trouble trying to position a UL - help needed!!



moss2076
01-16-2008, 08:22 AM
Im trying to style one final UL to my masthead, but as always there is causing me a severe headache and I really need some help! -

I have a UL/li called "rightlist" which is floated in the top right hand corner and currently shaded blue.

I want the "rightlist" UL to have a height of about double what it currently is (so it can be styled with a nice curved bkgrnd) - I want its height to drop down over the black area into the gradient red banner area just below it. But I just cannot get it to do this without pushing the rest of the UL's below it downwards also.

www.siteoftom.com/masthead.html

Any help would be really appreciated!

Excavator
01-16-2008, 08:46 AM
Hello moss2076,
I can't believe I'm actually recomending it but I think this calls for absolute positioning.
Try this:

ul#rightlist {
position: absolute;
top: 0;
right: 0;
margin: 2px 0px 0px 0px;
padding: 10px 10px 10px 0px;
display: inline;
background-color: #3366FF;
}

change that padding back and give it a height if you need to.

moss2076
01-16-2008, 08:56 AM
Hi Excavator that does work just as I want, but I really would like to avoid the absolute positioning if at all possible. I know that may mean more "hacking" of the code, but I really need to find a way without the absolute positioning - if it is possible that is! Im never comfortable with absolute positioning.

Excavator
01-16-2008, 09:19 AM
ul#rightlist {
float:right;
margin: 2px 0px 0px 0px;
padding: 10px 10px 10px 0px;
display: inline;
background-color: #3366FF;
}
#redwrapperdiv {
background: url(/images/gradient_banner_for_curve_no_black.gif) repeat-x;
min-width: 600px;
list-style-type: none;
margin: -20px 0 0 0;
padding: 0px 0px 0px 0px;
}

Of course a text resize breaks that. Would be better to make all those lines and stuff a background image, then you could put ul's all over the place.

moss2076
01-16-2008, 02:01 PM
I just cant get it to work without other elements moving out of position. Need help!

I could use two ULs...but that will mean having to split any background image horizontally as in this example..
www.siteoftom.com/masthead2.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum