help w/ css prob
- Started
- Last post
- 17 Responses
- liquid
http://www.brainjar.com/css/tabs…
ok....I am using the code from this page for the tabs....however... you see how there is a nice margin around the tabs... well mine is flush with the text...
am I missing something...I am using the same exact code....
- liquid0
http://webhead.liquidorb.net/mai…
heres the file.....I put the css that is in a separate file on the page for easy viewing....
the imgs are missing on purpose
- liquid0
I need a 15px left margin.... I tried that with the tabArea with left: 15px
the active tab seems to be the worst there is no margin at all... the inbox and statistics seem to have a left and right margin but no top margin....
this is the exact css from the brainjar site....I even checked their source on the page... and it is the same as this...am I missing something?
- liquid0
oh and the size of the tabs are 85x20
and there should only be 1pixel between the tabs...
any help is very very appreciated...
- shaft0
div.tabArea {
font-size: 11px;
font-weight: normal;
border-bottom: 0px;
padding-left:15px;
}
.tabArea a {
margin-right:2px;
border:1px solid #000;
background-color: #f0f0f0;
border-bottom-width: 0px;
padding: 2px 1em 2px 1em;
text-decoration: none;
float:left;
}
.tabArea a, .tabArea a:visited {
color: #808080;
}
.tabArea a:hover {
background-color: #c1be9c;
color: #333;
}..and drop class name "tab" in the a's, it's not necessary now
- liquid0
dude you are the man...thank you so much...I have been playing with this crap most of the day...
http://webhead.liquidorb.net/mai…
the relative size for the tab itselve...where is that set? I think if I need a larger navigation name this will work awesome...so my restrictive tab size wouldnt be a good idea...
but I do want to learn this...how would I set the size? I would like to give it a little more height....the width is fine..... 20px height....relative width is fine...
- shaft0
padding: 2px 1em 2px 1em;
this is each a's padding around the text clockwise from top, so you have 2px on top&bottom, and 'm' letter wide space at the sides.
If you want to set the height fast, just add
height:20px;It's almost 6AM, I'm going to bed. Yesterday I realized pure css design was more fun than I'd thought, so I am digging deeper into it - your http://www.brainjar.com/ link was a nice find, thanks ;)
- liquid0
thank you thank you......
heres some more
http://css.maxdesign.com.au/inde…
thats probably the best one I have seen out that explains everything from scratch
- liquid0
^bump
check this in IE and FF.... the active tab which should be main is not working in FF.....
any suggestions?
- liquid0
ok I posted the css that I am using on the actual page....
the active tab doesn't work for some reason in firefox...
- instantok0
you are referencing the element improperly...
try replacing this:
a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
background-color: #fff;
text-decoration: none;
font-weight: bold;
color: #333;
}----------------
with this:
.tabarea .activeTab, .tabarea .activeTab a, .tabarea .activeTab a:visited, , .tabarea .activeTab a:hover, .tabarea .activeTab a:active {
background-color: #fff;
text-decoration: none;
font-weight: bold;
color: #333;
}--------
you also do not need class="tab" on your links...your css does not have a tab class anyway...try to get in the habit of having your link styles in the order they are above (a, visited, hover, active) as well
- liquid0
heres your code instatok.... its picking up the bold only.....I removed the class in the html.....
and its not picking up anything in FF
- shaft0
This seems to work, also sent in an email.
a.activeTab, a.activeTab:visited, a.activeTab:hover {
background-color: #fff;
text-decoration: none;
font-weight: bold;
color: #333;
}
- liquid0
thanks for trying instatok
- instantok0
meh...that's what i get for not proof reading...you still have some extra code in there...check your mail
- liquid0
ok...... I am gonna get rid of the classes for the tabs except activetab and keep the div...its working.....so I dont want to screw with it....
what is the right way though? I mean both ways work.....
- instantok0
the right way (for a table-based layout) would be to eliminate the div...mixing tables and divs can get sticky...the div isn't doing anything there right now because the td functions as the container...so the div is just extra code for the user to download