So im desperately trying to get my head round CSS but the damned thing doesn't work how i think it should Does anybody of a good site for me pestering people with extreme newbie CSS questions? Would anybody here mind me pestering them with the basic of basics? for a quick example: <div class="button"> <a href="index1.html">Old Site</a> </div> Im trying to make a class called button and use an external style sheet to customise whatever is inside the class, at the moment just a link. On the stylesheet i have .button{ color:red; text-decoration:none; { In theory that should turn the link text red and remove the underline hyper links have yes? As currently it doesn't but it will happily turn anything else in that class red as long as it isn't a link. Any help either way would be hugely appreciated.
.button a Try that instead Because the XHTML hierarchy is: div -> a Simply applying styling rules to .button won't necessarily affect the <a> tag. Hence you need to be more specific with the CSS selector and then it works.
Or: <a class="button" href="blah"></a> Don't put it in a DIV if its already in something you can position.
thank you both. .button a - was exactly what i was after.. zoon, you sorta lost me there. If i try it how i think you mean it doesn't work. Why exactly shouldn't i put it in a div?
Both of these should work the same: Code: .button a{ color:red; text-decoration:none; { <div class="button"> <a href="index1.html">Old Site</a> </div> Code: .button{ color:red; text-decoration:none; { <a class="button" href="blah"></a> Either will work. The reason I suggested not to put your link in a DIV.... In the document model every HTML tag becomes a container, which you can manipulate in a certain manner. If all you want to do is control the colour of your hyperlink then you should put them ALL in a single DIV, or just not bother, and manipulate the hyperlink tag instead. The only real reason I suggest this, is because it adds unnecessary code to your page and makes it larger. You may think "oh but everyone has broadband" ... this is true, but for websites when they get huge, with 10,000 - 20,000 hits a day, saving a few bytes quickly adds up into a HUGE bandwidth saving Of course, if you NEED a DIV around your hyperlink tag, then ignore me, I was just attempting to help you reduce complexity, but without knowing why you need it, it was a shot in the dark
Yep that's definitely true. Certainly if it's just a one-off link I'd do this as well. Usually though I have multiple links in a particular <div> or <ul> section (nav bar, content area, sidebar etc) hence then I just go down the route of styling them via selectors: #ContentArea a etc. I agree that for one-off links it's definitely best to do what you suggested.
thanks for taking the time to explain that to me zoon, makes sense now. I was just seeing if i could style that 1 link only and leave other links alone, purely to see if i could do it or not. snaver, cheers for the link, looks interesting, will give it a good going through.
You're very welcome. In that case you're perhaps better to do something like: .linkstyle1 { some: formatting; } .linkstyle2 { other: formatting; } <a class="linkstyle1">one link</a> <a class="linkstyle2">another link</a> Adding the DIV around that definitely adds you nothing if its just for one single link If you're using Firefox for your daily browsing, grab the FireBug addon. It is indispensable for CSS troubleshooting.
i got a new and extremely vexing problem. I updated chrome to the newest version and all of a sudden i get a problem on my image page. images The empty box on the nav bar has appeared out of nowhere and has somehow decided to link itself with the picture, also the text describing the image shouldn't be linkable either (i do like it thou just wasn't intended) I have run that page through many browsers and it only appears in a select few, newest chrome, firefox on linux (not windows) and another one from linux that i have never heard of. It seems the code for the image is leaking through to whatever is underneath, in this case being the nav bar. I just don't get why, all the tags are ended properly. When viewing source code of that page in chrome my code is all out of whack and looks nothing like it does in most other browsers.
Can you screenshot how it looks wrong and post it here? Not that I know how it should look and what is hapenning, but it appears to render fine here anyway.
oops yeah that would help wouldn't it heh what it should look like what it looks like in chrome I know it's not just my pc as its happening both of my pc and my work pc.
im grinning like a right idiot now, got it fixed, was just a missing > <a target="_blank" href="251010site.jpg"> <img src="251010site.jpg" width="110px" height="90px" </a> </div> just before the </a> i didn't close off the img src.
