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>
Related
This question already has answers here:
What are the various ways to hide a <div>?
(5 answers)
Can I have an onclick effect in CSS?
(14 answers)
Closed 2 years ago.
I have an a element that acts like a toggle button :
var container = document.getElementsByClassName("favorite");
for (var i = 0; i < container.length; i++) {
//For each element in the container array, add an onclick event.
container[i].onclick = function(event) {
this.classList.toggle('selected');
}
}
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
.container .favorite {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
cursor: pointer;
}
.container .favorite:hover {
background: #D9DEEA;
}
.container .favorite::after {
z-index: 2;
position: relative;
margin: auto;
height: 20px;
content: url("https://img.icons8.com/ios/16/000000/star.png");
}
.container .favorite.selected::after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<a class="favorite"></a>
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I want to transform it to a checkbox, but the solutions I find are for a checkbox with a label, I only want to use the checkbox in my html without the label or some additional div, this is what I tried :
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 20px;
width: 20px;
position: absolute;
opacity: 1;
margin: auto;
height: 20px;
cursor: pointer;
top: 10px;
right: 10px;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 20px;
width: 20px;
pointer-events: none;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
Which doesn't look good.
How can I fix this ? and thanks in advance.
You can add appearance:none to remove to checkbox appearance and set fixed height/width to checkbox and :after, changing :after to flex allows you to center the background.
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 40px;
width: 40px;
position: absolute;
opacity: 1;
margin: auto;
cursor: pointer;
top: 10px;
right: 10px;
appearance: none;
outline: none;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 40px;
width: 40px;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I am currently trying to center favicons in this circular background so it can change color on hover. I am struggling a little bit to center it, though. I tried text-align: center but that was no use. Not very up to speed with CSS. What should I be doing instead?
https://codepen.io/teecp/pen/gOYRwbO
One way to solve this problem is to set fixed height and width on the parent element. Then set the icon's dimensions the same with a line height that measures its height.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 20%;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
/* Added the properties below */
height: 50px;
width: 50px;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar .fas:hover {
background: #ffffff1a;
border-radius: 90px;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
/* Added the block below */
.fa, .far, .fas {
font-family: "Font Awesome 5 Pro";
line-height: 50px!important;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<i class="fas fa-home"></i>
<i class="fas fa-chess-queen"></i>
<div id="main">
hello
</div>
Remove padding, add width, height and line-height.
.sidebar a {
position: relative;
left: 20%;
height: 50px;
width: 50px;
line-height: 55px;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
color: #ffffff;
display: block;
margin-bottom: 10px;
}
I have an relative button
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative
}
I am trying to center it in the middle of screen. But it is stuck on the same place , the margins does not affect it. Parent element of this button is div with styles as follows:
parent {
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
}
What could possibly cause this? Demo is here
html,
body {
height: 100%;
}
body {
margin: 0;
}
.button {
width: 305.4px;
height: 60px;
background: #E43B40;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.parent{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-color: #F8F8F8;
text-align: center;
}
<div class="parent">
<button class="button" type="button">Button</button>
</div>
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
display:inline-block;
float:none;
}
parent{
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
text-align:center;
}
i have updated both classes. apply it in your css.
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;
}
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.