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.
Related
I have an aside section that I'd like to have centered using a media query, so that once it's viewed on a mobile, it'll be at the bottom of the page aligned horizontally. Just like this:
This is what it's currently doing:
I have some images and text I don't want to share so I'll change them for this question...
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: white;
}
/*GLOBAL*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header ul {
padding: 0;
margin: 0;
}
.page-title {
font-size: 20px;
}
.page-title-center {
font-size: 20px;
text-align: center;
}
.subheading-center {
font-size: 15px;
text-align: center;
margin-top: 50px;
}
.dark {
padding: 15px;
background: #1CAC4B;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.dark-center {
padding: 15px;
text-align: center;
background: #1CAC4B;
color: white;
margin: 10px;
}
#hyperlink {
color: #FFEE00;
}
#hyperlinkg {
color: #1CAC4B;
}
/*HEADER*/
header {
background: #1CAC4B;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #FFEE00 3px solid;
display: flex;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
header #branding {
float: left;
}
header #branding-img img {
float: left;
width: 60px;
height: 60px;
padding: 0 20px 20px 0;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 14px;
}
header .highlight, header .current a {
color: #FFEE00 /*YELLOW*/;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*SHOWCASE*/
#showcase {
background:url("../img/grass.jpg") no-repeat;
background-size: cover;
min-height: 450px;
text-align: center;
color: white;
}
#showcase h1 { /**/
margin-top: 150px;
font-size: 60px;
margin-bottom: 10px;
}
#showcase p {
font-size: 30px;
}
/* CONTACT INFO */
#contact {
color: white;
background: #1CAC4B;
padding: 25px;
border-bottom: #FFEE00 3px solid;
border-top: #FFEE00 3px solid;
}
#contact h1 {
float: left;
}
#contact p {
font-size: 20px;
margin-top: 22px;
font-weight: bold;
float: right;
}
/*BOXES*/
.boxes {
background: white; /*Background behind 3 circular images are white */
display: flex; /*Makes circles drop if page is squished */
flex-wrap: wrap; /*Makes circles in a horizontal row */
justify-content: center;
}
.boxes figure {
margin: 3.5%; /*makes it line up better */
text-align: center; /*Puts text in center*/
font-size: 20px;
}
.boxes figure img {
border-radius: 25px; /*Makes images circular */
width: 310px; /*Sets image width*/
height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}
/*MAIN-COL*/
article#main-col {
float: left;
width: 70%;
}
/*ABOUT PAGE SIDEBAR*/
aside#about-sidebar {
float: right;
margin-top: 50px;
}
aside#about-sidebar img {
width: 230px;
height: 184px;
/*257px*/
}
/*SERVICES*/
ul#services li {
list-style: none;
padding: 20px;
border: green solid 1px;
margin-bottom: 10px;
background: #e6e6e6;
}
/*SERVICES PAGE SIDEBAR*/
aside#service-sidebar {
float: right;
margin-top: 50px;
}
/*GALLERY SLIDESHOW*/
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
padding: 10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/*FOOTER*/
footer {
padding: 20px;
margin-top: 20px;
color: white;
background-color: #1CAC4B;
text-align: center;
}
/*MEDIA QUERIES*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
align-content: center;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#showcase h1 {
margin-top: 40px;
}
}
<body>
<main>
<header>
<div class="container">
<div id="branding-img">
<a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
</div>
<div id="branding">
<h1><span class="highlight">NAME SHORT</span>NAME</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About The Company</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
</p>
<h1 class="page-title">About Me</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
</p>
</article>
<aside id="about-sidebar">
<div class="dark">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
<p>
PERSON NAME
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>COMPANY</p>
</footer>
</main>
</body>
Of course, as soon as I spent 10 minutes making this question I figured out my problem within literally 10 seconds lol.
I doubt anyone else would have this problem but you never know, so I'll answer it and leave it here for anyone who needs it.
In the CSS file in the media queries section, I removed '#sidebar' from 'aside#sidebar {'
I'm trying to make Iphone 6/7/8 version for my site.
Unfortuantely I do not know how to move my main menu to right corner so it would look like this in web site:
Right now the site looks like this:
Could you tell me how to move this menu?
What is more, I do not know how to move this 6 squares down to the text. I'm trying to usse marigin-bottom etc on SquaresDOWN div or UP but nothing is happening.
I'd really appreciate if you could help me with these two things.
css
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
.left h1{
font-size: 20px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
}
.left {
float: left;
width: 50%;
margin-right: 500px;
}
#ourteam
{
margin-top: 300px;
margin-left: 100px;
font-size: 60px;
font-weight: bold;
color:rgb(24, 188, 253);
}
#squaresUP div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#squaresDOWN div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#tytul
{
font: Bold 20px/23px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 33px;
margin-top: 60px;
}
#tytul1
{
font: Regular 14px/30px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 28px;
margin-top: 100px;
}
.square1 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 { background: #7FC4FD 0% 0% no-repeat padding-box;}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size:100% 3000px;
}
#ourteam
{
margin-top: 300px;
margin-left: 700px;
font-size: 80px;
font-weight: bold;
width: 400px;
color:rgb(24, 188, 253);
}
.left h1{
font-size: 27px;
width: 1500px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
margin-top: 50px;
}
.left {
float: left;
margin-right: 500px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
width: 1150px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 35px/15px Arial;
padding: 5px;
width: 50px;
}
}
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-authors.css" >
</head>
<body>
<header>
<div class="row">
<ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
<section>
<article>
<p id="ourteam">Our Team.</p>
<div class="left">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>
</div>
<div class="row2">
<div id="squaresUP">
<div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
<div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
<h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
</div>
<div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
</div>
<div id="squaresDOWN">
<div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
<div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
<div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
</div>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
//edit
the squares should be right there. They should be centered under the text.
I have cleaned up your code a little bit and here you can find an example for how to create a header menu inside a css grid looks decent for iphone 7/8 view.
you can change the percentage based on your request to get it a bit bigger if you don't want to create more buttons,
if it doesn't helped you totally at least it could be a reference.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.row{
display: grid;
grid-template-columns: 20% 80%;
}
.main-nav{
float: right;
display: inline-flex;
list-style: none;
font-size: 50%;
}
.main-nav li{
font-size: 50%;
}
</style>
</head>
<body>
<div class="row">
<div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
</div>
<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->
</body>
</html>
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.
Good afternoon,
I've been using HTML and CSS for a couple of weeks now and recently came across a problem that I have no clue about how to fix. Before I added a background-image, the contact id worked just fine and the CSS loaded properly. But after adding the image in the pages class, the CSS contact id didn't work anymore. Also in the element inspector the properties of the contact id were not there.
So I'm not sure If I missed something in between the link of HTML and CSS or that I coded it in the wrong order. The code below is after the contact id stopped working.
.pages {
background-image: url("img/background.png");
}
#contact {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1px;
background-color: #171717;
text-align: right;
}
.sidebar {
font-family: 'Yanone Kaffeesatz', sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: #212121;
width: 100px;
transition: all ease 0.5s;
}
ul {
position: relative;
top: 50%;
transform: translateY(-50%);
list-style: none;
padding: 0;
margin: 0;
}
li, a {
text-decoration: none;
position: relative;
display: block;
}
i.fa {
display: block;
text-align: center;
padding: 30px 10px;
font-size: 30px;
background-color: #565656;
color: #212121;
z-index:1;
}
span {
color: #fff;
font-size: 18px;
position: absolute;
top: 0;
bottom: 0;
left: -100%;
margin: auto;
display: block;
height: 100%;
padding: 0px 10px;
text-align: center;
z-index: -1;
background-color: #000000;
transition:all ease 0.5s;
line-height: 90px;
&::after {
content:"";
position: absolute;
left: 100%;
top: 0;
bottom: 0;
margin: auto;
border: 45px solid transparent;
border-left-color: #000;
height: 0;
width: 0;
}
}
&:hover {
i.fa {
background-color: #000;
}
span {
left: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>sidebar</title>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-
mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="#"><i class="fa fa-graduation-cap"></i>
<span>Opleiding</span></a></li>
<li><a href="#"><i class="fa fa-briefcase"></i>
<span>Werkervaring</span></a></li>
<li><a href="#"><i class="fa fa-lightbulb"></i>
<span>Vaardigheden</span></a></li>
</ul>
</div>
<div class="pages">
</div>
<div class="footer">
contact
</div>
</body>
</html>
Thanks for your time and hope you guys and women can help me out. By the way English isn't my native language so I hope I explained it clearly.
Dirk van Houten
I will consider CSS grid, hope it will be much more organized
If you think grid is okay for you, it can indeed avoid the use of position and sides effects.
example:
/* grid instead position: */
body {
margin:0;
display: grid;
height: 100vh;
grid-template-columns: 100px 1fr;
grid-template-rows: 1fr 20px;
}
.sidebar {
display: flex;
align-items: center;
}
.footer {
grid-row: 2;
grid-column: 1 / span 3;
}
.pages {
overflow: auto;
}
/* end grid system */
/* position and coordonates, so transform are removed from codes */
.pages {
background-image: url("http://dummyimage.com/50x50");
}
#contact {
padding: 1px;
background-color: #171717;
text-align: right;
}
.sidebar {
font-family: "Yanone Kaffeesatz", sans-serif;
background-color: #212121;
width: 100px;
transition: all ease 0.5s;
}
ul {
list-style: none;
padding: 0;
margin: 0;
min-width: 100%;
overflow: visible;
}
.sidebar a {
position: relative;
}
li,
a {
text-decoration: none;
z-index: 1;
display: block;
}
i.fa {
display: block;
text-align: center;
padding: 30px 10px;
font-size: 30px;
background-color: #565656;
color: #212121;
z-index: 1;
}
a span {
color: #fff;
font-size: 18px;
position: absolute;
top: 0;
bottom: 0;
left: -100%;
margin: auto;
display: block;
height: 100%;
padding: 0px 10px;
text-align: center;
z-index: -1;
background-color: #000000;
transition: all ease 0.5s;
line-height: 90px;
}
a span::after {
content: "";
position: absolute;
left: 100%;
top: 0;
bottom: 0;
margin: auto;
border: 45px solid transparent;
border-left-color: #000;
height: 0;
width: 0;
overflow: hidden;
}
:hover i.fa {
background-color: #000;
}
a:hover span {
left: 100%;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-
mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz"
rel="stylesheet">
<div class="sidebar">
<ul>
<li><a href="#"><i class="fa fa-graduation-cap"></i>
<span>Opleiding</span></a></li>
<li><a href="#"><i class="fa fa-briefcase"></i>
<span>Werkervaring</span></a></li>
<li><a href="#"><i class="fa fa-lightbulb"></i>
<span>Vaardigheden</span></a></li>
</ul>
</div>
<div class="pages">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div class="footer">
contact
</div>
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