I have the follwoing css styles in css file
.paddingRight.tiny {
padding-right: 0.5em;
}
.paddingRight.small {
padding-right: 1em;
}
.paddingRight.medium {
padding-right: 1.5em;
}
.paddingLeft.tiny {
padding-left: 0.5em;
}
.paddingLeft.small {
padding-left: 1em;
}
.paddingLeft.medium {
padding-left: 1.5em;
}
And the html code is looks like below,
<div className="paddingRight small paddingLeft tiny">
//Some content goes here
</div>
If I mention class name like this, css not applied properly.
expected css class:
paddingRight.small and .paddingLeft.tiny
actual class:
paddingRight.small and .paddingLeft.small
Why this is happening?
The className syntax is for JSX code, a JavaScript language that looks like HTML for the sake of simplicity for developers, but they are NOT the same. I don't believe it will lead to an error in the console, but it will not render the styles. For HTML, you should use the class syntax. You also cannot have . in the name of a class because this is an identifier for a class. You usually use a - or camelCase.
I've added the red background class just to show you the code works.
.red {
background-color: red;
}
.paddingRight-tiny {
padding-right: 0.5em;
}
.paddingRight-small {
padding-right: 1em;
}
.paddingRight-medium {
padding-right: 1.5em;
}
.paddingLeft-tiny {
padding-left: 0.5em;
}
.paddingLeft-small {
padding-left: 1em;
}
.paddingLeft-medium {
padding-left: 1.5em;
}
<div class="red paddingRight-small paddingLeft-tiny">
<p>Some content goes here...</p>
</div>
The way you have in your html your div have 4 different classes. which changing one will change everything.
you should try:
<div className="paddingRight">
<div className="small">
//something
</div>
<div className="tiny">
//something
</div>
</div>
<div className="paddingLeft">
<div className="small">
//something
</div>
<div className="tiny">
//something
</div>
</div>
Related
This is the html part:
.bild{
height:100px;
width: 100px;
}
<div class = "wrapper">
<img class = "bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo" >
</div>
They do not seem to "understand" each other, as the image does not change.
The example with the picture you gave works. It could be that you have not noticed any difference. Here is another example where I colour a text with a class:
.color {
color: red;
}
.colorHeader {
color: red;
}
<p class="color">This text is red!</p>
<h1 class="colorHeader">This header is red!</h1>
you could also change this:
.color {
color: red;
}
.colorHeader {
color: red;
}
to this:
.color, .colorHeader {
color: red;
}
You have some extra spaces in your HTML, but the output still works as defined in your CSS. I recommend specifying the desired width or height and using auto on the other in this case.
.bild {
height: auto;
width: 200px;
}
<div class="wrapper">
<img class="bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo">
</div>
How it should work:
Open (toggle .show class) on div.user, and displays the .userSub div.
If I click on another div.user, close (remove .show class) and opens the clicked div.userSub
If I click on the already .show-ed div.user (NOT .userSub), it'd close the target div.user.
Almost works but the problem:
when .userSub div is .show-ed, I can only click to close on the .userSub div, not the .user div. However that would be goal. :)
I've tried to eliminate the problem. Probably the .user selection is wrong and I should use stopPropagation() somewhere, or I should be more specific with the child elements, but I can't figure it out.
let $active
$(document).ready(() => {
$(".user").click(function(e) {
if ($active != null) {
$active.toggleClass("show")
}
$(e.target).children().toggleClass("show")
$active = $(e.target).children()
})
})
.user {
background-color: gray;
padding: 20px;
margin: 5px;
}
.userSub {
display: none;
padding: 20px;
background-color: lightgray;
color: black;
margin: 5px;
}
.show {
display: block;
}
button {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user">
name 1
<div class="userSub">details 1<button>more 1</button></div>
</div>
<div class="user">
name 2
<div class="userSub">details 2<button>more 2</button></div>
</div>
<div class="user">
name 3
<div class="userSub">details 3<button>more 3</button></div>
</div>
To achieve your goal check that the clicked element was the .user element directly, not a child of it. To do that you can use the target property of the event.
Also note that you can simplify the logic by only applying the .show class to the parent .user and having the CSS rules apply the display: block rule to the child elements based on the class on a parent. Try this:
$(document).ready(() => {
let $users = $(".user").click(function(e) {
if (e.target !== this)
return;
$users.not(this).removeClass('show');
$(this).toggleClass("show")
})
})
.user {
background-color: gray;
padding: 20px;
margin: 5px;
}
.userSub {
display: none;
padding: 20px;
background-color: lightgray;
color: black;
margin: 5px;
}
.user.show .userSub {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user">
name 1
<div class="userSub">details 1<button>more 1</button></div>
</div>
<div class="user">
name 2
<div class="userSub">details 2<button>more 2</button></div>
</div>
<div class="user">
name 3
<div class="userSub">details 3<button>more 3</button></div>
</div>
I'm still new to styling with CSS. Here is my situation, I have three elements I want to one style. But each one needs small adjustments. So I gave each element the class of plan-price and then I gave them each a unique second class. Then I'm trying to nest the second class within the first. But that approach is not working. I'll show my code for clarity.
HTML
<div class="price-plans private-eye">
<p>Select</p>
</div>
<div class="price-plans little-birdy">
<p>Select</p>
</div>
CSS
.plan-price {
float: right;
margin: 83px 20px 20px;
.private-eye {
margin: 40px;
}
.little-birdy {
margin: 50px;
}
}
As you can see my attempt is to nest the second class within the first. I realize now that this does not work. What is another way I can do this?
CSS by itself does not support nesting styles like this. You could just have the override styles after the "default" style and rely on the cascading nature of CSS to overwrite the margins.
.plan-price {
float: right;
margin: 83px 20px 20px;
}
.plan-price.private-eye {
margin: 40px;
}
.plan-price.little-birdy {
margin: 50px;
}
<div class="price-plans private-eye">
<p>Select
</p>
</div>
<div class="price-plans little-birdy">
<p>Select
</p>
</div>
To do nesting styles, take a look at a CSS pre-processor like LESS which lets you do exactly what you are after.
To differentiate the divs, give them id's. id = "whatever". Classes are used to make the divs have the same css styles when they are named the same class, but id's are used to style it individually. In your css file do #id { code }
<div id = "something" class="price-plans">
<p>Select</p>
</div>
<div id = "somethingElse" class="price-plans">
<p>Select</p>
</div>
#something{
code
}
#somethingElse{
code
}
.plan-price {
float: right;
margin: 83px 20px 20px;
}
.private-eye {
margin: 40px;
}
.little-birdy {
margin: 50px;
}
I'm trying to make a status display with 3 numbers inline with other text like so:
-- a kind of flipped "Isotope notation".
I can do this with tables but a CSS approach is eluding me at the moment.
Ideally, I'd like to structure the HTML something like this (or simpler):
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<div class="gains">2666</div>
<div class="losses">-13</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
But I can't quite make it work. This almost does it:
div.sharesblock {
display: inline-block;
margin-right: 3ex;
position: relative;
}
div.updwncontainer {
position: absolute;
right: -2.8ex;
top: -0.3ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
But that absolute positioning doesn't work well with variably-sized numbers. EG:
Here's the jsFiddle.
Update:
Oops. The above HTML does not validate. <p> elements are not allowed to have block-element children.
The production code replaces the p nodes with lis.
Tested and this does not affect the answers below, though. They work the same irregardless.
Here is the kind of testing I used to pick an answer.
Use relatives position and float
FIDDLE
html
<p>
<div class="sharesblock">
<div class="shares">25355</div>
<div class="updwncontainer">
<div class="gains">2666666</div>
<div class="losses">-139999</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
css
div.sharesblock {
margin-right: 3ex;
position: relative;
clear:both;
}
div.sharesblock .shares{
float:left;
margin-right:.5ex;
}
div.updwncontainer {
position: relative;
float:left;
margin-right:.5ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}
Demo Fiddle
Remove position absolute from .updwncontainer & use float:left property on .shares & .updwncontainer.
CSS
div.sharesblock {
margin-right: 3ex;
position: relative;
}
.shares {
float:left;
margin-right: 5px;
}
div.updwncontainer {
position: relative;
float: left;
margin-right: 5px;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}
Is this what you are looking to achieve? (jsFiddle) Feel free to add the margins you want.
By the way, according to these guys, avoid div.className in CSS when not needed. Simply use .className instead.
Adjusted HTML:
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<span class="gains">2666</span>
<br/>
<span class="losses">-13</span>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
CSS:
.sharesblock {
display: inline-block;
vertical-align:middle;
}
.shares {
display:table-cell;
vertical-align:middle;
padding-right: 0.5ex; /* OP Added */
}
.updwncontainer {
display: table-cell;
vertical-align:middle;
line-height: 1ex; /* OP Corrected from px units */
padding-bottom: 0.5ex; /* OP Added to tweak alignment -- better than other solutions. */
}
.losses {
font-size: 1.1ex;
color: red;
}
.gains {
font-size: 1.1ex;
color: green;
}
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul