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
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I do something like this:

    Hi everyone.

    I was wondering how I can do something as seen on this site JQuery Banner of this site http://sattom.co.uk/
    I'm referring to the buttons on the left and how they go from the left margin of the browser to that point, regardless of the window size, and still have the type aligned to the logo.

    What I mean is, it seems as if they have a div to center everything in the browser but the buttons stretch all the way to the left. How can I do that. Tried going through their source file but didn't get the answer.

    Any ideas?

    Thanks!

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tcabaco View Post
    Hi everyone.

    I was wondering how I can do something as seen on this site JQuery Banner of this site http://sattom.co.uk/
    I'm referring to the buttons on the left and how they go from the left margin of the browser to that point, regardless of the window size, and still have the type aligned to the logo.

    What I mean is, it seems as if they have a div to center everything in the browser but the buttons stretch all the way to the left. How can I do that. Tried going through their source file but didn't get the answer.

    Any ideas?

    Thanks!
    I don't see nothing unusual. Did you look at css files?

    best regards

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I haven't loooked at their css but, to me, it seems like they have given their list items a fixed width and assigned the attribute:value, "display:block;"

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    #content .left ul {
    	position:relative;
    	font-size:14px;
    	line-height:48px;
    	width:9999px;
    	overflow:hidden;
    	margin:0 0 0 -9721px;
    	padding:0;
    	list-style:none;
    }
    #content .left ul li {
    	float:left;	
    	width:100%;
    	height:47px;
    	border-bottom:1px solid #ebebeb;
    	cursor:pointer;
    	background:#f5f5f5;
    	overflow:hidden;
    }
    
    #content .left ul li a {
    	display:block;
    	height:47px;
    	border-right:1px solid #ebebeb;
    	cursor:pointer;
    }
    down to that code i'd be inclined to say.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Yup, there's the fixed widths and the display block, though I don;t know why they have such a wide width for the UL and then such a huge margin. could've been done with much smaller numbers.

    Quote Originally Posted by met View Post
    Code:
    #content .left ul {
    	position:relative;
    	font-size:14px;
    	line-height:48px;
    	width:9999px;
    	overflow:hidden;
    	margin:0 0 0 -9721px;
    	padding:0;
    	list-style:none;
    }
    #content .left ul li {
    	float:left;	
    	width:100%;
    	height:47px;
    	border-bottom:1px solid #ebebeb;
    	cursor:pointer;
    	background:#f5f5f5;
    	overflow:hidden;
    }
    
    #content .left ul li a {
    	display:block;
    	height:47px;
    	border-right:1px solid #ebebeb;
    	cursor:pointer;
    }
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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