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 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Help w/ CSS Toolbar

    I have been working on this toolbar for months. It looks good on one computer, but then I go to another computer with a different screen width and the toolbar is "squashed." Because it is "squashed" it appears as a toolbar, and then the excess toolbar appears beneath of it....a continuation, if you know what I mean. Anyway, I want it to appear the same on all computers--to be the full width of the page without overflowing.

    This is the CSS code:

    Code:
    #cssm1 *  { padding:0; margin: 0; font: 1em arial; }
    
    #cssm1 { position: absolute;  z-index: 99; margin: 0 auto; align: center; line-height: 20px; }
    
    #cssm1 a { display: block; border: 1px solid #fff; color: #ffffff; background: #008000; text-decoration: none; padding: 3px 10px; }
    #cssm1 a:hover { background: #006400; }
    
    
    #cssm1 ul li, #cssm1 ul li ul li  { width: 157px; list-style-type:none; }
    
    #cssm1 ul li { float: left; width: 157px; overflow: hidden; }
    
    #cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{ 
    	display:none;
    	list-style-type:none; 
    	width: 157px;
    	}
    
    #cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul { 
    	display:block; 
    	}
    
    #cssm1:hover ul li:hover ul li:hover ul { 
    	position: absolute;
    	margin-left: 157px;
    	margin-top: -20px;
    	}
    You can view the website here:

    http://www.horselover.net16.net

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    not surprising

    the menu is over 1400 pixels wide ~ anyone with a resolution < 1680x1050 will not be able to see it "correctly".

    you should aim to keep non-fluid sites to a width of <1000px for maximum compatibility.

    else look in to fluid layouts.

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Um, okay, I'm pretty new to the game. What's a fluid layout?

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    exactly what it sounds like

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Oh. Okay. Well, how do I make a fluid layout?

  • #6
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    did you check out that link? plenty of material available online with a little searching

  • #7
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I tried that but I'm having a little trouble changing the header to a toolbar. Probably just a little more working at it, though, and I'll figure it out.

  • #8
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Still having problems.....

  • #9
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts
    bump


  •  

    Posting Permissions

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