How do I get this CSS to work in safari - css

I am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.
The css is supposed to display a heading with a colored line either side.
Here is the code:
[HTML]
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
[CSS]
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}

Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.
h1 {
overflow: hidden;
font-size: 30px;
text-align: center;
}
h1 span {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 5px;
}
h1 span:before, h1 span:after {
background-color: red;
position: absolute;
margin-top: -1px;
width: 9999px;
top: 50%;
height: 1px;
content: '\a0';
left: 100%;
}
h1 span:before {
left: auto;
right: 100%;
}
.color {
background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
<h1><span>Just Title</span></h1>
</div>

Related

Why is my position: absolute div placed differently in Edge?

We are trying to have a badge over the corner of a picture. For this we use a parent <div> as wrapper and a <span> inside. It's working fine so far for Chrome, Firefox, and IE11 but in MS Edge it's not working as expected. It seems like Edge calculates the right: property very different from the others.
Result as expected:
Unexpected result:
Here is my code:
.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.child {
background-color: #e2001a;
position: absolute;
right: -65px;
width: 220px;
height: 50px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
padding-left: 100px;
display: table;
z-index: 10;
color: white;
text-align: center;
line-height: 1.2;
}
<div class="parent">
<span class="child">Some cool text</span>
</div>
Am I doing something wrong, or is the Edge behavior very different from the other browsers?
You can do it differently like below, it seems to be fine on Edge*
.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.child {
background-color: #e2001a;
position: absolute;
top: 0;
left: -20px;
right: -20px;
height: 50px;
text-align: center;
transform: translateX(30%) rotate(45deg) translateY(70%);
z-index: 10;
color: white;
text-align: center;
line-height: 1.2;
}
<div class="parent">
<span class="child">Some cool text</span>
</div>
* I don't know why...
Update to work with original code snippet:
transform needs to be changed like above and translateX()and translateY() needed a bit of adjusting to work.
Here's the code that works in Chrome, Firefox, Edge, and IE11:
.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.child {
background-color: #e2001a;
position: absolute;
right: -65px;
width: 220px;
height: 50px;
transform: translateX(10%) rotate(45deg) translateY(100%); //wokring with translateX and translateY instead of just rotate
display: table;
z-index: 10;
color: white;
text-align: center;
line-height: 1.2;
}
<div class="parent">
<span class="child">Some cool text</span>
</div>

how to make a custom popup container like youtube

I want make the popup windows like youtube share because its stick next to button. I tried bootstrap modal but it's popup in the middle of screen. When click youtube share button,pop up shows around button.
Does anyone know how to fix it?
HTML
<div class="box">
<a class="button" href="#popup1">share</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div class="social-fuctions">
Share to facebook
</div>
</div>
</div>
</div>
css code
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
/*
.button {
font-size: 1em;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
*/HTMLHTML
.social-fuctions{
display: flex;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
/* transition: opacity 100ms;*/
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
position: absolute;
bottom: -550px;
right: 5%;
left: 15%;
padding: 15px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Any suggestion? Thanks a lot
Set your box to position: relative and make the modal box / pop up a child of the box div. This way, the overlay will be positioned absolutely within the parameters of it's parent div.
.box {
position: relative;
}
.modal {
position: absolute;
}
Something like this:
https://jsfiddle.net/bommy8zu/5/
Moosetuin's approach is simple and effective.
But there is no need for a relative parent. And a absolute Modal.
I made two examples one is just like Youtube's ShareBox and the other will allways be centered.
How To Center:
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
Check it out here: https://codepen.io/Tibixx/pen/zWEpqq

Trouble Getting Tooltip Width Correct Using CSS

I've looked at various solutions to this and can't seem to get anything to work. I hope I'm missing something simple. What I want is for a tooltip width to use only what is needed, then wrap when a max-width is reached.
Here's my CSS:
<style>
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
And here's my HTML:
<div class="tooltip">
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
</div>
Blacklist
What happens is it always wraps to fit only the widest word, making the max-width setting meaningless. Any assistance would be appreciated.
The problem is that you're trying to cram the tooltip inside a container with 20px width. It simply doesn't have any wiggle room!
For a solution, move the .tooltiptext out of the .tooltip. The CSS can mostly stay the same.
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
overflow:visible;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover + .tooltiptext {
visibility: visible;
}
<div class="tooltip">
</div>
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
Blacklist
You need to explicitly set a min-width as well:
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
min-width: 100px;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
https://jsfiddle.net/gdL458jo/

2 Lines behind Headers CSS

I would like to put 2 lines behind my headers on my website. I have found CSS to put one solid line behind the text, but I'd really like to have two lines behind my text of different widths (one a little bit thicker with space in between them).
Would anyone know how to adjust this code to make it possible to have two lines behind the text?
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
Here's the HTML:
<h1>Header Title Goes Here</h1>
And if it's not as simple as just adjusting this code, is there any CSS method I could use to achieve this effect?
As opposed to setting a height/background, you can alternatively set a border instead.
jsFiddle demo
Updated for margins..
I added 2% I don't know if that enough, but you can just change margin-left you will notice a difference in 2%.
jsFiddle demo - with margins.
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid red;
border-top: 1px solid red;
}
h1:before {
margin-left: -52%;
text-align: right;
}
h1:after {
margin-left:2%;
text-align:left;
}
.color {
background-color: #ccc;
}

CSS: div with cross label and horizontal label

I was looking at a post here and noticed that the snapshots have a side label bar and a botton horizontal bar for labeling contents.
How can this be achieved using CSS?
Update: I am talking about the cross-bar in the first image that says "snapshot" and "WP Advanced Code Editor"!
Try this - http://jsfiddle.net/hEeZA/
HTML
<div class="container">
<span class="diag"> Some text </span>
<span class="horiz"> Some text </span>
</div>
CSS
div {
height: 300px;
width: 400px;
background: beige;
overflow: hidden;
position: relative;
}
span {
width: 200px;
display: inline-block;
height: 30px;
line-height: 30px;
color: #fff;
background: orange;
text-align: center;
position: absolute;
}
.horiz {
bottom: 40px;
}
.diag {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
right: -50px;
top: 30px
}
My demo can be seen here http://dabblet.com/gist/3152262
I have an image wrapper with overflow:hidden and I've simply used a :before pseudo-element which I've rotated and absolutely positioned. Same idea for the horizontal one.
HTML
<a href="#" class="img-wrapper">
<img src="img.jpg">
</a>
CSS
.img-wrapper {
width: 400px;
height: 300px;
box-shadow: 1px 1px 3px #000;
display: block;
overflow: hidden;
position: relative;
}
.img-wrapper:before, .img-wrapper:after {
padding: .3em 2.9em;
position: absolute;
background: blue;
color: white;
font: 700 14px sans-serif;
}
.img-wrapper:before {
top: 35px;
right: -40px;
transform: rotate(45deg);
content: 'Screenshot';
}
.img-wrapper:after {
top: 85%;
content: 'Developer Formatter'
}

Resources