PDA

View Full Version : Make A Tab Like On This Site



tomyknoker
Apr 3rd, 2007, 04:10 PM
I like the menu tab at the very top of the screen, how do you achieve that using css? Any ideas? I just want to have one tab about as big as 'Nominate' and sitting about 20 pixels from the right hand side... If anyone can give me a clue would be much apprecaited!

karinne
Apr 3rd, 2007, 04:17 PM
Sliding Doors of CSS (http://alistapart.com/articles/slidingdoors)
Sliding Doors of CSS, Part II (http://alistapart.com/articles/slidingdoors2)

the_scyphe
Apr 3rd, 2007, 04:22 PM
I've found http://dynamicdrive.com has a lot of menu tabs, go there and see them . . .

Anyways I have some tips:
don't...

use css :hover syntax as it won't work in IE.

it is ok to...

make lists inline so they look like tabs.

karinne
Apr 3rd, 2007, 04:34 PM
Anyways I have some tips:
don't...

use css :hover syntax as it won't work in IE.


Might want to elaborate a bit on this but ... the :hover works in IE ... but just on links :D which is basically what you'll be using so ... you'll be fine.

tomyknoker
Apr 3rd, 2007, 04:41 PM
Hey guys... I'm not really creating a menu. It's just going to have a user's Name and LogOut option just thought it might look cool having it look like it's sitting in a tab... Thanks for that link karinne! Do you think it'll help me do what I want?

tomyknoker
Apr 3rd, 2007, 04:46 PM
Might want to elaborate a bit on this but ... the :hover works in IE ... but just on links :D which is basically what you'll be using so ... you'll be fine.karinne thought you might know this as I've seen you round here before and you've answered some great questions :)

Any idea how to create that border around the table? Should I just add another table?

karinne
Apr 3rd, 2007, 05:00 PM
Something like this?


table {
border: 1px solid #009;
}

tomyknoker
Apr 3rd, 2007, 05:04 PM
Yea that doesn't work, as it then put's borders on cells and the whole deal... I guess the only option is to wrap it inside another table... But I know that's the incorrect semantic web way :)

karinne
Apr 3rd, 2007, 05:12 PM
Well ... you could to


table {
border: 1px solid #009;
}

table td {
border: 0;
}

no?

iLLin
Apr 3rd, 2007, 05:14 PM
Something like this?


table {
border: 1px solid #009;
}

Should only wrap around the outside of the table and not do tr's and td's. What doc type are you using?