This weird behavior is driving me crazy.
If I upload the page on the server, the first time I open it on chrome/safari I get this problem:
If i refresh it, or when I'm working on the page locally, no problems at all.
The nav simply doesn't expand its width: auto to fit all a floated elements.
This is the really simple code (I deleted not-related rules, but if it could be useful to know I'm using a webfont):
html:
<nav>
button
button
button
<div class="clear"></div>
</nav>
css:
nav {
position: absolute;
top: 50%;
margin-top: -17px;
width: auto;
height: 33px;
}
nav > a {
box-sizing: border-box;
display: block;
float: left;
padding: 11px 13px;
height: 100%;
border: 1px solid #7a7e7f;
}
div.clear {
clear: both;
}
Basically setting the width of the nav element to 100% does the trick. Here’s an optimized example:
HTML
<nav>
button
button
button
</nav>
CSS
nav {
position: absolute;
top: 50%;
margin-top: -17px;
width: 100%;
overflow: hidden; /* Makes the clearing div obsolete */
}
nav > a {
box-sizing: border-box;
float: left;
padding: 11px 13px;
border: 1px solid #7a7e7f;
}
Check it out on Codepen: http://codepen.io/zitrusfrisch/pen/Jcirx
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
This is my first time implementing the standard html nav. However, the list elements inside nav are not positioned inside nav the way I want them to be, and although I've changed most of the obvious properties that come to mind, I haven't been able to:
Center the li elements inside nav
Make the width of the li elements fit perfectly inside nav
I don't understand why they are by default positioned so awkwardly to the right of their parent container, or why setting 'width: 100%' isn't the solution. When I set the positioning on the li elements to absolute, it seems to mucks up everything since I need each list element to be positioned relative to where the element before it is placed.
There seems to be a few possible ways I could go about solving this problem, but they seem sort of hackish, and I'm wondering if there's a more obvious solution I lack the experience to see.
nav {
width: 40%; height: 500px;
left: 50%;
transform: translateX(-50%);
position: relative;
border: 2px solid black;
}
nav ul li {
list-style: none; text-align: center;
width: 99%; height: 100%;
position: inherit;
padding: 1%;
border: 2px solid black;
border-top: none;
margin: 0;
display: block;
background: blue;
}
<nav><!--
--><ul><!--
--><li class="user">WelcomeVids</li>
<li class="user">Diablo</li>
<li class="user">FreeCodeCamp</li>
<li class="user">OtherStuff</li>
<li class="user">Dota2</li><!--
--></ul><!--
--></nav>
To see the output, view my Codepen: http://codepen.io/sentedelviento/full/grzrgR/
This is because most browsers default to adding a padding-left to <ul>. You can override that:
/* Added */
ul {
padding-left: 0;
}
nav {
width: 40%; height: 500px;
left: 50%;
transform: translateX(-50%);
position: relative;
border: 2px solid black;
}
nav ul li {
list-style: none; text-align: center;
/* width: 99%; height: 100%; */
position: inherit;
padding: 1%;
border: 2px solid black;
border-top: none;
margin: 0;
display: block;
background: blue;
}
<nav><!--
--><ul><!--
--><li class="user">WelcomeVids</li>
<li class="user">Diablo</li>
<li class="user">FreeCodeCamp</li>
<li class="user">OtherStuff</li>
<li class="user">Dota2</li><!--
--></ul><!--
--></nav>
I'd recommend the following changes to your CSS:
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
box-sizing: border-box;
width: auto;
}
In my navigation I have a protruding red box. I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out among the other elements I put in the black box. The problem is that it's margin is also effecting the layout of separate elements' children bellow it. When I add a negative margin to the child elements of the section bellow it does overlap but I want the red box to be on-top. I use z-index and it doesn't seem to work.
Here's my example on Jsfiddle:
http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
To use z-index, you need to specify a position (like absolute, fixed, or relative).
And the last line written is wrong:
z-index = 99;
The correct way to write it is:
z-index: 99;
How about: http://jsfiddle.net/1qsuvhnd/30/
change the ribbon to position: absolute; and fix the z-index = typo :D
Now you don't need that margin hack!!
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index: 99; /* take that equal out and make it a colon */
position: absolute; /* position: absolute to the rescue!!!! */
}
You need to specify a position CSS rule for the nav div for the z-index to work correctly, like this:
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index:99;
position: relative;
}
Here is the new jsFiddle link:
http://jsfiddle.net/1qsuvhnd/54/
I have a fixed element locked to the bottom of the page spanning the full width of the window. There are two floating elements (they are clearfixed in the actual code, but not in the fiddle) within this element. The rightmost element is of fixed width and the leftmost element's width is determined by a css calc. The leftmost element's child is significantly wider than it, but it is not causing an overflow scrollbar to appear.
Fiddle: http://jsfiddle.net/hMgR5/3/
Now, one possible solution would be to forgo the native browser support for scrolling and add my own scrolling buttons on both sides of the viewing element, but I would prefer using the browser's native support of scrolling if possible unless user experience with it done this way has been poor.
EDIT: The problem is that the child elements have the same height as the fixed position element. Because of this, the scrollbar is being rendered beneath the fixed element, preventing the user from interacting with it. A more savvy solution may be necessary: possibly doing away with floats and moving to absolute positioning with padding on the end of the overflowing element may work better.
Markup:
<div class="bottom-bar">
<div class="viewer">
<ul class="list">
<li class="element">Hello</li>
<li class="element">World</li>
<li class="element">Hello</li>
<li class="element">World</li>
<li class="element">Hello</li>
<li class="element">World</li>
</ul>
</div>
<div class="other-bar-item">
Other Item
</div>
Styles:
*{
box-sizing: border-box;
font-size: 1em;
font-weight: bold;
color: white;
}
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
}
.other-bar-item{
float: left;
width: 200px;
text-align: center;
}
.viewer{
float: left;
width: calc(100% - 200px);
overflow-x: auto;
}
.list{
margin: 0;
padding: 0;
width: 2000px;
height: 40px;
}
.element{
list-style: none;
display: inline-block;
width: 200px;
height: 100%;
position: relative;
background-color: navy;
border-right: 2px solid white;
text-align: center;
}
here is the link: jsfiddle
you don't have to set a high width for your ul,
you can set white-space: nowrap; to parent element and set inline-block display for its children. this would force parent to be as wide as needed.
and you don't need to set overflow:auto; for parent cause it does that automatically.
and here is the code:
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
overflow-y: hidden;
white-space: nowrap;
}
.other-bar-item{
display: inline-block;
width: 200px;
text-align: center;
background-color: red;
}
.viewer{
display: inline-block;
}
.list{
margin: 0;
padding: 0;
height: 40px;
}
.element{
list-style: none;
display: inline-block;
width: 200px;
height: 100%;
position: relative;
background-color: navy;
border-right: 2px solid white;
text-align: center;
}
On my mac the scroll bar seems to show up on it's own, not sure why PC was different but, to have the horizontal scroll bar show up (but not a vertical), add the following to the viewer class:
overflow-y: hidden;
height: 100%;
I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}