I have a header in which are nested 2 divs (navigation) and one img (logo) element. I declared -webkit-filter: grayscale(1) in the header and it works well as expected applying grayscale to everything contained in the header. Only problem is I don't want grayscale applied to the logo.
Have tried many options (none of which work):
took logo out of the header (creates blank space)
created a divaround the header & placed img within in but outside
header(createsblank space)
used a variety of selectors to isolate img such as :not (no
effect)
The html is:
<body>
<header>
<nav class="navbar-fixed-bottom">
<ul class="navbar-nav">
<li>
news
</li>
<li>
recipe
</li>
<li>
event
</li>
<li>
food
</li>
</ul>
</nav>
<img class="logo" src="images/main_logo_03.png" alt="main">
</header>
The css is (note: am using flexbox):
html , body{
margin: 0;
padding: 0;
position: relative;
overflow-x: hidden;
}
header {
height: 100vh;
width: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;
font-size: 100%;
position: relative;
margin-bottom: 1%;
background-image: url(../chateau-default3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-filter: grayscale(1);
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
.navbar-fixed-bottom {
width: 100%;
height: 10%;
position: absolute;
bottom: 0px;
margin: auto;
padding: 0;
}
.navbar-nav > ul{
margin-left: auto;
margin-right: auto;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo{
height: auto;
width: auto;
max-height: 41%;
max-width: 41%;
position: relative;
top: -7%;
}
How do i get .logo to be untouched by the grayscale - while keeping it in its position in the center of the header? (am only looking for application on chrome) Would appreciate insights.
Found a workaround - took .logo outside the header and positioned it absolutely.
Related
So I'm more of a backend than a frontend dev,
I'm having some difficulty on css.
<div className="--Hero">
<div className="--Hero-container-text">
<h1>this is me</h1>
<p>hello</p>
note: className is because of react.
I want the text to stay relative to the background image on hero-container-text as seen below.
another example showing a different viewport.
Here's the css.
.--Hero {
width: 100%;
height: 90vh;
background-image: url("./images/homepage/manpass.svg");
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.--Hero-container-text {
position: fixed;
left: 60%;
top: 40%;
padding: 0 60px;
}
You should add position:relative; to your --hero and position:absolute; to your
--Hero-container-text
you set the div you want to technicaly be your canvas with a position: relative;
Avoid using percenteges for the positioning since they will most likely break ,instead use left 0 right 0 with auto margin , the code will look something like this :
.--Hero {
width: 100%;
height: 90vh;
background-image: url("./images/homepage/manpass.svg");
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
position:relative;
}
.--Hero-container-text {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
I have two two containers, a navigation bar and the hero below it. I only set background-image for the hero and I have no background-image set for the navigation bar. However, the background for the navigation bar seems to be set automatically the same as the hero.
Part of my css looks like below:
.Nav {
height: 55px;
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
z-index: 100;
position: fixed;
width: 100%;
opacity: 0.8;
}
.HeroWrapper{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
background-image: url("images/pencil.jpg");
background-size: 100px;
}
and my html is like:
<div class = "Nav"></div>
<div class = "HeroWrapper"></div>
This is happening because of the position values of both of your divs (fixed and relative).
It looks like .Nav has a transparent background by default. If you do not want .Nav to have this background you could simply specify another such as background: white;
.Nav {
height: 55px;
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
z-index: 100;
position: fixed;
width: 100%;
opacity: 0.8;
background: white
}
I'm attempting to insert a logo image using css on a element with background-image.
However, I couldn't get the a:before box to respect a's padding.
The first example in the snippet below is using width, height and display: block but nothing get shown at all.
So, I tried with position: absolute in second example. The logo is shown but it's not respecting a's padding.
How do I make it so the logo fit inside the padding of a?
Current
Expected
What I want to avoid doing
Due to responsive design requirement, I'd like the logo's size to change based on the a's element size. Therefore, below are some things I'd like to avoid.
Using fixed values to fit .logo:before inside a's padding.
Amending a styles
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: center;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
padding-top: .3125rem;
padding-bottom: .3125rem;
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
display: block;
}
.logo.absolute:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
<div class="container">
<a class="logo absolute">Logo</a>
<p>Navigation links</p>
</div>
Try to change the value of top and bottom property of your logo to .3125rem;
.logo.absolute:before {
position: absolute;
left: 0;
right: 0;
top: .3125rem;
bottom: .3125rem;
}
I removed the padding for logo and added min-height: 28px; to your background image. Looking forward to further question.
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: center;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
/*padding-top: .3125rem;
padding-bottom: .3125rem;*/
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
display: block;
min-height: 28px;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
<div class="container">
<a class="logo absolute">Logo</a>
<p>Navigation links</p>
</div>
Since .logo:before's content is an empty string, nothing will ever be displayed unless height is explicitly defined with a fixed value.
content: ' ' can fix the problem but this is just a patch rather than a root fix.
The root cause is due to align-items: center in .container which will align the content in the middle vertically with its minimum height required. A combination with empty content caused .logo:before element to not show anything at all.
The current desired behavior is wanting .logo's height to match the navigation links' height, there's no need to use align-items: center here and normal should do fine.
The position: absolute method will always ignore padding.
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: normal;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
background-color: gray;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
padding-top: .3125rem;
padding-bottom: .3125rem;
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
I have a proplem with center img in the div. I read and doing all answers in the questions about center align. And display: flex help me, but it doing my slick-slider jumping. 3 screen it seems good and next jump with no slides 1 second and next good. You can see it in my site. How can i centralize my img in the div without flex and position: absolute? Or how can I doing that without jump slider? I hope guys, you understand my English, and sorry for that simple question...
div {
display: flex!important;
justify-content: center;
align-items: center;
outline: none;
height: 100%;
max-height: 100%;
img{
width: 50%;
}
}
<div class="partners multiple-items">
<div>
<img src="img/logo-adata.png">
</div>
</div>
Do you need the img tag?
One way to achieve this is to use background-image instead of img. Simple remove the img tag, then you can center the image as
.img__wrapper {
background-image: url(img/news-img-1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
Here is how it can be done with the img tag
.img__wrapper {
height: 100%;
position: relative;
}
.img__wrapper > img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
Try to use
display: table-cell;
vertical-align: middle;
.partners
{
width: 500px;
height: 500px;
border: 1px #aaa solid;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.item{
width: 300px;
margin: auto;
}
<div class="partners multiple-items">
<div class="item">
<img src="http://via.placeholder.com/300x300">
</div>
</div>
div {
display: flex!important;
align-items: center;
outline: none;
height: 100%;
max-height: 100%;
img{
margin: 0 auto;
width: auto;
max-height: 65%;
}
}
It's solve my problem & slider don't jump
div.partners div{
height:500px;width:500px;text-align:center; vertical-align:middle;display:table-cell;
}
Before I made this second section tag I have another section before it, that have this code. Here:
HTML
<div class="about-me-section">
<div class="about-me-overlay">
<h1>Hi I'm Marielle,</h1>
<p>A web developer and self-enthusiast</p>
</div>
</div>
CSS
.about-me-section {
background: url(https://images.unsplash.com/photo-1498622601663-8277ceda5cb6?auto=format&fit=crop&w=791&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.about-me-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #0a1725;
opacity: .94;
z-index: 0;
}
.about-me-overlay {
flex: 1;
margin: auto;
color: white;
text-align: center;
z-index: 6;
}
.about-me-overlay p {
font-size: 1.5rem;
}
Now, I'm designing my second section tag, when I'm adding padding, margin, height or width it won't display the changes I made in my css.
HTML
<section id="background-technologies">
<div class="techno-wrapper">
<h1>Services <hr class="header-style-bottom-2"></h1>
</div>
</section>
CSS
#background-techonologies section {
max-width: 100%;
margin: 0;
padding: 0 2em;
}
#background-technologies h1 {
text-align: center;
}
#background-technologies .techno-wrapper {
margin: 0;
width: 100%;
}
Here's a screenshot of the display in my chrome dev tools
link here
You have a spelling error in your css. Your section id in your html is “#background-technologies” however in your css it’s “#background-techonologies”.