Bizarre CSS Problem

Barks · 24 Oct 2012 at 17:02

I still can't get it to work, I'm going to stick with the code quoted in my last post as that does half the job. I'm just about ready to cry I've been working on this all day and whilst the website looks fantastic I still just don't get the code behind it.

I have no idea what the difference between li a. li a:link. a:link etc

I tried this but it doesn't work...

#buttona {
display: block; /* Makes it behave like a DIV by having it take the whole width of the screen and allows for better formatting */
list-style: none; /* Let's the menu have no gap around its border*/
padding: 0px; /* Removes the list dots to the left and also makes everything fit next to each other */
width: 500px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-decoration: none;
}

#buttona li a {
color: #265EAD;
padding: 5px 10px 5px 10px;
background-color: #FCFCFC;
}

#buttona li a:link {
color: #265EAD;
padding: 5px 10px 5px 10px;
background-color: #FCFCFC;
}

#buttona li:hover, #buttona li a:hover, #buttona li a:active {
color: #FFF;
background-image: url(../graphics/graphic1.png);
background-repeat: repeat;
}

Barks · 24 Oct 2012 at 18:07

If it's a single button then a single anchor would be fine, just give the anchor an ID and you wouldn't need to use a DIV element.

How do I create a custom tag for CSS.

So say I have a link on a page and I want it to have its own unique properties, how do I apply a tag such as the #buttona we've been looking at.

Barks · 24 Oct 2012 at 18:11

Figured it out.

Just wanted to thank you for all your help today. Much appreciated!

Varsh · 24 Oct 2012 at 19:30

Here's how the links work:

a - This is your anchor, as I'm sure you already know it lets you link to things
a:link - selects linked anchors
a:visited - selects visited linked anchors (like if you've been to the page before)
a:hover - selects linked actors when it's got a mouse pointer over it
a:active - selects the current linked anchor that has the mouse button pressed on or the same page

There's also another property you can use instead of ID and that's CLASS, only use CLASS if you have several elements on the page that require the same properties. Also unlike IDs that start with a "#", CLASSes start with a ".".

You can only have one ID of the same name per page but you can have many CLASSes per page.

Barks · 24 Oct 2012 at 19:52

I thought <a> was by nature something to do with links.

Are you saying I could have <b> or <c> or <d>.

Classes is what I used to solve the problem.

Varsh · 24 Oct 2012 at 20:55

a { } in CSS represents <a> in HTML.

If you would've used a CLASS then your #buttona would've been .buttona

Barks · 25 Oct 2012 at 13:45

Finally found the root of all my problems!

This is correct:

Code:

#buttonb a:link, #buttonb a:visited {
	text-decoration: none;
	color: #FFF;
}

but I was - in some cases - doing this:

Code:

#buttonb a:link, a:visited {
	text-decoration: none;
	color: #FFF;
}

Hence why I had conflicting CSS rules and a living nightmare trying to get the links to work properly!!!

The website looks gorgeous now, very pleased with myself. Thanks again for your help Varsh.