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>
Related
what i'm trying to make it look like
I'm trying to put a div with a background over an img, I've looked over a lot of resources and when I make a background color the background color covers the whole image.
<div class="containerBox">
<div class="text-box">
<h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Oragnic Tea</h4>
</div>
<img class="img-responsive" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
h4 {
display: inline-block;
font-size: 20px; /*or whatever you want*/
}
img {
display: block;
}
There are a lot of ways to do that. Depends on what you specifically need.
If you can let go img tag and use background image (which is in general considered better), i recommend on using the following code snippet. (This may have extra lines of code but it solves the purpose, please delete these extra lines.)
<div class="containerBox">
<div class="text-box">
<h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Oragnic Tea</h4>
</div>
</div>
<style>
.text-box {
display: grid;
/* Or Flex */
place-items: center;
/* Or For Flex use align-items and justify-content */
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}
.text-box::before {
content: '';
background: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg') no-repeat center center/cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 1;
/* Opacity: as you like */
}
h4 {
display: grid;
place-items: center;
height: 20%;
width: 1000px;
color: white;
background-color: rgba(0, 0, 0, 0.541);
/* Or whatever you want */
}
</style>
If you want img tag:
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
z-index: 1;
}
h4 {
display: grid;
place-items: center;
height: 30%;
width: 80%;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.555);
/*or whatever you want*/
}
img {
display: block;
}
If by background color you meant background color of text-box, then you need to reduce its heigth and width else use ::before pseudo selector and set its height and width.
There is a div with a class of favourite which is not aligning in the header section.
Yes this is a react project but it is edited like a normal project for this question.
<div className='header'>
<img class='profilePhoto' src='./userIcon'></img>
<div class='brand-logo'>
</div>
<div class='favourite'>Favourite</div> <!-- This Favourite is going outisde div.header-->
</div>
CSS File:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
height: 5rem;
background: #2475b0;
position: fixed;
}
.profilePhoto {
position: absolute;
margin-left: 32px;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
}
.brand-logo {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.favourite {
display: inline-block;
position: relative;
right: 3rem;
}
Brand Logo CSS
.icon-box {
background: #eaf0f1;
width: 19rem;
height: 75%;
border-radius: 1rem;
text-align: center;
vertical-align: bottom;
}
.brand-name {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
margin-top: 0.3rem;
font-family: 'Luckiest Guy', cursive;
font-size: 2rem;
}
Image Preview:
Any tip will be helpful.. Thank you in advance
Try this piece of code in favourite class.
.favourite {
text-align: right;
position: relative;
right: 3rem;
margin-top: -45px;
}
Adjust margin-top as your need.
Increase the height of header div
.header {
height: 10rem;
}
You don't need to give position for make your logo in center. Just remove fix height from header and try using padding. Hope will help you.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
padding: 20px;
background: #2475b0;
position: fixed;
}
<div class='header'>
<div class='brand-logo'>
<img class='profilePhoto' src='/userIcon'>
</div>
<div class='favourite'>Favourite</div> <!-- This Favourite is going outisde div.header-->
</div>
add display: inline-block to 3 classes:
.profilePhoto, .brand-logo, .favourite {
display: inline-block;
}
and remove position attribute in class favourite. One more, i think you should use 'class' attribute, not 'className' like :
<div className='header'>
Try this just add height and padding.
.header {
width: 100vw;
height: 10rem;
background: #2475b0;
padding-bottom:10px;
position: fixed;
}
Thanks: https://stackoverflow.com/users/2875348/ravibagul91
Guys this is happening because .brand-logo is taking 100% height!
When I removed:
height: 100%
then code is working fine...
I just simply removed flexbox and used position property to align my .brand-logo
.brand-logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
height: 5rem;
background: #2475b0;
position: fixed;
}
.profilePhoto {
position: absolute;
margin-left: 32px;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
}
.brand-logo {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.favourite {
display: flex;
position: fixed;
top: 50px;
left: 10px;
}
<div class='header'>
<img class='profilePhoto' src='./userIcon'>
<div class='favourite'>Favourite</div>
<div class='brand-logo'></div>
</div>
got a problem with wrapping a flexbox, when the width is too small to display both. Here is a fullscreen screen: Shows a fullscreen-site
So here is what happens if reduce the browser width: reduced width
Now, if I reduce the width again, it looks like that: 1 mm more reduced than before
But of course, it should be among themselves.
body {
background-color: aquamarine;
}
#Wrapper,
body,
html,
main,
nav,
header,
div,
class,
footer {
margin: 0;
padding: 0;
}
main {}
header h1 {
position: relative;
width: 50%;
top: 8vh;
left: 25%;
text-align: center;
margin: 0;
padding: 0;
font-family: 'Bree Serif', serif;
color: deeppink;
}
.Container {
position: absolute;
top: 25%;
left: 30vw;
display: flex;
height: 50%;
width: 40%;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
width: 16em;
background-color: lightslategrey;
}
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<div id="Wrapper">
<header>
<nav>
</nav>
<h1>This is a heading and it's extra long to test stuff.</h1>
</header>
<main>
<div class="Container">
<div class="item">
</div>
<div class="item">
</div>
</div>
</main>
</div>
I see a few issues on your CSS that forces this behavior on your boxes item.
The main issue is that you limit your container to a width of 40% and then when you resize your window, there's no space for the inner boxes to be displayed correctly.
I'd give a full width: 100% to the container, left: 0 and justify-content: center.
Then I'd give margins-left and right to the inner items.
So your CSS to something like this:
.Container {
position: absolute;
top: 25%;
left: 0;
display: flex;
height: 50%;
width: 100%;
flex-flow: row wrap;
justify-content: center;
}
.item {
width: 16em;
background-color: lightslategrey;
margin: 0 30px;
}
This solves partially the issue as your inner boxes are still overlaped if you reduce your window size.
To solve it for real, you'd probably need a mediaquery to make the inner boxes smaller when the window is resized.
It could be something like this:
#media all and (max-width: 650px) {
.item {
width: 8em;
}
}
Here's a codepen so you can see the results: https://codepen.io/annabranco/pen/VEjXOL
I have an H6 tag and another div containing a button sharing the same row (div). I need the h6 tag to be entered, both vertically and horizontally, so I use margin:auto on it, and it works great. I want the div containing the button to be 20px from the left of the screen, but at the same level of the centered h6 tag; i.e I want it entered vertically too. Ive used the following on it with position:absolute and margin:auto 0; but it doesn't work. The button appears at the top left of the enclosing div (run my snippet). Any ideas?
left: 20px;
zoom: 0;
position: absolute;
margin:auto 0;
.container { align-items: center;
width: 100%;
max-width: 100%;
height: 400px}
.top { display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: 80%;
margin: 0 auto; background: #f6f6f6;}
.bottom { display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: 20%;
margin: 0 auto; background: green;}
h6 { margin: auto; }
.back-button-block { background: none;
display: block !important;
left: 20px;
zoom: 0;
position: absolute;
margin:auto 0;
}
<div class="container">
<div class="top">Hello</div>
<div class="bottom">
<div class="back-button-block">THIS</div>
<h6>hi</h6></div>
</div>
Additional CSS (rest as it is, just add it to your selectors):
.bottom {
position: relative;
}
.back-button-block {
top: 50%;
transform: translateY(-50%);
}
I am giving a width to a div with display table cell property but it is not working .
My code is
<header class="header layers">
<div class="wrap">
<h1 id="title"><?php echo $blogtitle;?></h1>
</div>
</header>
And the css is
.layers {
position: absolute;
display: table;
top: 0;
left: 0;
overflow: hidden;
box-sizing: border-box;
table-layout: fixed;
}
.wrap {
height: 100%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
display: table-cell;
vertical-align: middle;
width: 1040px;
}
.header {
height: 80px;
width: 100%;
}
#title {
font-size: 30px;
color: black;
font-family: 'Roboto', sans-serif;
}
But i don't know why it is not working this time i have used it many time with no problem . When i see the width of the wrap class in inspect element it is setting it to 100% with no error .
Please help . Appreciate any anwser and comment .
The fiddle link is this https://jsfiddle.net/yashag/zhsxLhzj/
As requested in the comments, here is an example of using display: flex (flexbox) to vertically-align text (as you were trying to do with display: table-cell). You can also specify width and height of a flexbox easily, like a normal block element.
As you can see, the display:flex element correctly vertically-centers the text, and can be set to a 1040px width correctly.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
div#container {
display: flex;
align-items: center;
height: 100%;
width: 1040px;
}
div#centered {
height: 20px;
width: 100%;
text-align: center;
}
<div id="container">
<div id="centered">Vertically-centered using <code>display: flex</code>.</div>
</div>