The code in question: http://jsbin.com/bisimeyija/edit?html,css,output
It works fine in Chrome / Safari / Firefox and even IE11 i believe.
HTML
<div class="img-Offset">
<div class="img-Offset_ImageContainer">
<img src="http://placehold.it/430x350" alt="">
</div>
<p class="img-Offset_Caption">Scott Preston and his wife Laura</p>
</div>
:root {
--Theme_Primary-dark: #f98183;
}
CSS
.img-Offset {
position: relative;
z-index: 1;
max-width: 520px;
width: 100%;
}
.img-Offset::after {
content: '';
position: absolute;
top: 90px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
display: block;
background-color: var(--Theme_Primary-dark);
border-radius: 5px;
}
.img-Offset_ImageContainer {
position: relative;
padding-left: 90px;
border-radius: 5px;
border-bottom-right-radius: 0;
}
.img-Offset_Caption {
margin-top: 14px;
padding-right: 30px;
padding-bottom: 21px;
padding-left: 90px;
font-weight: 500;
color: #fff;
}
In Edge it looks like:
It should look like:
So for some reason the border-radius and top aren't working on the pseudo but everything else is.
It appears to be a problem relating to the use of CSS variables. If you change the background colour to be a simple hex value, the problem goes away.
Related
I want to align an after element at the end of a text that runs over two lines.
This works in Safari and Chrome, but not in Firefox.
Does anyone have any advice on how I can solve this?
The blue line should be right after the word headline, like "headline _".
p.subtitle {
color: #F94922;
font-size: 30px;
display: inline;
font-weight: 300;
position: relative;
line-height: 1.1;
}
p.subtitle::after {
content: "";
background: #002C5A;
border-radius: 10px;
display: block;
right: -66px;
bottom: 2px;
width: 50px;
height: 6px;
position: absolute;
}
<div class="subtitlewrap">
<p class="subtitle">This is a long <br />headline</p>
</div>
How do I transition the .menu-trigger from position top:12px, left: 0 to its final position top: 12px, left: 120px when the .active class is added on the header? Please note that when the .active class is added the .menu-trigger becomes position: fixed and moves out of the header. That is a requirement for what I am trying to solve.
var header = document.querySelector("header");
document.getElementById('test').onclick = function() {
header.classList.toggle('active');
}
body {
margin: 0;
padding: 0;
}
header {
display: flex;
height: 60px;
background: black;
margin-top: 120px;
}
.menu-trigger {
display: inline-block;
border: none;
color: white;
background: cyan;
height: 60px;
width: 60px;
font-size: 24px;
}
header.active .menu-trigger{
position: fixed;
top: 12px;
left: 120px;
right: auto;
bottom: auto;
}
#test {
margin-top: 24px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<button class="menu-trigger">
<span class="fa fa-bars"></span>
</button>
</header>
<button id="test">Test</button>
You can just have menu-trigger always be fixed and that way you get the position right, right away
position: fixed;
top: 120px;
then when active class is added all you have to do is change position left and not worry about top or setting to static as it already will be. make sure you either make top: 120px in the active or just remove it all together since it will already be set on the base style of menu-trigger here is the pen http://codepen.io/finalfreq/pen/RGgEkq
Brief background: I am using Jquery to build Divs if there is information to be built.
I have read a few threads today on stacking Divs, but everything I try just doesn't seem to work.
Given the following Example fiddle (That is what my current solution looks like)
I would like to stack the BAR 2 onto BAR 1, and then BAR 3 onto BAR 2, creating an end result like this:
BAR 3
BAR 2
BAR 1
I know this questions has been asked a lot before, but none of those threads helped me, so I thought I would show my code.
Thanks!
Remove position:absolute from .bar and add some height to it.
Your fiddle updateded: http://jsfiddle.net/4GjrX/1/
HTML
<div class="bars">
<div class="bar-group">
<div class="bar fig2">BAR3</div>
<div class="bar fig1">BAR2</div>
<div class="bar fig0">BAR1</div>
</div>
</div>
CSS
/* Graph Bars */
.bars {
height: 253px;
width: 100%;
}
.bar-group {
height: 100%;
margin: 0 30px;
width: 200px;
}
.bar {
border-radius: 3px 3px 0 0;
cursor: pointer;
height: 0;
text-align: center;
display:inline-block;
width: 150px;
}
/* Graph Bars */
.bars {
position: relative;
width: 100%;
z-index: 10;
}
.bar-group {
float: left;
height: 100%;
margin: 0 30px;
position: relative;
width: 200px;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
}
.bar {
border-radius: 3px 3px 0 0;
bottom: 0;
cursor: pointer;
height: 0;
position: absolute;
text-align: center;
width: 150px;
}
.bar.fig0 {
left: 0;
}
.bar.fig1 {
left: 52px;
}
.bar.fig2 {
left: 104px;
}
I'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.
Issue:
The dots are supposed to be over the phone.
My HTML:
<div class="content-top"><div class="cwrap">
<motto>Become Famous On Vine.</motto>
<img id="phone" src="./images/phone.png">
<img id="dots" src="./images/dots.png">
</div></div>
My CSS:
.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
#phone {
z-index: 999;
}
#dots {
z-index: 1000;
}
.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}
Try this. position: absolute;, top: 0;, left: 0;
The the red div is semi-transparent to reveal the blue div below.
Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.
Link to example: jsFiddle
Use on #phone and #dots elements these css attributes: position, z-index, top, and left.
Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.
I have an element that looks something like this:
___
| X|
‾‾‾
So essentially a tiny box with a button to close it.
I have also applied CSS to the element, so that when hovered, it will turn to something like this:
___________________
| X|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Simply put, it'll just become wider.
Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.
Is this possible with pure CSS?
EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34
Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! http://jsfiddle.net/fpY34/15/
<div id='outer'>
<div id='notOuter'>
<div id='content'>
<div id='img'>
</div>
<div id='label'>
Text example
</div>
<div id='closeButton'>
X
</div>
</div>
</div>
</div>
and the beauty:
#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;}
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }
would you check this please and tell me if that what you want ?
http://jsfiddle.net/UjPtv/10/
<style>
.divs
{
height: 20px;
width: 100px;
border: 1px solid;
padding: 5px 3px;
}
.divs:hover
{
width: 50px;
padding-left: 150px
}
</style>
<div class="divs"><span>X</span></div>
You could float them:
<div class="box">
<div>
Content
</div>
<span>X</span>
</div>
.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}
Might not work in older browsers though.