Help Making Tabs Look Better With CSS

[CSGODeimos]

Hey,

If you scroll down on my practice site you'll see all those ugly looking blue rectangle tabs. Any ideas how I could make these look better? For some reason the text is grey on some and black on others too, which is confusing as hell. The text is centered in some and offset in others. I can post the CSS block in here if that helps too.

http://www.westnewtonsupply.com

Thanks in advance.

[DrByte]

When right-clicking on one of those boxes, my browser gives me an "Inspect" option to use to look at that box's HTML and CSS rules.

You'll see that they're using 'class="categoryListBoxContents"'.

So in your CSS you can go find ".categoryListBoxContents" (note: the "." means it's referring to a "class=" for whatever follows it), and make changes there. Or add your own ".categoryListBoxContents" section to the end of your stylesheet to override whatever was set for it earlier.

I suspect the "some are grey text" refers to your site being configured to display "previously clicked links" (which affects you in your browser, only) in a grey color. You could override this for just these boxes by defining a ".categoryListBoxContents a:clicked" in your stylesheet and setting its properties how you want them.

I'm intentionally not giving you the complete CSS here, cuz others are better qualified to give you specifics for that. I invite them to chime in.


In the meantime I hope this helps you get started ;)

[CSGODeimos]

When right-clicking on one of those boxes, my browser gives me an "Inspect" option to use to look at that box's HTML and CSS rules.

You'll see that they're using 'class="categoryListBoxContents"'.

So in your CSS you can go find ".categoryListBoxContents" (note: the "." means it's referring to a "class=" for whatever follows it), and make changes there. Or add your own ".categoryListBoxContents" section to the end of your stylesheet to override whatever was set for it earlier.

I suspect the "some are grey text" refers to your site being configured to display "previously clicked links" (which affects you in your browser, only) in a grey color. You could override this for just these boxes by defining a ".categoryListBoxContents a:clicked" in your stylesheet and setting its properties how you want them.

I'm intentionally not giving you the complete CSS here, cuz others are better qualified to give you specifics for that. I invite them to chime in.


In the meantime I hope this helps you get started ;)

I never got around to replying to this. Thanks for chipping in, this did help a lot. I'm currently struggling to make them clickable, not really sure where I would add the code. I did see a few tutorials online that said to use like.. .CategoryListBoxContent a:hover {padding:0 }; etc.. I tried that and it seemed to make the boxes either vanish completely with the text or it made the boxes smaller and still unclickable. I was doing this in the CSS which is probably the wrong place to do it right? Since that's more for styles/color/size etc, more than controlling what it does.

[DrByte]

display:block often helps to make a larger space clickable