Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm working on a small project and I have encountered a problem. In the bgContainer class there are two bits of text and they have a margin between them, however I don't want any margin and I can't tell where the margin is coming from. According to chrome, the margin is 200px on the header text but, as far as I am aware, no where in my css have I set that to be the case. I'm also using bootstrap 4 beta 2. Any help appreciated, thanks.
padding/margin
#charset "UTF-8";
.sidenav {
height: 100%;
width: 0;
position: fixed;
overflow-y: auto;
z-index: 1;
top: 0;
left: 0;
font-family: 'Helvetica Neue', Gotham, Helvetica, Arial, 'sans-serif';
font-weight: 200;
font-size: 1em;
background-color: #e9ecef;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav .sidebar-header {
font-family: "Bebas Neue";
font-size: 2em;
font-weight: 600;
padding: 0 20px;
}
.sidenav ul.components {
padding: 10px 0;
}
.sidenav ul p {
color: #fff;
padding: 5px 10px;
}
.sidenav ul li a {
color: #5C5C5C;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.sidenav ul li a:hover {
color: #5C5C5C;
background: #fff;
transform: scale(1.01);
}
.sidenav ul li.active {
color: #e9ecef;
}
.sidenav ul li.current > a {
color: #e9ecef;
background-color: #5C5C5C;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #D0D0D0;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f0d7';
display: block;
position: absolute;
right: 20px;
top: 7px;
font-family: FontAwesome;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
}
a[aria-expanded="true"]::before {
content: '\f0d8';
}
#main {
transition: margin-left .5s;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.navButton {
padding: 10px;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 20px;
height: 3px;
background-color: #e9ecef;
margin: 3px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(0px, 8px) ;
transform: rotate(-45deg) translate(0px, 8px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(0px, -8px) ;
transform: rotate(45deg) translate(0px, -8px) ;
}
.bgConatiner {
padding: 20px;
vertical-align: middle;
height: 510px;
margin-top: 0px;
margin-bottom: 0px;
}
.header {
margin-top: 0px;
margin-bottom: 0px;
}
.header p {
font-weight: 400;
font-size: 200px;
font-family: "Bebas Neue";
color: #FFF;
}
.subheader {
margin-top: 0px;
margin-bottom: 0px;
}
.subheader p {
font-weight: 200;
font-size: 100px;
font-family: "Bebas Neue";
color: #FFF;
}
.bg {
width: 100%;
height: 550px;
background-image: url(../assets/header5.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">
<div id="mainSidenav" class="sidenav">
<div class="sidebar-header">Solebooth</div>
<!--Sidenav Menu-->
<ul class="list-unstyled components">
<li> Sneakers
<ul class="collapse list-unstyled" id="subNav1">
<li>Adidas</li>
<li>Nike</li>
<li>Asics</li>
</ul>
</li>
<li> Clothing
<ul class="collapse list-unstyled" id="subNav2">
<li>Supreme</li>
<li>Bape</li>
<li>Palace</li>
</ul>
</li>
<li> Galley
<ul class="collapse list-unstyled" id="subNav3">
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<nav class="navbar sticky-top">
<form>
<div class="navButton" onclick="navButton(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</form>
</nav>
<div class="bgConatiner">
<div class="header">
<p>SOLEBOOTH</p>
</div>
<div class="subheader">
<p>Sneakers. Streetwear.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1"></div>
<div class="col-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. </div>
<div class="col-1"></div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mainSidenav").style.width = "200px";
document.getElementById("main").style.marginLeft = "200px";
}
function closeNav() {
document.getElementById("mainSidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
function navButton(x) {
if(x.classList.contains("change")){
closeNav();
x.classList.remove("change");
}else{
openNav();
x.classList.add("change");
}
}
</script>
<!--JavaScript -->
<script src="https://use.fontawesome.com/fdfcf3c386.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Try to apply
.subheader p, .header p {
margin: 0;
}
The reason why you see so much space around your p-s is that user-agent's (browser's) default styles are applied. For example, my browser (and yours as well, I suppose) applies:
p {
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
}
Em-s are relative to the font-size of the elements. Your <p>-s have font-sizes 100px and 200px. So, that's why you get those large margins. Also consider using things like reset.css or normalize.css to clear the user-agents' styles and reduce browser inconsistencies.
Related
I'm currently making a (static) website from scratch (so code the HTML and CSS stuff myself), and I want to have a responsive "image gallery" that changes the width of the pictures according to your screen width, so I followed this tutorial: CSS Image Gallery - responsive
However, changing it to my own likings I encountered an issue I could not fix with my current HTML/CSS skillset (it is not that much, I'm quite new in this). My problem is when I have (in my example three) images of the same size in my gallery, but the captions of the image have different length, this negatively affects the text that is followed by the gallery (see example and image below). I tried to fix this with the tutorials available at W3 and stuff, but nothing worked yet.
Does any of you how to (easily) fix this? And if so, please explain what you changed, because I want to truly understand what is going on at my website (that is why I didn't want to use these static site generators).
Note: I have made 3 types of galleries, one for two, three and four images, which explains the ".responsivethree" etc classes
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p>
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The float:left property you gave to the responsivethree class aligns the images to the left. Since you did not reset the left justification feature afterward, you are having a problem with the text scrolling. The clear:both command is used to reset the float:left property.
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p class="clear">
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The content boxes look good when they're full size, but when the page shrinks they are no longer centred. I've tried messing around with a bunch of things but can't for the life of me figure out what's wrong.
I've only been learning to code for a few weeks to please be kind lol, however if you have any off topic tips they are also appreciated
* {margin: 0; padding: 0}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim. Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
You have to read more about box-sizing, just add box-sizing: border-box; to all elements and it will fix your problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra
ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim.
Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
Here is a link where you could know more about it: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I have been doing a course online on web-development, the instructor showed us an implementation of slideshow using jquery. I followed every step as instructed, but when I open my browser the images seem to not appear on the slideshow and I don't know if the slideshow box is working.
Here's the link to the jquery tool for the tabs-slideshow:
http://jquerytools.github.io/demos/tabs/slideshow.html
My Questions are:
1.Where have I gone wrong in the code which is preventing the proper working display of the slideshow images and the slideshow box?
2.What is br class="clearing" and .clearing {
clear:both;} (css file 2) doing exactly?
Thank you in advance.
This is my HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Killersites CSS layout Example</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/slideshow.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
[endif]-->
<!-- enable the jquery -->
<script language="javascript">
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(function() {
$(".slidetabs").tabs(".images > div", {
//enable the "cross-fading" effect
effect:'fade',
fadeOutSpeed: "slow",
// start from the befinning after the last tab
rotate: true
//use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
</script>
</head>
<body>
<content>
<header>
Home
<h1>Killersites Training</h1>
<p>Creating Killersites Since 1998</p>
</header>
<!-- Container for the slides-->
<header class="images">
<!-- First sliding image-->
<div>
<img src="images/killerfrog.jpg" width="940" height="250" alt="image1" title="image1">
</div>
<!-- Second sliding image-->
<div>
<img src="images/killerfrog2.jpg" width="940" height="250" alt="image2" title="image2">
</div>
<!-- Third sliding image-->
<div>
<img src="images/killerfrog3.jpg" width="940" height="250" alt="image3" title="image3">
</div>
</header>
<!-- The tabs -->
<div class="slidetabs">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Products</li>
<li>Services</li>
<li>Clients</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</nav>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. Aenean fringilla est interdum metus tempor facilisis ultrices a metus. Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
<h3>A Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. </p>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
<section class="leftfloat">
<h3>nested left section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<section class="rightfloat">
<h3>nested right section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
</article>
<footer>
<section class="first">
<p>©2011 killersites Corp</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<br class="clearing">
</footer>
</content>
</body>
</html>
The css file1:
#charset "UTF-8";
/* slideshow css */
/* container for slides */
.images {
background:#fff url(../images/h300.png) repeat-x;
position:relative;
height:250px;
width:940px;
float:left;
cursor:pointer;
}
/* single slide */
.images div {
display:none;
position:absolute;
top:0;
left:0;
height:250px;
font-size:12px;
}
/* header */
.images h3 {
font-size:22px;
font-weight:normal;
margin:0 0 20px 0;
color:#456;
}
/* tabs (those little circles below slides) */
.slidetabs {
position:absolute;
top:365px;
right:20px;
/*clear:both;
margin-left:330px;*/
}
/* single tab */
.slidetabs a {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(../images/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}
/* mouseover state */
.slidetabs a:hover {
background-position:0 -8px;
}
/* active state (current page state) */
.slidetabs a.current {
background-position:0 -16px;
}
The CSS File 2:
#charset "UTF-8";
*{
margin:0px;
padding:0px;
}
/*html5 display rule */
address, article, aside, canvas, content, details, figcaption, figure, footer, header, hgroup, nav, menu, section, summary {
display:block;
}
#font-face {
font-family: 'ChunkFiveRoman';
src: url('../fonts/chunkfive-webfont.eot');
src: url('../fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/chunkfive-webfont.woff') format('woff'),
url('../fonts/chunkfive-webfont.ttf') format('truetype'),
url('../fonts/chunkfive-webfont.svg#ChunkFiveRoman') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'sinkin_sans400_regular';
src: url('../fonts/sinkinsans-400regular-webfont.woff2') format('woff2'),
url('../fonts/sinkinsans-400regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: #353535;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-image: url(../images/dots.png);
}
h1, h2, h3 {
font-family: 'sinkin_sans400_regular','ChunkFiveRoman', Georgia, "Times New Roman", Times, serif;
}
content{
width:940px;
margin-top:20px;
margin-right:auto;
margin-bottom:20px;
margin-left:auto;
position:relative;
background-color:#f2f3ed;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
header {
border-bottom-color: #CCC;
border-bottom-width: 1px;
border-bottom-style: solid;
}
header h1 {
padding:20px 20px 20px 97px;
color:#353535;
font-size:42px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header h1:hover{
text-shadow: 2px 2px 2px #888;
-webkit-text-shadow:2px 2px 2px #888; /* safari */
}
header p {
color:#353535;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
position: absolute;
right: 0px;
top: 33px;
background-color:#f2f3ed;
padding:10px;
/* rounded corners */
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
/* 2d skew trasnform */
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-moz-transform:skew(-20deg,0deg); /* Firefox */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
-o-transform:skew(-20deg,0deg); /* Opera */
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header p:hover {
color:#f2f3ed;
background-color:#353535;
background-image: url(../images/dots.png);
}
#logo {
position: absolute;
top: 12px;
left: 20px;
background: url(../images/logo_small.png) no-repeat;
width: 61px;
height: 62px;
text-indent:-9999px;
/* css3 transition */
-webkit-transition:all 1s;
-o-transition-property:all;
-o-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
transition-property:all;
transition-duration:1s;
}
#logo:hover {
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
header#anim {
height:250px;
}
nav {
float:left;
width:200px;
}
nav li{
list-style-type:none;
}
nav li a{
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
display:block;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
font-size:18px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
nav li a:link{
color:#333;
}
nav li a:visited{
color:#333;
}
nav li a:hover{
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
background-color:#353535;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
background-image: url(../images/dots.png);
}
nav li a:active{
color:#333;
background-color:#666;
}
article {
width:739px;
float:right;
border-left-color: #CCC;
border-left-width: 1px;
border-left-style: solid;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
}
article h2, h3, p {
margin-left:20px;
margin-right:20px;
padding-top:10px;
}
article p {
padding-top:4px;
padding-bottom:20px;
line-height:18px;
}
article h2{
color:#353535;
font-size:28px;
text-transform: capitalize;
}
article h3{
color:#353535;
font-size:20px;
text-transform: capitalize;
}
article .leftfloat{
width:50%;
float:left;
}
article .rightfloat{
width:50%;
float:right;
}
footer {
border-top-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
clear:both;
background-color: #407a01;
background-image: url(../images/bg_gradient.png);
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
-moz-border-bottom-right-radius:25px;
-moz-border-bottom-left-radius:25px;
}
footer section.first {
float:left;
width:200px;
padding-top:10px;
padding-bottom:20px;
}
footer section.first p {
color:#f2f3ed;
}
footer section {
float:left;
width:246px;
padding-top:10px;
padding-bottom:20px;
color:#96C;
}
footer section h3 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#f2f3ed;
font-size:16px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #F2F3ED;
padding-bottom: 0px;
text-transform: capitalize;
font-weight:normal;
}
footer section p {
color:#333;
font-size:10px;
line-height:16px;
}
.clearing {
clear:both;
}
Here is an example of a working slideshow.
I'm getting this from this example at w3schools. There are surely better examples out there than the one at w3schools, but this at least works.
Note the only change I made was to the images, which are now using "https://via.placeholder.com/350x150" as their source.
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption Text #One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Regarding your question about what the CSS clear attribute does:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
via: https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Note the clear:both; example in the above link, and compare it to other clear options, like left, right, and none.
I'm having some trouble with an Accordion Dropdown snippet on codepen.
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide {
0% {
max-height: 0
}
100% {
max-height: 300px
}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I want to animate the dropdown's expansion. I want it to start from the top of the container. Now, it starts from the end of the padding. Doesn't look nice. I've delayed the animation 1s so you can tell what I mean
Here's a link to my pen: https://codepen.io/b3u/pen/RBbeWy. Thanks in advance!
Transition instead of animation, in this case, as it is simpler.
didn't touch the animation code, just created the transition effect.
Transition on max-height will not use GPU processing so be aware of possible performance issues on mobile devices (or old computers)
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i< other.length ; i++){
other[i].style.display = "none";
}
item.style.display = "block";
}
*{
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0}
100% {max-height: 300px}
}
p {
display: block;
max-height: 0;
overflow:hidden;
padding: 0;
transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
background-color: #E5FB8B;
color: #444;
text-align: justify;
position: relative;
z-index: 0;
box-sizing:border-box;
}
p.active{
padding: 2em 1em 1em 1em;
max-height: 1000px;
transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
}
nav{
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover{
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
Below an updated version of your code, the change was adding reset for padding at the top and bottom at the beginning of the animation. Hope this help.
All the best!
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0; padding-top: 0; padding-bottom: 0}
100% {max-height: 300px}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I need some help to hide the background color of my container div.
The main content area is structure in such a way that the article tags stack on top of each other and then after that the footer should take up whatever space is left.
I have tried to get rid of the space between the article tag and the footer while still keeping the margin. In order words I want to get rid of the blue line while.
Can someone give me a hint of how to achieve this?
#container {
background-color: #004bb8;
min-width: 320px;
max-width: 960px;
}
/*------Header-----*/
header {
background-color: lightsalmon;
border-bottom: solid #65ff09 2px;
}
h1, h2 {
font-family: "Impact";
margin: 0px;
padding: 0px;
color: darkred;
text-align: left;
text-transform: uppercase;
letter-spacing: 4px;
}
#image-container {
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 1%;
}
#sitename{
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 8% 1% 1% 1%;
}
header::after {
content: "";
display: block;
clear: left;
}
header img {
width: 250px;
margin: 0 auto;
}
header h1 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 1.5em;
padding: 10px 10px;
color: #f9db00;
}
header h2 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 0.8em;
padding: 10px 10px;
color: #ff2a86;
}
/*-------navigation------*/
nav {
width: 100%;
background-color:
}
nav ul li {}
nav ul li a {
display: block;
text-align: center;
border-radius: 5px;
padding: 0.5em;
margin: .3em;
border: 1px solid #fff;
background-color: #004bb8;
text-decoration: none;
color: #fff;
}
nav ul li.active a {
background-color: #b8005c;
}
nav ul li a:hover {
background-color: #f9db00;
color: #323C40
}
/*-------content------*/
#content {
min-height: 5em;
background-color: #fff;
}
#content article {
margin: 0 2%;
}
#content article.News, #content article.Tweets {
background-color: #ddd;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
article.News h2, article.Tweets h2 {
background-color: darkgray;
color: #fff;
padding: 0.5em;
font-size: 0.8em;
}
article.News h2 {background-color: #004bb8;}
article.Tweets h2 {background-color: #b8005c;}
article.News h3, article.Tweets h3 {
padding: 0.5em 0 0 1%;
font-size: 1.0em;
}
article.News h3 {color: #004bb8;}
article.Tweets h3 {color: #b8005c;}
article.News p, article.Tweets p {
color: #666;
font-size: 0.8em;
padding-left: 1%;
padding-right: 1%;
line-height: 120%;
}
#contents article.Tweets::after {
content: "";
display: block;
clear: left;
}
/*-------footer------*/
footer {
clear: both;
text-align: center;
padding: 1em;
background-color: #111;
color: #fff;
font-size: 0.6em;
}
/*---------IMAGES------------*/
figure.w100 {
overflow: hidden;
width: 100%;
}
figure.w33 {
width: 96%;
border: 1px solid #999;
margin: 0.3em 0 0.3em 2%;
}
figure.w33 img {
width: 100%;
}
figure.w100 img {
width: 100%;
}
#content figcaption {
text-align: center;
font-size: 0.6em;
color: #777;
padding: 0.3em;
}
<body>
<div id="wrapper">
<div id="container">
<header>
<div id="image-container">
<img src="img/logo.png" alt="logo">
</div>
<div id="sitename">
<h1>Responsive Design</h1>
<h2>Don't Settle for Less</h2>
</div>
</header>
<!--------Page Navigation Links -->
<nav>
<ul>
<li>Desktop Work Around</li>
<li class="active">Phone-Default</li>
<li>Tablet Enhancement</li>
<li>Reset CSS</li>
</ul>
</nav>
<!--------Page Content -->
<div id="content">
<figure class="w100">
<img src="img/lake.jpeg" alt="lake">
</figure>
<article>
<h2> Lorem Ipsum</h2>
<figure class="w33">
<img src="img/car.jpeg" alt="car">
<figcaption> what i wish to drive when i get super rich</figcaption>
</figure>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<div class="row">
<article class="News">
<h2>News</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<article class="Tweets">
<h2>Tweets</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
</div>
</div>
<!-----End of Content --->
<footer>
<p>© Buko Ogbobe Responsive Start File</p>
</footer>
</div> <!----end of Container ---->
</div> <!----end of Wrapper ---->
</body>
Here's two solutions, you can use :
footer {
margin-top:-13px;
}
or :
#content article.Tweets, article.Tweets p {
margin-bottom:0px;
}
This will fix the gap in between your footer and content.