I have created a code for a page following Stackoverflow answers. It works very well, but I'd like to optimize it, which I do not know since I'm not a programmer. What is the right way?
#black:before {
content: "";
position: fixed;
top: 0;
right: 0; left: 0; bottom: 0; background: none;
z-index: -2;}
#red:before {
content: "";
position: fixed;
top: 0;
right: 0; left: 0; bottom: 0; background: none;
z-index: -2;}
#black:target::before {background: #ACAA92;}
#red:target::before {background: #ACAA92;}
#black:hover .text{display:block;}
#com:hover .text{display:block;}
All selectors which should share the same properties and values can simply be comma separated. You can write them all on one line though a more preferred style is to put each one its own line to aid readability:
#black:target::before, #red:target::before { background: #ACAA92; }
#black:hover .text,
#com:hover .text {
display:block;
}
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors#Groups_of_selectors_on_one_rule
Related
I have a css styling problem:
I created a header with text inside. The header has two pseudo elements: ::before and ::after.
Both elements lay on top of the header element. How do I get the h1 to stay in front of everything??
Here is my code example: (got code snippets removed?? i didnt found the button where to add)
header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99;
background-image: url("Bild1.svg");
background-size: 100% 100%;
text-align: center;
padding: 1px 20px;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("Bild2.svg");
background-size: 100% 100%;
opacity: .5;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -10px;
background-image: url("Bild3.svg");
background-size: 100% 100%;
opacity: .5;
}
<header>
<h1>Title Text</h1>
</header>
Here is a image how it looks:
As you can see the Text is behind both elements.
I tried to fix it using z-index but nothing worked for me. U have and ideas?
apply z-index 99 on background
and apply z-index 999 on the text I hope it will work
I would suggest making the z-index of the h1 tag
h1{
z-index: 999;
color: white;
}
and making the background z-index to 99 or something below that.
Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words)
What I'm trying to create is the cyan box. I hope the image kind of explains the idea.
SOLVED
Per Kees van Lierop answer I ended up doing the following:
&__label {
#include span-columns(6);
margin-top: 4rem;
background-color: rgba($color-secondary, 0.5);
color: white;
padding: $base-padding;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 100%;
width: 9999px;
height: 100%;
background-color: inherit;
}
}
Giving me a nice result:
You can add a :before pseudo-element which is positioned left to the box, and with the cyan background:
.cyan-box {
position: relative;
&:before {
position: absolute;
top: 0;
right: 100%;
width: 10000000px; // a large amount, long enough to reach the edge
height: 100%;
content: '';
display: block;
background: cyan;
}
}
I've just run into a very nice answer here about "How to strike through obliquely with css". The solution is nice, but I wonder if it is possible to pimp the CSS snippet there to show the text on top of the strike through.
If not, an alternate solution?
To move something behind the other you need to give it a z-index that is lower than the other element, in this case I gave the strike a z-index of -1
http://jsfiddle.net/p2F7G/1/
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: #F00;
z-index: -1;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
You can give the strikethru a lower z-index than the text. I highlighted the text red so it can be seen:
.strikethrough {
position: relative;
color: #f00;
}
.strikethrough:before {
position: absolute;
z-index: -1;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: #000;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
http://jsbin.com/oqibus/109/
I have a small .png file that repeats to form a background image. I need to set the body height of my page to 100% in order to use min-height property on my content wrapper. However, trying to use the background-image in conjunction with height:100% results in the image getting cut off when the page is scrolled. See picture to elaborate what I mean:
Background on top
But when scrolling it is cut off
How do I get the background image to repeat over the whole page, even after the user scrolls down? Here is the css:
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://www.example.com/img/background.png');
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Thanks for your ideas.
EDIT:
This is the image i need repeated:
Here is a fiddle:
http://jsfiddle.net/Nick_B/x2h3g/
try this
html:after {
background-image: url('http://www.example.com/img/background.png');
background-repeat:repeat;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Now used to background-size
As like this
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo Full page
Live Demo
you can achieve your desired result through give the backgroun-size:100% in your html:after
CSS
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
I can't get my images to go side my side (below share and follow) on this page:
http://toddheymandirector.com/REEL/index_newlook_gallery2222.html
The suspect code:
#gallery ul div {
min-width:26.6%;
margin:0;
float:left
background-color:#595959;
}
Any ideas?
find this block into your css file:
img.a {
left: 0;
position: absolute;
top: 0;
z-index: 10;
}
and replace the position to relative:
img.a {
left: 0;
position: relative;
top: 0;
z-index: 10;
}