I'm trying to place an imagem between two elements, but when it gets to an email client, it doesn't work.
Is it possible to get an absolute positioning of an element or at least simulate it with float or something else? If not, well... back to the basics then (images) I have several references for a workaround, but none of them worked for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
max-width: 263px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
bottom: 50px !important;
position: relative !important;
left: -3% !important;
right: 0;
float: right;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
</style>
</head>
<body>
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat.
Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum
eu. Aliquam malesuada aliquam nulla ut suscipit. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</body>
</html>
You could use this CSS for your image container, basically using a margin-top to move it down to the desired position:
.image-container {
width: 100%;
max-width: 263px;
float: right;
margin-top: 60px;
}
And if that moves your #news-body down too much, you can apply a negative margin-top to it, like in the snippet below.
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
max-width: 263px;
float: right;
margin-top: 60px;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: -40px;;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
margin may work in this case
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
max-width: 263px;
margin-top: -50px;
margin-right: 3%;
/* maintain position to allow stacking */
position: relative;
right: 0;
float: right;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
</style>
</head>
<body>
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</body>
</html>
The email client should be able to parse the relative and absolute position. It seems like you are trying conflicting positioning by including a float.
In the following example, I set the .image-container container to relative, remove all floats and the max-width, letting it stretch across the screen. Then I set absolute on .image-container img and define top and right positions as necessary. Hope that helps.
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-container img {
position: absolute;
top: -50px;
right: 40px;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
Positioning is buggy and doesn't work in every browser. The same with margin.
https://www.campaignmonitor.com/css/positioning-display/position/
You can use some CSS tags used for box model, but it's really hit and miss.
https://www.campaignmonitor.com/css/box-model/
I can't think of an easy way to suggest what will work in this situation. Email is not front-end design. My suggestion is look over this web site before you continue to give you a better idea what will work in email.
https://www.campaignmonitor.com/css
Related
My two main sections of my website are overlapping and I can't seem to figure out why. I have read a lot about absolute postition etc. Maybe my whole structure is bad? I don't really know. This is my firts ever site i wrote myself. Any help would be welcome! My site can be found on: h16projecten.github.io
body {
margin: 0;
padding: 0;
background: white;
}
.header {
position: relative;
z-index: 100;
margin: 3rem 3rem 3rem 19%;
}
.header img {
height: 65px;
width: auto;
opacity: 1;
}
#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
width: 100%;
display: flex;
}
#team {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
}
.layerleft {
position: relative;
width: 48%;
height: 100vh;
background: white;
box-sizing: border-box;
}
.layerright {
width: 52%;
height: 100vh;
box-sizing: border-box;
border-left: 420px solid white;
border-top: 100vh solid transparent;
}
.content {
margin: 40% -5% 2rem 40%;
font-family: Libre Baskerville;
font-size: 20px;
opacity: 0.8;
font-weight: 100;
z-index: 1;
}
.media {
margin: 1rem -3rem 2rem 40%;
font-size: 27px;
cursor: pointer;
opacity: 0.7;
}
.media p ion-icon:hover {
opacity: 1;
color: #1c3c64;
}
#team h2 {
font-family: Libre Baskerville;
margin: 1rem 10rem 2rem 10%;
font-size: 45px;
font-weight: 100;
line-height: 1.8;
}
#team hr {
margin: 1rem 73% 2rem 10%;
color: #1c3c64;
background-color: #1c3c64;
height: 1px;
}
.teamdesc {
margin: 4% 5rem 2rem 12%;
font-family: Libre Baskerville;
font-size: 30px;
opacity: 0.8;
font-weight: 100;
}
footer {
position: relative;
margin: 7rem 2rem 2rem 2rem;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
}
.footer-desc p {
font-family: Libre Baskerville;
font-size: 18px;
opacity: 0.8;
font-weight: 100;
display: inline-block;
}
.footer-logo {
margin: 0 4% 0 0;
height: 45px;
display: inline-block;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
height: 100%;
}
.fullscreen-bg__video {
position: absolute;
right: 0;
top: 0;
width: auto;
height: 100%;
}
#media screen and (max-width: 767px) {
.content {
margin: 110vh -90% 2rem 25%;
}
.media {
margin: 1rem -3rem 2rem 25%;
}
.header {
margin: 10rem 3rem 1rem 9.5%;
}
.layerright {
border-left: 100px solid white;
border-top: 100vh solid transparent;
}
#team h2 {
margin: 85vh 10rem 1rem 12.5%;
}
#team hr {
margin: 1rem 45% 2rem 12.5%;
}
.teamdesc {
margin: 12% 5rem 2rem 14%;
font-size: 25px;
}
.footer-desc p {
font-size: 15px;
}
.footer-logo {
height: 35px;
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H16 Projecten</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/ionicons#4.5.5/dist/ionicons.js"></script>
<link rel='stylesheet' id='googleFonts-css'
href='https://fonts.googleapis.com/css?family=Libre+Baskerville%3A400%2C700' type='text/css' media='all'/>
</head>
<body>
<div class="fullscreen-bg">
<video loop muted autoplay playsinline class="fullscreen-bg__video">
<source src="videos/video.mp4" type="video/mp4">
</video>
</div>
<header class="header">
<a class="header-logo"><img src="images/h16logobnw.png" alt="H16"></a>
</header>
<main>
<section id="wrapper">
<div class="layerleft">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit consequat elit non laoreet.
Pellentesque consequat sapien at tellus tempor consequat. Aliquam dictum justo a facilisis tempor.
Duis scelerisque congue aliquam. Sed lacinia, est in sollicitudin egestas, orci diam elementum ex,
ultrices posuere massa urna tincidunt massa. Mauris fermentum luctus lobortis. Morbi tempus neque a
justo mattis, et elementum tellus tincidunt. Vestibulum suscipit nunc at lorem lacinia lobortis.
Suspendisse elementum, neque vel cursus rutrum, odio lacus posuere purus, mattis hendrerit ante orci
porta nisl. Mauris magna tellus, faucibus ut semper.</p>
</div>
<div class="media">
<p>
<ion-icon onclick="location.href='https://www.facebook.com/H16.projecten';"
name="logo-facebook"></ion-icon>
<ion-icon onclick="location.href='https://instagram.com/h16.projecten';"
name="logo-instagram"></ion-icon>
</p>
</div>
</div>
<div class="layerright">
<!-- video -->
</div>
</section>
<section id="team">
<div class="team">
<h2>Team</h2>
<hr>
<div class="teamdesc">
Name's
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper rhoncus odio nec luctus.
Vestibulum
aliquet nunc quis mi pharetra porttitor. Sed eros tortor, tincidunt ut ex ac, tincidunt tempus odio.
Mauris
vulputate magna et urna mollis auctor. Nam nulla.
</div>
</div>
</section>
</main>
<footer class="footer">
<img class="footer-logo" src="images/h16logobnw.png" alt="H16"> <span class="footer-desc"><p>© 2020 H16 - All right reserved</p></span>
</footer>
</body>
</html>
Preview: h16projecten.github.io
Kind of like this:
index view
when scrolled down
Thanks!
What design do you want your website to have? It will be helpful if you clarify your question.
I removed the "position: absolute" from the element with the wrapper id, and it did not overlap anymore.
If you want a layout that is easy to organize and doesn't overlap, I suggest checking CSS flex. You can learn more about it in the freeCodeCamp website.
I'm trying to make an overlapping effect when the user scrolls using the sticky position and giving each div (section) a new background colour. However, even after setting top to 0 for the sticky position, the divs scroll out of the viewport. Any help would be great!
$(document).ready(function(){
$('#about').click(function(){
$('#aboutcontainer').slideToggle('slow');
});
});
html, body {
margin: 0 auto;
font-size: 22px;
width: 100%;
height: 100%;
}
h3 {
margin: 0;
}
ul, li {
margin: 0 auto;
}
span {
font-weight: 400;
}
.container {
height:102vh;
}
.contentcontainer {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#navbar {
width: 100%;
position: sticky;
top: 0px;
background-color: #ffffff;
font-family: Abel;
height: 100px;
}
#desktop-nav-wrapper {
padding: 0 45px;
height: inherit;
position: relative;
}
#logo {
font-size: 200%;
width: auto;
float: left;
letter-spacing: 3px;
}
#desktop-nav-wrapper ul {
margin-top: 6.5vh;
float: right;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 25px;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#desktop-nav-wrapper li:nth-child(even):hover {
cursor: default;
}
#desktop-nav-wrapper li:nth-child(odd):hover {
cursor: pointer;
}
#aboutcontainer {
display: none;
background-color: #ffffff;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 45px;
text-align: left;
width: 80%;
font-family: Lato;
font-weight: 300;
font-size: 92%;
}
#one {
background-color: #ffd700;
position: sticky;
top: 0;
}
#two {
background-color: #468499;
position: sticky;
top: 0;
}
#three {
background-color: #468499;
position: sticky;
top: 0;
}
#media only screen and (max-width: 768px) {
#logo {
margin-top: -1vh;
}
#desktop-nav-wrapper {
padding: 0 15px;
height: inherit;
}
#desktop-nav-wrapper ul {
float: left;
padding-left: 0;
width: 100%;
margin-top: 11vh;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 0;
margin-right: 2%;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 15px;
text-align: left;
width: 90%;
font-family: Lato;
font-weight: 300;
font-size: 80%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
<div id="desktop-nav-wrapper">
<h3 id="logo" class="vertical-center">Test Header</h3>
<ul>
<li id="about" class="desktop-items">about</li>
</ul>
</div>
</div>
<div id="aboutcontainer" style="display: none;">
<p>
Phasellus vitae semper risus. Quisque in finibus nisi. Sed non rhoncus purus, eu luctus orci. Vestibulum massa nisi, bibendum eget libero ut, tempor mattis metus. Maecenas placerat nisl non mauris fringilla ultricies. Phasellus dignissim velit vitae tellus sodales luctus. Nullam tempus turpis vitae nunc lacinia faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget volutpat nunc. Cras et libero et ligula suscipit finibus et id dui. Duis odio enim, interdum vitae ullamcorper ut, sagittis vitae metus. Phasellus feugiat libero metus, sed tempor erat porttitor ut. Integer vel libero eu ante sollicitudin fermentum non quis nisl. Aliquam blandit dignissim sem, et malesuada risus venenatis eget. Nulla pretium ornare dui fermentum cursus.
</p>
</div>
<div class="container" id="one">
<div class="contentcontainer">
<h3>One</h3>
</div>
</div>
<div class="container" id="two">
<div class="contentcontainer">
<h3>Two</h3>
</div>
</div>
<div class="container" id="three">
<div class="contentcontainer">
<h3>Three</h3>
</div>
</div>
Figured it out... Turns out position: sticky isn't a fan of HTML and body having their height set to 100%. I removed it and it now works fine.
I'm new at this. I'm not sure what I'm doing wrong. I've tried both the absolute and relative position but I can't get the footer to go at the bottom of the page. I also don't want the fixed option. Can anyone tell what's wrong with it?
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</footer>
</body>
</html>
This is the separate CSS code. I'm not sure if the footer should be a class or it can simply be a tag.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
position: absolute;
}
#banner .content h1 {
text-align: center;
position: absolute;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
/*
border: 1.5px solid white;
width: 260px;
height: 80px;
*/
}
#banner .content h1.maroon {
padding-top: 70px;
color: firebrick;
}
.nav {
position: relative;
top: 660px;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
}
#main {
position: relative;
margin: 0 auto;
top: 670px;
width: 80%;
padding: 20px;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
float: left;
width: 60%;
padding: 10px;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
}
Position everything relative, unless you really need to use absolute.
See working snippet using your code.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
position: relative;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
position: relative;
}
#banner .content h1 {
text-align: center;
position: absolute;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
}
#banner .content h1.maroon {
position: relative;
padding-top: 70px;
color: firebrick;
}
.nav {
position: relative;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
clear: both;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
clear: both;
}
#main {
position: relative;
margin: 0 auto;
width: 80%;
padding: 20px;
clear: both;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
width: 60%;
padding: 10px;
}
footer {
position: relative;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>Footer text in here</p>
</footer>
</body>
</html>
If all you want to do is put the div at the botton of the screen then add this to your css:
.footer{
position: absolute;
bottom: 0;
}
When you scroll the footer will also move though. If you want it to stay in the same location then make position: fixed
In your HTML you are closing </footer> instead of close </div>.
And give position: relative to the main parent div and apply
.footer {
position: absolute;
bottom: 0;
}
this will work.
remove position: relative; #main id css.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
}
#banner .content h1 {
text-align: center;
position:relative;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
/*
border: 1.5px solid white;
width: 260px;
height: 80px;
*/
}
#banner .content h1.maroon {
padding-top: 70px;
color: firebrick;
position:relative;
}
.nav {
top: 660px;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
}
#main {
/* position: relative;*/
margin: 0 auto;
top: 670px;
width: 80%;
padding: 20px;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
float: left;
width: 60%;
padding: 10px;
}
footer {
/* position: absolute;*/
float: left;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>this is footer part <br/>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</footer>
</body>
</html>
Essentially I am trying to use the <Div> tag to create a bottom border to separate different content on the page but when I scroll to the bottom and insert the div there to separate them, it will ignore the other tags I have put and attached itself to the previous div separator.
How can I fix this? I tried using a HR tag but it did the same.
This is my code:
div {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: none;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 50%;
}
.container {
margin-left: 10%;
width: 40%;
text-align: center;
}
#rightcolumn {
/* height: 100%;*/
width: 40%;
float: right;
background-color: #c9ccc9;
}
.border {
border-bottom: 40px solid #8dc43f;
}
p {
color: black;
}
.infotext {
color: #8dc43f;
margin-left: 30%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitle {
color: #8dc43f;
margin-left: 25%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlepower {
color: #8dc43f;
margin-left: 36%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlecomm {
color: #8dc43f;
margin-left: 17%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.bluetags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 176px;
margin-top: 4px;
}
.greentags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 180px;
margin-top: -26px;
}
.orangetags {
width: 280px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 175px;
margin-top: -15px;
}
.image {
position: relative;
width: 80%;
/* for IE 6 */
}
.titleimg {
margin-left: -60%;
margin-right: 10%;
}
imagetext {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.bgimg {
background-size: cover;
width: 100%;
height: 60%;
border-collapse: collapse;
display: block;
margin: 0;
padding: 0;
}
#container {
height: 400px;
width: 400px;
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 43%;
top: 25%;
font-family: 'ABeeZee', sans-serif;
}
#secondtext {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 37%;
top: 30%;
font-family: 'ABeeZee', sans-serif;
}
<div id="cssmenu">
<ul>
<img src="turtletag.png" class="titleimg">
<li><span>Home</span>
</li>
<li><span>Features</span>
</li>
<li><span>App</span>
</li>
<li><span>Products</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<img src="googlestore.png" style="position:absolute; top:210px;left:70px; width: 10%;">
<img src="appstore.png" style="position:absolute; top:320px; left:77px; width:10%;">
Order Tags
<img src="iPhone5_Mockup_Template_Free_by_Ray.png" class="bgimg">
<p id="text">Turtle Tags</p>
<p id="secondtext">Always connected to the nest</p>
<div class="border"></div>
<div id="leftcolumn">
<div class="mainbody">
<img src="bluetags.png" class="bluetags hvr-float">
</div>
<div class="mainbody">
<img src="greentags.png" class="greentags hvr-float">
</div>
<div class="mainbody">
<img src="orangetag.png" class="orangetags hvr-float">
</div>
</div>
<a name="features"></a>
<div id="rightcolumn">
<h2 class="infotext">Features</h2>
<hr class="newstyle">
<img src="battery.png" style="margin-left:40%; width:15%">
<p class="infotexttitle">Long battery life</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse
potenti.
</p>
<img src="speaker-xxl.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitle">Noise Notifications</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="powericon.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlepower">Always on</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="twoway.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlecomm">Two way communication</p>
<p rows="4" columns="4" style="width:350px; margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
</div>
I've tried changing the css and I can't find anything that would cause it, But a fresh pair of eyes may be able to find something I cannot.
The problem here comes from how you constructed your page. You have a left/right column that was built using floats. when you use float, it takes the content in the float out of the general flow of the page. Try to remove those floats and it should work as expected.
I removed your floats in the fiddle and the border started working right.
https://jsfiddle.net/ahmadabdul3/ghogvcsx/4/
here's a basic idea on how floats work: the top boxes don't overlap because there is no float, but the bottom 2 boxes you only see green because the red one is floated so the green one takes its space. to avoid this, add an explicit height to the floated div, but then you can't have dynamically expanding content. https://jsfiddle.net/ahmadabdul3/bL8qLa6j/2/
and here's a basic idea of how columns work: https://jsfiddle.net/ahmadabdul3/bL8qLa6j/5/
There's a problem in my code attached below:
The img with id listItemProfile stays always in middle no matter what padding I set, I though it might due to there's some padding in its parent, but I couldn't find any, any thoughts?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
.accordionOm {
position: relative;
padding: 10px 0 10px 30px;
margin: 0;
font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
cursor: pointer;
}
.accordionOm:hover {
color: #000;
}
.accordionOm:before,
.accordionOm:after {
content: "";
position: absolute;
background: #333;
display: inline-block;
}
.accordionOm:before {
width: 20px;
height: 2px;
left: 0;
top: 22px;
}
.accordionOm:after {
width: 2px;
height: 20px;
left: 9px;
top: 13px;
transition: transform .5s;
transform: rotate(0);
}
.accordionOm.opened:after {
transform: rotate(90deg);
}
.accordionOm + div {
border-left: 4px solid #999;
padding: 0 15px;
margin-left: 8px;
font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
color: #666;
}
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body {
width: 100%;
margin: 0 auto;
}
#trailBar{
margin-left: 35px;
margin-right: 35px;
margin-top: 25px;
margin-bottom: 25px;
height: 180px;
background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
border: transparent;
border-radius:0.25em;
}
p.trailTextTop{
padding-top: 25px;
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
p.trailTextBot{
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.panel-group .list-group {
margin-bottom: 0;
}
.panel-group .list-group .list-group-item {
border-radius: 0;
border-left: none;
border-right: none;
}
.panel-group .list-group .list-group-item:last-child {
border-bottom: none;
}
.panel-body{
background: #efefef;
}
#listItem{
position: relative;
height: 200px;
background: #efefef;
}
#listItemProfile{
position: absolute;
height: 80px;
width: 80px;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 35px;
}
#listItemTitle{
}
#listItemSubtitle{
}
#listItemInfo{
}
#listItemArrow{
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">
<div id="listItem">
<img id = "listItemProfile" src="images/Portrait.png">
<div id="listItemTitle">
</div>
<div id="listItemSubtitle">
</div>
<div id="listItemInfo">
</div>
<div id="listItemArrow">
</div>
</div>
</h4>
<div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
if ($(this).hasClass("opened") == true) {
$(this).next().slideUp("slow");
$(this).removeClass('opened');
} else {
$(".opened").next().slideUp("slow");
$(".opened").removeClass("opened");
$(this).addClass('opened');
$(this).next().slideDown("slow");
}
});
</script>
</html>
Hi now define this css
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
/* padding-top: 60px; */
/* padding-bottom: 60px; */
/* padding-left: 35px; */
left: 50%;
top: 50%;
margin-left: -40px; // your total width img / 2
margin-top: -40px; // your total height img /2
}
You can use this css given below :
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
try with margin-left , margin-right
Example
.class-name{
margin-left:10px;
margin-right:50px;
}