I am having difficulty removing the white space to the left of my vertical nav bar.
I have tried setting padding-left to 0 on my main-bar.
It's my first time building a nav bar, so if you see something semantically wrong with my codes, do let me know as well.
Thank you!
This is the HTML code.
<title>Mockup of Zopim</title>
<body>
<main>
<nav class = "side-bar">
<ul class ="main-bar">
<li class="user-nav"><a class ="big-box" href="#">User</a></li>
<li class="main-nav">Home</li>
<li class="main-nav">Visitor List</li>
<li class="main-nav">Visualization</li>
<li class="main-nav">History</li>
<li class="divider-nav">Manage</li>
<li class="manage-nav">Agents</li>
<li class="manage-nav">Departments</li>
<li class="manage-nav">Shortcuts</li>
<li class="manage-nav">Banned Visitors</li>
<li class="manage-nav">Triggers</li>
<li class="divider-nav">Settings</li>
<li class="settings-nav">Widgets</li>
<li class="settings-nav">Personal</li>
<li class="settings-nav">Accounts</li>
</ul>
</nav>
<article>
<header>
<h1>Hello!</h1>
</header>
</article>
</main>
</body>
This is the CSS code.
#charset "utf-8";
/* CSS Document */
body {
background-color: black;
}
main {
width: 100%;
}
.side-bar {
width: 15%;
height: 100%;
background-color: #585858;
position: relative;
float: left;
}
nav li {
list-style: none;
}
.main-bar {
padding-left: 0px;
}
.main-bar li a {
display: block;
width: 100%;
height: 100%;
line-height: 2.5em;
text-decoration: none;
color: white;
text-align: center;
}
article {
width: 60%;
height: 30%;
float: right;
position: relative;
}
a.big-box {
display: block;
line-height: 7em;
}
header h1 {
color: white;
}
Here is the JSfiddle link.
http://jsfiddle.net/codermax/fe0L3d08/
Most Web browsers have different default settings for the base margins and padding. So The best way to solve this is to set all the margin and padding
*{
margin:0;
padding:0;
}
or
html,body {
margin:0;
padding:0;
}
Also better if you reset your css then you can use. something like this:
http://necolas.github.io/normalize.css/
You'll want to use a reset.css to resolve different browser quirks.
I've updated your sample and set body margin, and padding to 0.
body {
margin:0;
padding:0;
}
http://jsfiddle.net/fe0L3d08/1/
Related
There are many similar examples, but none I found to deal with this issue. I'm trying to make <nav> bar with drop-down menu to be sticky. I have a <nav> bar with many menu entries, but I simplified it as much as possible to see where it breaks. There is simple example from w3schools, modified a bit, and it stops working as soon as I add position:sticky (you can see it commented out bellow)
So example code in one file for practicality is:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
/* position: -webkit-sticky; /* Safari */
/* position: sticky; */ /* If enabled it breaks dropdown menu */
top: 0;
}
li {
float: left;
}
li a, .mDrop {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.mDrop li:nth-of-type(-n+1) { float: down; }
.mDrop {
position: relative;
top: 13.6rem;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
li a:hover, .mDrop:hover .li:hover {
background-color: green;
}
li:hover > ul,
li:focus-within > ul,
li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li { clear: both; width: 100%; }
.active { background-color: #4CAF50; }
</style>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling. </p>
<div style="Height:80vh"></div>
<p>Some text to enable scrolling. </p>
</body>
</html>
I've tried many different options examples and no luck. I don't want to encapsulate entire content area in separate <div>, just would like adding stickiness to working drop-down menu. I also would like solution with CSS/HTML only.
Thanks
Your dropdown is broken because you are giving position: sticky to the ul tag. Since you have two nested uls in your code, the style is applied to both of them.
<ul> <!-- first ul -->
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop"> <!-- second ul -->
...
</ul>
</li>
...
...
</ul>
Solution
First of all, wrap your ul (navbar) in a <nav> element. Don't be afraid of "adding another div". This makes you HTML code more semantic and more readable, no need to say it's good for SEO too.
<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
</nav>
REMOVE these parts from your CSS:
ul {
position: -webkit-sticky; /* remove */
position: sticky; /* remove */
top: 0; /* remove */
}
ADD these to your CSS:
.navbar {
position: sticky;
position: -webkit-sticky;
top: 0;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
top: 40px; /* I just added these line. Replace 40px with any value that fits your design */
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
What I'm basically doing is changing how you "style" your elements. Never use "pure" or "element" selectors like (h1, h2, p, ul) unless you really want to do some general styling; for example, resetting browser default styles.
Full Code
body {
font-size: 28px;
}
.navbar {
position: -webkit-sticky; /* Safari */
position: sticky; /* If enabled it breaks dropdown menu */
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.mDrop {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.mDrop li:nth-of-type(-n + 1) {
float: down;
}
.mDrop {
position: relative;
top: 13.6rem;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
top: 40px;
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
li a:hover,
.mDrop:hover .li:hover {
background-color: green;
}
li:hover > ul,
li:focus-within > ul,
li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
.active {
background-color: #4caf50;
}
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
</nav>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling. </p>
<div style="Height:80vh"></div>
<p>Some text to enable scrolling. </p>
</body>
I try to make a list menu with a submenu using JSX(React) and css Pure (Not jquery!). My intention is show "box-blue" under the <li> "Technologies" but I don't know how to make the div "box-blue" stay visible when I move out from the <li> "Techonologies" element. (obviously always inside the <div> "box-blue")
<ul className="display-menu">
<li className="display-menu-item"><NavLink className="link-categories" exact to="/">Technologies</NavLink>
<div className="box-blue"></div>
</li>
<li className="display-menu-item"><NavLink className="link-categories" exact to="/">Furniture</NavLink></li>
<li className="display-menu-item"><NavLink className="link-categories" to="/">Entertainment</NavLink></li>
</ul>
CSS code
.display-menu-item{
margin-left: 1rem;
position:relative;
}
.link-categories{
text-decoration: none;
color:white;
font-size: 0.85rem;
width: 40%;
text-align: center;
white-space: nowrap;
width:10rem;
}
.box-blue{
height:25rem;
width: 80rem;
background-color: blue;
position: absolute;
bottom: -25.5rem; /* the box appears under the ul */
z-index: 10;
display: none;
right: -45.5rem; /* the box appears at center */
}
.link-categories:hover ~ .box-blue{
display:block;
}
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
Should look like this:
(source: gyazo.com)
My attempt
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
I use Current class for the current page background.
Added the header
.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}
Floated menu to right, made it display inline and centered the text
.menu {
float: right;
padding: 2.7%;
}
.menu a{
color: #1e1e1e;
}
.menu a:hover{
color: #5e5e5e;
}
.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}
Now the part of the current background
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}
Result:
(source: gyazo.com)
Can you see theres a big space between the current and other items? How do I remove this? make it equal to others spaces.
Things I tried:
Adding position relative
result:
Menu item 'current' goes over the menu item 'forums'
I could not find any other way to do so, what am I doing wrong?
Try the following HTML:
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
With the following amends to your CSS:
.menu {
float: right;
padding: 2.7%;
}
.menu li {
float: left;
margin-left: 10px;
}
.menu a{
color: #1e1e1e;
display: block;
padding-left: 20px;
padding-top: 5px;
}
.menu a:hover{
color: #5e5e5e;
}
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
color: white;
}
Your HTML was structured incorrectly ... you shouldn't be placing the <li> elements inside the anchor elements.
You also don't need to have display: inline; on the list items, as they are floated left anyway, they should already be inline.
In future, you may want to check that your HTML is valid using the W3C validator, it should explain any errors in your HTML and how you can fix them.
Let me know if the above doesn't fix it and I'll happily have another look.
EDIT: Forgot to also state that I removed the height and width on the current css declaration, that was unnecessary, and almost definitely causing the spacing issues.
Remove the width on .current. That is what's adding the extra spacing.
If you don't want to change that, change the spacing on the the adjacent li:
.current + li {
padding-left: 0;
}
Here is a simplified demo of what you are trying to accomplish. Learn from it:
HTML
<ul>
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
CSS
ul {
float: right;
}
li {
display: inline;
padding: 10px;
}
.current {
background-image: url('http://placekitten.com/200/200');
}
Demo