I am trying to make a newspaper type footer.
I've got all the things fine.
The problem is that i have 2 <div>s inside the newspaper <div class = "newspaper" , each having 1 <p> .
But, the first <p> is split across the two sides of the vertical line.
U can see it here, but if U dont, then:
Copy the code and paste it in notepad.
And open it with a browser.
Hover on "FeedBack".
It would be outlined
Now U should see a part pf the outline box on the other side of the vertical line.
If U dont, then try changing the size of the browser.
Is there any way to avoid this??
p {
font-size: 20px;
font-family: Comic Sans MS;
}
footer {
position: relative;
top: 10px;
background-color: #316441;
border: solid black 2px;
}
.con {
text-align: left;
margin-left: 10px;
margin-right: 10px;
}
.contact {
color: white;
font-weight: 5px;
font-size: 40px;
}
.fol {
margin-left: 10px;
margin-right: 10px;
text-align: left;
}
.follow {
color: white;
font-weight: 5px;
font-size: 40px;
}
a.email {
position: relative;
top: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback {
position: relative;
top: 17px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback:hover,
a.email:hover {
outline: 2px white solid;
padding: 5px;
}
.sm {
padding: 8px;
font-size: 30px !important;
text-align: center;
text-decoration: none;
border: white 2px solid;
border-radius: 5px;
background-color: black;
color: white;
}
.newspaper {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule: 2px #d3d3d3 solid;
-moz-column-rule: 2px #d3d3d3 solid;
column-rule: 2px #d3d3d3 solid;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<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>
<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>
<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>
<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>
<footer>
<div class="newspaper">
<div class="con">
<p><span class="contact">Contact Us: </span><br><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">#</span>gmail.com<br>
<i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</p>
</div>
<div class="fol">
<p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
</div>
</div>
</footer>
</body>
</html>
Replacing column-count with display: flex appears to give you the same result and fixes the issue?
p {
font-size: 20px;
font-family: Comic Sans MS;
}
footer {
position: relative;
top: 10px;
background-color: #316441;
border: solid black 2px;
}
.con {
text-align: left;
margin-left: 10px;
margin-right: 10px;
border-right: 3px solid white;
}
.contact {
color: white;
font-weight: 5px;
font-size: 40px;
}
.fol {
margin-left: 10px;
margin-right: 10px;
text-align: left;
}
.follow {
color: white;
font-weight: 5px;
font-size: 40px;
}
a.email {
position: relative;
top: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback {
position: relative;
top: 17px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback:hover,
a.email:hover {
outline: 2px white solid;
padding: 5px;
}
.sm {
padding: 8px;
font-size: 30px !important;
text-align: center;
text-decoration: none;
border: white 2px solid;
border-radius: 5px;
background-color: black;
color: white;
}
.newspaper {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<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>
<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>
<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>
<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>
<footer>
<div class="newspaper">
<div class="con">
<p><span class="contact">Contact Us: </span><br><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">#</span>gmail.com<br>
<i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</p>
</div>
<div class="fol">
<p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
</div>
</div>
</footer>
</body>
</html>
You don't have to use column-count as you know exactly what there is in each column. column-count is usefull for large text, but is not what you need here i think. You can use display:table instead.
p {
font-size: 20px;
font-family: Comic Sans MS;
}
footer {
position: relative;
top: 10px;
background-color: #316441;
border: solid black 2px;
display:table ;
width:100% ;
}
.newspaper {
display:table-row ;
}
.newspaper>div {
display:table-cell ;
padding: 0 10px;
}
.newspaper>div.con {
border-right:3px solid white ;
}
.contact {
color: white;
font-weight: 5px;
font-size: 40px;
}
.follow {
color: white;
font-weight: 5px;
font-size: 40px;
}
a.email {
position: relative;
top: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback {
position: relative;
top: 17px;
padding: 5px;
color: white;
text-decoration: none;
}
a.feedback:hover,
a.email:hover {
outline: 2px white solid;
padding: 5px;
}
.sm {
padding: 8px;
font-size: 30px !important;
text-align: center;
text-decoration: none;
border: white 2px solid;
border-radius: 5px;
background-color: black;
color: white;
}
.newspaper div:first-child() {
border-right:1px solid white ;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<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>
<footer>
<div class="newspaper">
<div class="con">
<p><span class="contact">Contact Us: </span><br><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">#</span>gmail.com<br>
<i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</p>
</div>
<div class="fol">
<p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
</div>
</div>
</footer>
</body>
</html>
I suggest that you do not use the top property on your a.email and a.feedback CSS selectors. Elements positioned like this become difficult to maintain, and leads to weird issues, like the issue you're currently having.
Remove the top and position: relative CSS properties, add display: block to both elements and, finally, you can use padding as appropriate to create spacing:
a.email {
padding: 10px 5px;
display: block;
color: white;
text-decoration: none;
}
a.feedback {
padding: 10px 5px;
display: block;
color: white;
text-decoration: none;
}
This answer provides more info on why to avoid position: relative top.
Related
So I've been refering to an open source code of a decent sidebar and decided to learn to modify it.
I'm a beginner and figured this is the best place to ask doubts.
So my main problems are as follows:
Sidebar will be open as soon as I load the page(I don't know how to close it)
I want to shift it to the right completely, how can I do this(I try to not use frameworks whenever possible, but don't mind if there's no other option)
The code is here https://codepen.io/nkrao03/pen/BaKYZdr
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#media(max-width:768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0px;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
ANY suggestion/help would be really appreciated.
This is probably a basic question for you all, but do bear with me. Thanks!
I made a couple of changes to put the sidebar on the right and to make it be retracted initially.
I moved the <nav> div in your Html to be after the content which moved the sidebar to the right. Then I swapped the positive and negative margins in css #sidebar and #sidebar.active. I believe this is the desired result.
EDIT: Moved sidebar trigger to the right side.
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
align-items: stretch;
width: 100%;
overflow-x: hidden;
/*perspective: 1500px; */
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
margin-right: 0px;
transition: all 0.3s;
}
#sidebar.active {
margin-right: 0px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebarCollapse {
display: none;
position: absolute;
right: 1rem;
top: 1.5rem;
}
#media(max-width:768px) {
#sidebar {
margin-right: -250px;
}
#sidebar.active {
margin-right: 0px;
}
#sidebarCollapse {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
</div>
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
Here is another version that has the sidebar showing when above 768px viewport width which is standard for sidebars:
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
align-items: stretch;
width: 100%;
overflow-x: hidden;
/*perspective: 1500px; */
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
margin-right: 0px;
transition: all 0.3s;
}
#sidebar.active {
margin-right: 0px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebarCollapse {
display: none;
position: absolute;
right: 1rem;
top: 1.5rem;
}
#media(max-width:768px) {
#sidebar {
margin-right: -250px;
}
#sidebar.active {
margin-right: 0px;
}
#sidebarCollapse {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
</div>
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
move the #sidebar to after the content to move the sidebar to the right. Alternatively use the order property in flex.
for #sidebar add display:none to the css to prevent it from showing when first going to the page
you'll need to modify click event
$(document).ready(function() {
$('body').on('click', function() {
$('#sidebar').show();
});
});
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none!important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
display:none;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0px;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#media(max-width:768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0px;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>bootstrap 4 sidebar</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-justify"></i> <span></span>
</button>
<!--<a class="navbar-brand" href="#">Navbar</a> -->
</nav>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
<h2>Collapsible Sidebar</h2>
<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>
<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>
<div class="line"></div>
</div>
<nav id="sidebar">
<div class="sidebar-header">
<h3>SIDEBAR</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
home1
</li>
<li>
home2
</li>
<li>
home3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Page
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
page1
</li>
<li>
page2
</li>
<li>
page3
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact Us
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
</li>
<li>
</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I am trying to solve the issue with a floating sidebar.
I created blog-styled site, which has sidebar on the right of the text. The first page worked well and when changing the post of the page 2, the sidebar is not floating to the right anymore. Can somebody tell why it happens? Thanks.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1148px;
margin: 20px auto;
}
.blog-post {
width: 80%;
/*background-color: rgba(100,134,134,.2);*/
float: left;
padding-right: 30px;
position: relative;
}
.other-posts {
display: inline-block;
width: 20%;
/*background-color: rgba(100,10,134,.2);*/
float: left;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
h1,
h2 {
margin: 20px 0;
}
p {
text-align: justify;
margin-bottom: 15px;
line-height: 130%;
}
.author-box {
border-top: 1px solid #808080;
padding-top: 20px;
padding-bottom: 20px;
}
.other {
margin-bottom: 30px;
}
.author-text {
font-size: 22px;
float: left;
margin: 30px 10px;
}
.author-box img {
height: 100px;
width: 100px;
border-radius: 50%;
float: left;
margin-bottom: 20px;
}
.date {
position: absolute;
top: 30px;
right: 30px;
}
.other a {
text-decoration-line: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Test with CSS/a blog</title>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div class="container">
<div class="blog-post">
<h1>This is my second blog build</h1>
<p class="date">April 9th, 2019</p>
<h2>Yeah, we talk about delphins again.</h2>
<p class="main-text">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<br> 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 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. 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 class="other-posts">
<div class="other">
The first post. What is the future of the TV.
</div>
<div class="other">
The second post. Yeah, we talk about delphins again.
</div>
<div class="other">
The third post. What should you know about CSS grid.
</div>
</div>
<div class="clearfix"></div>
<div class="author-box">
<img src="https://randomuser.me/api/portraits/women/66.jpg">
<p class="author-text">mrs Janet Gonzales</p>
</div>
</div>
<!-- container ending div -->
</body>
</html>
Looks like you're missing a closing </div> tag for <div class="blog-post">. Insert a closing tag and I think you'll get what you're after.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1148px;
margin: 20px auto;
}
.blog-post {
width: 80%;
/*background-color: rgba(100,134,134,.2);*/
float:left;
padding-right: 30px;
position: relative;
}
.other-posts {
display: inline-block;
width: 20%;
/*background-color: rgba(100,10,134,.2);*/
float: left;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
h1,h2 {
margin: 20px 0;
}
p {
text-align: justify;
margin-bottom: 15px;
line-height: 130%;
}
.author-box {
border-top: 1px solid #808080;
padding-top: 20px;
padding-bottom: 20px;
}
.other {
margin-bottom: 30px;
}
.author-text {
font-size: 22px;
float: left;
margin: 30px 10px;
}
.author-box img {
height: 100px;
width: 100px;
border-radius: 50%;
float: left;
margin-bottom: 20px;
}
.date {
position: absolute;
top: 30px;
right: 30px;
}
.other a {
text-decoration-line: none;
}
<div class="container">
<div class="blog-post">
<h1>This is my second blog build</h1>
<p class="date">April 9th, 2019</p>
<h2>Yeah, we talk about delphins again.</h2>
<p class="main-text">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<br>
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 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.
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="other-posts">
<div class="other">
The first post. What is the future of the TV.
</div>
<div class="other">
The second post. Yeah, we talk about delphins again.
</div>
<div class="other">
The third post. What should you know about CSS grid.
</div>
</div>
<div class="clearfix"></div>
<div class="author-box">
<img src="https://randomuser.me/api/portraits/women/66.jpg">
<p class="author-text">mrs Janet Gonzales</p>
</div>
</div> <!-- container ending div -->
https://jsfiddle.net/drqjmssy/
From the jsfiddle link, I am trying to have "div class='main_content'" be the same vertical height as the "div class='sidebar'". How does one accomplish that? If you can't load the fiddle or it's awful formatting, here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My project</title>
<style>
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav > ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
</style>
</head>
<body>
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>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>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>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>
</article>
</div>
<footer>
© Yazen 2018.
</footer>
</div>
</body>
</html>
Sorry if any of this is confusing./////////////////////////////////////////////////////////////////////////////////
You could wrap the elements in a new tag (I've used section) and add display: flex.
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav>ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
section {
display: flex;
}
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<section>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>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>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>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>
</article>
</div>
</section>
<footer>
© Yazen 2018.
</footer>
</div>
I am having an issue with an :after element. I am using it for an underline in a header. For some reason, it is disturbing the flow of the page. Instead of the title being at the top/centered, on my actual page the title is going into the text under it and aligned left.
This is what is looks like:
I was unable to replicate the issue within a fiddle or snippet, so I was wondering if there is anything within my code that may be causing this. The issue is arising in both Chrome and Firefox.
jsfiddle
.section {
padding: 70px 0;
height: auto;
position: relative;
}
.section-wrap {
margin: 70px 13%;
position: relative;
height: auto;
}
.section-main-title-wrap {
width: 100%;
display: block;
position: relative;
}
.section-main-title {
position: relative;
color: blue;
font-family: 'Muli', sans-serif;
font-size: 1.8rem;
width: auto;
display: inline-block;
padding: .625rem 0;
margin-bottom: 40px;
}
.section-main-title:after {
content: "";
width: 80%;
height: 3px;
background: #489aad;
bottom: 0;
position: absolute;
left: 10%;
}
#home-box-container {
width: 100%;
height: auto;
display: block;
}
.home-box {
border-right: 2px solid #CDCDCD;
width: 30%;
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
.home-box:last-child {
border-right: none;
}
.home-box-title, .home-box-description {
color: #2c2b2c;
line-height: 1.4em;
}
.home-box-title {
margin-bottom: 25px;
font-family: 'Muli', sans-serif;
font-weight: 700;
font-size: 1.2rem;
text-align: center;
}
.home-box-description {
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
<section class="section">
<div class="section-wrap">
<div class="section-main-title-wrap">
<header class="section-main-title text-center">HELLO</header>
</div>
<div id="home-box-container" class="total-center">
<div class="home-box">
<h3 class="home-box-title">Paradigm</h3>
<p class="home-box-description">
"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="home-box">
<h3 class="home-box-title">Structure</h3>
<p class="home-box-description">
"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="home-box">
<h3 class="home-box-title">Integration</h3>
<p class="home-box-description">
"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>
</section>
How can I make the header fixed and the content scroll "under" the header? Also how can I get the CSS Play button to be above the line and look decent?
index.html:
<!DOCTYPE html>
<html>
<head>
<title>lingo records</title>
<meta charset="utf-8">
<link rel="icon" href="/favicon.png">
<link rel="author" href="http://forksforoatmeal.com">
<link rel="stylesheet" href="/assets/css/lingo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/assets/js/jquery.jplayer.min.js"></script>
<script src="/assets/js/lingo.js"></script>
</head>
<body>
<div id="header">
<h1 class="header">lingo records</h1>
<ul id="navigation">
<li>home</li>
<li>about</li>
<li>samples</li>
<li>contact</li>
</ul>
<div id="music_player">
<span id="pp"></span>
<span id="song"></span>
</div>
</div>
<div id="content">
<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. 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. 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. 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. 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>
</div>
<div class="clear"> </div>
<div id="footer">
© 2010 lingo records. Josh Brown
</div>
</body>
</html>
lingo.css:
/* Yahoo Style Reset Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */
html{color:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body {
/* background-color: #63B7D4;*/
background-color: #fff;
margin: 30px;
font-family: 'Philosopher', sans-serif;
font-size: 14px;
color: #4F5155;
}
a {
color: #475152;
background-color: transparent;
font-weight: normal;
}
h1.header {
font-family: 'Philosopher', sans-serif;
font-size: 70px;
letter-spacing: -4px;
}
#header {
position: static;
border-bottom: 1px solid #D0D0D0;
}
#header #navigation a {
font-family: 'Philosopher', sans-serif;
font-size: 22px;
text-decoration: none;
}
ul#navigation > li {
display: inline;
list-style-type: none;
margin-right: 15px;
}
#header #navigation a:hover {
text-decoration: underline;
}
#header #navigation a:last-child {
margin-right: 0px;
}
#content {
margin-top: 60px;
font-size: 20px;
}
#footer {
position: fixed;
bottom: 0;
right: 0;
margin-bottom: 20px;
margin-right: 20px;
font-size: 12px;
}
/* Music Player */
#music_player {
float:right;
margin-right: 30px;
margin-bottom: 5px;
width: 250px;
}
.play {
display:block;
width:0;
height:0;
border-style:solid;
border-width: 8px 0px 8px 16px;
border-color:transparent transparent transparent #4F5155;
}
.pause{
display:block;
width:16px;
height:16px;
border-left:32px double #4F5155;
}
#font-face {
font-family: Philosopher;
src: url(/assets/fonts/Philosopher.otf);
font-weight:400;
}
Thanks in advance for your help!
-Josh
You can use position: fixed for it to stay in place as the user scrolls, although you'd probably need to apply a (semi-transparent) background for the header contents to be visible when the user scrolls. The styles you need to add are:
#header {
position: fixed;
width: 100%; /* Or whatever width you need it to be */
background-color: rgba(255, 255, 255, 0.7); /* Use semi-transparent png for IE support */
top: 10px;
}
#content {
margin-top: 160px; /* To push content off the top of the page */
}
As for the song player, you need to provide either a link to the page you are working on, or some sort of sample, as without the Javascript it is impossible to see what sort of markup is generated and what style is necessary for it to 'look decent'.
Edit: About that music player button... The method you're using looks to me to be a bit of a hack. I mean, you have to be really desperate to need to use border to create the play triangle, right? You're probably better off just using background-image instead, with something like
#pp {
background: url('path/to/image.png') no-repeat scroll left top;
padding-left: 10px;
}
for the play button.