I have this 3x chunk of CSS serving 3 of my HTML Divs, the actual problem is that the code is repeated three times with only one change, that ofcourse is the background color of the divs: background-color: #xxxxx; my question, is how would I go about not repeating this 3x block, but only keep 1 block but the color change on each of my Divs is different for each of these offers.
Is this even possible, or am I going about it the right way at the moment?
.BlueOffer {
width: 300px;
height: 25px;
background-color: #0099ff;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.OrangeOffer {
width: 300px;
height: 25px;
background-color: #F90;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.GreenOffer {
width: 300px;
height: 25px;
background-color: #66FF00;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
The only change is: background-color: #0099ff;
HTML Code follows:
<div class='GreenOffer'>GREEN OFFER</div>
<div class='OrangeOffer'>ORANGE OFFER</div>
<div class='BlueOffer'>BLUE OFFER</div>
There's no need for multiple classes. Just define the common properties up front, then specify the unique ones individually:
.BlueOffer, .OrangeOffer, .GreenOffer {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.BlueOffer {
background-color: #0099ff;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
You can use more then one class on an element.
<div class='Offer GreenOffer'>GREEN OFFER</div>
<div class='Offer OrangeOffer'>ORANGE OFFER</div>
<div class='Offer BlueOffer'>BLUE OFFER</div>
.Offer {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.BlueOffer {
background-color: #0099ff;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
In addition to the other answers, which are great, you could use an "ends with" selector:
[class$=Offer] {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.BlueOffer {
background-color: #0099ff;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
I prefer a more hierarchical CSS selector approach, one that also tries to avoid undesired changes:
.offer {
width: 300px;
height: 25px;
/* ... etc ... */
}
.offer.blue{
background-color: #0099ff;
}
.offer.green{
background-color: #66ff00;
}
You apply it the same way:
<div class="offer">Standard Offer</div>
<div class="offer green">Green Offer</div>
However, the difference is, the css selector .offer.green selects elements that have both the offer and the green class.
Having just...
.green{ /*...*/ }
could cause problems if you some OTHER element on your page you also want to have a green color but it's slightly different in some way. Perhaps green text and not a green background. Ouch, imagine if you had that bug? Green text on a green background? =)
You could use...
.offerGreen{ /*...*/ }
Your introducing more writing than necessary. While relatively insignificant, it will also increase the size of your page because...
<div class="offer offerGreen"></div>
is more characters than...
<div class="offer green"></div>
although it is just text and with gzip compression, the practical impact is not worth optimizing for unless you're uber optimizing.
I hope that helps!
Cheers!
Use multiple classes
.offer{
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px solid #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
/*or you could use
border-radius: 15px 15px 0 0;
*/
}
.Blue{background-color: #0099ff;}
.Orange{background-color: #F90;}
.Green{background-color: #66FF00;}
And apply it them
<div class='Green offer'>GREEN OFFER</div>
<div class='Orange offer'>ORANGE OFFER</div>
<div class='Blue offer'>BLUE OFFER</div>
Try using more than one class.
CSS:
.offer{
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.green {
background-color: #66FF00;
}
HTML
<div class='offer green'>Green OFFER</div>
you can either have multiple classes per object or have a block apply to more than one class:
.OrangeOffer, .BlueOffer, .GreenOffer {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
.BlueOffer {
background-color: #0099ff;
}
To prevent repeating CSS code is possible to use CSS framework like LESS or SASS for example. You can use with them variables, nesting, functions, they have nicely made inheritance and you can use mixins too.
http://lesscss.org/
http://sass-lang.com/
There are many other CSS frameworks too, so its your choice. But I recommend CSS FW.
Related
I have a div block with an image, a heading and a paragraph. I want to change the background-color and the text color of that div when i hover on it but only the background-color changes, the color tag is simply ignored. How can I fix this?
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
color: #24252a;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
NOTE: I am still very new to programming with css, and I am doing this for a school project.
PS: some of the names are written in german, as it is my native language.
Have a great rest of your day!
Lucien
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
I have a set of DIVs like so:
<div class = 'tag'><a href='#'>gifts for him</a></div>
And the CSS looks like this:
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
Basically I want them to look like the following (gifts for him as an example hover):
However mine look like this:
There is no gap and the hover ignores the padding (I'd like the hover to colour right up to the edges if possible).
If I add margin: 2px I get this, which is even worse:
What have I done wrong?
Thanks!!
i have make for you a fiddle.
DEMO
your css is wrong:
it should look like this:
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
margin-right:5px;
}
.tag a{
color: #666;
text-decoration: none;
}
.tag:hover {
background-color: #a5c5da;
cursor:pointer;
}
.tag:hover a{
color:#FFF;
text-decoration: none;
}
In your CSS, you need to give the .tag alone a margin, not .tag a. Try adding this line:
.tag { margin: 2px; }
Also, give your .tag a a height and width of 100% - this will fill in the entire container:
.tag a { height: 100%; width: 100%; }
In your current CSS, you're giving both the div containing the anchor tag as well as the anchor tag styling, but you only need to be giving it to the .tag div in order to space out the containers.
try this
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
margin:2px;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
height: 100%;
width: 100%;
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
<div class = 'tag'><a href='#'>gifts for him</a></div>
Try with this used only single
gifts for him
Demo:http://jsfiddle.net/stanze/hkkLz0re/
I have a menu where each link is a div box. This div box have a gray border-bottom, however, when the link is visited it turns black. I just can't figure why.
On the following image I've clicked the Rediger profil and Log af links.
JSFiddle: http://jsfiddle.net/LpGbT/
HTML
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
<div class="design_sidebar_menu_item">Besøgende</div>
<div class="design_sidebar_menu_item">Mine favoritter</div>
<div class="design_sidebar_menu_item">Rediger profil</div>
<div class="design_sidebar_menu_item">Log af</div>
</div>
CSS
a {
text-decoration: none;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
}
.design_sidebar_menu_item:hover {
color: white;
background-color: #a6242f;
}
You may define a copied version of your div selector with a :visited suffix in order to set new colours for visited objects.
Aldo div classes are prefixed with a dot (.) instead of a sharp (#) character. Just a reminder. :)
.design_sidebar_menu_item:visited {
border-color: <your_color>;
}
If it doesn't harm your design etc. I would suggest this:
HTML:
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
Patrick Reck
Besøgende
Mine favoritter
Rediger profil
Log af
</div>
CSS:
div#design_sidebar a {
text-decoration: none;
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
display: block;
}
div#design_sidebar a:hover {
color: white;
background-color: #a6242f;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
EDIT:
How about adding:
a {
text-decoration: none;
display: block;
border-bottom: 1px solid #d6d6d6;
}
And removing border-bottom: 1px solid #d6d6d6; from .design_sidebar_menu_item {...}
The others will need links around them for this to work.
It doesn't..
I changed border-bottom color to 'green'. Now you have a clear view.
Check jsFiddle : check it out
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #00FF00;
}
What i have made so far is here http://jsfiddle.net/cmRHp/1/
<div class="tv">13.3"</div>
and i want to make exactly like this
Those aren't actual rounded borders, so you probably have to use 2 elements.
.tv {
position: relative;
width: 200px;
height: 150px;
margin: 50px auto 0;
background: black;
color: white;
font: bold 300%/3.6 sans-serif;
text-align: center;
border-bottom-right-radius: 15px 70px;
border-top-right-radius: 15px 70px;
border-top-left-radius: 15px 70px;
border-bottom-left-radius: 15px 70px;
}
.tv-inner {
background: black;
height: 180px;
margin: 0 15px;
position: relative;
top: -15px;
border-bottom-right-radius: 70px 15px;
border-top-right-radius: 70px 15px;
border-top-left-radius: 70px 15px;
border-bottom-left-radius: 70px 15px;
}
<div class="tv">
<div class="tv-inner">13.3"</div>
</div>
http://jsfiddle.net/cmRHp/6/
The only answer I can find to my problem is clear the float - but I have non. So hope you can help with another answer :-)
Here is my code, and I am trying to make the parent div of a button follow the expansion done by the padding.
<div class="button">
add
</div>
And css
.button {
background-color: #ccc; }
.button a {
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
width: 120px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 59px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
clear: both;
}
And here is an example of it to play with http://jsfiddle.net/zNLVZ/1/
Change your css to this:
.button {
background-color: #ccc;
}
.button a {
display:inline-block;
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
clear: both;
}