I am not at all good with CSS so need your help with below issue. I have following structure:
<div class="RowClass">
<div class="CellClass1" > Test1 </div>
<div class="CellClass2" data-value= "Summer" > </div>
<div class="CellClass2" data-value= "Winter" > </div>
<div class="CellClass2" data-value= "Monsoon" > </div>
</div>
Purpose of above structure is have a row, and different cells inside a single row. Cells with Class "CellClass2" have data-value attribute because, we want to change background color of cell(not just the text inside) according to the value in cell. For that, we have used below:
.CellClass2::after{
content: attr(data-value);
}
.CellClass2[data-value="Summer"]:after {
color: white;
background : Yellow;
}
The above code works just fine. It changes the color to white and background to blue. Only problem is we want entire cell to be blue. It just changes the text background to yellow.
Please help to fix the above scenario.
EDIT: Adding CSS for both rowclass and cellclass2 :
.CellClass2{
display: table-cell ;
text-align : center ;
border: solid ;
border-color : gray ;
text-align : center ;
color:black;
height : 30px ;
padding-top : 10px ;
padding-bottom: 10px;
padding-right: 7px;
padding-left: 7px;
border-width: thin;
font-size: 12px;
font-weight: 600;
}
.RowClass{
display : table-row ;
background: #eee ;
padding: 20px ;
margin: 20px ;
font-weight : bold ;
table-layout: fixed;
width: 200%;
}
Thanks in advance.
Remove the :after in the .CellClass2[data-value="Summer"] section
.CellClass2::after{
content: attr(data-value);
}
.CellClass2[data-value="Summer"] {
color: white;
background : Yellow;
}
.CellClass2{
display: table-cell ;
text-align : center ;
border: solid ;
border-color : gray ;
text-align : center ;
color:black;
height : 30px ;
padding-top : 10px ;
padding-bottom: 10px;
padding-right: 7px;
padding-left: 7px;
border-width: thin;
font-size: 12px;
font-weight: 600;
}
.RowClass{
display : table-row ;
background: #eee ;
padding: 20px ;
margin: 20px ;
font-weight : bold ;
table-layout: fixed;
width: 200%;
}
<div class="RowClass">
<div class="CellClass1" > Test1 </div>
<div class="CellClass2" data-value= "Summer" > </div>
<div class="CellClass2" data-value= "Winter" > </div>
<div class="CellClass2" data-value= "Monsoon" > </div>
</div>
Related
I would like to have this layout : What I would like
The "Resultat" label should be placed under the image.
Unfortunately, what I get is : What I get
You can see that the "Résultat" label is not well situated.
Here is my CSS :
body {
background-color: #A6A4AA !important;
}
.mainContainer {
background-color: #A6A4AA
}
.label-selected, .label-unselected, .label-result, .result-field, .label-univers, .label-target {
border: solid medium #2C3756;
border-radius: 10px;
background-color: #E6F0BB;
color: #405E01;
font-size: 0.75em;
padding: 5px;
text-align: center;
}
.label-target, .label-result, .result-field {
margin-top: 2px;
font-size: 0.875em;
margin-bottom: 0;
background-color: #2C3756;
text-align: left;
color : #FFFFFF;
border-radius: 8px;
}
.label-target {
border-radius: 8px 8px 0 0;
}
.label-result, .result-field {
margin-bottom: 2px;
}
.result-field {
background-color: #FFFFFF;
color: #2C3756;
border-color: #FFFFFF;
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
border-radius: 0 0 8px 8px;
background-color: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
}
.ajustement {
opacity: 0.5;
}
.label-result, .result-field {
float: none !important;
}
And here is my express code :
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage"></img>
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
<div class="row"> <!-- Row : result -->
<div class= "col-xs-3 short-div">
<p class="label-result">Résultats</p>
</div>
<div class= "col-xs-9 short-div">
<p class="result-field" id="resultField">...</p>
</div>
</div>
Can anyone explain to me what's going on ?
Thank by advance.
I think because you are using position: relative for displaying your image. It sets itself independent from the other div. Try using a div for you image and do not use position instead of that use width:100%;height:xyz px;. Avoid using position set it by giving width or using bootstrap column.
I have a div block i want to apply border-bottom just beneath the text and not throughout the whole div block
the div block is
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
You can wrap your text in an inline element like <span> and apply border to it.
HTML:
<div id="info-header">
<span>some text here...</span>
</div>
CSS:
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
Note: You can make your element inline-block if you wants to apply block level properties but keep it behaving like an inline element. This way you can also control the border-width and the distance between text and border line.
body {
background: green;
min-height: 100vh;
margin: 0;
}
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
}
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
<div id="info-header">
<span>some text here...</span>
</div>
Add css property text-decoration: underline
You should use text-decoration property.
In your case its:
text-decoration: underline;
You can also use text-decoration for overline and line-through read about CSS text-decoration Property
You can change the display value for an another block level.
html {
background: lightgray
}
#info-header {
font-size: 40px;
/*text-align: center;
margin:100px 10px 10px 10px;*/
display: table;/* shrinks on content */
margin: 10px auto;/* margin:auto instead text-align for this block */
font-family: Poiret One;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
codepen
Give the <div> a fixed width and give it a {margin: 0 auto} for centering
body {
background: #131418;
text-align: center;
}
#info-header {
font-size: 40px;
margin: 0 auto;
width: 300px;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">this is a nice title</div>
I have 3 nav buttons at the top of a page. I set their width to 33% but noticed that the last one didn't fill all the space that it was supposed to, so I set it's width to 34% but it still didn't fix the issue.
If you go to http://shacktown.com and hover over Contact you will see that the right-most area of the button does not turn a lighter gray, and I also noticed that the border-radius attribute doesn't apply itself either.
The 3 .nav items are located inside of a #header item. Here is the respective CSS:
#banner, #header, #content {
margin: 2.5% 15% 2.5% 15%;
}
#header, #content {
border-radius: 0.375em;
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.nav {
height: 2em;
padding-top: 1.0em;
text-align: center;
color: #000000;
font-size: 1.2em;
float: left;
width: 33%;
cursor: pointer;
border-left: 0.1em solid #333333;
}
.nav:hover, .navSelected {
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.navSelected {
cursor: default;
}
.nav:first-of-type {
border-radius: 0.375em 0 0 0.375em;
border-left: none;
}
.nav:last-of-type {
border-radius: 0 0.375em 0.375em 0;
width: 34%;
}
Any idea why it isn't filling up the whole space?
:last-of-type or :first-of-type css selectors are not meant to be working like this. In your case, this selectors will select the last "div" or first "div" in their parents.
So remove this line from html:
<div style="clear: both;"></div>
and change width of the class nav to %33.3
these will do the trick.
Change the rule for .nav to following:
.nav {
height: 2em;
padding: 1em 0 2.5em 0;
text-align: center;
color: #000;
font-size: 1.2em;
float: left;
cursor: pointer;
border-left: 0.1em solid #565656;
width: 33.33%;
box-sizing: border-box;
}
And add a new rule:
.nav:last-of-type:hover {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the whitespace in your markup:
And this is the result you'll get.
there is no selector with only class only
CSS: How to say .class:last-of-type [classes, not elements!]
so you can do
set .nav as display:inline-block and remove clear div so that they are inline
here is the demo
.cont {
font-size: 0px; /* is added to remove whitespace from inline-block */
}
.cont div {
display: inline-block;
font-size: 16px;
}
.cont div:first-of-type,
.float div.test:first-of-type {
background: red;
}
.cont div:last-of-type,
.float div.test:last-of-type {
background: red;
}
.float .test {
float: left;
}
.float .clear {
clear: both;
}
<p>used inline-block instead of float</p>
<div class="cont">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
<p>with class and used float</p>
<div class="float">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="clear"></div>
</div>
I am using bootstrap 3.0 and the following is my HTML code , I am facing a problem with the background color.
HTML code
<div class="container" id="pictures">
<div class="row">
<div class="col-md-12">
<h1>Collection</h1>
</div>
</div>
</div>
CSS code (I have targeted the H1 tag using this css code)
#pictures h1 {
padding:10px 0;
color: #fff;
font-size:60px;
background-color: #f92735;
text-align: center;
margin: 60px 370px;
border-radius: 10px;
margin-top: -65px;
}
Heres the problem , as i size down my browser horizontally , the background color disappears . can somebody tell me why ?
The problem come from the following styles you have applied for h1
margin: 60px 370px;
It means it required minimum (370+370) width to show your h1 tag. Reduce the margin to less number then you can see it in small screens also.
#pictures h1 {
padding:10px 0;
color: #fff;
font-size:60px;
background-color: #f92735;
text-align: center;
margin: 60px 30px;
border-radius: 10px;
margin-top: -65px;
}
DEMO
<div class="row">
<div id="cover" class="span12"></div>
</div>
<div class="row">
<div id="first_left" class="span6 left">
<h3>aa</h3>
</div>
<div id="first_right" class="span5">
ee
</div>
</div>
And less:
#cover{
background: url('couv.jpg') no-repeat;
width: 960px;
height: 280px;
}
h3{
color: #212121;
font-size: 18px;
font-weight: normal;
float: left;
text-transform: uppercase;
margin: 0 0 25px 0;
text-shadow: 1px 2px 2px #FFF;
}
.left{
background: url('grille.jpg');
padding: 15px;
}
The "first_right" span displays below first_left, and only if the 15px padding is present. With padding 15, first_left becomes 490px wide instead of 460px. Why is that ?
Also, is it ok to have padding on a span if I want to nest some more rows in it ?
The default value for box-sizing is content-box. This does not include padding. The padding extends the width (if set) of the element. You need to set border-box to include the padding and borders in the element width.
.left{
background: url('grille.jpg');
padding: 15px;
box-sizing: border-box;
}
Now the width includes padding and borders.
Read more about box-sizing