...

View Full Version : How can I do something like this:



tcabaco
11-02-2009, 04:11 AM
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!

oesxyl
11-02-2009, 10:24 AM
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

bazz
11-02-2009, 12:46 PM
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

met
11-02-2009, 06:35 PM
#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.

bazz
11-02-2009, 08:30 PM
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.




#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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum