• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

Help with Margins

D

dgafin

Weaksauce
Joined
Nov 6, 2007
Messages
92
Ok, so I got the margin problem figured out, but now I'm trying to get the menu to spread all the way across the top so there isn't an ugly white space on the right. I have done everything I can think of to get it to fit. I figured I'd add one more link called "information" on the right and that this would fill it up. Once i did that it just moved it to the bottom under home. So, I tried resizing the width accordingly and it just will not fit. I tried every number from 100px-113px. At 100px-112px it's the way it's shown now. At 113px it's at the bottom under home. Anyway I can fill up that white space and spread out this menu? Any help will be greatly appreciated.

Here is the CSS code that deals with the menu sizing:
Code: 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:100px; height:20px; text-align:center; color:#fff; background:#0e03f2; line-height:20px; font-size:11px; overflow:hidden; font-weight:bold;}

You can view the site here: http://waynebaseball.ath.cx

THANKS AGAIN!
 
Last edited:
bump

does anyone have any suggestions at all? I'm clueless on this one.
 
Putting that menu into a table instead of list items would be the easiest method that comes to mind. I'm looking at it a little deeper still.
 
dgafin said:
Ok, so I got the margin problem figured out, but now I'm trying to get the menu to spread all the way across the top so there isn't an ugly white space on the right. I have done everything I can think of to get it to fit. I figured I'd add one more link called "information" on the right and that this would fill it up. Once i did that it just moved it to the bottom under home. So, I tried resizing the width accordingly and it just will not fit. I tried every number from 100px-113px. At 100px-112px it's the way it's shown now. At 113px it's at the bottom under home. Anyway I can fill up that white space and spread out this menu? Any help will be greatly appreciated.
Click to expand...

Try setting your .menu ul element to 100% width and setting the width of the li elements to auto. You may find that you can override some of the CSS pickeyness if you define the width in pixels for the menu ul element, I see you're not filling the page, so take whatever that inside content area is in width, and set with on menu ul to that. You will have to play around with it a bit, but that should get you in the right direction. It's most likely going to require some CSS hacks to get what you're doing to render in IE6, but concentrate on designing for current generation browsers then patch accordingly for old ones.

Dyslexic_Dog said:
Putting that menu into a table instead of list items would be the easiest method that comes to mind. I'm looking at it a little deeper still.
Click to expand...

Incorrect. Tables should be used for tabular data. Best practices for design is to encapsulate content in <div> tags and use lists and list items for menus/navigation elements. CSS can easily do everything he's trying to do.
 
Last edited:
webdes03 said:
Incorrect. Tables should be used for tabular data. Best practices for design is to encapsulate content in <div> tags and use lists and list items for menus/navigation elements. CSS can easily do everything he's trying to do.
Click to expand...

Yeah I know what tables are for and I'm the first to criticize their use for layout, but there's just somethings that can't be easily done with HTML/ CSS. this is one of those cases where tables make life a lot easier now, and for maintenance later.
 
I think I changed what you suggested correctly, and still cannot get it to work. In fact it didn't move one bit once I set those. Thanks for the help so far!
 
Try this:

make the UL width:100% and change the .menu ul li a, .menu ul li a:visited width to 95px
 
Wow, that worked. Thanks so much! I've had some tricky html/css problems in the past, and I must say this is the place to go for help. Their may not be lots of people browsing this section of the forum, but I always get the help I need. Really though thanks again people!!!! :cool:
 
I spoke too soon. It looks fine at almost all resolutions above 1024x768, but the menu is too far to the right on 1024x768. I didn't notice it until I came to work and saw it on my laptop screen. Any more ideas? Also, this menu is all messed up in IE6, but I think I'm going to forget about making it work since most people should be running a newer browser anyways. Anymore help is appreciated.
 
You probably have to put in a CSS hack to fix the widths in IE6... Google for IE6 CSS hack and you should get some articles on what you need to tackle for IE6 rendering.
 
Well see I already have some IE6 CSS hacks in there. I'm not the one who made the initial menu, so it's supposed to work with IE6, but it doesn't. It's supposed to load a separate CSS file when it's IE6, but it still looks ridiculous even with that stuff in there. The menu is just on the left hand side vertically. Thanks.
 
Ok, so it still doesn't work with the IE6 hacks in there. Here is the css for my IE6 css. Does anyone know what I can change to make the menu work?

Code: 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#000;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#0e03f2; color:#fff;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:10; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
 
You must log in or register to reply here.
Back
Top