In summary, I made a container div (parent) with a position: relative, then added 3 children divs with position: absolute. I am now trying to add another div that is below all of this, i.e. the next section of a website. But now the next div appears under the first main "parent" div. From endless searching on here and google I though a main div with position relative would not destroy the flow, but obviously it did or else I would't be posting.
I now want to have another div outside of the parent so that it will go under this first div and make for a nice, scolling website. Please look at my CSS and help me understand why the absolute elements inside a relative element messed up the flow. (I'm new to CSS, so any pro tips are appreciated!)
Here is an image of the website so you get a feel
*{
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
/* Arranging the parent and child elements so
images can overlap */
.child {
top: 0;
}
.child-1 {
position: absolute;
left: 0;
z-index: 100;
}
.child-2 {
position: absolute;
right: 0;
z-index: 1;
}
.child-3 {
position: absolute;
padding-top: 38%;
left: 0;
}
#parent {
position: relative;
height: auto;
}
.hero-text {
position: absolute;
text-align: center;
right: 10vw;
top: 28vw;
z-index: 9;
font-size: 3.5vw;
float: right;
color: white;
}
/* Responsive viewport area,
Logo resize based on the screen size */
#logo_png {
max-width: 25vw;
}
#hero_img {
max-width: 85vw;
}
#green_circle_png {
max-width: 40vw;
}
/* NAV BAR STYLING */
#container {
position: absolute;
z-index: 900;
width: 95%;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 5vw; /* margin-left obly touches the left margin, not L & R */
padding-top: 25px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 1.4vw;
}
nav a:hover {
color: black;
}
.p1 {
color: #f5f7ff;
font-size: 10vw;
}
#test {
position: relative;
}
<body>
<div id="parent">
<div class="child child-1">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/>
</a>
</h1>
</div>
<div class="child child-2">
<h1>
<img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/>
</h1>
</div>
<div class="child child-3">
<h1>
<img id="green_circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists"/>
</h1>
</div>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li>Mission</li>
<li>About</li>
<li>Events</li>
<li>Donate</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>
<h2 class="p1">HELP MEEEE</h2>
</body>
I don't think there's necessarily anything wrong with using absolute positioning for some elements. The main problem you are experiencing is that because everything inside #parent is absolute positioning #parent collapses and has zero height. If you want to do overlapping circles, absolute positioning is a valid way to do it, but you have to expressly set a height for #parent.
Below is a modified copy of your code. I want to emphasize it is a very rough starting point, and by no means is it complete, but I think it demonstrates some of the things you can do. Even with absolute positioning of the circle elements it is still fairly responsive and it could be made fully responsive by adding appropriate media queries to the css.
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
/* Arranging the parent and child elements so
images can overlap */
.child {
position: absolute;
}
.child-1 {
top: -75px;
left: -75px;
z-index: 100;
width: 300px;
height: 300px;
max-width: 50vw;
max-height: 50vw;
background: blue;
border-radius: 50%;
}
.child-1 h1 {
position: absolute;
right: 10%;
bottom: 20%;
background: white;
}
.child-2 {
right: -40vw;
top: -50vw;
z-index: 1;
width: 120vw;
height: 120vw;
background: center / contain no-repeat url("./Images/circle_hands_lbsphoto.png"), content-box linear-gradient(lightgray, lightgray);
border-radius: 50%;
}
.child-3 {
top: 60vh;
left: -5vw;
width: 550px;
height: 550px;
max-width: 50vw;
max-height: 50vw;
border-radius: 50%;
background: lightgreen;
}
#parent {
position: relative;
min-height: 100vh;
height: 550px;
width: 100vw;
overflow: hidden;
}
.hero-text {
position: absolute;
text-align: center;
left: 40%;
transform: translateX(-50%);
top: 60%;
z-index: 9;
font-size: 3.5vw;
color: white;
}
/* Responsive viewport area,
Logo resize based on the screen size */
#logo_png {
max-width: 25vw;
}
#hero_img {
max-width: 85vw;
}
#green_circle_png {
max-width: 40vw;
position: absolute;
bottom: 20%;
left: 20%;
}
/* NAV BAR STYLING */
#container {
z-index: 900;
width: 100%;
margin: 0 auto;
position: sticky;
top: 0;
background: #fff;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 5vw; /* margin-left obly touches the left margin, not L & R */
padding-top: 25px;
position: relative;
}
nav a {
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 1.4vw;
}
nav a:hover {
color: black;
}
.p1 {
color: #f5f7ff;
font-size: 10vw;
}
#test {
position: relative;
}
<body>
<div id="parent">
<div class="child child-1">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists 1"/>
</a>
</h1>
</div>
<div class="child child-2">
<img id="hero_img" alt="Little Big Scientists 2"/>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
</div>
<div class="child child-3">
<h1>
<img id="green_circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists 3"/>
</h1>
</div>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li>Mission</li>
<li>About</li>
<li>Events</li>
<li>Donate</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>
<h2 class="p1">HELP MEEEE</h2>
</body>
Related
I'm new to Bootstrap. Trying to implement a fixed footer to the page with a logo whose height > height of the footer. The footer with an image are fixed at the bottom, while the image sticks out of the footer.
Like this...
If I make the image a part of the footer it resizes to the height of the footer. How do I implement this? I have been stuck on this for a while now.
/***Footer***/
footer {
width: 100%;
z-index: 9;
background: #bff;
position: fixed;
bottom: 0px;
left: 0px;
height: 40px;
padding: 0 25px;
color: #808080;
}
.foot-lg {}
.foot-lg img {
width: 50px;
}
.footer-logo-copyright,
.foot-menu,
.foot-social {
overflow: hidden;
display: flex;
height: 40px;
}
/*** added on 04.Jun.21 to display GPTW logo sticking out of footer ***/
.foot-pop img {
overflow: visible;
max-height: 100%;
height: 100%;
width: auto;
}
/**********************************************************************/
.footer-logo-copyright *,
.foot-menu *,
.foot-social * {
align-self: center;
}
.footer-logo-copyright p {
padding: 0 10px;
font-size: 11px;
}
.foot-menu li {
float: left;
list-style: none;
border-right: 1px solid #808080;
}
.foot-menu li:last-child {
border-right: none;
}
.foot-menu li a {
display: block;
padding: 0px 15px;
text-decoration: none;
color: #808080;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
}
.foot-menu li:hover a {
color: #f37e1f;
}
.foot-social li {
float: left;
margin-right: 10px;
}
.foot-social li:last-child {
margin-right: 0;
}
.foot-social li a img {
width: 13px;
filter: invert(.7);
opacity: 0.5;
}
.foot-social li:hover a img {
/* filter: invert(0); */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-pd">
<div class="footer-logo-copyright">
<a href="" class="pull-left foot-lg">
<img src="img/logo-animation.gif" alt="footer-logo">
</a>
<p class="pull-left">is a registered trademark of XYZ Pty Ltd.</p>
<p class="pull-left">© 2021. all rights reserve to XYZ Pty Ltd.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<ul class="pull-right foot-menu">
<li>
Careers
</li>
<li>
Sitemap
</li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
<ul class="foot-pop pull right">
<li>
<a href="# ">
<img src="img/gptw21.jpg ">
</a>
</li>
</ul>
<ul class="foot-social pull-right ">
<li>
<a href="https://www.linkedin.com/company/sjs-enterprises-pvt.-ltd./?originalSubdomain=in " class=" ">
<img src="img/linked-in-logo-key.svg ">
</a>
</li>
</ul>
</div>
</div>
</footer>
Thanks
Keep the HTML structure you have now, that is with the logo as part of the footer so it is positioned and is sized in relation to the footer.
What you want is for the logo to be able to be set at the bottom of the footer (perhaps with some padding or a margin) but to have, say, twice the height, or the height of the footer plus a bit (it's not possible to tell exactly which from the question).
This boiled-down snippet assumes you want the logo to be the height of the footer plus a bit. If you want it to be twice the height of the footer, say, see the comment.
body {
width: 100vw;
height: 100vh;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
background-color: cyan;
}
footer .logo {
position: absolute;
right: 1vmin;
bottom: 1vmin;
height: calc(100% + 30px); /* CHANGE to be what you want - e.g. height: 200% for twice the footer height %/
width: auto;
}
<footer>
<img src="https://i.stack.imgur.com/csy1S.png" class="logo">
</div>
</footer>
In your img tag add following style :
img {
max-height: 100%;
height: 100%;
width: auto;
}
If you're wanting to have a fixed image appear in the corner of the page, over the footer, you can easily use fixed positioning to achieve the desired result.
All you would need to do is create a new div container and add the fixed positioning to that element. See the below implementation for more information.
<style>
.fixed-image {
position: fixed;
bottom: 0;
right: 0;
}
</style>
<div class="fixed-image">
<img src="https://dummyimage.com/120x170/000/fff" alt="Image">
</div>
Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Attached is a JsFiddle:
https://jsfiddle.net/aus_tin/0dsoqecz/2/
You can achieve this result if you make the footer relative positioned and image as absolute
position: absolute;
bottom: 0;
right: 20px; // Change it as per your requirement
html,
body {
height: 100%;
background-color: cadetblue;
margin: 0;
padding: 0;
}
div#wrapper {
height: 100%;
display: grid;
grid-template-rows: 100px auto 50px;
}
header {
background-color: purple;
}
footer {
position: relative;
background-color: lime;
}
footer>img {
position: absolute;
bottom: 0;
right: 20px;
}
<div id="wrapper">
<header>header</header>
<main>body</main>
<footer>
footer
<img src="https://picsum.photos/100" />
</footer>
</div>
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
I'm trying to accomplish something like this:
Specifically the vertical text outlined in white.
I am able to do this and make it dynamic (so there is no overlap between each of the words "fale" "que" "nem" "um" "gringo"), but it requires that I created a containing div for each of the headers, like so,
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale">
<h1 class="fale_heading">Fale</h1>
</div>
<div class="highlight0a" id="que">
<h1 class="fale_heading">que</h1>
</div>
<div class="highlight0a" id="nem">
<h1 class="fale_heading">nem</h1>
</div>
<div class="highlight0a" id="um">
<h1 class="fale_heading">um</h1>
</div>
</div>
I know that it's because is a block-type element. Why, then does it not work if I do
<div id="fale_text_container">
<h1 class="fale_heading" id="fale">Fale</h1>
<h1 class="fale_heading" id="que">que</h1>
<h1 class="fale_heading" id="nem">nem</h1>
<h1 class="fale_heading" id="um">um</h1>
<div id="fale_textbox_2">
<h1 class id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
Then set the container to display: block with min-width and max-width established. Like so:
#fale_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: black;
height: auto;
min-height: 300px;
position: relative; }
#fale_container_padding {
position: relative;
height: 20%; }
#fale_text_container {
position: relative; }
.fale_heading {
display: block;
position: absolute;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3.5em;
clear: right; }
#fale, #que, #nem, #um {
z-index: 10; }
#fale {
margin-top: -18%; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 87%;
height: 100%;
left: 8%; }
#que {
margin-top: -9.5%; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 73%;
left: 8%; }
#nem {
margin-top: -1%; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 82%;
left: 8%; }
#um {
margin-top: 7%; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 89%;
left: 8%; }
When I do it like this there's overlap. JSfiddle
Block alone doesn't work. Neither does block and min-width and min-height. Neither does min-width and min-height without block. Is it because the container is set to position:relative inside of a <div> that's height is set to auto?
Why don't Block nor min properties work properly?
Here's an edited fiddle: http://jsfiddle.net/0ya6zfLf/1/
HTML
You need to wrap all the floating elements into a container and give position: absolute; to that. (Instead of to individual headings) This way each of your headings can be positioned relatively and maintain their heights perfectly.
<div class="white-strips-container">
<h1 class="fale_heading" id="fale">Fale</h1>
<h1 class="fale_heading" id="que">que</h1>
<h1 class="fale_heading" id="nem">nem</h1>
<h1 class="fale_heading" id="um">um</h1>
</div>
CSS
For the new wrapper class
.white-strips-container {
position: absolute;
width: 150px;
}
For the headings
.fale_heading {
display: inline-block;
line-height: 20px;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3.5em;
height: 50px;
clear: right;
background-color: #fff;
margin-top: 0;
margin-bottom: 10px;
}
I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.
The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.
I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.
Here is my code.
Would appreciate someone smarter than me looking at this and making any suggestions.
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
Make your HTML structure like so:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...And your CSS like so:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
I'm working on a project where I need to float the previous and next navigation elements to either side of a blog archive page title (green circles for this example). Sitting inside the green circle will be a span with an SVG background element - so the circle needs to be positioned.
I wanted to keep things semantic, so I've laid out my page (section) header as follows:
<header class="archive-box">
<nav class="archive-nav">
<div class="left-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
<div class="right-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
</nav>
<h2>Stuff and Things</h2>
</header>
CSS
.archive-box {
max-width: 900px;
height: 75px;
margin: 50px auto;
border: 1px solid;
position: relative;
}
.archive-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.left-nav {
position: absolute;
left: 0;
}
.right-nav {
position: absolute;
right: 0;
}
.icon-bg {
background-color: #9ccb3b;
border-radius: 50%;
height: 75px;
width: 75px;
position: absolute;
}
h2 {
text-align: center;
}
The right navigation element is going outside of its parent's container. I think it might have something to do with the fact that I've got multiple parent-child absolute elements. Is there another way to do this?
Here's the CodePen
Sometimes you need to have specific order of coding css positions. What i mean is if you paste the whole code and run it, it will be different if you wrote it step by step and saved it. It helped me couple of times when i was learning css.
Also try to put margin:auto in .right-nav and .left-nav
Is this how you want it to be? CodePen. Instead of using position: absolute, I've used float: left and float: right so that the left and the right menu items are positioned on the left and the right side respectively and the title is in the center.
section {
position: relative;
background-color: blue;
color: white;
width: 80%;
margin: auto;
}
article {
background-color: green;
height: 50px;
}
h1 {
color: white;
font-size: 30px;
}
nav {
top: 0;
font-size: 20px;
}
.left {
left: 0;
/* position: absolute; */
color: yellow;
}
.right {
right: 0;
/* position: absolute; */
color: pink;
}
h1 {
text-align: center;
}
.bg {
float: left
}
.bgtwo {
float: right;
}
<section>
<nav>
<div class="bg">
<div class="left">LEFT</div>
</div>
<div class="bgtwo">
<div class="right">RIGHT</div>
</div>
</nav>
<h1>Hello There</h1>
<article>
<p>Here is some stuff about things.</p>
</article>
</section>