Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
So I have a border that wont appear. It's supposed to create a dashed block, but it doesn't.
Heres what I have set up in the CSS:
#coupon {
border: 5px dashed black;
float: left;
width: 170px;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
background-image: url('slice.png');
background-position: center;
background-repeat: none;
background-color: white;
}
Heres the div for it.
<div class="coupon">
<h1>Classic Combo</h1>
<p>16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
</p>
<p>Expires 3/14</p>
</div>
Yet the border is simply not appearing on my page. I tried looking it up, but the resolves for those problems havent worked for my problem.
Use .coupon, not #coupon
# matches an id
. matches a class.
Check you're classes and ID's
In CSS a class is defined with (.name)
an ID (#name)
Should clear up the problem.
A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier
he following ID selector matches the H1 element whose ID attribute has the value "chapter1":
HTML
<h1 id="chapter1">Selector ID</h1>
CSS
h1#chapter1 { text-align: center }
A CSS Class selector contains a "." immediately followed by the Class value, which must be an identifier
he following Class selector matches the H1 element whose Class attribute has the value "chapter2":
HTML
<h1 class="chapter2">Selector Class</h1>
CSS
h1.chapter2 { text-align: center; color: red }
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I have an HTML section that I am trying to alter with CSS:
<section class="jumbo">
<div class="container">
<h1>THIS IS THE TEXT CONTAINED WITHIN THE JUMBO</h1>
</div>
</section>
However the changes I make in my CSS file, such as changing the color of the text contained in the element are not having any affect:
#jumbo {
background-image: url("../images/carbon.jpeg");
background-position: center center;
min-height: 200px;
text-align: center;
}
#jumbo h1 {
color: white;
font-size: 45px;
padding-top: 15px;
line-height: 1.6em;
}
Do you have any tips for how I can debug an issue like this?
You have to use .jumbo.
More about CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp
#jumbo is an id selector
you should use a class selector
.jumbo and .jumbo h1
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
i have a listing html page, in which the first div background color will be white and the second grey color. i have used the following css
.aamir {
background: #fff;
width: 1000px;
margin: 0 auto;
text-align: left;
padding: 20px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
height: 45px;
margin-bottom: 3px;
border-radius: 1px;
}
div:nth-child(even) {
background: #fafafa
}
the problem is when i am using the class name like
.aamir:nth-child(even)
its not working. when i am using
div:nth-child(even)
its working fine. can anyone please tell me why i cannot give it my class. thanks in advance.
Firstly, i think your CSS selector is incorrect. You would need to do the following (note, the starting period):
.aamir:nth-child(even) {
background: #fafafa
}
Second, i think you might be suffering because of the specificity. You can try the below CSS to get around it. This will make it more specific than the original selector by using the element type as well as the class. If your element type is not a div, change the CSS to match the element type.
div.aamir:nth-child(even) {
background: #fafafa
}
You can find out more about specificity at: https://www.w3schools.com/css/css_specificity.asp
Make sure not to forget to add a dot before aamir.
.aamir:nth-child(even) {
background: #fafafa;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to bring my Sketch file to HTML/CSS in the browser.
How can I implement the white line just between the small and big text, as shown in the image below?
If don't want to include any additional html element then you can use pseduo element:after.
h2:after {
display:block;
content:" ";
width: 80px;
height: 5px;
background: grey;
margin-top: 5px;
}
fiddle
You can add an empty div with a bottom border & custom width, which is of cleaner and shorter code:
body {
background-color: blue;
color: white;
}
#mydiv {
border-bottom: 4px solid white;
width: 33%;
}
#myline {
height: 4px;
background-color: white;
border: 0px solid black;
width: 33%;
}
A div:
<div id="mydiv"></div>
A horizontal line:
<hr id="myline" />
That's 4 lines for the HR and 2 for the div, and that's without making the hr align to the left.
If you don't want to add another element you can use ::after on any element - just make it have display: block and set the color, width, height etc. similar to the above code.
You can add tag <hr> and him specify needed width, height,color...
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I apply various effects, like increasing its size etc., using CSS to this arrow
https://jsfiddle.net/tnfLc58h/
So far I've been able to change its color.
HTML
<div class="down-arrow">
</div>
CSS
.down-arrow:after {
content:'\2193';
color: red;
}
edit: I want to make it responsive.
Since a pseudo element is an inline element, you need for example to give it display: inline-block (or block) for it to respond to width/height settings (though not if only to change font properties of course, as some comments assumed I meant).
.down-arrow:after {
content:'\2193';
display: inline-block; /* or block */
background: lightgray;
color: red;
height: 32px;
width: 40px;
font-size: 24px;
text-align: center;
}
<div class="down-arrow">
</div>
To increase the size of the content, you should set the font-size
Like so :
.down-arrow:after {
content:'\2193';
color: red;
font-size: 20px; // change to whatever
}
See updated EXAMPLE
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have a div that refuses to change background colors when I hover over it. It stays the same. Here's the code.
HTML:
<div id="login"></div>
CSS:
#login {
position: fixed;
float: left;
background-color: none;
margin-left: 1.5%;
top: 1em;
height: 1.25em;
width: 7em;
text-align: center;
border-radius: .3em;
opacity: .5;
padding-top: 1em;
border: .18em solid gray;
}
#login:hover {
background-color: gray;
}
I had a similar problem. What I suggest is making sure there are no invisible objects over the div. This tells the program that your cursor is hovering the invisible object rather than the div with the hover element.
Works fine for me - http://jsfiddle.net/Q8A6d/
Which browser are you using? You cannot apply a
:hover
pseudo class to any elements other than <a> in older versions of IE (6 and below).
Your code appears to work properly here, so a few things could be wrong:
You might have linked your stylesheet to your HTML file improperly.
Some other CSS in the context of your project may be overriding the piece that you've given here.
You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.