How can you make absolutely positioned element appear under static element.
Z-index doesn't seem to work. The green box should be above the line (will be white).
http://jsfiddle.net/matthewabrman/pbL52gtj/
html:
<h3 class="line"><span>Lorem Ipsum</span></h3>
css:
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}
Try this. Hope you are trying to get this FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
z-index:-1;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
position: relative;
z-index:1;
}
OR FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
z-index:-1;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}
Related
i'm trying to underline my text with an additional arrow centered on the ligne.
when doing this i can't center my text in the page.
.souligne {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display: inline-block;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
<h2 class="souligne" style="text-align:center;">THIS IS MY HEADER</h2>
The text is not centered when doing this.
.souligne {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display: inline-block;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
<h2 class="souligne" style="text-align:center">THIS IS MY HEADER</h2>
<br>
<center><h2 class="souligne">THIS IS MY HEADER</h2></center>
so when using style="text-align:center" in H2 it doesn't center the text, it works only when using <center>.
You can set h2 to inline-block, and change position of before pseudo-element to 50% se negative margin to half of the arrow and it will be always center fit with title length
h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display:inline-block;
}
h2:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 50%;
margin-left:-12px;
color: #00a7a8;
}
<h2>The Header Is Here</h2>
OK so based on the #Renato Hoxha help, this is what finaly worked for my project.
.souligne {
color: #ea942f;
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #ea942f;
position: relative;
display: table;
margin-left: auto;
margin-right: auto;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 50%;
color: #ea942f;
}
<h2 class="souligne">THIS IS MY HEADER</h2>
I'm writing a document in Typora and I need a paragraph break whitch is a line with text in the middle. The whole document should be exportable to pdf.
result
I currently tried this, but it doesn't work when exporting to pdf:
h3 {
color: #015573;
text-align: center;
font-size: 0.8em;
position: relative;
margin:0;
text-transform: uppercase;
}
h3 span {
background-color: white;
padding: 0 0.3em;
}
h3:before{
content:"";
display: block;
position: absolute;
z-index:-1;
top: 50%;
width: 100%;
border-bottom: 2px solid #015573;
}
Try using below code. It's working fine. You can export to pdf with no problems. I did not use the background-color: white; property because the background color is white by default of any exported pdf. BTW, if you are using a dark theme for Typora, you can specify that property. It won't affect the exported style in the pdf file.
h3 {
color: #015573;
text-align: center;
font-size: 0.8em;
text-transform: uppercase;
overflow: hidden;
}
h3:before,
h3:after {
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
background-color: #015573;
}
h3:before {
right: 0.5em;
margin-left: -50%;
}
h3:after {
left: 0.5em;
margin-right: -50%;
}
<h3>Heading</h3>
This is how exported pdf looks like:
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 600px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<p class="fancy"><span>A fancy subtitle</span></p>
Since few days I'm using SASS to write my css files.
I have two different parents class but this two parents have the same children classes. So I want to build my SCSS tree of this CSS code :
#header {
position: relative;
width: 100%;
}
#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
}
#header .l-header-top, #header-g .l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
I tried this but I think I forget something :
#header {
position: relative;
width: 100%;
&#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
}
Thanks
In your code, if you are using & it means that they are in the same element and in a single element there is only 1 ID. You should use a class in that situation.
#header {
position: relative;
width: 100%;
&#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
but it should be something like this. #header and #header-gestion are you ID parents while they have the same children which are .l-header-top.
#header {
position: relative;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
Or you use & in this way which is based on BEM Methodology in class naming conventions. You can check this link: BEM — Block Element Modifier Methodology
#header {
position: relative;
width: 100%;
&-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
}
}
#header,
#header-g {
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
The pattern has before content inject into the page, but it's not visible can you please suggest what is the issue?
.aloha {
font-family: Medium;
font-size: 74px;
color: green;
position: relative;
display: inline-block;
margin: 0;
height: 85px;
}
.aloha:before {
width: 100%;
height: 85px;
color: red;
content: attr(data-text);
display: block;
}
<h1 date-text='TEXT' class='aloha'>TEXT</h1>
There is a typo in your HTML. Replace date-text with data-text on your <h1> element:
.aloha {
font-family: Medium;
font-size: 74px;
color: green;
position: relative;
display: inline-block;
margin: 0;
height: 85px;
}
.aloha:before {
width: 100%;
height: 85px;
color: red;
content: attr(data-text);
display: block;
}
<h1 data-text='TEXT' class='aloha'>TEXT</h1>
This is my HTML structure:
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
And here are my CSS rules:
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
height: 35px;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
The .pageSlider .slide-button is set to z-index: 1 and .pageSlider a[href] is set to z-index: 2, but the lower z-index actually overlaps the higher.
I somehow need toget the .slide-button under the links, but I can't seem to figure out a better way.
Live demo:
(function(e){e.parseURL=function(e){if(typeof e==="undefined"&&typeof window.location.href!=="undefined")e=window.location.href;var t={whole:/^((http|https):\/\/)?((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/.*/,protocol:/^(http|https):\/\//,absolute:/^\/\/((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\//,relative:/^[\/](?!\/).*(\..*|\/)?.*$/,params:/\?.*=.*(\&.*\=.*)+[^#.*]/},n={protocol:undefined,hostname:undefined,hash:undefined,href:{original:undefined,noparams:undefined},parentDomain:undefined,parameters:undefined,pathname:{nohash:undefined,withhash:undefined},type:undefined};if(typeof e!=="string")throw new TypeError("Argument must be a string!");else if(!t.whole.test(e)&&!t.absolute.test(e)&&!t.relative.test(e))throw new Error("Invalid string");n.href.original=e;if(e.indexOf("#")!==-1){n.hash=e.substring(e.indexOf("#"));e=e.substring(0,e.indexOf("#"))}if(t.params.test(e)){n.parameters={};var r=e.match(t.params)[0].substring(1).split("&");for(var i=0,s=r.length;i<s;i++){var o=r[i].split("=");n.parameters[o[0]]=o[1]}e=e.replace(t.params,"");n.href.noparams=e+(typeof n.hash!=="undefined"?n.hash:"")}if(t.protocol.test(e)){n.protocol=e.match(t.protocol)[0];n.hostname=e.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.parentDomain=n.hostname.split(".");n.parentDomain.splice(0,1);n.parentDomain=n.parentDomain.join(".");if(n.parentDomain=="")n.parentDomain=n.hostname;var u=e.replace(t.protocol,"");n.pathname.nohash=u.substring(u.indexOf("/"));u=undefined;n.type="normal"}else{n.protocol=window.location.href.match(t.protocol)[0];if(t.absolute.test(e)){var u=e.replace(/^\/\//,"");n.hostname=u.substring(0,u.indexOf("/"));n.pathnam.nohashe=u.substring(u.indexOf("/"));n.type="absolute";n.href.original=n.href.original.replace(/^\/\//g,n.protocol)}else if(t.relative.test(e)){n.hostname=window.location.href.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.pathname.nohash=n.href.original;n.type="relative"}else{throw new Error("Invalid string")}}n.pathname.withhash=n.pathname.nohash+n.hash;return n};if(typeof e(".pageSlider")[0]!=="undefined"){e.pageSlider=function(t){if(t==="update"){e('.pageSlider a.active:not([href="'+e.parseURL().hash+'"])').removeClass("active");e('.pageSlider a[href="'+e.parseURL().hash+'"]').addClass("active");e(".pageSlider").each(function(){var t=e(this);var n=t.find("a.slide-button");var r=t.find("a[href]");var i=r.size();var s=100/i;var o=r.index("a.active");r.css("width",s+"%");console.log(o);n.css("width",s+"%").animate({left:o*-1*s+"%"})});return e('.pageSlider a.active[href="'+e.parseURL("/index.php").hash+'"]')}};window.location.hash="lounge";e.pageSlider("update");e(window).on("hashchange",function(){e.pageSlider("update")})}})(jQuery)
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
body{background-color:#777}#media all and (max-width: 500px){.pageSlider{white-space: normal}.pageSlider a[href]{display: block !important;width: 100% !important}.pageSlider [href].active {background-color: #cccc00}.pageSlider .slide-button{display: none}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
You forgot to add:
position:relative;
on your link (.pageSlider a[href]). z-index only applies to positioned elements.