I have some trouble with bootstrap carousel. I cannot remove blue under lines.
Can someone help me? It's not text decoration (text-decoration: none; doesn't work).
.carousel {
width: 100%;
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-decoration: none !important
}
.carousel-inner,.carousel,.carousel-indicators {
text-decoration: none;
box-shadow: none;
}
.carousel-indicators {
bottom: -150px;
text-decoration: none !important
}
.section1-text {
line-height: 1.55;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
width: 100%;
text-decoration: none !important
}
.section1-text p {
color: white;
font-size: 25px ;
margin-bottom: 30px;
width: 80%;
z-index: 2;
}
Related
Two issues-
I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?
The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?
enter image description here
enter image description here
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
align-items: center;
background-color: #060b26;
display: flex;
height: 80px;
justify-content: start;
position: absolute;
width: 100%;
}
span {
margin-left: 16px;
}
.backgroundImage {
background-image: url('assets/dog.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: blur(2px);
height: 100vh;
width: 100%;
}
.dashboardButton {
background: linear-gradient(
#fd585c,
#ec7278,
#ff5b69
);
border-radius: 8px;
color: #f5f5f5;
display: grid;
font-style: "Poppins", sans-serif;
height: 80px;
left: 43%;
letter-spacing: 3px;
margin: auto;
place-items: center;
position: absolute;
text-decoration: none;
top: 55%;
width: 200px;
}
.welcomeHeader {
color: #fd585c;
display: center;
font-size: 375%;
left: 25%;
position: absolute;
top: 35%
}
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}
I ended up putting:
backgroundImage {
z-index: 1;
}
nav-menu.active {
z-index: 2;
}
That solved the issue!
So I've got a problem where I've got two tabs (https://codepen.io/databell/pen/LYjxvyx) where the first tab opens up content and the second opens up a modal.
Now to be clear, those functions work. That's not the issue. So for those purposes, I deleted those out of my example. Focusing on CSS here.
My problem is I want plus + symbols to appear to the right side of each tab (really a div) and instead one tab has the symbol to the far right of the container, even though the tab is set to width 100%. So I'm stumped as to what the problem is.
This is meant to go into a Shopify store using the Dawn theme, so I'm using their elements here to create this interface.
Here's the code.
<div id="info-additions" class="product__accordion accordion info-additions-content" >
<details>
<summary>
<div class="summary__title info-additions-tab g-flex">
<h2 class="h4 accordion__title t-body benefits">
Tab One
<span></span>
</h2>
</div>
<div class="summary__title info-additions-tab g-flex">
<modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-ingr">
<button id="ProductPopup-ingr" class="summary__title t-body ingredients" type="button" aria-haspopup="dialog" data-additions-tab="ingredients">
<h2 class="h4 accordion__title">
Tab Two
<span></span>
</h2>
</button>
</modal-opener>
</div>
</summary>
<div class="accordion__content rte">
<p>Content</p>
</div>
</details>
</div>
CSS:
body {
font-size: 1.6rem;
}
*, ::before, ::after {
box-sizing: inherit;
}
.h0, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
letter-spacing: .06rem;
line-height: 1.3;
}
.h4, h4 {
font-size: 1.6rem;
}
.grid {
list-style: none;
}
.g-flex {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.accordion summary {
cursor: pointer;
display: flex;
position: relative;
list-style: none;
line-height: 1;
padding: 1.5rem 0;
}
.accordion__title {
display: inline-block;
max-width: calc(100% - 6rem);
min-height: 1.6rem;
margin: 0;
word-break: break-word;
}
details > * {
box-sizing: border-box;
}
.accordion__title {
word-break: break-word;
}
.accordion .summary__title {
display: flex;
flex: 1;
}
#info-additions {
clear: both;
height: auto;
margin: 15px 0 0;
border-top: 2px solid;
border-bottom: 2px solid;
width: 100%;
}
.info-additions-content {
position: relative;
height: 0;
transition: .6s var(--a-cubic-1);
}
.info-additions-tab {
justify-content: space-between;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab button {
position: relative;
padding: 16px 0!important;
line-height: 1;
font-weight: 500;
text-align: left;
}
.info-additions-tab button.benefits {
width: 50%;
}
.info-additions-tab .product-popup-modal__opener {
width: 100% !important;
}
.info-additions-tab button.ingredients {
width: 100%;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab span:before,
.info-additions-tab span:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
width: 2px;
height: 18px;
background-color: black;
transition: 0.3s;
}
.info-additions-tab button:not(.active) span:after {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.info-additions-content {
position: relative;
height: 0;
transition: 0.6s var(--a-cubic-1);
}
.info-additions-content [data-additions-content] {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding: 5px 0 20px;
opacity: 0;
pointer-events: none;
transition: 0.3s 0s;
}
.info-additions-content [data-additions-content].active {
opacity: 1;
pointer-events: auto;
transition-delay: 0.4s;
}
#info-additions button {
padding: 0;
background: transparent;
color: inherit;
cursor: pointer;
border: 0;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
transition: 0.2s;
}
if you want an absolute element like + to stay in the parent element you have to set the position of the parent to "relative".
you have two problems. summary__title doesn't have a position so + doesn't stay in it .
for the second tab, your modal button has a relative position that makes the + stay inside of it instead of the summary__title.
.accordion .summary__title {
...
position: relative; // add position
}
#info-additions button {
...
position: unset; // unset the position of the button
}
I'm learning css(scss) and i've problem with stylistic my text.
How i can get text in one line and how to center icon from fontawsome to the text?
main {
overflow: hidden;
opacity: 0.6;
.icons {
display: block;
position: relative;
font-size: 3rem;
opacity: 1;
.fire {
color: red;
display: flex;
padding-top: 5%;
padding-left: 3%;
position: absolute;
margin-top: 10%;
p {
padding-left: 5%;
display: flex;
color: blanchedalmond;
}
}
}
}
I have a div appearing on top of an image when I hover the image itself. The div contains two divs (buttons) that also have a :hover that changes their color and sets the cursor to the pointer.
The issue is the hovering on the button doesn't trigger the hover.
Also, it seems that hovering on the image at the bottom where the btn_container will appear doesn't trigger to first :hover and doesn't make the btn_container appear.
//HTML
<div class="container">
<img src="src">
<div class="btn_container">
<div class=" btn">
<p>Select</p>
</div>
<div class="btn">
<p>Preview</p>
</div>
</div>
//SCSS
.container {
position: relative;
width: 100%;
img {
width: 100%;
height: auto;
}
.btn_container {
position: absolute;
width: 100%;
height: 40px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
display: none;
position: absolute;
}
img:hover + .btn_container,
.btn_container > * {
display: flex;
border: none;
text-align: center;
justify-content: space-around;
}
.btn {
padding: 6px 12px;
height: 14px;
background: var(--yellow-medium);
border-radius: 8px;
display: flex;
justify-content: space-evenly;
align-items: center;
color: var(--white);
font-family: roboto;
&:hover {
cursor: pointer;
background: var(--red);
color: var(--white);
}
}
}
Preview, button hovering not working:
If I force the hover on the img using the inspector, the button hovering seems to work:
The problem is in classes img:hover + .btn_container and .btn_container > *.
Here is the updated scss:
.container {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
height: auto;
border: 0;
}
&:hover .btn_container {
display: flex;
}
.btn_container {
position: absolute;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: space-around;
width: 100%;
height: 40px;
text-align: center;
background-color: var(--dark-purple-trans);
border: none;
}
.btn {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 14px;
padding: 6px 12px;
color: var(--white);
font-family: roboto;
background-color: var(--yellow-medium);
border-radius: 8px;
cursor: pointer;
&:hover {
color: var(--white);
background-color: var(--red);
}
}
}
You can view it in action here: Codepen
I tried using opacity instead of display to toggle visibility of the btn_container and added a hover to btn_container and it seemed to work: https://jsfiddle.net/pr8dxe2g/1/
.btn_container {
width: 500px;
height: 100px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
opacity: 0;
position: absolute;
}
img:hover + .btn_container,
.btn_container:hover,
.btn_container > * {
display: flex;
opacity: 1;
border: 1px solid blue;
text-align: center;
justify-content: space-around;
}
There may be some issue with your current code with the fact that the the img div has a higher stack-order if the display is set to none initially, however I am not certain so if anyone knows I would like to know why this is the case as well.
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.