...

View Full Version : CSS tabs



titaniumbean
08-17-2005, 12:27 PM
Hi I am looking at changing some example css tabs I found on the web.

http://www.cwprint.co.uk/Pic/linksquestion.jpg


I want the foremost tab not to have a line underneath it. The tab itself only has borders top right and left. Not bottom. The bottom line is (bear with me) the top of the main area below.

I had the idea of enlarging the tab slightly in height (but so the top stays still and the bottom bit of the tab moves down). Then setting the z index value to higher than that of the main area; whilst also keeping the main area in the same place so the tab is slightly overlayed and in just the area where the tab is the main areas top border is dissapeared so you get the affect I want.

Sorry for how confusing that is but I'm just typing whilst thinking i'm sure i'll read this back in a minute and find it makes no sense!


Any ideas what exactly I have to change in my css? And if it's possible to get the main area to stay still whilst moving the tab down slightly.

http://www.cwprint.co.uk/Pic/cwsite.css/



Thanks in advance


titaniumbean.

Tristan Gray
08-17-2005, 01:54 PM
try doing this to your list items in tabs

#tabs li {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}

You've got so many border settings that it is hard to tell what is taking precedent. I would remove all your border settings on the tabs until your borders disappear then add those I just gave you. If that doesn't work post again. Should be able to figure this one out.

titaniumbean
08-17-2005, 02:23 PM
I tried what you suggested, though I don't understand where you are trying to go with it.

Below is what you get.

http://www.cwprint.co.uk/Pic/linkspic2.jpg

The border settings you changed, I want to keep. And I want to overrule the border of the main section below but just so that it's only over ruled at the point where the foremost tabs bottom is, not for the rest. If you think of a filing system when you choose a certain tab it is flush and the rest are behind the page. That is exactly the look that I want to try and get.


Any other ideas? Or anyone able to implement the idea I had?


thanks in advance


titaniumbean.

Tristan Gray
08-17-2005, 02:43 PM
Alright well I gotta say that the code is a little messy so I am sure I am missing something but try adding this to your hover attributes. You seem to have hover declared in more than one place though so you might want to fix that.

Basically make your padding-bottom on hover a few pixels greater, this may push things down in which case we will try something else. Now if it doesn't overlap still you will need to use z-index.

Z-index uses an integer value and 0 is the default. I'd probably just go with z-index: top; to make sure that it is on top of everything else but anything above 0 should technically work.

I have tried to help but don't have time to go through all your code but be careful of things like this:

#tabs a:hover {background: #FFFFCC;
position: relative;
top: 0;
padding: 5px 4px 6px 10px;
margin-top: 0px;}
#tabs a.active {
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;

padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;}
#tabs a.active:hover {
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFFFCC;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;}

titaniumbean
08-17-2005, 02:57 PM
Whose is that messy code?? Disugsting I tells ye. :eek:

First things first, will print out my css code and tidy it up, i'd been just changing it constantly and haven't really overviewed it all so will do that and then look at what you were saying. Thanks very much.


titaniumbean.

Tristan Gray
08-17-2005, 03:10 PM
Yeah I hear you, I find when you run into a snag in CSS the tendancy is to just keep trying things and then a half hour later you can't remember what half the stuff is doing there anymore. heh.

titaniumbean
08-17-2005, 03:21 PM
lol yup i've slimmed the code down now to :-


#tabs a
{
position: relative;
top: 0;
margin: 1px 2px 0 0;
float: left;
background: #EDEBE3;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
border-left: 1px solid #AAA;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;
}
#tabs a:hover
{
background: #FFFFCC;
margin-top: 0px;
}
#tabs a.active
{
margin: 0 2px 0 0;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
}


I hope that's better. I'm going to go back and look at what you said; and try that and will come back to you.


titaniumbean.

titaniumbean
08-17-2005, 03:25 PM
I did what you said and created the code below :-


#tabs a:hover
{
background: #FFFFCC;
margin-top: 0px;
padding-bottom: 10px;
z-index: top;
}


Even with it set to 10px, nothing changed/moved/morphed/dissapeared etc on the site.

Any other ideas?

titaniumbean.

Tristan Gray
08-17-2005, 04:12 PM
Try adding display: block; so that it is an actual block of that colour. That way it really should overlap that nasty little border. I don't think there is anyway to actually change the item's height per se so it will have to be done with padding and display block I think.

mrruben5
08-17-2005, 04:26 PM
Try adding a 1px line as background, then when the tab is selected use the background color for border-bottom :P

titaniumbean
08-17-2005, 04:54 PM
Neither of those ideas work! This is so very annoying. I think i'm going to move on and leave it as a problem to come back and fix another time maybe when I know more about CSS and I can ask more people!!! :-p Keep your ideas coming though...
or if you really fancy emailing me @ this address (titaniumbean@mac.com) and I'll send you the stuff and you can always have a look at it yourself if you're into that sort of thing! :)

thanks

titaniumbean.

Tristan Gray
08-17-2005, 05:07 PM
Yeah, I know it is possible and it must be something really stupid and simple but I'm at work right now. I'm suprised displaying as a block and then increasing the bottom-padding (which effectively changes the height when displaying as a block) did not work. Are you sure it isn't just that you have the link properties declared in the wrong order? Is there not a bug where hover and active and stuff don't always work properly if you do not state them in the correct order? I seem to recall that happening to me when I was just trying to change link colours and text-decoration.

titaniumbean
08-17-2005, 05:36 PM
Link properties declared in the wrong order eh? You know alot more than me so I really don't know.


But as i've said all help whenever it comes is very appreciated.


titaniumbean.

mrruben5
08-17-2005, 05:59 PM
wrong order:
a.test {color:red}
a {color:black}all links will appear in black.

good order:
a {color:black}
a.test {color:red}

titaniumbean
08-17-2005, 06:11 PM
aaaah i c!

thanks.


oooh I have another question.

I have two images, one above the other on the left hand side (LHS) of the page. I have one image on the RHS of the page. All done by css (same horizontal height). I want 2 more images one next to the other (so in other words : inline) in the middle of the page. What's the best way with css to do this. I was looking for some sort of
<div id="midbadges">position: inline</div>

http://www.cwprint.co.uk/Pic/badges%20question.jpg
For some reason the broken link is the badge I want to move (i've fixed the link but forgot to update the screenshot, and it's not actually important). I want it in the middle can someone help?

I'm not exactly sure how to do this best though. can someone help?


titaniumbean.

titaniumbean
08-17-2005, 06:22 PM
Regarding the order my declerations should be in....


Having gone through i'm not exactly sure which order some of my things should be in. I'll just put the titles up not the code and you tell me if any of them are in the wrong order please!


the ones i'm unsure about are :-



#tabs
#tabs ul
#tabs li
#tabs a,span
#tabs span
#tabs a
#tabs a:hover
#tabs a:active

#subtabs ul
#subtabs li
#subtabs li:first-child
#subtabs


I'm assuming the last subtabs should be at the top but other than that i'm confused on the main tab list if you get me.


thanks in advance for all the help!


titaniumbean.

mrruben5
08-17-2005, 06:49 PM
This will answer your question, as it covers all types of css selectors. (http://css.maxdesign.com.au/selectutorial/)

Oh, and the comma is used to apply properties to more elements.

so

#tabs li {background:red}
#tabs a {background:red}
can be written shorter like this:

#tabs li, #tabs a {background:red}
but not like this:

#tabs li, a {background:red}

Because that will style all hyperlinks to have a red background.

titaniumbean
08-19-2005, 12:22 PM
Ok cool i'll have a look at that, anyone got any more ideas on how to get rid of the line at the bottom of the tab/top of the main area. As of my questions on the rest of this thread?


thanks again in advance


titaniumbean.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum