I want to make a sidebar with a fixed width, and use bootstrap grid to the rest of the page. The following code (JSBin) does not work: we see that the bootstrap grid is applied to the entire page.
Does anyone know if it is achievable?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.fixed {
width: 202px;
}
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
background-color: #f5f5f5;
}
}
</style>
</head>
<body>
<div class="fixed sidebar">
<ul class="nav">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
abcsfdsqdfdqfdqsdfdqfdsqdfssd
</div>
<div class="col-sm-6 col-md-6">
efg
</div>
</div>
</div>
</body>
</html>
Fixed and absolute positioned elements are no longer part of the document flow, so they don't reserve the space they normally would. In your example, that means the sidebar doesn't push the rest of the content over, which is why you see it overlap the main content.
What I find normally works is to use the fluid container (so the page content spans the whole viewport) and then add padding to the "main" section to clear the horizontal space the sidebar would otherwise overlap.
Here's an example based off of a project I've built recently:
CSS
/* Hide for mobile, show later */
.sidebar
{
display: none;
}
#media (min-width: 768px)
{
.sidebar
{
position: fixed;
top: 55px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 0;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
width: 175px;
}
.sidebar.student
{
background-color: #71B1D1;
color: #fff;
border-right: 1px solid #eee;
}
}
/*
* Main content
*/
.main
{
padding: 20px;
}
#media (min-width: 768px)
{
.main
{
padding-left: 215px;
padding-right: 40px;
}
}
Markup
<div class="container-fluid">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
<li>More navigation</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
<div class="main">
<h2>Content Header</h2>
<p>Some content here...</p>
<hr />
<footer>
<p>
© 2017
</p>
</footer>
</div>
</div>
Demo: https://jsbin.com/giwozanavi
Code: https://jsbin.com/giwozanavi/edit?html,css,output
Try this :
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.fixed {
width: 202px;
}
.sidebar {
display: none;
}
#media only screen and (min-width: 481px) and (max-width: 1124px) {
.fixed {
width: 140px;
}
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
background-color: #f5f5f5;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-2">
<div class="fixed sidebar">
<ul class="nav">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
</ul>
</div>
</div>
<div class="col-sm-10">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
abcsfdsqdfdqfdqsdfdqfdsqdfssd
</div>
<div class="col-sm-6 col-md-6">
efg
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I implemented a simple footer with css and bootstrap. It is working as expected on most pages except on pages that do not have a lot of content the footer will appear at the end of the content opposed to the bottom of the page
Spent a lot of time trying to figure it out but I just cant get it
.footer {
position: relative;
bottom: 0;
width: 100%;
height: 150px;
background:#dfdfdf;
}
.body-tag {
height: 100%;
background: #F6F6F6;
color: #333333;
margin-top: 5rem;
padding-bottom: 4rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="body-tag">
<div class="footer fixed-bottom">
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
<p class="text-center footer-text">© name, Inc</p>
</footer>
</div>
</div>
</body>
There is no problem with the footer Just remove unnecessary margin and padding from body and margin-bottom from footer
As per you diagram there shouldn't be any problem of footer placement, If there is any position value in footer remove it, and also this all should be have single parent.
.footer {
width: 100%;
background-color: cyan;
}
.body-tag {
height: 100%;
background: #F6F6F6;
color: #333333;
}
/*Just Demo Purpose*/
nav{
background-color: cyan;
height: 60px;
}
main{
height:200vh;}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="body-tag">
<nav class="">
<h1 class="text-center">Navbar</h1>
</nav>
<main></main>
<footer class="footer py-3 ">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
<p class="text-center footer-text">© name, Inc</p>
</footer>
</body>
Use position: fixed; for your footer:
Here's an example
* {
margin: 0;
padding: 0;
}
footer {
position: fixed;
bottom: 0;
}
<footer>Hey i'm a footer</footer>
I am using the rem to create a mobile web project.Now I am facing a problem.
My code is below:
<head>
<style type="text/css">
body {
background-color: green;
}
#top {
/*height: .9rem;*/
}
#top::after,
#top::before {
/*content: '';
display: block;
clear: both;
visibility: hidden;*/
}
ul {
list-style: none;
padding-left: 0;
}
#data-item {
margin-top: 4rem;
}
#data-item .image-list {
width: 4.5rem;
display: flex;
flex-flow: row wrap;
background-color: yellow;
}
#data-item .image-list .image-list .div-image {
width: 1.4rem;
height: 1.4rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #6641E2;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<section id="top">
<div id="addImage" style="height: .90rem; width: 1.60rem; float:right ; padding-top: .20rem; position: relative;background-color: red; z-index: 999;">
<span style="display: inline-block; margin-right: .20rem;">ADD</span>
</div>
</section>
<section id="data-item">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="title"><img src="images/vip.png" alt="" /><span class="date">6月１日</span></div>
<p class="item-description"></p>
<ul class="image-list">
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
</ul>
</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
</section>
</body>
I look the result in the chrome console, I choose the mobile device iPhone5.
The screen is like this:
I check the element in the Elements tab.
I see that the #top section is 320*0.
My question is why the #addImage div has the margin-top too. I set the margin-top for the #data-item section?
Why does not the red div at the top-right corner?
add this style to the parent:
#top{
overflow: auto;
}
I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I am really new to coding. Formatting is always an issue with me and I spend lots of time looking at similar questions in here and reading tutorial etc and tried different things. I have the exact same code on one page and it seems center. However I can't get my items centered here or replicate. Once I have my header centered I would like my nav bar to be centered underneath. PLease help.
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
width: 470px;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
To center the title: make .box width:100% and the h2 text-align:center.
To center the ul menu I followed the solution three: align ul to center of div
html,
body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 100%; // NEW WIDTH
padding: 10px;
display: inline-block;
}
.box h2 {
text-align: center; // CENTER TITLE
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align: middle;
border-radius: 0px;
background-color: white;
display: inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: table; // SOLUTION 3
margin: 0 auto; //
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home
</li>
<li>About
</li>
<li>Gallery
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
I see that you're using Bootstrap. You can do what you want with a lot less markup.
.nav-pills > li {
float: none;
display: inline-block;
}
<div class="container text-center">
<h2>lewis <br><span>Designs</span></h2>
<ul class="nav nav-pills text-center">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Demo JSFiddle
You can make use of better semantic code to make it clear how this section is functioning and then simplify the code with built-in classes in Bootstrap, e.g., text-center.
<header class="header text-center" id="header">
<h1>lewis Designs</h1>
<nav>
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
The only CSS needed to center the nav is this:
nav {
display: inline-block;
}
I'd definitely recommend familiarizing with documents pertaining to things like utility classes in Bootstrap. You may not be able to do everything you want, but you can minimize the need to go markup heavy and create a bunch of classes that Bootstrap already has covered in various ways.
Is this good for you? (please look at the snippet)
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
text-align: center;
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
width: 100%;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.center-box{
margin-left: auto;
margin-right: auto;
width: 391px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class="box">
<h2>lewis <br />
<span>Designs</span>
</h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class='center-box'>
<ul class="nav nav-pills">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I need to stretch my vertical menu to the bottom to the footer all the time, even when there is no content. I posted this before, and the solution was working, but after some changes i was not able to fix it again. I m kind of lost, because this should be so easy and I'm stagnating with such an easy stuff.
Please can you also explain what does the solution do, so I will understand why it fixed the problem?
Here is how it looks now:
Here is the code:
#media only screen and(min-width: 1368px) {
.site-container {
height: 633px;
}
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
height: 50px;
}
.bordered {
border: 1px solid black
}
.footer {
position: relative;
width: 100%;
padding-left: inherit;
z-index: 10;
background-color: red;
height: 50px;
display: block;
}
.content {
position: relative;
float: right;
height: 100%;
display: block;
padding-top: 10px;
}
.header {
margin: inherit;
position: relative;
width: 100% ;
}
.menu-vertical {
position: relative;
background-color: #aaa;
float: left;
height: 100%;
}
li {
list-style-type: none;
padding: 0;
}
ul {
padding: 0;
}
menu {
padding: 0;
padding-right: 50px;
}
.site-container {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.site-container > .row:first-of-type {
height:100%;
}
.menu-horizontal ul {
padding: 0;
}
.menu-horizontal li {
list-style-type: none;
padding: 0;
padding-left: 50px;
margin: 0;
display: inline;
}
.menu-horizontal {
margin: inherit;
position: relative;
padding-top: 5px;
}
.page {
width: 90%;
padding-left: 10%;
min-height: 100%;
}
.page-wrap .row {
padding: 0;
margin: 0;
min-height: 100%;
}
Index.html
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<meta charset="UTF-8">
<title>template</title>
</head>
<body>
<div class="page-wrap">
<div class="row">
<header class="col-sm-12 col-md-12 col-lg-12 bordered header"> <!-- Header -->
Header
</header> <!-- End of header -->
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
<menu class="menu-horizontal">
<ul>
<li>1nav item 1</li>
<li>1nav item 2</li>
<li>1nav item 3</li>
<li>1nav item 4</li>
<li>1nav item 5</li>
<li>1nav item 6</li>
</ul>
</menu>
</div><!-- End of horizontal menu -->
</div>
<div class="site-container">
<div class="col-sm-2 col-md-2 col-lg-2 bordered menu-vertical"> <!-- Vertical menu -->
<menu role="menu">
<ul>
<li>2nav item 1</li>
<li>2nav item 2</li>
<li>2nav item 3</li>
<li>2nav item 4</li>
<li>2nav item 5</li>
<li>2nav item 6</li>
</ul>
</menu>
</div> <!-- End of vertical menu -->
<div class="col-sm-10 col-md-10 col-lg-10 bordered content"> <!-- Content -->
</div> <!-- End of content -->
</div>
</div>
<footer class="col-sm-12 col-md-12 col-lg-12 bordered footer"> <!-- Footer -->
Footer
</footer> <!-- End of footer -->
</body>
</html>
Here is a link to my Codepen.
You must declare height: 100%; all the way up the DOM tree. This is something hard to accomplish in CSS. Essentially, you must account for 100% of the viewport height. In my simple example, the padding of the header and footer account for 5%, and the sidebar nav accounts for the remaining 95%.
Hope that helps.
Try setting min-height to 100% on vertical menu