I am playing around with a real basic website that I am using as a learning tool and I am trying to figure out the proper way to style two completely different links. For one link it is styled as follow: . #toppics { clear:both; /* make sure this is past both columns */ padding:2em 0 1em; margin:0 2em; border-top:2px solid #400; } #toppics ul { list-style:none; padding-bottom:1em; } #toppics li { display:inline; vertical-align:top; } #toppics a { width:300px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #toppics a:active, #toppics a:focus, #toppics a:hover { background:#800; } Code (markup): And the second link is styled like this: . a.click { margin: 0 auto; margin-bottom: 1.5em; max-width: 25em; background: #CC0000; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: .75em 0 .75em 0; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; -webkit-border-radius: .5em; border-radius: .5em; } a.click { max-width: 22em; color: #FFF; text-decoration: underline; } Code (markup): For whatever reason (other than being a noob at this) it does not want to work right. The second link displays exactly like the first and that's where I am having a problem. Can someone tell me what I am doing wrong and maybe direct me to a place where I can learn the proper way to accomplish this? Thanks in advance . . .
Do you have this up and running somewhere? It's either a problem with cascade, it you have an error in the CSS. if that's a copy paste, just before you declare the a.click,there is a period which shouldn't be there. And how does the HTML look? There's no limit on code here - paste EVERYTHING that might be relevant - that includes complete HTML and CSS
Thats why you need to assign id on your link if it is unique to avoid mix-up, <a href="" id="foo" class="click"></a> #foo { margin: 0 auto; margin-bottom: 1.5em; max-width: 25em; background: #CC0000; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: .75em 0 .75em 0; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; -webkit-border-radius: .5em; border-radius: .5em; } #foo { max-width: 22em; color: #FFF; text-decoration: underline; } Code (markup):
PoPSiCLe, I do have the site up and running it here and my full HTML is: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > <link rel="stylesheet" href="screen3.css" media="screen,projection,tv" > <title> Title Of The Site Will Go Here </title> </head><body> <div id="wrapper"> <h1> <a href="/"> Site Title <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="contentWrapper"><div id="toppics"> <div class="advert"> Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="click"> <a href="*/*"> Click Here Now To See More Of What We Have For Sale </a> </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <div class="click"> <a href="*/*"> Click Here Now To See More Of What We Have For Sale </a> </div> </div></div> </div> </body> </html> Code (markup): And the full styling is: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } /* fix for legacy iOS and windows Mobile devices */ @media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } /* fix for HDX displays like the Kindle Fire HDX */ @media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px) { html { font-size:200%; } } body { min-width:55em; /* for pre CSS3 capable browsers */ font:normal 85%/150% arial,helvetica,sans-serif; color:#FFF; background:#333; } .heightWrapper { background:#600; } #wrapper { margin:0 auto; max-width: 879px; text-align:center; border: 1px solid #CCC; } h1 { padding-left:2em; font-size:100%; /* prevent FF reverse inheritance bug */ } h1 a { position:relative; /* so we can absolute position span over this */ display:block; padding:40px 0; /* 40px top + 40px bottom + 64px line-height == image height */ text-decoration:none; font:bold 60px/64px arial,helvetica,sans-serif; color:#FFF; } h1 span { position:absolute; top:0; left:-26px; width:877px; height:170px; background:url(/images/header.jpg) center left no-repeat; } .advert { padding: 2em 1em 2em 1em; font-size: 1.6em; line-height: 1.25em; text-align:center; } h2 { padding: 1em 0 1em 0; font:bold 175%/145% arial,helvetica,sans-serif; } #contentWrapper { width:100%; background: #000; } #toppics { clear:both; /* make sure this is past both columns */ padding:2em 0 1em; margin:0 2em; border-top:2px solid #400; } #toppics ul { list-style:none; padding-bottom:1em; } #toppics li { display:inline; vertical-align:top; } #toppics a { width:300px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #toppics a:active, #toppics a:focus, #toppics a:hover { background:#800; } #toppics img { display:block; margin:0 auto 0.5em; max-width:100%; } .click { margin: 0 auto; margin-top: 1em; margin-bottom: 1.5em; max-width: 25em; background: #CC0000; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: .75em 0 .75em 0; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; -webkit-border-radius: .5em; border-radius: .5em; } a.click:link { max-width: 22em; color: #FFF; text-decoration: underline; } #footer { padding:1em; text-align:center; } @media (max-width:50em) { body { min-width:192px; /* CSS3 possible, so let it go narrower */ } #contentWrapper { float:none; width:auto; } #content { margin:0; padding:1em 0.5em 0; } h2 { padding-bottom:0.66em; } #toppics { padding:1em 0 0; margin:0 0.5em; } #toppics a { padding:0.5em; } } @media (max-width:660px) { h1 { text-align:center; padding:0; } h1 a { padding:0.33em 0.167em; font:bold 300%/150% arial,helvetica,sans-serif; } h1 span { display:none; } } @media (max-width:340px) { #toppics a { width:auto; margin:0 auto; -webkit-box-sizing:padding-box; box-sizing:padding-box; } } Code (markup): If you happen to look at the site, if you will go down to the BIG red button and mouse over the text, you will see the problem I am talking about. I plan to use this simple design for a little side business that my wife is starting and I just cannot figure out what I am doing wrong. karjen, thanks for your suggestion. I tried it and that didn't seem to fix the problem unless I am doing something terribly wrong. many thanks for your help . . .
I made the change you suggested to my CSS and it did not fix the problem. In the event that you did not look at the actual page, when you mouse over the text in the big red button (css .click), it still shows the small dark red background as it does with the puppy images around it. The problem is that I do not want the dark red background around the text of the red button (css .click). This is what I get when I mouse over the text: and this is what I am trying to get it to do: I hope that I am making sense. Many thanks . . .
You haven't really grasped the "cascading" part of stylesheets yet, have you? In the #toppics a:active|hover|focus rule, you're setting the background. That will affect EVERY SINGLE A within #toppics (basically every single link). Unless you set it to the actual background within the .click-rule, or just background: transparent; Something declared will always affect every item it matches, unless you remove it again on a later rule. That means actually changing the specific rule again.
Apparently I don't have a grasp on much of this anymore. I use to think I did, but between you and deathshadow I am finding out that I don't really know squat. If I understand what you are saying about the #toppics a: active rule, no matter what I do, nothing will change whatever it is styled to do. Correct? So I can either change the rule by changing background within .click or can I just close the #toppics before using .click then utilize #toppic again? Something like this: <div id="contentWrapper"><div id="toppics"> <div class="advert"> Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> </div> <div class="click"> <a href="*/*"> Click Here Now To See More Of What We Have For Sale </a> </div> <div id="toppics"> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> </div> <div class="click"> <a href="*/*"> Click Here Now To See More Of What We Have For Sale </a> </div> <div id="footer"> Copyright Information </div> </div> </div> </body> </html> Code (markup): Am I understanding you correctly on this or should I maybe take up knitting instead? LOL Thanks again . . .
The issue you are running into is called "specificity" -- a parent element's selector takes precedence over a child element's, ID's take precedence over classes, classes take precedence over tags. By saying "#topic a" any anchors that don't include that parent #topic at the start -- like your ".click" class -- will use #topic A's values BEFORE anything else. The id and parent takes precedence. Though in your case, I'm not 100% sure I'd be wasting a DIV around that anchor given what you're doing for style. Also, get some blasted closing comments on your DIV, it's really hard to tell WHAT's being closed without constantly scrolling up and down! Click is also damned vague, something like "readMore" would be more helpful when others look at the code or when you come back to this in a year. I would also not be using pixel metric fonts, condense the margin properties, get a proper fallback font family in there, not use the numbered font-weights as they are unreliable cross-OS, and probably lose the goofy webfont bullshit whilst at it... particularly for a sans-font that's so close to Arial or Helvetica does it REALLY even matter? It's also improper to state a decimal value without the leading zero. (though I think all browsers have finally caught up to allowing that, I still don't do it) So lose the DIV: <a href="*/*" class="readMore"> Click Here Now To See More Of What We Have For Sale </a> Code (markup): and style JUST the anchor... and include the parent selector so you can override the specificity: #toppics .readMore { display:block; max-width:25em; margin:1em auto 1.5em; padding:0.75em 1.5em; text-align:center; font:bold 200%/100% arial,helvetica,sans-serif; color:#FFF; background:#C00; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 0.75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 0.75em 0.1em #CCC; -webkit-border-radius: 0.5em; border-radius: 0.5em; } Code (markup): Though also, why do you have two p's in topic? Much less your recent post has one p and two c's? Keep yer spellin' straight! Oh, duh, it's "top pics" -- and that's why you camelCase!
As always, I appreciate your input deathshadow, but I got to ask . . . what the hell is camelCase? I think I understand "specificity" . . . # is parent and takes priority over 'class' which is child. Now let me ask you this: I have always been under the impression that a specific #whatever is something that should only be used once. If it needs to be used more than once, then it should be 'class=whatever'. Is this valid? As far as closing comments go, that is a new habit that I need to develop and I will work on it. I followed your suggestions and I guess I have to apologize for not having more imaginative labels . . . ReadMore vs click. I will work on that as well. I also changed toppic to just plain old pic so it hopefully won't be so confusing. Believe it or not I do keep my spelling pretty accurate and straight. Again, thanks so much for your help. I appreciate all the input I have received. Regards . . .
Well, you have it quite correct in that example: camelCase - it's basically upper-casing each beginning letter in multi-word names. Starting with a lower-case letter (although there are different opinions on that as well). Personally I'm not really a fan of camelCase, I prefer splitting up variable-names using underscore instead (so it would be camel_case) - but that is up to you, and doesn't really matter, as long as you keep it consistent. Nothing is more infuriating than not getting why something doesn't work, until you triplecheck everything and find that you've used the wrong variable-name, or class-name or or or. As for "click" as a class-name, it sort of defeats the purpose of separating content and styling. "Click" is a descriptive word, same as "red" or "underlined" which, if you change the CSS lose all meaning. "Why do you have a class named .red which contains color: brown; and text-transform: uppercase;"? Therefore, giving classes a more descriptive name, and by that I mean what they're supposed to be _for_ nor what they contain, is usually smarter.
I prefer it as it's what most of the older programming languages I used ALLOWED since a lot of language don't allow underscores or hypens in variable names. It's also SUPPOSED to be the standard for JavaScript variable names via most style guides, which is why I try to consistently use it whenever possible... Sadly it's often not a good idea -- take SQL table names where you accidentally move to windows and boom, you lose case sensitivity. That said I usually consider camelCase to be for the "local name" and underscores to separate scopes. Take a form for example, where I'll often have <form action="/contact" method="post" id="contact"> Code (markup): For the field ID's inside the form, to reduce namespace conflict probabilities and to keep it clearer, I'll often have: <label for="contact_firstName">First Name:</label> <input type="text" name="firstName" id="contact_firstName"> <label for="contact_lastName">First Name:</label> <input type="text" name="lastName" id="contact_lastName"> Code (markup): So mixing and matching, but with a REASON for doing so. They key being that in doing so, I do it in a consistent manner. When I use the underscore what's before it is the parent ID, what's after it is the element name. As @PoPSiCLe most wisely posted: this.... THIS.... THIS!!! Hey Zeus H mammary plowing Christmas THIS!!! Pick a technique that works in whatever language you are working in - - PREFERABLY one recommended by the language creators themselves, and STICK WITH IT. There is NOTHING more annoying than trying to work with code where there's zero reason nor rhyme to how it's done. Also beware that some languages mix all of them for a reason -- see php, where a standalone function is all lower-case (htmlspecialchars, strrstr, addslashes). A function from a specific library has the library name underscored before it (array_combine, array_diff, mysql_connect), starting with a capitol letter and camelCase means it's a class definition (ArrayIterator, PDO, PDOStatement), and all caps means a define, object constant, or superglobal. Which is why it gets annoying when they then go and ignore that... such as with mysqli. That SHOULD be MySqlI, but for some reason they up and decided "nope". (probably because they thought the mouth-breathers who can't grasp how to use the object version instead of the idiotic procedural wrappers would be confused by that)