...

View Full Version : Tabs Bar



msmarti
11-04-2011, 03:08 AM
Can someone please tell me how to fix my tabs bar? I want all the tabs lines up on a row....SAVING CENTER! all the way to Technology ALL in ONE row.

Thank you!!!

Excavator
11-04-2011, 03:14 AM
Hello mamarti,
Is it float drop you are seeing? That's usually a width problem, what you put in a containing element has to fit in it.
We'll need a link though, I'm sure you just forgot...

teedoff
11-04-2011, 03:15 AM
and your website is?.......

You float your list items to accomplish this, but without a link or your code we cant say much more.

msmarti
11-04-2011, 04:16 AM
Oh....LOL A link would help!!

frugalwallets.com

I don't know how to fix validation errors. LOL

Excavator
11-04-2011, 04:30 AM
Yes, a link does help :)

Like I said before, what you put in a containing element needs to actually fit in it.
At 990px width, your #subnav is too narrow for 1030px wide ul#menu-bottom-menu.

See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

msmarti
11-04-2011, 05:07 AM
Is this due to the images I have in my sidebar boxes?

Can't I just adjust the width and height?

Excavator
11-04-2011, 05:20 AM
Is this due to the images I have in my sidebar boxes?

No.



Can't I just adjust the width and height?
You could adjust the width of your whole site to accomodate the menu.
Or,
You could reduce the padding on the anchors to narrow the menu till it fits...
Try making these changes highlighted in red -


#subnav li a {
color: #663300;
border-right: 1px solid #;
border-left: 1px solid #663300;
display: block;
/*padding: 9px 16px 8px 15px;*/
padding: 9px 12px 8px 12px;
position: relative;
text-decoration: none;
}

msmarti
11-04-2011, 05:29 AM
Ok I did that.....I don't really understand css, what is that suppose to change?

msmarti
11-04-2011, 05:31 AM
I see where it made my tabs line up, but it looks a little off now and at top.

Excavator
11-04-2011, 05:32 AM
Ok I did that.....I don't really understand css, what is that suppose to change?

Each anchor (link) is the width of the text plus the left and right padding you've put on it.
That makes each li the same width as the anchor it contains.
All the li's combined width is how wide your ul is.
Width of the ul cannot exceed the width of the containing element you've put it in or it will drop an li to the next line to make room.

Excavator
11-04-2011, 05:33 AM
I see where it made my tabs line up, but it looks a little off now and at top.

Yes, it's not a very good menu.
Play with that padding a bit and see if you can adjust it more to your liking.

msmarti
11-04-2011, 05:34 AM
http://i4.photobucket.com/albums/y107/msmarti/Capture.jpg

Excavator
11-04-2011, 05:59 AM
Push that #header down with a little bottom margin on #nav.
Like this -
#nav {
clear: both;
color: #509AC9;
font-family: 'Oswald',arial,serif;
font-size: 11px;
margin: 6px 0 0;
overflow: hidden;
width: 990px;
}

msmarti
11-04-2011, 06:05 AM
Those bags are coded......If I move the header down it will mess up where the Icons on the bags are won't it?

Excavator
11-04-2011, 10:45 AM
You could adjust it from the heights too. Try this -



#nav ul {
height: 38px;
background: #f00;
width: 100%;
}
#subnav ul {
height: 38px;
background: #f00;
width: 100%;
}


Background color just makes it easier to see what's going on.

msmarti
11-04-2011, 02:34 PM
Do you remember what my code was before I made these changes?

#subnav li a {
color: #663300;
border-right: 1px solid #;
border-left: 1px solid #663300;
display: block;
/*padding: 9px 16px 8px 15px;*/
padding: 9px 12px 8px 12px;
position: relative;
text-decoration: none;
}

After I made these changes (above post) it threw off my banner and now I can't get it back to the way I had it.

Instead....I was sent a notice I got an infraction for trying to fix my website.

Excavator
11-04-2011, 03:17 PM
Do you remember what my code was before I made these changes?

#subnav li a {
color: #663300;
border-right: 1px solid #;
border-left: 1px solid #663300;
display: block;
/*padding: 9px 16px 8px 15px;*/
padding: 9px 12px 8px 12px;
position: relative;
text-decoration: none;
}

After I made these changes (above post) it threw off my banner and now I can't get it back to the way I had it.

Did you even try giving those ul's a height?
That line highlighted in red is your original padding. The /* and */ just comment it out.
You don't have a backup of your original??? You should always have a backup to restore from.



Instead....I was sent a notice I got an infraction for trying to fix my website.
You should probably read the rules (http://www.codingforums.com/rules.htm) and post guidlines (http://www.codingforums.com/postguide.htm).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum