Is there a way to DRY this CSS up? Only difference is color?
div.base-text-gold {
position: absolute; bottom: 9px; color: #FED577; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-grey {
position: absolute; bottom: 9px; color: #D1D2D4; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
Separate out the colours into different CSS classes like so:
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.gold {
color: #FED577;
}
div.grey {
color: #D1D2D4;
}
and then simply apply two classes to the elements instead:
<div class="base-text gold">...</div>
You could try one of the lessCSS or dotlesscss
librarys available
You could create a "base class" base-text, and then just keep the colors in the "sub-classes":
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-gold {
color: #FED577;
}
div.base-text-grey {
color: #D1D2D4;
}
Of course, the disadvantage is that you will have to add 2 classes to your div's instead of a single one:
<div class="base-text base-text-gold">...</div>
My initial reaction is to tell you that it's probably not a good idea to specify colors in your CSS class names. At that point, it's really no better than inline CSS. You're better to go with .emphasized or .strong for the gold text, depending on your situation. And even then, you can just style and use <em> or <strong> tag. That said, how about I answer your question?
The answer is in attempting to never use the same declaration twice.
div.base-text-gold, div.base-text-grey {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-gold { color: #FED577; }
div.base-text-grey { color: #D1D2D4; }
You could inherit from a class "base-text" which doesn't define color.
Then you have two choices:
have a style="" next to it...
<style>
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
</style>
<html><head>[the style thingie above]</head><body>
<div class="base-text" style="color:BLARGH"> RAWR~ </div>
</body></html>
OR
inherit from classes gold and grey too
<style>
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.grey {
color: #999999;
}
div.gold {
color: #DDDD99;
}
</style>
<html><head>[the style thingie above]</head><body>
<div class="base-text gold" style="color:BLARGH"> RAWR~ </div>
<div class="base-text grey" style="color:BLARGH"> DADADEEEEE~ </div>
</body></html>
Well... one thing you could do is:
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-gold {
color: #FED577;
}
div.base-text-grey {
color: #D1D2D4;
}
And in each of your divs, just go:
<div class="base-text base-text-gold">This is the gold div.</div>
<div class="base-text base-text-grey">This is the grey div.</div>
Related
How to get the text wrapped under the points?
https://codepen.io/neginbasiri/pen/ZEGReRZ
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3
pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt">
Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13">
<span>3</span></sup> </span></p></div>
In the example switch should show under 16,000.
.bUhvVh {
display: flex;
margin-bottom: 20px;
width: 300px;
}
.iBQvHK {
color: #e40000;
font-size: 24px;
margin-right: 10px;
border: 1px solid red;
width: 20px;
}
.icon--icon--base--17 {
height: 1em;
min-width: 1em;
vertical-align: middle;
fill: currentColor;
}
.cPwDGx {
font-family: Ciutadella Regular;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
.enMiay {
float: left;
font-family: Ciutadella Medium;
margin-right: 4px;
position: relative;
color: #323232;
}
.dufgDt {
margin: 0;
font-family: 'Ciutadella Regular',sans-serif;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3 pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt"> Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13"><span>3</span></sup> </span></p></div>
</div>
Remove display: flex; flex: 1 from .cPwDGx.
Remove display: inline-block from .enMiay and add float: left for this element.
Update width to min-width for icon--icon--base--17. It will not shrink if text is larger.
Refer : https://codepen.io/bala_tamizh/pen/WNvyEPg
Hello i am a beginner in css and i want to recreate this:
this is my current start,i don`t know how to put the ' " '
#rectangle{
width: 100%;
height: 230px;
background-color:darkcyan;
display: block;
margin: 0px;
}
#rectangle p{
padding-top: 85px;
padding-left: 60px;
padding-right: ;
font-family: roboto_bold;
text-transform: uppercase;
margin: 0 auto;
display: block;
font-size: 38px;
color: aliceblue
}
`
Try to use a :before, something like this should give you an approximative result
#rectangle p:before {
content: '"';
position: absolute;
color: yellow;
font-size: 2em;
transform: translateY(-100%);
}
As a beginner the inclusion of other libraries or pseudo elements may be tricky. Here's a rather straightforward start.
.blue-box {
background: #2edfd2;
padding: 10px 40px;
width: 300px;
}
.lquote {
color: #ace941;
font-size: 60px;
height: 20px;
}
.underline {
background-color: #ace941;
height: 4px;
width: 20px;
}
.fine-print {
margin: 4px 0 0;
font-size: .6em;
}
<div class="blue-box">
<div class="lquote">“</div>
<p>Knowing I was adopted may have made me feel more independent, but I have never felt abandoned. My parents made me feel special.
<div class="underline"></div>
<p class="fine-print">Steve Jobs, 2009</p>
</div>
There can be many ways of doing this, one of which is that you can use icons.
Like I personally use fontawesome.
You can get many icons of different sizes just use them with an online css file.
http://fontawesome.io/icon/quote-left/
This is the link to the quotes that you want to insert
I created a prototype for you.
https://codepen.io/djmayank/pen/opYeyo
#rectangle{
width: 100%;
height: 230px;
background-color:darkcyan;
display: block;
margin: 0px;
}
#rectangle p{
padding-top: 5px;
padding-left: 60px;
padding-right: ;
font-family: roboto_bold;
text-transform: uppercase;
margin: 0 auto;
display: block;
font-size: 38px;
color: aliceblue
}
.fa {
color:#abe941;
margin-top:3%;
margin-left:10%;
}
<div id="rectangle">
<i class="fa fa-quote-left fa-2x" aria-hidden="true"></i>
<p>Loreim ispum Loreim ispumLoreim ispum Loreim </p>
</div>
<script src="https://use.fontawesome.com/8d594f9226.js"></script>
I'm looking to add a center text title in the middle of my page and it won't show up. Code seems correct, don't see a bug.
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
width:800px;
height:300px;
top: 50%;
margin-top: -150%;
left: 50%;
margin-left: -400px;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
}
You just need to use text-align: center and it should center automatically. BTW I see you are using ids often which is very bad practice. IDs should be used for javasscript selectors while class for css.
.center-text {
text-align:center;
}
.title-text {
// Do css formating here
}
<div class="center-text title-text">
<p class="page-title"> Welcome </p>
</div>
try this
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}
You can achieve this with flexbox.
All you need to do to the container is define its width and height (and give it a bg color):
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
}
Then add these three lines to set the flexbox display context, and center it vertically and horizontally:
display:flex;
align-items:center;
justify-content:center;
Then remove all the extra formatting from your inner div.
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
display:flex;
align-items:center;
justify-content:center;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
}
https://jsfiddle.net/k5zve6bf/
HTML
<div>
<div></div>
</div>
CSS
div > :first-child:after {
background-color: orange;
color: #fff;
font-family: sans-serif;
font-size: 50px;
line-height: 50px;
text-align: center;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
content: "hello world";
display: block;
font-size: 50px;
height: 160px;
line-height: 160px;
margin-top: 14px;
font-weight: normal;
}
div > :first-child:after:hover {
background-color: #44b800;
}
Fiddle
http://jsfiddle.net/VSBr6/
Basically, all I want to do is change the background-color on hover but it doesn't seem to work.
You can do it like this:
div:first-child:hover::after {
background-color: #44b800;
}
This is weird. I have a "wrapper" with three columns like this:
http://d.imagehost.org/view/0543/cssproblem
The first column has a picture, the second column has text and the third column has three links. It works fine if the third block has just text and not links (see the top of the linked picture) but when I make links out of the text, the text is no longer side by side (see the bottom of the linked picture).
I just can't understand what's wrong with the code. How can the text in the third column to stay side by side even when they are links?
css:
.wrapper{
margin-left: 45px;
margin-bottom: 4px;
width: 466px;
height: 22px;
}
.first{
width: 22px;
float: left;
}
.second{
width: 266px;
float: left;
}
.third{
width: 178px;
float: right;
}
p.text1 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1.2em;
text-align: left;
margin-left: 12px;
margin-top: 3px;
}
p.text2 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-align: right;
}
a.opt {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:visited {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:active {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:hover {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: underline;
}
html:
<div class="wrapper">
<div class="first><img src="image.gif" /> </div>
<div class="second"><p class="text1">Some text here</p></div>
<div class="third"><p class="text2"><a class="opt" href="http://">LINK 1</a> | <a class="opt" href="http://">LINK 2</a> | <a class="opt" href="http://">LINK 3</a></p></div>
</div>
My guess is that it's the float: right declaration in your .third class. Try starting by adapting your CSS to look like this:
.wrapper{
margin-left: 45px;
margin-bottom: 4px;
overflow: hidden;
width: 466px;
height: 22px;
}
.first{
width: 22px;
float: left;
}
.second{
width: 266px;
float: left;
}
.third{
width: auto;
overflow: hidden;
}
That eliminates the need for the right-floating div. That should hopefully clean things up enough. If not, I'll modify my answer.