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 3 of 3

Thread: CSS postioning

  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS postioning

    I am working on a site, using a modified .js menu system i found in a tutorial.

    http://uoregon.edu/~josh/test_menu/
    http://uoregon.edu/~josh/test_menu/style.css(the offending css is vertically spaced)

    what i cannot work out is why the menu will not float left within the div it is contained within.

    here is a firebug screengrab that shows the size of the containing div:
    http://uoregon.edu/~josh/test_menu/firebug_screen.png

    I think it is something to do with the order of <ul> & <li> elements in creating the menu. however as this is something preordained by the .js tutorial i got the menu code from I do not know what to do.

    any advice greatly appreciated.
    Last edited by Josh404; 11-09-2008 at 01:57 AM.

  • #2
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    got an answer elsewhere. for those curious it was adding this to the css, which relates to the .js menu:

    ul#treemenu1 {
    float:left;
    padding:0;
    }

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    NUTS! Just a little too late...

    This also works (and fixes the problem of the top of the "News" link being cut off in my browser):

    Code:
    /* Main wrap */
    #wrap {color:#000000; margin:10px auto; padding:0; width:750px;}
    #header {margin:0;}
    #slogan {color:#000000; font-size:1.5em; font-weight:700; letter-spacing:-1px; line-height:1.2em; margin:15px 0 20px 35px;}
    
    
    .side {width:130px; float:left; }
    
    .sidebar li{ /*Main items*/
    
    font-size:22px; 
    font-weight:bold; 
    line-height:12px; 
    font-family:Arial,Helvetica,sans-serif; 
    text-transform:uppercase;
    list-style:none;
    margin: 7px 0 0px -15px;
    padding: 0 0 0 0;
    list-style-type: none;
    }
    Edit:
    See the before and after images below for the IE output from this change vs. your code...
    Last edited by Rowsdower!; 03-03-2009 at 07:00 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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