I have a header section that should wrap according to the header image. Every page has a different image so it must be responsive. However header section will not wrap with the image since it is absolutely positioned.
As you can see in the snippet the image has height: auto on it and just overflows outside of the parent. Is there anyway to make the parent wrap according to the image?
*, ::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#header::before, #hero.background-wrapper::before {
opacity: 0.2;
}
.background-wrapper::before {
content: '';
position: absolute;
background-color: #000;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .5;
z-index: 0;
}
#hero {
color: #fff;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
padding-bottom: 60px;
position: relative;
font-family: 'Montserrat', sans-serif;
z-index: 1;
}
.hero-content {
max-width: 911px;
justify-content: flex-start;
text-align: left;
}
.hero-content {
padding: 0;
position: relative;
display: flex;
}
.hero-text {
margin-top: 100px;
max-width: 750px;
}
.background-wrapper picture {
position: absolute;
height: auto;
width: 100%;
inset: 0;
z-index: -1;
aspect-ratio: auto;
}
.background-wrapper picture img {
position: absolute;
height: auto;
width: 100%;
top: 0;
left: 0;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="hero" class="background-wrapper">
<div class="container hero-content">
<div class="hero-text">
<h1>Header</h1>
<h2>Header description</h2>
</div>
</div>
<picture class="hero-picture">
<source srcset="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399.jpg.webp" media="(min-width: 600px)">
<img src="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399-450x300.jpg.webp" alt="landing image" decoding="“async”">
</picture>
</section>
</body>
</html>
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.
Related
I am trying to create an html page that has a section that appears when an element is hovered over. I did this by using :hover + .myclass in my CSS. It was working fine until I tried positioning the elements.My div that needed to appear had a background color, but when I positioned the elements in the div, the background color disappeared! Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Social">
<meta name="description" content="Web-app to find and befriend new people!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu {
display: block;
position: fixed;
top:0%;
left:0%;
height: 100%;
width: 3%;
padding:0%;
margin: 0%;
background-color: greenyellow;
}
.big_menu {
display: none;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.big_menu:hover {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.menu:hover + .big_menu {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
</style>
</head>
<body>
<div class="menu">
<p style="position: absolute; top: 5%; left: 5.8%">Home</p>
</div>
<div class="big_menu">
<p style="position: absolute; top: 5%; left: 5.8%;">Details</p>
</div>
</body>
</html>
Can someone please explain to me why this is happening and how to fix it?
ETA the Correct Answer:
Temani's answer was correct, but I can elaborate a bit: elements positioned absolutely are removed from the flow of the document. Simply removing the absolute position from the second p element is enough to get the background to show
Position: absolute and parent height?
I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.
This is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
<div id="wrapper">
<header id="header"> Welcome </header>
<div id="bannerHolder">
<div class="banner">
OLD BARBER
</div>
<nav id="nav">
Home
Products
About
</nav>
</div>
</div>
<div class="container">
<img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
<div class="overlay">
<div class="text">Shop</div>
</div>
</body>
</html>
Here is the CSS:
/* Imported fonts */
#import url('https://fonts.googleapis.com/css2?family=Merienda:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
#wrapper {
background: orange;
display: block;
margin: auto;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
height: 200%;
left: 0;
margin: auto;
position: relative;
right: 0;
text-align: center;
text-shadow: 2px 2px 4px black;
}
#body{
background-color: gray;
}
#nav{
background-color: orange;
color: black;
display: flex;
justify-content: space-around;
padding: 0.5%;
position: relative;
text-align: center;
}
#h1{
font-family: 'Italianno', cursive;
}
.container{
position: relative;
width: 50%;
}
.img{
display: block;
height: auto;
width: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
transition: .5s ease;
background-color: orange;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: white;
font-size: larger;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Any help is greatly appreciated. Thanks.
EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.
The problem is that You have
<div id="wrapper"> and <div class="container"> below.
<div id="wrapper"> - has position: absolute as a style.
Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is
not auto. The margins of absolutely positioned boxes do not collapse
with other margins.
That means that Your wrapper div, creates no space, so container div ignores its position.
Try to remove position: absolute from Your header.
Edit:
Sorry for late answer
#wrapper {
background: orange;
text-align: center;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
text-align: center;
text-shadow: 2px 2px 4px black;
}
body {
background-color: gray;
margin: 0;
padding: 0;
}
Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.
Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:
html, body {
padding: 0;
margin: 0;
}
https://jsfiddle.net/oamx38y6/36/
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
Here I have three elements which have position: absolute.
First and Second elements are OK, but the third element just doesn't appear.
body {
margin: 0;
padding: 0;
background: red;
position: relative;
}
#first {
border: solid green;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#second {
border: solid blue;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
right: 0;
height: 50px;
}
#third {
position: absolute;
bottom: 0;
right: 0;
border: solid brown;
height: 100px;
padding: 100px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<section id="first"></section>
<section id="second"> </section>
<section id="third"></section>
</body>
</html>
When you use position: absolute on an element, it's removed from the normal flow of the document. When you do that to all of the direct children of an element, it ends up collapsing down and has a height of 0. If you use the web inspector you can confirm that your container, in this case, body, is 0px tall.
Setting the bottom property on #third causes it to align with the bottom of the body element, which is at the top of the viewport, which subsequently results in your element being rendered above the viewport where you can't see it.
If you set a fixed height or min-height on the body you can resolve this. A common pattern is to set the minimum height for the body to be the height of the viewport:
body {
min-height: 100vh;
}
I have the following test here: http://dev.driz.co.uk/gallery/index2.php
The idea is that an image should be centred within the gallery div and have 72px of padding all the way around it. If the image is smaller than the screen, then it will be centred (this part works), however if the image is larger than the screen then it should resize itself to fit depending on the best ratio.
This is achieved by setting the image max-height and max-width to 100% so the image is constrained by its container element. And in this case the container is two faked tables with CSS to centre it on the page.
What's actually happening is the image is just ignoring the max-height property and only applying the width constrain, so it appears off the page.
Any ideas on what the issue is? In the past I have just used JavaScript to position the image in the middle, but would prefer to use just CSS like in the example.
Full code is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Center</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
border; 0;
}
html,body
{
height: 100%;
width: 100%;
}
body
{
overflow: hidden;
}
.gallery
{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.gallery-background
{
background: #333333;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
padding: 72px;
}
.gallery-outer
{
display: table;
width: 100%;
height: 100%;
border-collapse: collapse;
table-layout:fixed;
}
.gallery-inner
{
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.gallery-image
{
position: relative;
}
.gallery-image img
{
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body class="default">
<div class="gallery">
<div class="gallery-background">
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-image">
<img src="EmpireState.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you give an image a max-height of 100%, it looks for its direct parent tag's height. If that doesn't have a height or constrained in anyway, then it can't apply the rule to height of the image. Looking at your HTML/CSS, I would strip it back and simplify it like this:
<div class="gallery">
<div class="gallery-background">
<img src="EmpireState.jpg">
</div>
</div>
And the CSS
.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.gallery-background img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
Hopefully that should sort it out