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
Related
I am trying to make a 'fancy' navigation, with multiple ul/li. I think my problem is in the CSS with the child selector (>). If you run the code snippet provide you'll notice when you hover over li.first (item one) you can visibly see the div.hover-container although li:first>ul>li has the css with overflow: hidden; along with this div.hover-container is within li.one (example one) so why does it display when I hover over li.>one (other examples).
I am just confused and would love some input on this after staring and testing possible solutions for an hour.
EDIT: I apologize for how messy it looks in the snippet.
/* ================== Example ================ */
.example>ul {
display: flex;
position: relative;
height: 50px;
width: 800px;
margin: 50px auto;
list-style-type: none;
background-color: #5A827E;
}
.example>ul>li {
display: block;
height: 100%;
width: 33.3%;
border-right: 2px solid rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
color: white;
font-weight: bold;
text-align: center;
line-height: 50px;
font-style: italic;
}
.example>ul>li:hover {
overflow: visible;
background-color: #415E5B;
}
.first>ul {
display: block;
position: absolute;
top: 50px;
height: 400px;
width: 100.5%;
list-style-type: none;
background-color: #415E5B;
}
.first>ul>li {
display: block;
color: white;
line-height: 40px;
text-align: center;
height: 10%;
width: 100%;
border-top: 1px dotted rgba(255, 255, 255, 0.5);
font-weight: 400;
font-style: normal;
overflow: hidden;
}
.first>ul>li:hover {
background-color: white;
color: blue;
}
.hover-container {
display: flex;
justify-content: flex-start;
flex-flow: column wrap;
position: absolute;
left: 265px;
top: 0;
height: 400px;
width: 535px;
border: 3px solid gold;
}
.list-container {
display: block;
height: auto;
width: 30%;
border: 3px solid #F2D7E2;
}
.list-container h2 {
text-align: left;
color: darkgray;
font-weight: bold;
}
.list-container ul {
list-style-type: none;
text-align: left;
}
/* ------------------ Example END ---------------- */
<div class="example">
<ul>
<!-- first navigation container -->
<li class="first"> Item One
<ul>
<!-- dropdown -->
<li class="one"> Example 1
<!-- dropdown item -->
<div class="hover-container">
<!-- sidebar -->
<div class="list-container">
<!-- sidebar content box-->
<h2>Content Header One</h2>
<ul>
<li>Content One</li>
<li>Content Two</li>
<li>Content Three</li>
</ul>
</div>
<!-- sidebar content box END -->
<div class="list-container">
<!-- sidebar content box-->
<h2>Content Header One</h2>
<ul>
<li>Content One</li>
<li>Content Two</li>
<li>Content Three</li>
</ul>
</div>
<!-- sidebar content box END -->
</div>
<!-- sidebar END-->
</li>
<!-- dropdown item END -->
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
<li>Example 6</li>
<li>Example 7</li>
<li>Example 8</li>
<li>Example 9</li>
<li>Example 10</li>
</ul>
<!-- END of dropdown -->
</li>
<!-- main list item END -->
<li class="second">Item Two</li>
<li class="third">Item Three</li>
</ul>
</div>
If you want the hover-container div to be shown only when the first li(Example 1) is hovered, you need to replace the .hover-container you have added with the below CSS:
.first>ul>li:first-child:hover .hover-container{
display: flex;
justify-content: flex-start;
flex-flow: column wrap;
position: absolute;
left: 265px;
top: 0;
height: 400px;
width: 535px;
border: 3px solid gold;
}
Your child selectors seem okay. I think the problem is with your positioning. The .hover-container element has "position: absolute", meaning it's placed relative to its first positioned ancestor (see https://www.w3schools.com/css/css_positioning.asp). You want to determine if it's overflowing the .first>ul>li element above it, so that element needs a "position: relative."
Adding these rules should give the behavior you're looking for:
.first>ul>li {
position: relative;
...
}
.first>ul>li:hover {
overflow: visible;
...
}
The following CSS property rule defined on .hover-container set its position to absolute with respect to .example>ul>li which is the nearest ancestor that is a containing block (read about how the browser determines a containing block.)
.hover-container {
/*...*/
position: absolute;
/*...*/
}
The fix for this is to form a containing block with the li that is closest ancestor to .hover-container by setting its position to relative.
.first>ul>li {
/*...*/
position: relative;
/*...*/
}
Another fix for this is to set the overflow property to hidden for the closest containing block that is an ancestor to .hover-container.
.first>ul {
/*...*/
overflow: hidden;
/*...*/
}
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 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>
I have this code in a blade file currently, and its so CLOSE to what I need. However, I can't quite get the sidebar element to have color all the way down, as in a column.
*edited, html was removed in earlier version
<style>
ul.products li {
width: 200px;
display: inline-block;
vertical-align: top;
}
body{
background: white;
}
#wrapper { overflow:auto; }
#content {
float: right; width: 80%;
margin:5px 0 5px 0;
}
#sidebar {
float: left;
width: 20%;
background: #F9F8F2 repeat-y;
}
</style>
<body>
<div id="wrapper">
<div id="sidebar">
<ul>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
<div id="content">
<ul class="products">
<li>
<a href="#">
<img src="logo.png">
<h4>text</h4>
<p>$20.00</p>
</a>
</li>
<li>
<a href="#">
<img src="logo.png">
<h4>text</h4>
<p>$25.00</p>
</a>
</li>
</ul>
</div>
</div>
</body>
Try this
#sidebar {
float: left;
width: 20%;
background-color: #F9F8F2;
}
"background" set different background properties in one declaration. Often if you miss a property or make a typo it will not display correctly. You can check the documentation here:
http://www.w3schools.com/cssref/css3_pr_background.asp
Add display: flex to #wrapper:
http://codepen.io/anon/pen/vgLWQL
The height of the container/page can be dynamic here, it adjusts to whichever of the two elements has more content, but both will have the same height.
ADDITION:
I added min-height: 100vh; to the #wrapper to make it at least as high as the window.
I can't quite get the sidebar element to have color all the way down, as in a column.
1. Flexbox solution (recommended):
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: white;
}
#wrapper {
height: 100%;
overflow: auto;
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
#sidebar {
/* float: left; */
flex: 1;
width: 20%;
background: #F9F8F2;
}
ul li {
/*width: 200px;*/
display: inline-block;
vertical-align: top;
}
ul {
padding: 5px;
}
<div id="wrapper">
<div id="sidebar">
<ul>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
</div>
2. Without altering #sidebar position property solution:
html,
body {
background: white;
height: 100%;
}
#wrapper {
overflow: auto;
height: 100%;
}
#sidebar {
float: left;
width: 20%;
background: #F9F8F2 repeat-y;
height: 100%;
}
<div id="wrapper">
<div id="sidebar">
<ul class="products">
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
</div>
3. With absolute position #sidebar solution:
body {
background: white;
}
#wrapper {
overflow: auto;
}
#sidebar {
/* float: left; */
position: absolute;
top: 0;
bottom: 0;
width: 20%;
background: #F9F8F2;
}
ul li {
/* width: 200px;*/
display: inline-block;
vertical-align: top;
}
ul {
padding: 5px;
}
<div id="wrapper">
<div id="sidebar">
<ul>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
</div>
I am trying to achieve a fully centered page, however when I add CSS code to center it, the navigation bar does not move. It only moves when i remove its tags. This is my original code. The nav bar works as it should. (buttons are green, lined up properly, however all items are left justified.
<!DOCTYPE html>
<html lang="en-us">
<body bgcolor="black">
<head>
<link rel="stylesheet" href="style.css">
<title>Title</title>
</link>
<img src="img.png"></img>
</head>
<body>
<div id="menubar">
<ul
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
</body>
<body>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
<div id="items">
<ul>
<p>Item 1</p>
<p>Item 2</p>
</ul>
</div>
</a>
</body>
</body>
</div>
</html>
Heres the original CSS.
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
float: left;
margin-right: 0.5em;
}
To center the page, i add the following css code:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
{
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
And added these lines at the beginning and end of the page.
If you try out the code, the entire page centers EXCEPT the nav bar. As you can probably tell, I am fairly new to this.
Works for me. The only problem is that your code structure. Your code format should be
body {
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#menubar {
width: 800px;
text-align: center;
border: 0px;
padding: 0px;
margin: 0 auto;
}
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
display: inline-block;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="style.css" />
<title>Title</title>
</head>
<body bgcolor="black">
<div id="menubar">
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
</a>
<div id="items">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
Correct css is:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
you had unnecessary buckles in your code.