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

    Trouble trying to position a UL - help needed!!

    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello moss2076,
    I can't believe I'm actually recomending it but I think this calls for absolute positioning.
    Try this:
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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.
    Last edited by moss2076; 01-16-2008 at 09:58 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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
    Last edited by moss2076; 01-16-2008 at 03:11 PM.


  •  

    Posting Permissions

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