I have to implement some media queries into my code & use col's.
I've managed to fix most of it, however when it comes to my tablet solution I can't figure out what to do.
The thing is, the col-4 & col-8 is supposed to be for tablet, and in the product box the picture is supposed to be on the right, and the text on the left (all inside the box).
This is my HTML code first, and then CSS bottom.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZENFERIER.NO</title>
<link rel="stylesheet" type="text/css" href="css/meyersReset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
</head>
<body>
<div id="container">
<!-- Header område, inkluderer header, banner og nav -->
<header id="mainPageHeader"> <a id="logo" href="#ng">Zenferier.no</a>
<ul>
<li> Hjem </li>
<li> Om Oss </li>
<li> Reisetips </li>
<li> Kontakt Oss </li>
</ul>
<div id="mainPageBanner" class="img-responsive">
<div id="tekstBanner">Book din ferie hos oss!</div>
</div>
</header>
<!-- slutt header område -->
<!-- hovedområde med produktbokser -->
<main id="mainContent">
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/tenerife.jpg" alt="Bilde Tenerife" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Tenerife</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/kyoto.jpg" alt="Bilde Kyoto" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Kyoto</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/barcelona.jpg" alt="Bilde Barcelona" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Barcelona</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/lasvegas.jpg" alt="Bilde Las Vegas" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Las Vegas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/london.jpg" alt="Bilde London" class="img-responsive"> </div>
<div class="product-content-box">
<h2>London</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/tokyo.jpg" alt="Bilde Tokyo" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Tokyo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/paris.jpg" alt="Bilde Paris" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Paris</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/berlin.jpg" alt="Bilde Berlin" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Berlin</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/oslo.jpg" alt="Bilde Oslo" class="img-responsive"></div>
<div class="product-content-box">
<h2>Oslo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
</main>
<!-- slutt hovedområde -->
</div>
</body>
</html>
CSS:
#charset "utf-8";
body {
margin: 0;
}
#container {
max-width: 80%;
min-height: 100%;
margin: auto;
}
/*-- mainPageHeader --*/
#mainPageHeader {
background-color: #797067;
max-width: 100%;
}
#logo {
color: #FFFDF6;
text-decoration: none;
font-size: 2em;
font-family: 'Roboto Slab', serif;
display: inline-block;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
/*-- end mainPageHeader --*/
/*-- mainPageNav --*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4D8FAB;
}
li {
float: left;
}
li a {
display: block;
color: #FFFDF6;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #C4B197;
}
/*-- mainPageBanner --*/
#mainPageBanner {
height: 250px;
background-color: #4D8FAB;
/*blå*/
background-image: url(../img/banner1.jpg);
background-size: 100%;
background-position: 0px 0px;
display: none;
}
/*-- end mainPageBanner --*/
/*-- tekst på banner --*/
#tekstBanner {
font-size: 2em;
font-family: 'Roboto Slab', serif;
background-color: #EBDBAE;
color: #4D8FAB;
width: 35%;
height: 30%;
padding: 10px;
padding-bottom: 0px;
margin-left: 50px;
margin-top: 90px;
display: inline-block;
}
/*-- mainPageFooter --*/
#mainPageFooter {
background-color: #797067;
bottom: 0;
height: 30px;
padding: 20px;
}
/*-- diverse kode --*/
.img-responsive {
width: 100%;
}
.product-box {
margin-left: 0.25em;
margin-right: 0.25em;
}
#mainContent {
margin-top: 10px;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 30px;
}
h2 {
font-family: 'Roboto Slab', serif;
font-size: 25px;
color: black;
}
p {
font-family: 'Roboto', sans-serif;
}
/*-- media query tablet --*/
#media screen and (min-width:768px){
.product-box {
margin: 0;
margin-bottom: 30px;
}
.product-content-box {
background-color: #C4B197;
margin-left: 10px;
margin-right: 10px;
padding: 15px;
}
.col-tablet-4 {
width: 33,33;
float: left;
}
.col-tablet-8 {
width: 66,66%;
float: left;
}
}
/*-- end media query tablet --*/
/*-- media query screen 1024++ --*/
#media screen and (min-width:1024px){
.col-screen1-4 {
width: 33.33%;
}
#mainPageBanner {
display: block;
}
}
#media screen and (min-width:1240px){
.col-screen1-5 {
width: 25%;
}
#mainPageBanner {
display: block;
}
}
/*-- end media query screen 1024++ --*/
Try reversing the order of the media queries. Put the tablet one below the screen one. It may be overriding it. I hope that helps. :-).
I believe you must use the . as the decimal separator in CSS - for the first media query, you've set the width for .col-tablet-4 and .col-tablet-8 using a comma , as the decimal separator. You have also omitted the % on the width of .col-tablet-4.
replace the media query
#media screen and (min-width:768px){}
to
#media screen and (max-width:768px){}
Related
I am trying to make a timeline project where i want that this line come behind by button which i made using css. I want that this line comes behind the button so that it look nice but it isn't need help
error picture -
enter image description here
https://codepen.io/mohit-04/pen/abWPwPq
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="head">
<ul class="nav">
<li class="st st1 active">
<img
src="https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2FydG9vbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Minions</p>
</li>
<li class="st st2">
<img
src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGNhcnRvb258ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Happy</p>
</li>
<li class="st st3">
<img
src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDF8fGNhcnRvb258ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Cartoon</p>
</li>
<li class="st st4">
<img
src="https://images.unsplash.com/photo-1637855463319-9acb4e5aa44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDl8fGNhcnRvb258ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Cat</p>
</li>
<li class="st st5">
<img
src="https://images.unsplash.com/photo-1578632767115-351597cf2477?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YW5pbWV8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>anime</p>
</li>
</ul>
<div class="line">
<span></span>
</div>
</div>
<div class="content">
<section class="minion-section">
<img src="" alt="" />
<h1>Minion</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="happy-section">
<img src="" alt="" />
<h1>Happy</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="cartoon-section">
<img src="" alt="" />
<h1>Cartoon</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="cat-section">
<img src="" alt="" />
<h1>Cat</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="anime-section">
<img src="" alt="" />
<h1>Anime</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
</div>
</div>
</body>
</html>
style.css
#import url('https://fonts.googleapis.com/css2?family=Epilogue:wght#200&display=swap');
*{
padding: 0 ;
margin: 0;
}
body{
background-position: center;
font-family: 'Epilogue', sans-serif;
}
img{
width: 80px;
}
ul {
text-align: center;
}
ul li {
display: inline-block;
width: 200px;
text-transform: uppercase;
font-weight: 700;
transition: all .3s ease;
position: relative;
}
.container{
margin: 50px auto;
width: 80vw;
}
ul.nav li .inner{
position: absolute;
width: 100%;
font-size: 14px;
font-weight: bold;
}
ul.nav li.active,
ul.nav li:hover{
color: #444;
}
ul.nav li::after{
content: '';
display: block;
width: 7px;
height: 7px;
background: #777;
border-radius: 50%;
margin: auto;
border: 7px solid #fff;
margin-top: 40px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2);
}
ul.nav li:hover::after,
ul.nav li.active::after{
background: blue;
}
.line{
width: 76%;
margin: auto;
background: #eee;
height: 7px;
position: absolute;
left: 11.5%;
top: 41%;
z-index: 1;
border-radius: 50px;
}
You need to either apply a lower z-index number than the default on the images to the line i.e. in this case .line {z-index: -1;} or better still add a higher z-index number to the image wrapper .st class. Adding negative z-index values can have some annoying side effects.
.st {
z-index: 2;
}
This question already has answers here:
What is a clearfix?
(10 answers)
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
I have seen many answers but none seem to work for me...
My footer has come right next to the paragraphs. How can I get them to down of the page... Also how to make the whole page be seen at the same time without needing to scroll down?
Below is my code:
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
Adding a margin and giving it a particular value makes it hard in math...So I would prefer some easier method with simple CSS.
Image of how it looks for me.
Also any mistakes in my code that can be improved to make it more efficient?
Thanks.
EDIT: Adding an empty div helped me...Empty div with the class of clr and using clear:both; for the clr class in CSS works..
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
It's working...
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
You can check now... it's working
section, aside {
min-height: calc(100vh - 100px);
/* here, replace 100px with the size of your header and footer */
}
This makes it so the main content is, at a minimum, the size of the screen minus the header and the footer size, thus pushing the footer to the bottom of the page.
As for the rest of your code, it looks fine to me.
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
The below is my css:
body{
margin:0;
padding-left: 0px;
background: #cccccc;
line-height:1.6em;
}
header{
background: #80ffaa;
color: #ff6666;
margin:0;
}
nav{
background: #333300;
color:#fff;
}
nav ul{
padding: 0;
list-style: none;
}
#navbar li{
display: inline;
}
#navbar li a{
text-decoration: none;
color: tomato;
font-size: 25px;
padding-right:15px;
}
The below is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../Website/css/style.css">
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav id="navbar">
<ul>
<li>ABOUT</li>
<li>HOME</li>
<li>CONTACT</li>
</ul>
</nav>
<body>
<section class="showcase">
<div class="container">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ea.</p>
</div>
</section>
<section class="paragraphs">
<div class="para1">
<h3>Para 1</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit, ipsum. Consectetur omnis voluptas fugiat culpa dicta ipsa aspernatur voluptate repudiandae, ut excepturi debitis nulla impedit inventore, harum magni asperiores distinctio.</p>
</div>
<div class="para2">
<h3>Para 2</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur dicta, necessitatibus veritatis recusandae nemo quidem! Harum sunt quas deserunt qui atque adipisci delectus esse. Animi repellat iusto accusantium est cupiditate.</p>
</div>
<div class="para3">
<h3>Para 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et accusantium veritatis obcaecati libero praesentium omnis quis at, temporibus est! Quia ipsam, ullam recusandae error temporibus dignissimos soluta architecto facilis necessitatibus.</p>
</div>
</section>
<video height="300" width="600" controls>
<source src="C:\Anirudh\New Video.mp4">
</video>
<form>
<label for="email">Subscribe us: </label>
<input type="email" name="email" required placeholder="enter your email here...">
<button type="submit">SUBSCRIBE</button>
</form>
<footer>
<p> © Copyrights belongs to Me since 20202020 </p>
</footer>
</body>
</body>
</html>
The header looks pretty ugly... There is some space between the header and the to of the page which does not have the bg color.. Same is the case with nav and header... I made the margin 0.. But that did not work...
Image of the webpage:
What can be done to remove them with basic CSS and not using flex box or grid (Not yet learnt them..) or putting -ve margins as that needs a lot of trials.
Thanks.
Well, you should use a reset to get rid of that. The best option is to use a global selector just like that. I highly recommend this way.
*, *::before , *::after {
padding: 0;
margin: 0;
}
in your case, you could just give the ul and h1 a margin: 0 to remove the browser default margin.
Try to remove the margin of h1 by adding this css:
h1{
margin:0;
}
I am trying to center images inside my <article> and <aside>, and i am not sure what's wrong with the code. I tried to make some adjustments using article#tablet but no success. Now the images lays on the left, no matter what...if i inspect the item and give it a margin or padding it will react. But can not center it.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://via.placeholder.com/150x150" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Any help i would appreciate. Thank you
You can make use of flexbox in this situation. According to your need, just use the align-items and justify-content properly.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
display: flex;
align-items: center;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
.img-wrapper img {
width: 50px;
height: 50px;
}
.img-wrapper {
display: inline-flex;
align-items: center; /**Vertical */
justify-content: center; /**Horizontal */
height: 100%;
flex: 1;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet" class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Your CSS does not have any styles for images.
To center the image in your you have to select it and apply styles to it, for example an auto margin and display: block:
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
/* Added this */
article img,
aside img {
display: block;
margin: 0 auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="./img/hand_ipad.png" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://picsum.photos/200/300" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://picsum.photos/300/300" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
You want to center the image inside the <aside> and <article> right ?
Just add property : text-align : center in the aside and article, the images inside them will be centered.
Checkout in codepen for more detail
https://codepen.io/anon/pen/PddMYZ
Or only necessary code here (The css file) :
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
text-align : center;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
aside{
text-align : center;
}
This is another simple method.
I have wrapped image in a div and added single css line for that div.
section {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
width: 50%;
background-color: #A2B2C1;
}
aside {
float: right;
width: 50%;
background-color: #C3D7DF;
}
/*css which I have added*/
.img-wrapper {
text-align: center;
}
<section>
<article>
<h2>Article Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</article>
<aside>
<h2>Aside Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</aside>
</section>
How would I remove a gap between a h1 and p element? I've tried removing the padding and margins with no luck. I'm using the default bootstrap css. Any ideas?
.section1{
background-color: bisque;
}
p, h1 {
margin: 0px;
padding: 0px;
}
<div class="section1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-header">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
</div>
</div>
</div>
</div>
I've attached a screenshot to this post as it appears correctly when I run the code using stackoverflows 'run snippet' feature.
The page-header bootstrap class is causing the space reset it using:
h1.page-header {
margin: 0;
padding: 0;
}
See demo below:
.section1 {
background-color: bisque;
}
p,
h1 {
margin: 0px;
padding: 0px;
}
h1.page-header {
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="section1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-header">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
</div>
</div>
</div>
</div>
Add line-height to h1 class in your CSS. If font size is 26px, just ad 26px line height.
like:
h1.page-header{
font-size:26px;
line-height:26px;
}
Try line-height to it
.section1 {
background-color: bisque;
line-height: 15px;
}
p,
h1 {
margin: 0px;
padding: 0px;
}
.page-header{
margin:0 !important;
padding:0 !important;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-header">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
</div>
</div>
</div>
</div>
You need to reset css first. Because Browser has format CSS itself
{
margin: 0px;
padding: 0px;}
Add this above your css file