I have the following hamburger menu
<div class="hamburgerMenu">
<span></span>
<span></span>
<span></span>
</div>
.hamburgerMenu {
float: left;
outline: none;
margin: 0;
padding: 0;
border: 0;
cursor: pointer;
width: 60px;
background: none;
position: relative;
top: 50%;
transform: translateY(-50%);
&:hover {
outline: none;
}
}
.hamburgerMenu span {
cursor: pointer;
border-radius: 1px;
height: 2px;
width: 24px;
margin: 0 auto;
background: black;
margin-top: 3px;
display: block;
content: '';
}
For some reason, on non-retina screens, the menu looks really fuzzy. I'm guessing maybe the span elements are too close together. Can someone help?
Your boundaries are at half-pixels. Change margin-top: 3px; to an even number like margin-top: 4px;, or stop using top: 50%; transform: translateY(-50%) to position it.
Related
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
How do I crop the parts of the "Today" red div that are not on the special div in order to make it look like a bookmark? Desired result is shown on the second image.
Thank you!
Actual image:
Desired image:
Html:
<div class="panel">
<div class="special">Special $120.00</div>
<div class="pr2">Today</div>
</div>
CSS
.special {
text-align: center;
margin-top: 20px;
}
.panel {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
height: 70px;
}
.pr2 {
background-color: #d13a2f;
color: #ffffff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
line-height: 35px;
text-align: center;
letter-spacing: 1px;
top: 5px;
right: -48px;
left: auto;
position: absolute;
padding-top: 20px;
width: 140px;
overflow: hidden;
display: block;
opacity: 0.6;
}
JSFiddle overlapping
Add overflow: hidden and position: relative to the .panel div:
.panel {
overflow: hidden;
position: relative;
}
Then adjust positioning values to your needs.
Updated fiddle
https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/
For the mobile size of my website my burger icon for the menu has a way too small clickable area, it is only those thin lines.
I also have this problem with other anchors that I'd like to have with a bigger clickable area, but don't want the element itself to become bigger on my page.
<div id="burger-container">
<div id="burger">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
CSS
#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
}
try adding fixed width and height
#burger {
cursor: pointer;
display: block;
height: 30px;
width: 50px;
}
You can change the CSS like so:
#burger{
display: none;
padding: 23px 15px 10px;
}
#media all and (max-width: 580px){
#burger-container{
float: right;
}
#burger{
cursor: pointer;
display: block;
}
}
This way you are only displaying the burger menu when the screen-width is 580px or less and the padding gives you a larger click area.
See this codepen for example.
This is a better practice in my opinion because you don't have to mess with setting a specific width and height, just play around with the padding.
I have a CSS tooltip set-up to appear to the right of a link when hovered over, and it is working correctly when the link all appears on one line.
However, if the linked text runs too long and goes onto the next line, the tooltip won't appear to the right of the last word any longer.
This content section of this post is an example of what I'm talking about: http://blog.betbright.com/top-stories/premier-league-tactical-analysis-and-betting-tips-four-things-we-learnt-25th-august/
Some of the links are one on line (working correctly) some are on two lines (not working).
Here is my code for this tooltip:
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
Any help with this would be appreciated.
Thanks,
Paul
Here is how i would do it,
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
/* left: 100%; */
/* top: 50%; */
margin-top: -4px;
margin-left: 15px;
z-index: 999;
}
I wouldn't use top and left property, they position elements absolutely.
In the case where you have two lines top:50% positions the tooltip between the two lines.
I commented out top/left and adjusted the margin-top.
http://www.w3schools.com/cssref/pr_pos_top.asp
Best
y_s_f
You need to remove height.
a.CTA span{
position: absolute;
width: 110px; /*then make adjustment here */
color: #FFFFFF;
background: #00A1E0;
display: block;
/* height: 30px; */
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
Then the long text will be fit inside the tooltip.
I think you can use float: right; for your tooltip, then display: inline-block;
I need to make something like this.
It´s not seen very much, bot the box with arrow is not a part of the button.It´s in the front of it. Is it possible to do this using :before selector? Buttons are classical navigation list. Thanks for your help
It most certainly is possible. You may also use an image instead of the appending the ">"
ul {
list-style: none;
}
li { background: gold;
width: 150px;
height: 30px;
line-height: 30px;
color: white;
}
li:before {
content: ">";
border-right: 1px solid white;
padding: 5px 10px 5px 10px;
margin-right: 10px;
}
<ul>
<li>Some text</li>
</ul>
Yes, you can. Make the :before element be an absolutely positioned block within the relatively positioned main button.
Then, simply give it the appropriate height, background color and border. You can use FontAwesome and the content property to set it to display an arrow.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{padding: 20px;}
div{
margin-left: 64px;
position: relative;
background: orange;
height: 64px;
color: white;
line-height: 64px;
text-indent: 20px;
font-size: 20px;
font-weight: bolder
}
div:before{
content:'';
position: absolute;
left: -134px;
top: 0;
margin-left: 64px;
height: 64px;
width: 64px;
background: orange
}
div:after{
content: '';
position: absolute;
left: -90px;
top: 16px;
margin-left: 32px;
height: 20px;
width: 20px;
border-top: 8px solid white;
border-right: 8px solid white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>Some Text </div>