So recently I've come across an issue with Chrome in which if I set a z-index of -1 to a position: relative; unordered list, the links become unclickable.
See http://jsfiddle.net/raLnx/ in Chrome 20.0.1132.47m for an example.
There is no issue if both ul sections are given a positive z-index, but I figured this is either a bug in chrome or there is a better way than setting something position: relative; when I don't need to.
The css in question:
ul.over {
height: 40px;
line-height: 40px;
border-radius: 5px;
background-color: #DDD;
border-bottom: 2px solid #AAA;
}
ul.under {
height: 35px;
padding: 0 30px;
background-color: #EEE;
line-height: 35px;
font-size: 90%;
position: relative;
bottom: 5px;
z-index: -1;
}
Any ideas?
The reason it happens is because your div #nav is now above your list/links. You will have to remove z-index from your list.
Related
I'm trying to get a round button which has a an outline in the same color but that doesn't seem to be possible. The outline always ends up squared. Is there a method to achieve that with a or does it maybe only work with a ?
button {
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
outline: 5px solid black;
outline-offset: 5px;
}
<button></button>
I have added a picture since this only seems to happen on Safari...Screenshot from Safari snippet
I need it to work in all browsers especially on mobile though.
You can use this "hack".
INFO: In Brave Browser we got a square too with your snippet;
button {
position: relative;
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
margin:10px 2px;
}
button::after {
position: absolute;
top: -10px;
content: '';
left: -10px;
width: 50px;
height: 50px;
border: 5px solid black;
border-radius: 40px;
background-color: transparent;
display: inherit;
}
<button></button>
Safari fixed this bug on Safari Technology Preview 157. Source: https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
According to your question and code snippet that you have provided. From my browser when I ran both the button and the outline was Circle.
I would suggest you to clear your cache and run the code again OR try changing the browser.
Or please update your question with a screenshot as well, so that we can understand better.
I'm trying to get a round button which has a an outline in the same color but that doesn't seem to be possible. The outline always ends up squared. Is there a method to achieve that with a or does it maybe only work with a ?
button {
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
outline: 5px solid black;
outline-offset: 5px;
}
<button></button>
I have added a picture since this only seems to happen on Safari...Screenshot from Safari snippet
I need it to work in all browsers especially on mobile though.
You can use this "hack".
INFO: In Brave Browser we got a square too with your snippet;
button {
position: relative;
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
margin:10px 2px;
}
button::after {
position: absolute;
top: -10px;
content: '';
left: -10px;
width: 50px;
height: 50px;
border: 5px solid black;
border-radius: 40px;
background-color: transparent;
display: inherit;
}
<button></button>
Safari fixed this bug on Safari Technology Preview 157. Source: https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
According to your question and code snippet that you have provided. From my browser when I ran both the button and the outline was Circle.
I would suggest you to clear your cache and run the code again OR try changing the browser.
Or please update your question with a screenshot as well, so that we can understand better.
I've tried almost every different combination of positions on my elements. I have only been web coding for around a month and a half so I'm sure its something super obvious but I can't get the fixed nav-bar to appear in front of the background Images. Especially with the #toggle:checked when it pops down for mobile, the nav links aren't visible since they are behind the images. here is my codepen for the project
.nav{
background: rgba(48, 48, 48, 0.738);
border-bottom: 1px solid black;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
width: 100%;
z-index: 10000;
}
.menu{
margin: 0 30px 0 0;
z-index: 10000;
}
.menu a {
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 70px;
}
https://codepen.io/gogocodesmedia/full/mobJZP
Please help!
Hello I was recently browsing around some demo for websites for client. And saw a really cool thing I liked. So I try to inspect in the browser to see if I replicate the effect on my own. And I have no idea how they did it.
here is the link to the demo
http://www.templatemonster.com/demo/45057.html
And here is a n image to show what I'm talking about.
They have these squares with an overflow at the bottom looking like multiple elements.
I was able to grab the HTML/CSS and replicate the just one box without the overflow. But I can't figure out how to make it look like stacked boxes, nor can I find where the code is.
I tried to replicate using JSFidle as you can see here
HTML
<div class="span2"><div class="service-box boxed green"><figure class="icon"><i class="icon-file-alt"></i></figure><div class="service-box_body"><h2 class="title">Accounting valuations</h2></div></div> </div>
.service-box.boxed {
border-radius: 0px;
box-shadow: none;
padding: 25px 15px;
margin-bottom: 30px;
text-align: center;
position: relative;
background: none repeat scroll 0% 0% #F1F6F9;
overflow: visible;
border: 1px solid #C5D0D2;
}
http://jsfiddle.net/w1defmkz/
You're pretty close but missing the :before and :after pseudo elements:
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:after {
left: 3px;
right: 3px;
bottom: -7px;
}
Here's an updated fiddle: http://jsfiddle.net/w1defmkz/1/
Well, The user has added two more divisions, made them absolute.
You see, the whole span (class = "span2") is positioned relative.
This is the css for the one of them...
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
Js Fiddle: http://jsfiddle.net/3my6rhgL/
I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent