I am modifying a download link to display two icons above it (using pseudo-elements and an icon font). These icons need to be layered.
To do that, I've given the link a position: relative and the second icon (which I'm positioning over top of the first) gets a position: absolute. Then I just adjusted the top and left values until it sat where I wanted.
jsFiddle
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
/* just to make sure everything fits on screen */
padding: 100px;
text-align: center;
}
.download {
position: relative;
color: #000;
text-decoration: none;
}
.download::before {
display: block;
content:'\f1c1';
font-family:'FontAwesome';
font-size: 42pt;
margin-bottom: 10px;
}
.download::after {
position: absolute;
display: block;
content:'\f019';
font-family:'FontAwesome';
font-size: 28pt;
top: -40px;
left: 50%;
margin-left: 5px;
}
Download PDF
In Chrome, it works perfectly. The "download" icon sits right on top of the bottom-right of the "document" icon. In firefox, however, the "download" icon is hovering way above the "document" icon. I suspect this is a result of the pseudo-element not technically being a DOM child of the a.download element, although this example (which doesn't use pseudo-elements) has the same positioning problem.
How do the browsers' implementations of position: absolute in conjunction with pseudo-elements differ, and how can I work around this?
I think i've got it.
The <a> tag is collapsing on Chrome but on Firefox it's being given a box. It seems the best bet would be to give the <a> tag some padding-top to push the text down then also absolutely position the acrobat icon as well. I'm not quite sure how to make it not collapse on Chrome
Example: http://jsfiddle.net/5jn9yw7s/
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
padding: 100px;
text-align: center;
}
.download {
position: relative;
color: #000;
text-decoration: none;
}
.download::before {
position: absolute;
display: block;
content:'\f1c1';
font-family:'FontAwesome';
font-size: 42pt;
top: -52pt;
left: 50%;
margin-left: -21pt;
}
.download::after {
position: absolute;
display: block;
content:'\f019';
font-family:'FontAwesome';
font-size: 28pt;
top: -32pt;
left: 50%;
}
Download PDF
In firefox the pseudo elements' absolute positioning ignored and treated as two relative elements. You can set firefox specific fix for this by adding this to your css:
#-moz-document url-prefix() {
.download::after {
top: 0;
left: 0;
margin-left: 5px;
margin-top:58px
}
}
Working fiddle
Play with margins for better result.
Related
I have read that in order for z-index to take effect, the CSS elements involved need to have "position" attributes. So I have a menu that I would like to appear over an IMG when someone clicks on the menu icon. I have these styles for the menu and the image in the content area ...
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
#personImgDiv {
position: relative;
z-index: 100;
display: table-cell;
width: 80%;
}
However, when I click on the menu icon, the menu is still appearing behind the image -- https://jsfiddle.net/bdcmka1r/2/ . What else am I missing? How do I get the menu to always appear in front?
This is because you're using the wrong selector. .menu-btn is the button class, and it will only affect this button, also there is no way a button can be treated as a container element such as div, nav, header ..etc. Your correct selector will be nav since your menu contained within nav tags. So, you need to add the position and z-index properties to nav selector instead.
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
z-index: 9999;
right: 0%;
top: 100%;
text-align: left;
}
#personImgDiv{
position: relative;
z-index: 100;
}
header{
z-index: 101;
}
I see. you have used z-index:100 in porosinIngDiv and you want to display menu over on image so you have to use z-index more in header then #personImgDiv i have given answer on top it will more clear
dealing with some typography stuff this morning. How come only my .quote::before is working. http://codepen.io/samducker/pen/WpoBOB
EDIT: When I resize it starts appearing below the first line when the text wraps.
<h1 class="quote">“Drink better not more”</h1>
<p><span class="first-letter">A</span> week designed for cocktail lovers, Loves Cocktails is an exciting new 7-day
long festival arriving in Nottingham this April.</p>
.quote {
font-family: $serif-font;
text-align: center;
font-size: 4rem;
padding: 0.3em 0em;
}
.quote::before, .quote::after {
content: "";
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 8px;
width: 32px;
background: #ec3723;
}
p {
max-width: 40em;
margin: auto;
}
.first-letter {
font-size: 3rem;
margin: 20px;
float: left;
}
If you are talking about your ::after element been rendered on resize is because you are not using top property for your absolute positioned element. You need to do something like
.quote {
position: relative;
/* other properties here */
}
.quote::before,
.quote::after {
top: 0;
/* other properties here */
}
Demo
By default, your absolute positioned element renders alongside your text, so when it wraps, and since you don't have top defined, your ::after pseudo was breaking. In order to fix it, I defined top so that no matter how much your text wraps, pseudo elements stay in their place.
As you commented. Over here, I added another declaration where am trying to pull down the ::after pseudo. Also note that am setting top: auto; for ::after pseudo because we are setting top: 0; initially.
Demo 2
I've encountered a strange issue with text positioning in Safari for buttons on a site I've been working on.
1. Is it possible to keep the text center aligned on the buttons while using left: ...; ? Would this fix the issue?
2. Would placing span in a relatively placed div .text-pos with a sub-class .text-pos span ... position: absolute; be bad form? Would it fix the issue?
Code:
.button a span {
z-index: 2;
width: 100%;
position: absolute;
top: 12%;
color: #000000;
text-align: center;
font-size: 4vmin;
}
.button a img {
height: 100%;
display: flex;
}
<div class="button antiques">
<a href="/landing/gallery/antiques/antiques.html">
<img alt="antiques" src="/assets/img_style/plank.png">
<span>ANTIQUES</span>
</a>
</div>
Did not include left: ...; as the text needs to be center aligned on the button.
Result(too new to post images):
http://i.imgur.com/3E55EMH.png
My first thought was that the issue was with vmin, but:
1- Text scales appropriately with browser adjustments.
2- Text on the hover(upper left image frame) also uses vmin, but is
appropriately positioned.
In reference to point two, the text is placed in a relatively positioned div container to force aspect ratio like so:
<div id="wide-container"> /* position: relative; */
<div id="content"> /* position: absolute; */
...
</div>
</div>
I don't have ready access to an OSX machine so any input would be appreciated!
Open minded to any other approaches you may have to offer. Thank you (:
SOLVED
.button {
height: 6vmin;
margin-top:1.5vmin;
margin-bottom:1.5vmin;
position: relative;
}
.button a {
height: 100%;
}
.button:before a {
content: "";
display: block;
}
.button a span {
z-index: 2;
position: absolute;
top: 9%;
bottom: 0;
left: 0;
right: 0;
text-align:center;
width: 100%;
height: 100%;
color: #000000;
font-size: 4vmin;
}
Found the solution by setting the button to be relatively positioned while leaving the text position as absolute. Solution outlined in more detail in the edited question.
The problem came from my misunderstanding of how browsers treat the box model differently. Safari seemed to be taking the contained elements and floating them left individually since the the image had no positioning attributes.
This solution displays more or less the same on Chrome, Firefox, and Safari.
I have a CSS class which outputs a line after a title
This works in Safari and Chrome but in Firefox the line is not appearing.
My Code:
.sidebar h2 {
color: #f7f7f7;
width: 100%;
font-size: 24px;
position: relative;
}
.sidebar h2 span {
background-color: #40d1b0;
padding-right: 2px;
}
.sidebar h2::after {
content:"";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.22em;
border-top: 1px solid rgba(0,0,0,0.10);
z-index: -1;
}
<h2><span>Show</span></h2>
The container div has a class of Sidebar
EDIT
JSFiddle as requested
http://jsfiddle.net/jerswell/Lxsmt96k/
The problem is the z-index, put a lower z-index to the sidebar class, so it won't be hidden anymore.
Here is a new fiddle, I have just simply put z-index: -2; to the .sidebar selector.
PS (nitpicking): In CSS3 after is not a pseudo-class but a pseudo-element, and there is a new notation for it: ::after (however the old notation still works)
If we change z-index of .sidebar in minus value, later it can have a problem for layout. Other elements can overlap this element. We should use :
.sidebar h2{position:relative;}
.sidebar h2 span{position:relative;z-index:2;}
.sidebar h2:after{z-index:1;}
I had this effect working on a Shopify site I designed about a year ago (http://originalchuck.com/), and then tonight, unbeknownst to me, the client decides to buy a new theme, turn it on and now one of my CSS tricks no longer works. If you go to the three images beneath the two blog posts, you'll see the problem. Roll over them, and the image opacity changes. That's the good news. The bad? Some text in a span is also supposed to appear in the dead center of each image, but now it no longer does. My code is the same as the previous theme, so why isn't it working anymore? Here's my CSS:
span.text-content, span.text-content-bags {
color: #ffffff;
font-size: 30px;
left: 0px;
opacity: 0;
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
}
span.text-content span, div.homepage-bags span.text-content-bags span {
left: 0px;
margin-top: -12px;
position: relative;
text-align: center;
top: 50%;
width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
opacity: 1;
display: inline-block;
}
Here's a cool trick to center stuff inside a container:
set position: relative on the outer, containing element, and then on the element you want centered, do this:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
text-align: center;
You also need to set a height and width for the inner element. The units shouldn't matter.
Works in all browsers including at least IE8+. It may even go further back than that.