Related
Here is the code i used. On pressing the navbar menu the content should move right with a delay of 0.7s same as the sidebar opens with a delay of 0.7s but it is not working.
Kindly review the code and suggest something.
is it because of some media query I am using or anything else.?
Kindly review the code and suggest something.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.header{
width: 100%;
height: 70px;
background-color: #2f3640;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
}
.header img{
width: 60px;
height: 60px;
margin-right: 15px;
}
.header h1 {
line-height: 70px;
color: #fff;
}
.Content{
margin-top: 80px;
width: 100;
padding: 20px;
float: right;
transition: all 0.7s;
}
.Content img{
width: 100%;
max-width: 700px;
display: block;
margin: auto;
}
.Content p{
text-align: justify;
}
.Sidebar{
width: 20%;
height: 100%;
position: fixed;
top: 70px;
background-color: #353b48;
left: -100%;
transition: .7s;
}
.Sidebar ul{
list-style: none;
}
.Sidebar ul li {
border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a{
display: block;
text-decoration none;
color: #fff;
font-size: 20px;
padding: 15px 25px;
transition: .4s;
}
span{
margin-left: 15px;
}
.Sidebar ul li a:hover {
border-left: 10px solid white;
}
.social{
margin-top: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 30px;
border-bottom: 2px solid rgba(255, 255, 255, .1);
border-top: 2px solid rgba(255, 255, 255, .1);
padding: 15px 25px;
}
i{
font-size: 30px;
color: #fff;
transition: .2s;
}
i:hover{
transform: scale(1.2);
color: green;
}
.show-btn, .hide-btn {
font-size: 35px;
color: #fff;
position: fixed;
top: 15px;
left: 50px;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -10;
}
.hide-btn{
opacity: 0;
}
#chk:checked ~ .Sidebar{
left: 0;
}
#chk:checked ~ .show-btn{
opacity: 0;
}
#chk:checked ~ .hide-btn{
opacity: 1;
}
#chk:checked ~ .Content{
width: 80%;
float: right;
transition: all 0.7s;
}
#media(max-width: 768px){
.Sidebar{
width: 100%;
text-align: center;
}
.Sidebar ul li a:hover {
border-left: 30px solid white;
}
.header h1{
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-NavBar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="header">
<img src="../images/fullstackLogo.png" alt="logo-img">
<h1>FullStack</h1>
</div>
<input type="checkbox" name="" id="chk">
<label for="chk" class="show-btn">
<i class="fa fa-bars"></i>
</label>
<label for="chk" class="hide-btn">
<i class="fa fa-times"></i>
</label>
<div class="Sidebar">
<ul>
<li><i class="fa fa-home"><span>Home</span></i></li>
<li><i class="fa fa-user"><span>About</span></i></li>
<li><i class="fa fa-tasks"><span>Services</span></i></li>
<li><i class="fa fa-rss"><span>Blog</span></i></li>
<li><i class="fa fa-id-card"><span>Contact</span></i></li>
</ul>
<div class="social">
<i class="fa fa-facebook-square"></i>
<i class="fa fa-youtube-square"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
<div class="Content">
<img src="../images/laptop1.jpg" alt="body-img">
<p>
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
I corrected your code.
This CSS transitions is not working perfectly Because of you are using different CSS property of sidebar and content part to show this transitions.
Currently you are manipulating CSS property of sidebar is left -100% to 0 cause this issue.
Please manage CSS properties width:0% to 20% of sidebar which transact over a same period of time as content part.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.header {
width: 100%;
height: 70px;
background-color: #2f3640;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
}
.header img {
width: 60px;
height: 60px;
margin-right: 15px;
}
.header h1 {
line-height: 70px;
color: #fff;
}
.Content {
margin-top: 80px;
width: 100%;
padding: 20px;
float: right;
transition: all 0.7s;
}
.Content img {
width: 100%;
max-width: 700px;
display: block;
margin: auto;
}
.Content p {
text-align: justify;
}
.Sidebar {
width:0%;
height: 100%;
position: fixed;
top: 70px;
background-color: #353b48;
left:0;
transition: all 0.7s;
overflow: hidden;
}
.Sidebar ul {
list-style: none;
}
.Sidebar ul li {
border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a {
display: block;
text-decoration none;
color: #fff;
font-size: 20px;
padding: 15px 25px;
transition: .4s;
}
span {
margin-left: 15px;
}
.Sidebar ul li a:hover {
border-left: 10px solid white;
}
.social {
margin-top: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 30px;
border-bottom: 2px solid rgba(255, 255, 255, .1);
border-top: 2px solid rgba(255, 255, 255, .1);
padding: 15px 25px;
}
i {
font-size: 30px;
color: #fff;
transition: .2s;
}
i:hover {
transform: scale(1.2);
color: green;
}
.show-btn, .hide-btn {
font-size: 35px;
color: #fff;
position: fixed;
top: 15px;
left: 50px;
}
#chk {
position: absolute;
visibility: hidden;
z-index: -10;
}
.hide-btn {
opacity: 0;
}
#chk:checked ~ .Sidebar {
width: 20%;
}
#chk:checked ~ .show-btn {
opacity: 0;
}
#chk:checked ~ .hide-btn {
opacity: 1;
}
#chk:checked ~ .Content {
width: 80%;
}
#media(max-width: 768px) {
.Sidebar {
width: 100%;
text-align: center;
}
.Sidebar ul li a:hover {
border-left: 30px solid white;
}
.header h1 {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-NavBar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="header"> <img src="../images/fullstackLogo.png" alt="logo-img">
<h1>FullStack</h1>
</div>
<input type="checkbox" name="" id="chk">
<label for="chk" class="show-btn"> <i class="fa fa-bars"></i> </label>
<label for="chk" class="hide-btn"> <i class="fa fa-times"></i> </label>
<div class="Sidebar">
<ul>
<li><i class="fa fa-home"><span>Home</span></i>
<About/li>
<li><i class="fa fa-user"><span>About</span></i></li>
<li><i class="fa fa-tasks"><span>Services</span></i></li>
<li><i class="fa fa-rss"><span>Blog</span></i></li>
<li><i class="fa fa-id-card"><span>Contact</span></i></li>
</ul>
<div class="social"> <i class="fa fa-facebook-square"></i> <i class="fa fa-youtube-square"></i> <i class="fa fa-instagram"></i> </div>
</div>
<div class="Content"> <img src="../images/laptop1.jpg" alt="body-img">
<p> Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</body>
</html>
Please click on 'full page' to see correct output
I'm sure this is relatively simple problem but after some fiddling I'm not finding much luck, will fix one thing then another problem arises. As you can see below (this is on desktop, mobile works perfect) the text boxes are way too big, leaving loads of white space below texts, some images are a good size, some are too big, the top one looks the best. The idea being the image spans across one side then the text box is the same height next to it.
Here is a picture of the mobile for reference
I wont link all the HTML and CSS, just the relevant stuff. Any advice is welcome and appreciated.
<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600&family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<meta charset="utf-8" >
<meta name="description" content="Jordan Squres, mixed martial arts trainer, working out of Oxfordshire">
<meta name="keywords" content="MMA, martial arts, personal trainer, self defence, exercise">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="autor" content="Descisive Development">
<link rel="stylesheet" href="styles.css">
<title>Jordan Squires, Home</title>
</head>
<body >
<nav class="navbar">
Jordan Squires
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="navitem"> Home</li>
<li class="navitem"> About</li>
<li class="navitem"> Clients</li>
<li class="navitem"> Blog</li>
<li class="navitem"> Contact</li>
</ul>
</div>
</nav>
<section class="home-hero">
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio1.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container" id="even">
<div class="img-hero">
<img src="images/portfolio2.jpg" alt="">
</div>
<div class="info-hero">
<h1>Shotokan Karate</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio3.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jeet Kune Do</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container"id="even">
<div class="img-hero">
<img src="images/portfolio4.jpg" alt="">
</div>
<div class="info-hero">
<h1>Brazilian Jiu Jitsu</h1>
<h2>Purple Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio5.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
</body>
</html>
and the css
box-sizing: inherit;
margin: 0 auto;
padding: 0;
}
html{
font-size: 10px;
max-width: 1300px;
box-sizing: border-box;
}
body{
background: var(--white);
}
a{
color: var(--main-txt);
text-decoration: none;
}
:root{
--white: #F1FAEE;
--outline-color: #000000;
--bg-color: #1D3557;
--main-txt: #457B9D;
--alt-txt: #A8DADC;
--red: #E63946;
--ff: 'Montserrat', sans-serif;
--ff2: 'Poppins', sans-serif;
--fw-l: 300;
--fw-n: 400;
--fw-m: 600;
--fw-b: 700;
--fs-1: ;
--fs-2: ;
--fs-3: ;
--fs-p: ;
--shadow: 0px 7px 10px 0px rgba(0,0,0,.3);
}
/*global style container*/
.container{
max-width: 1360px;
}
/*Navbar styles*/
.navbar{
box-shadow: 0px 3px 3px -3px rgb(0, 0, 0);
width: 100%;
font-size: 1.8rem;
font-family: var(--ff2);
}
.navbar ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.navbar ul a{
display: block;
padding: 2rem;
text-align: center;
text-transform: uppercase;
font-weight: var(--fw-n)
}
.navbar ul a:hover{
background-color: var(--bg-color);
color: var(--white);
}
.navbar .logo{
float: left;
display: block;
font-size: 2rem;
padding: 1.5rem;
text-decoration: underline;
text-decoration-thickness: 0.2rem;
text-underline-offset: 0.5rem;
}
.navbar .menu{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.navbar .menu-icon{
padding: 2.8rem 2rem;
position: relative;
float: right;
cursor: pointer;
}
.navbar .menu-icon .nav-icon{
background: var(--bg-color);
display: block;
height: .2rem;
width: 1.8rem;
position: relative;
transition: background .2s ease-out;
}
.navbar .menu-icon .nav-icon:before{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: .5rem;
}
.navbar .menu-icon .nav-icon:after{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -.5rem;
}
.navbar .menu-btn{
display: none;
}
.navbar .menu-btn:checked ~ .menu{
max-height: 36rem;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon{
background: transparent;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:before{
transform: rotate(-45deg);
top: 0;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:after{
transform: rotate(45deg);
top: 0;
}
/*Homepage main section*/
.home-hero{
margin: 1rem auto;
}
.flex-container{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.img-hero{
width: 90%;
margin-top: 2rem;
margin-bottom: 2rem;
padding-bottom: -3px;
}
.info-hero{
width: 90%;
font-family: var(--ff);
border: 1px solid var(--outline-color);
padding: 3rem;
background-color: var(--bg-color);
}
/*Image styles*/
.img-hero img{
max-width: 100%;
object-fit: contain;
max-height: 100%;
margin-bottom: -3px;
border: 1px solid var(--outline-color);
}
/*Info styles*/
.info-hero h1{
font-size: 3rem;
color: var(--white);
}
.info-hero h2{
font-size: 2rem;
font-style: italic;
color: var(--red);
}
.info-hero h1 h2{
font-family: var(--ff2);
}
.info-hero p{
font-size: 1.2rem;
text-align: justify;
color: var(--alt-txt);
}
/*Media for Navbar*/
#media (min-width: 760px) {
.navbar{
height: 6.7rem;
}
.navbar li{
float: left;
}
.navbar li a{
padding: 2rem 2.5rem;
}
.navbar .menu{
clear: none;
float: right;
max-height: none;
}
.navbar .menu-icon{
display: none;
}
.navbar .logo{
padding: 2rem;
}
.flex-container{
flex-direction: row;
margin: 2rem auto;
}
.img-hero{
width: 50%;
margin: inherit;
}
.info-hero{
width: 45%;
padding: 2rem;
}
#even{
flex-direction: row-reverse;
}
}
Here is a simple example I just wrote for you, you may adjust it according to your needs.
.flex-container {
display: flex;
margin-bottom: 1rem;
}
.img-hero, .info-hero {
max-width: 50%;
}
.img-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-hero {
background: violet;
color: white;
}
.info-hero > * {
padding: 0.5rem 1rem;
}
<div class="flex-container">
<div class="img-hero">
<img src="https://picsum.photos/900/700" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="img-hero">
<img src="https://picsum.photos/800/600" alt="">
</div>
</div>
I want to show a number of text blocks, at first just showing the title and a few lines, and after clicking a 'more' tag show it all, or hide it again.
I used the CSS trick of hidden checkbox and label, and it looked almost correct.
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
// display:inline-block;
padding-top: 40px;
color: white;
font-style: italic;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked ~ .lbl1:after {
content: "show less";
}
input[id^="more"]:checked ~ .arttxt1{
height: 100%;
}
.arttxt1{
margin-left:1%;
width: 50%;
margin-bottom:2px;
line-height: 2.5ex;
height: 8.4ex; /* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox'/>
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>
The label to click on only had the width of the text, whereas I wanted it streteched over the full width.
Searching suggested adding 'display: inline-block' which I did. It indeed stretched the label over the full width, but I also lost the transparency: it sort of lies in front of the text.
I tried and I searched but could not find a proper solution. Hope someone can help me.
Is this the effect you want?
using negative margin to move div up
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 128, 0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
display: inline-block;
padding-top: 40px;
color: white;
font-style: italic;
margin-top: -40px;
padding-left: 1%;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked~.lbl1:after {
content: "show less";
}
input[id^="more"]:checked~.arttxt1 {
height: 100%;
}
.arttxt1 {
margin-left: 1%;
width: 50%;
margin-bottom: 2px;
line-height: 2.5ex;
height: 8.4ex;
/* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox' />
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>
To clarify, it doesn't lose the transparency - what is actually happening is that because your <div class="arttxt1"> is a block element, the label is being pushed down to below the text.
As such, you can either use margin-top as per Chris Li's answer, or position:relative and top to push the label up over the top of your text.
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
display:inline-block;
padding-top: 40px;
color: white;
font-style: italic;
position:relative;
top: -40px;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked ~ .lbl1:after {
content: "show less";
}
input[id^="more"]:checked ~ .arttxt1{
height: 100%;
}
.arttxt1{
margin-left:1%;
width: 50%;
margin-bottom:2px;
line-height: 2.5ex;
height: 8.4ex; /* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox'/>
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>
I am stuck here, i want to make fix nav with full height section with content but second section is not going good after scroll, need help.
Below my tried code:
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
margin-top: 54px;
color: #fff;
}
section.green {
background: green;
height: 100vh;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<section>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
Can anyone help me out and provide me a solution to my problem?
You have nested <section> which is not recommended, a better approach should replace your outer <section> with <div class="wrapper">...</div>
Then use a wrapper class to set the margin-top: 54px which is the height of nav.
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
For the overlap, use calc to set the height dynamically height: calc(100vh - 52px);
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
height: calc(100vh - 52px);
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
You can use calc() to calculate the height of the sections
height: calc(100vh - 54px); /*54px is the height of the nav*/
So this will make the height of each section have the height of the screen minus the height of the nav.
And to remove the space between the sections you need to remove margin-top from the p tag and add padding-top:54px;to the container, again 54px is the height of the nav, and that for the sections to start right after the nav
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
height: 100vh;
padding-top:54px;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: calc(100vh - 54px);
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
So I want to achieve this using css and html
So I wrote this code that sets the width of each box to 33.33%
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
div > div {
background-color: gray;
border: 1px solid;
float: left;
}
.dummy_text {
clear: right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="chiken">Chicken
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="beef">Beef
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<p id="sushi">Sushi
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
And the result is this:
The thing is that I need spacing between paragraphs, so what I though was to add some margin-left to the boxes, the thing is that when I add 10px, the result is that one of the three boxes goes to a new line, but I need the three in the same line.
This is what I did to add the margin, I modify the div > div part like this:
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-left: 10px;
}
And then result:
Use % values for all your layout widths.
Use :last-child to set the margin of the right div to zero.
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-right: 2%
}
div > div:last-child {
margin-right: 0;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 32%;
}
}
Here's a codepen:http://codepen.io/prime8/pen/LRympm
Use calc for with
.col-dsk-3 {
float: left;
width: calc(33.33% - 20px);
margin-right: 10px;
}
.col-dsk-3:last-child {
margin-right: 0px;
}
But I suggest you use flexbox instead
When adding the margin-left: 10px to each paragraph you are making their widths larger than 33.33% which results in being greater than 100% pushing the last paragraph down.
Like all things in CSS, there is a couple of different ways you can solve this, but the easiest and most direct answer to your question is using the calc CSS function. The calc function calculates a numerical value in CSS using basic math operations.
Using the calc function you can then set the width of each paragraph to be:
width: calc(33.33% - 10px);
Which will result in a 100% fit.
There are a number of things you can do about this.
1 - Use calc to reduce the width of elements currently set to 33.33% by 10px, and use 10px margin:
.col-dsk-3 {
float: left;
width: calc(33.33% - 10px);
margin-right: 10px;
}
2 - Wrap the content of your columns in another element, and apply a padding to your columns:
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div class="column-content">
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit....</p>
</div>
</div>
.column-content {
background-color: gray;
}
.col-dsk-3 {
float: left;
width: 33.33%;
padding: 10px;
background: none;
}
3 - use flexbox instead of floats for your columns. Remove the floats and the width: 33.33%, and add:
.row {
display: flex;
flex-direction: row;
}
.col-dsk-3 {
margin: 10px;
}
You use percentages to define the width, but add absolute values to the margins. Your widths add up to (almost) 100%, yet you add more margins, resulting in more than 100%, therefore to a value that is bigger than the space that is available.
Adjust your margins to use percentages as well and make sure you end up with 100% or less.
Try this. To use additional div wrapper in HTML.
This way has a good compatibility.
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
/* NOTE: `.row > div > div` is better than `div > div > div` */
div > div > div { /* changed */
background-color: gray;
border: 1px solid;
float: left;
}
.row > div > div { /* changed */
margin: 0 10px;
}
.dummy_text {
clear:right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="beef">Beef<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<div>
<p id="sushi">Sushi<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>