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>
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 create a website where the first part is a video, on top of it is a navigation bar and description sentence. The second part is a div with a picture and a lorem ipsum paragraph. But the two-part is mushed together. Do you know why?
The first part is the video-container div. It contains a video, a navigation bar and some introductory words
The second part is the intro div which has an image and a paragraph side by side
<style>
html,
body {
border: 1px solid blue;
min-height:100%;
padding:0;
margin:0;}
* {
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
border: 0;
outline: 0;
margin-top: -5px;
}
.nav {
border: 1px solid red;
margin-right: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav li {
list-style-type: none;
}
.nav li a {
text-decoration: none;
font-size: 23px;
font-weight: 600;
color: #C71585;
letter-spacing: 0.03em;
}
.nav img {
width: 150px;
}
video {
width: 100%;
position: absolute;
object-fit: cover;
background-size: cover;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
box-sizing: content-box;
}
.video-container {
position: relative;
height: 100%;
border: 1px solid yellow;
}
.content {
border: 1px solid yellow;
position: absolute;
left: 50px;
top: 150px;
margin: 10px;
padding: 5px 20px;
font-size: 20px;
overflow: none;
}
.content h1 {
font-size: 100px;
color: #C71585;
}
#myBtn {
margin-left: 20px;
margin-top: 40px;
border: 1px solid #C71585;
font-size: 26px;
font-weight: 800;
color: #e827a0;
padding: 15px 60px;
background-color: transparent;
transition: 0.2s ease-in;
}
#myBtn:hover {
background-color: rgba(199, 21, 133);
color: white;
}
.intro {
overflow: none;
margin-top: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.intro img {
width: 500px;
}
.intro-text {
width: 30%;
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop id="video">
<source src="video.mp4" type="video/mp4">
</video>
<div class="nav">
<img src="logo.png" alt="logo">
<li>About me</li>
<li>My Portfolio</li>
<li>My resume</li>
<li>Contact me</li>
</div>
<div class="content">
<h1>Avid learner and</h1>
<h1>Constant striver</h1>
<button id="myBtn">Who am I</button>
</div>
</div>
<div class='intro'>
<img src="01.jpeg" alt="">
<div class="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque ex a felis laoreet, ut bibendum sem eleifend. Quisque egestas sem sed velit molestie tincidunt. Phasellus at pellentesque odio. Phasellus sem leo, hendrerit et massa vehicula, iaculis cursus erat. Vestibulum et viverra nisi, sit amet condimentum sem. Duis gravida faucibus nisl nec pharetra. Curabitur convallis risus enim, nec semper lorem cursus varius. Quisque feugiat vitae dui non ultricies. Integer ipsum quam, dictum et quam nec, imperdiet euismod nulla. Nam bibendum sagittis orci, eget tincidunt risus luctus nec. Quisque lacus urna, tincidunt vel lobortis in, suscipit sit amet nunc. Fusce ultrices erat a nunc dignissim hendrerit. Maecenas sed pharetra quam, vitae suscipit nunc. Aenean molestie dui aliquet augue eleifend, quis congue ligula laoreet. Ut quis est pellentesque, fringilla odio ac, tincidunt nibh.
</div>
</div>
</body>
You can make use of css flex property, in your case please add
.flex-container {
display: flex;
flex-wrap: wrap;
}
under your style tags and assign this class to intro class div as <div class='intro flex-container'>, will this worked for you?
you can easily wrap the .video-container and .intro divs with a div tag and give it style display flex and make sure you add flex wrap also.
Then just give your video and intro containers width 100%
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.
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;
}
How come my red border is not wrapping around my text div and my side bar div. Here's my code:
CSS:
body{
background-color: #d7d7d7;
color: #666666;
font-family: arial, sans-serif;
font-size: x-small;
}
div#header {
background-color: #323232;
height: 140px;
width: 950px;
}
div#maincontainer {
background-color: #d7d7d7;
width: 950px;
height: auto;
margin-top: 5px;
border: 1px solid red;
}
div#maintextcontainer{
//background-color: #333333;
width: 640px;
//margin-right: 10px;
margin: 1px;
float: left;
color: black;
}
div#maintextcontainer h2{
color: #4f4f4f;
}
div#sidebarcontainer {
//background-color: #333333;
width: 300px;
float: left;
color: black;
margin: 1px;
}
div#footer{
background-color: #323232;
width: 950px;
margin-top: 5px;
clear: left;
}
div#global{
width: 950px;
margin: auto;
}
HTML:
<div id="global">
<div id="header"> This is the header div</div>
<div id="maincontainer">
<div id="maintextcontainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam neque eu turpis euismod eget suscipit nulla ultrices. Donec sagittis mi non sem vestibulum elementum dapibus risus auctor. Praesent tristique laoreet dapibus. Integer vel ligula lorem, et pharetra lorem.
</div>
<div id="sidebarcontainer">Nam at lectus vitae est tempor lacinia sed et ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent interdum mi id nisi aliquet pulvinar.
</div>
</div>
<div id="footer">This is Footer Text</div>
</div>
You need to add overflow:auto; to div#maincontainer. Floated elements will flow outside of their containing element, unless this attribute is set.
Also, a double slash (//) is not a valid commenting symbol in CSS.