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>
Related
I would like to force a specific attribute on children elements, from the level of the parent. I thought that using !important would be enough, but it is not taken into account on children elements:
.up {
color: red !important;
}
.down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Is it possible to cascade !important down to the children elements?
You can do the following:
.up > * {
color: red !important;
}
This will affect all direct child elements. (You could probably erase the !important in this case, but that depends on the order of the rules and on theselector specifity of the rules for the child elements)
If you want to apply it to ALL children (not just the direct ones), use it without the >, like
.up * {
color: red !important;
}
.down {
color: blue;
}
.up > * {
color: red;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Please try this
.up>.down {
color: red;
}
I hope this is the solution that what you looking for.
.up > .down {
color: red;
}
.down {
color: blue;
}
If u add the html like below the code and ur css will be correct..
HTML:
<div class="up">
this text should be blue
<div class="down">
this text should be red
</div>
</div>
Or Do u want the reverse color then, change the css code
css
.up {
color: blue !important;
}
.down {
color: red;
}
<div class="up myclass">
<div class="down">
this text should be red
</div>
</div>
.up {
color: red !important;
}
.down {
color: blue;
}
.myclass .down {color:initial; color:inherit;}
Whenever you have this kind of situation if you are working other person's code then never edit the initial code because you never know what that code is working for. In this situation you need to do is create your own class and edit the children with your own class.
If you can change the CSS anyway, you can do this without needing !important.
.up {
color: red;
}
:not(.up) > .down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
<div class="down">
this text should be blue
</div>
I am wondering if there is a more nice way to set 4 different background colours in CSS. I have to make the following setup:
Is there a more clean and nice code I can make beside this i made, or is this the only way to do it? The code is just looking really ugly after my opinion.
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
.bg1 {
background-color: blue;
}
.bg2 {
background-color: red;
}
.bg3 {
background-color: green;
}
bg4 {
background-color: purple;
}
Personnaly, I would do that:
<div class="square square-blue"></div>
<div class="square square-red"></div>
<div class="square square-green"></div>
<div class="square square-purple"></div>
and in CSS:
.square{
border: 1px solid black; // and all params
}
.square-blue {
background-color: blue;
}
.square-green {
background-color: green;
}
.square-purple {
background-color: purple;
}
.square-red {
background-color: red;
}
for more readability (a small usage of BEM - http://getbem.com/introduction/ ).
You can make use of nth-child/nth-of-type here.
Check the following code snippet.
.container div:nth-child(1) {
background: blue;
}
div:nth-of-type(2) {
background: red;
}
div:nth-of-type(3) {
background: green;
}
div:nth-of-type(4) {
background: purple;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
width: 100vw;
height: 50px;
}
<div class="container">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
</div>
you could add style='background-color: #123456' to each div, if you really had to because of some restriction of a templating engine (I can't imagine such a circumstance), but what you've got is fine in the context.
EDIT: What I mean by that is if you wanted to have, say a rainbow effect. In Perl/TemplateToolkit, I could see something like:
[% for ($code = 0; $code < $whatever_max_hex_is'; $code++) { %]
<div style='background-color: [%$code%]'></div>
[%END%]
Something like that. Totally untested, but I'm sure you get the drift.
I have html script like :
<html>
<head></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
then I want to access the div by url, if url is:
example.com#div1
I want to hide div2 and if url is:
example.com#div2
then I want to hide div1
How do I solve that with css?
It is possible through CSS using pseudo selector
<html>
<head>
<style type="text/css">
.my-div {
background-color: green;
display: none;
height: 100px;
width: 100px;
}
.my-div:target {
display: block;
}
</style>
</head>
<body>
<div id="div1" class="my-div">Div 1</div>
<div id="div2" class="my-div">Div 2</div>
</body></html>
Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page
I did this recently, don't think you can do with CSS only.
this will load correct div on page load, including when the user uses back in browser.
<script>
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
changeTab(hash);
}
else {
changeTab('div1');
}
});
function changeTab(divNo) {
$('.divclass').hide();
$('#' + divNo).show();
window.location.hash = '#'+divNo;
}
</script>
if you use a button to change divs just use:
onclick="changeTab('div1');"
set your div's class attribute to a type like 'divclass'
How to target outer div based on url?
The CSS pseudo-class :target is perfectly suited to this:
div {
float:left;
width: 300px;
height: 150px;
}
#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}
#div1 {
background-color: rgb(255,0,0);
}
#div2 {
background-color: rgb(0,0,255);
}
#div1:target, #div2:target {
display:block;
}
<div>
<p>Display Div1 (but not Div 2)</p>
<p>Display Div2 (but not Div 1)</p>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
Am having a hard time trying to figure why I cannot get the images here to change color on hover. The images themselves are svg files and should just adopt the color. The code:
HTML:
<div class="toolTile col-md-3">
<a href="#/cards">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Manage my debit card</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/recurClaim">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>Recurring Claims</p>
</a>
</div>
And associated CSS:
.toolTile {
height: 200px;
float: left;
}
.toolTile img {
color: #ab2328;
height: 100px;
width: 93px;
margin-left: auto;
margin-right: auto;
display: block;
}
.toolTile img:hover {
color: yellow;
}
Color is related to text elements, you want border.
.toolTile img:hover {
border: Yellow 1px solid;
}
Here is a JSfiddle of it: https://jsfiddle.net/td70mqq5/
If thats not what your looking for, do some research on: svg {fill: currentColor;} (https://css-tricks.com/cascading-svg-fill-color/)
CSS does not apply across document boundaries. The CSS in your HTML will not be applied to the contents of your external SVG files.
You have to either inline the SVG in your HTML file, or you can move the styles to the SVG file(s) and change the <img> elements to <object> elements.
My text/header is not showing over my image which I'm trying to use as a background to this webpage. This is the code I have right now:
HTML:
<body id="body">
<div id="navbar">
<h1 id="name">Lorem ipsum</h1>
<img class="backgroundimg" src="leaf.jpg" alt="A leaf"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="buildings.jpg"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="squares.jpg"/>
</div>
</body>
CSS:
body {
background-color:black
}
backgroundimg {
position:relative;
width:1175px;
}
name {
position:absolute;
color: white;
z-index;
}
Any tips?
P.S. I took out the '#' and '.' to the appropriate names in CSS.
Use z-index to show the text over image.
You can use z-index, like Anil Panwar said(https://stackoverflow.com/a/34374513/4900669)
#name {
position:absolute;
color: white;
z-index: 10;
}
https://jsfiddle.net/08voh0fp/
Add this to your css file
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
adjust top,left and width according your need,
let me know if this helped