I want two slide revolutions (or at least one), but with this skin over it:
The overlay image would be on top of the images, so clicking the gallery would be impossible (and the bullets to change image inside of it). I know about map coordinates, but it's a slider revolution, so it will not work in this case I think.
Is there any way to achieve this?
My HTML & CSS so far: (JSFiddle)
<div class="thePNG"></div>
<div class="theSLIDERS">
<div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
<div class="fakeSLIDER2"></div>
</div>
.thePNG {
background-image: url(my-overlay-image.png);
width: 787px;
height: 610px;
background-size: cover;
z-index: 2;
position: relative;
}
.theSLIDERS{
margin-top: -600px;
z-index: 1;
}
.fakeSLIDER1{
background-color: red;
width: 700px;
height: 300px;
text-align: center;
margin: 0 auto 0 auto;
}
.fakeSLIDER2{
background-color: green;
width: 700px;
height: 300px;
}
I found my own answer!
its easy:
CSS:
"pointer-events: none;"
!
Related
You know how we make code like below to make an overlay for the background image or color.
HTML
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
CSS
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .7;
z-index: -1
}
I understand that I have to put z-index to make the anchor tags clickable on the container. But also confused that why the overlay is still showing over the container while we put the z-index to -1.
How come the overlay is visible while the z-index is -1? How come only the text and anchor tag are getting z-index of 1?
Edit: I think i got your idea.
As mentioned here by Sir Praveen Kumar , dont use negative z-index, use only positive one i.e z-index:1 and z-index:2 .
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 2;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.7;
z-index: 1;
}
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
The reason why pseudo element wasn't entirely under the parent div was because it is a descendants of their associated element. So if you ever want to put the pseudo elements under the parent element, you will have to consider making another div on top of the parent element. Here is the post that I referred to figure my question.
I'm trying to horizontally align two absolute positioned elements inside a flex item.
This is my current CodePen
HTML :
<div class="stepper-wrapper">
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
</div>
CSS :
.stepper-wrapper {
display: flex;
flex-direction: row;
}
ul {
border: 1px solid grey;
height: 0px;
position: relative;
top: 40%;
min-width: 100px;
flex: 1;
li.step__bubble {
display: inline-block;
vertical-align: middle;
}
li.step__bubble::before {
content: "";
position: absolute;
top: -9px;
left: calc(50%);
display: block;
width: 16px;
height: 16px;
border: 2px solid grey;
border-radius: 50%;
background: white;
}
li.step__circle {
width: 8px;
height: 8px;
border: 1px solid red;
border-radius: 50%;
display: block;
position: absolute;
top: -4px;
left: calc(50% + 1px);
}
}
What I want to do is :
Having the grey circle vertically and horizontally aligned over the
line. Vertically is not really a pb, I'm able to set a fixed value as the height of the .stepper-wrapper will be fixed. Horizontally needs to be adaptative and it's where I'm stuck.
Having the red circle right inside the grey circle
I tried to use the calc() function and set it to (50% - width_of_element_in_px/2) for both circles, but I don't know why, each px seems to be ~10px.
Thx for your help
Welcome to the club of the LESS users pwned by calc() and string interpolation
I've been using LESS since 5 years and it still happens from time to time :(
Sooo tl;dr calc() was and is a LESS function that its compiler will happily output as some result (probably 50% + 10(stripped) => 60%).
If you want LESS compiler to output calc() the CSS Level 3 function, you need to escape it, that is wrap it in ~"calc(50% + 5px)"!
Codepen
EDIT: also see https://stackoverflow.com/a/17904128/137626
EDIT2: couldn't find an entry about calc in LESS documentation oO but the problem is explained in http://lesscss.org/usage/#command-line-usage-options (search "calc" in text). strict-math is a cool option but you'll have to make sure everybody else has it activated (won't be the case by default)
I am trying to align a set of "buttons" made out of DIV elements that are arranged along the bottom of a web page using the CSS display: inline-block. I've attached a fiddle which illustrates the issue.
The problem is that this current code works on all modern browsers except Safari (7, 8). I don't know if this is a bug in WebKit that Safari uses, or something that I've allowed to happen by not using the right incantations.
The thing that triggers the unwanted behavior is the nested DIV.btn-sub; however, removing that text is not an option to "fix" the issue.
Here's the expected behavior (snap taken from Firefox 34, similar behavior on IE 9, 10, and latest Chrome):
Here's what happens on Safari:
Any help here would be appreciated!
It's usually best practice to use a list when creating inline-blocked elements in a row/list, such as a navigation.
The issue here seems to be the block being set with a padding directly; relative it's parent. Which somehow is turning it into a margin or something similar.
You can try stripping CSS until you get a full height out of the blocks, and then add another inner div which you can call .btn-padding which contains your top padding.
Here is similar.
body, html {
height: 100%;
margin: 0;
background: green;
}
#wrap {
display: block;
width: 100%;
position: fixed;
bottom: 0px;
height: 50px;
border:0;
background-color: blue;
color: #fff;
}
#btnls {
display: block;
list-style-type: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#btnls li {
display: inline-block;
margin-right: 10px;
background-color: purple;
min-width: 158px;
max-width: 300px;
height: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#btnls li .btn-padding {
display: block;
padding-top: 10px;
width: 100%;
height: 50px;
}
#btnls li .btn-padding .sub-btn {
display: block;
font-size: x-small;
margin: 0;
padding: 0
}
<div id="wrap">
<ul id="btnls">
<li>
<div class="btn-padding">Foo
<div class="sub-btn">Bar</div>
</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
</ul>
</div>
I need to add this image at the end of a line, in this way
Style:
h4 { border-bottom: 1px solid black; font-size: 1.6em;}
Code that I did:
<h4>Socializziamo <img src="flourish-decoration.png"
style="position:relative; display:inline-block; float:right;bottom:-7px;" />
</h4>
Is there a better way, because my solution sometimes does not works...
Riccardo
Here's an alternative to ggbhat's answer. The approach here is to apply relative positioning on the heading and absolute positioning on the nested image.
HTML
<h4>
Socializziamo <img src="http://i.stack.imgur.com/68LQd.png" />
</h4>
CSS
h4 {
border-bottom: 1px solid black;
font-size: 1.6em;
position: relative;
}
img {
position: absolute;
right: 0;
bottom: -1px;
}
Demo
http://jsfiddle.net/LqvTx/1/
Use :after psuedo element for adding background image .
h4
{
border-bottom:1px solid #000;
width:100px;
}
h4:after {
content:"";
background:url(http://i.stack.imgur.com/68LQd.png)no-repeat;
width: 30px;
height: 30px;
background-position:68% 25%;
position: absolute;
display: inline-block;
}
Demo:[http://jsfiddle.net/LqvTx/ ]
I have setup a fiddle for my issue Fiddle. What my requirement is? I need the header and the background image to be fixed only. The content should be scrolling, and the footer should also scroll with the content.
CSS
body{
margin: 0;
}
header{
height: 50px;
background: black;
width: 100%;
}
section{
background: url(http://dummyimage.com/600x400);
height: 400px;
repeast: no-repeat;
}
footer{
height: 50px;
background: black;
position: fixed;
width: 100%;
}
.clearfix{
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
border: 5px solid #fff;
}
HTML
<header></header>
<section>
<div class="clearfix">
What my requirement is? I want the footer and background image to be position fixed and the footer should be scrolling with the large content.
</div>
</section>
<footer></footer>
Thanks guys.
Use overflow:scroll; to scroll your content
.clearfix{
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
border: 5px solid #fff;
overflow:scroll;
}
You can write your footer inside your div, this will scroll the footer with content