I am new to CSS. I am trying to re-create a website from case-study in the book. As you can see in the picture I attached the navigation bar leaves little space on the left. I am not able to find out what is causing this or How can I fix this?View of the webpage
#wrapper {
width: 80%;
margin: 0 auto;
}
a:link {
text-decoration: none;
}
a:hover {
color: red;
}
nav {
letter-spacing: 0.5em;
padding: 10px 10px;
border: 1px solid black;
background-color: white;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
display: block;
border-right: 1px solid black;
}
#dot {
list-style-type: none;
}
body {
background-color: #4286f4;
text-align: center;
}
footer {
text-align: center;
font-size: small;
font-family: italic;
}
header {
background-color: #91b0e2;
}
main {
background-color: white;
border: 1px solid black;
}
<div id="wrapper">
<header>
<h1>Nature Walk</h1>
</header>
<ul id="dot">
<nav>
<li>Home</li>
<li>Login</li>
<li>Amenities</li>
<li>eForms</li>
</nav>
</ul>
</div>
You just need to update one class which is #dot
Whenever used ul by default it has padding at left side so you need to update using padding:0 or padding-left:0
#dot{
list-style-type: none;
padding:0;
}
Related
Is it possible to make a capsule shape using border-radius without a set width or height and include between delimeter?
Yes, You can try this way
.container {
width: 90%;
padding:20px;
margin: 10px auto;
background:#000;
}
ul {
list-style: none;
padding: 7px;
background: #333;
border-radius: 12px;
display: inline-flex;
}
li {
padding: 0 10px;
border-right: 1px solid #999;
line-height: 1;
color: #999;
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
li:last-child {
border-right: none;
}
<div class="container">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</div>
When I try to add a site navigation into a flexbox layout the submenus become not accessible anymore. They disappear when the mouse leaves the parent list element.
The final goal is to make the navigation fixed by using flexbox. If the body- and header-tag are left out the navigation works like intended. Any ideas on this?
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
background: yellow;
}
.site-navigation {
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
color: #666;
}
nav ul {
background: none;
display: flex;
flex-direction: column;
}
nav ul li {
list-style-type: none;
background: none;
}
nav ul li:hover {
background: none;
}
nav ul li a {
padding: 0.8rem 1rem;
display: block;
text-decoration: none;
color: rgba(100, 100, 100, 0.8);
background: none;
text-transform: uppercase;
font-size: 12px;
}
.has-children:hover>a {
border: 1px solid #e5e5e5;
border-bottom: none;
background: #fff;
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
color: #000;
}
.has-children:hover>ul {
border: 1px solid #e5e5e5;
position: relative;
z-index: -1;
}
.has-children:hover>ul>li {
padding: 15px 15px;
}
.has-children>ul>li>a {
text-transform: none;
color: #666;
border-bottom: 1px solid #E5E5E5;
padding: 0;
padding-bottom: 15px;
}
.has-children>ul>li:hover>a {
border-bottom: 2px solid #d00;
color: #000;
padding-bottom: 14px;
}
#media only screen and (min-width:680px) {
nav ul {
flex-direction: row;
}
nav ul li {
position: relative;
flex: 0 0 auto;
text-align: left;
}
nav ul li:hover ul {
display: flex;
flex-direction: column;
}
.has-children ul {
display: none;
position: absolute;
top: 100%;
}
.has-children:hover ul {
display: block;
position: absolute;
top: calc( 100% - 1px);
width: 150%;
}
}
<header class="site-header">
<nav class="site-navigation">
<ul class="site-navigation__list">
<li class="site-navigation__item">Item 1
</li>
<li class="site-navigation__item has-children">Item 2<span class="arrow arrow-down"></span>
<ul class="site-navigation__sub-list">
<li class="site-navigation__sub-item">Subitem 1</li>
<li class="site-navigation__sub-item">Subitem 2</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content"><p>Content goes here!</p></div>
It seems to be a matter of z-index and background.
You may use position:relative to reset z-index and add a background to submenu to hide overlapped content.
CSS update that could be done:
nav ul {
position:relative;
z-index:1
}
nav ul li:hover > ul{
background: white;
}
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
background: yellow;
}
.site-navigation {
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
color: #666;
}
nav ul {
background: none;
display: flex;
flex-direction: column;
}
nav ul {
position:relative;
z-index:1
}
nav ul li:hover > ul{
background: white;
}
nav ul li ,nav ul li:hover{
list-style-type: none;
background: none;
}
nav ul li a {
padding: 0.8rem 1rem;
display: block;
text-decoration: none;
color: rgba(100, 100, 100, 0.8);
background: none;
text-transform: uppercase;
font-size: 12px;
}
.has-children:hover>a {
border: 1px solid #e5e5e5;
border-bottom: none;
background: #fff;
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
color: #000;
}
.has-children:hover>ul {
border: 1px solid #e5e5e5;
position: relative;
z-index: -1;
}
.has-children:hover>ul>li {
padding: 15px 15px;
}
.has-children>ul>li>a {
text-transform: none;
color: #666;
border-bottom: 1px solid #E5E5E5;
padding: 0;
padding-bottom: 15px;
}
.has-children>ul>li:hover>a {
border-bottom: 2px solid #d00;
color: #000;
padding-bottom: 14px;
}
#media only screen and (min-width:680px) {
nav ul {
flex-direction: row;
}
nav ul li {
position: relative;
flex: 0 0 auto;
text-align: left;
}
nav ul li:hover ul {
display: flex;
flex-direction: column;
}
.has-children ul {
display: none;
position: absolute;
top: 100%;
}
.has-children:hover ul {
display: block;
position: absolute;
top: calc( 100% - 1px);
width: 150%;
}
}
<header class="site-header">
<nav class="site-navigation">
<ul class="site-navigation__list">
<li class="site-navigation__item">Item 1
</li>
<li class="site-navigation__item has-children">Item 2<span class="arrow arrow-down"></span>
<ul class="site-navigation__sub-list">
<li class="site-navigation__sub-item">Subitem 1</li>
<li class="site-navigation__sub-item">Subitem 2</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content"><p>Content goes here!</p></div>
Another update maybe to show submenu when parent is hovered ?
.has-children>ul {
display:none;
}
.has-children:hover>ul {
display:block;
}
https://codepen.io/anon/pen/MvKqqE
im wondering how to write my css so that when i hover the text the green line under the yellow box becomes yellow as well. thank you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
link
https://jsfiddle.net/18fk9sce/
i should add that i wish the green line to remain. some solutions seem to remove the green line running across the page.
Okay, I've just updated the solution now.
Just replace the overflow: hidden; in ul with a fixed height: 42px. And increase the padding bottom of the hovered link by 2px (i.e the border-bottom size). That would cover the border with yellow color of the link.
Check the updated fiddle
ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 42px;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
padding-bottom: 14px;
}
HTML - added wrapper
<div class="menu__holder">
<ul class="main_menu_left">
<li id="left">Homehome</li>
<li id="left">Homehomehome</li>
<li id="left">Homehome</li>
<li id="right">Homehome</li>
<li id="right">Home</li>
</ul>
</div>
CSS
.menu__holder {
width: 100%;
padding: 0;
border-bottom: 2px solid green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 9999;
margin-bottom: -2px;
}
ul li {
border-bottom: 2px solid transparent;
}
ul li:hover {
border-color: yellow;
z-index: 9999;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
Updated fiddle - NEW
You have to set the border in the li not in ul, so you can separately change the border.
Just change the Style to achieve it:
Updated fiddle
Updated Style
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
li{
border-bottom: 2px solid green;
}
li:hover {
background-color: yellow;
border-bottom: none;//you can set other color here
}
Updated CSS :-
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
border-bottom: 2px solid green;
}
a:hover {
background-color: yellow;
border-bottom: 2px solid yellow;
}
try with adding this to your css.if this is not the case tell me
ul:hover{
border-bottom:1px solid yellow;
}
thanks to everyone who contributed to this question.
in the end this is the code i use.
https://jsfiddle.net/4d0ghscu/
<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>
<ul class="menu">
<ul class="menu_left">
<li class="tab_left">Homehome</li>
<li class="tab_left">Homehomehome</li>
<li class="tab_left">Homehome</li>
</ul>
<ul class="menu_right">
<li class="tab_right">Homehome</li>
<li class="tab_right">Home</li>
</ul>
</ul>
key to the code:
*separating left from right within an overhead. which made it simpler and more flexible to add new elements to the navigation menu.
*adding height.
I've been working on my navbar and with the help of this site, managed to find out how to center it using text align. However, there is a weird indent that I cannot account for in my navbar as you can see in the example so when I center it, it's taking the indent into consideration too, so it doesn't look right.
How do I remove this indent and have it centered properly? I'm rather new to this, so advice would be great. Many thanks.
http://jsfiddle.net/f2eNm/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
</div>
CSS
*{
margin:0;
}
.links_container {
width: 100%;
height: 25px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
max-width: 1000px;
}
.nav1 {
display: inline;
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 25px;
width: 100px;
text-align: center;
line-height: 25px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
You need to change some things.
.nav1
{
text-align: center;
}
.nav1 ul {
margin: 0;
padding: 0;
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/f2eNm/3/
I'm using a navigation bar for a project I'm working on. I've always had trouble with horizontal navigation bars, and I've looked everywhere for the right solution, without success. The navigation bar was shifted to the left, so I put in some padding in my css, and now it's centered, however the text is not centered in it, and the hover effect for the first link doesn't cover the whole 'box' the text is in.
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFFFFF;
text-align: center;
padding: 30px;
margin-bottom: 0px;
margin-top: 0px;
background-color: #63B8FF;
}
.headers2{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav{
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0px 0px 0px 0px;
}
.nav li{
display: inline-block;
}
.nav a{
display: inline-block;
padding: 10px 110px 10px 0.80px;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: overline;
}
a:active{
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
HTML5 (Index Page)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<h1 class="headers">Welcome to KUBE Toy Library!</h1>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<h2 class="headers2">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
Note that I'm quite new compared to the others here on this forum, so please take it easy on me! :) Also this is a fictional company, etc. for an assignment I was given. Thanks!
Hi your page in my browser was displayed like below
I changed your css to make it browser resolution independent. As a UI developer I felt that overline was not looking good so I removed that. Use my code
/* Body CSS */
.body {
background-color: #61B329;
color: #FFFFFF;
}
/* Header CSS */
.headers {
color: #FFFFFF;
text-align: center;
padding: 30px;
margin: 0;
background-color: #63B8FF;
}
.headers2 {
color: #FFD89A;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link,
a:visited,
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
background-color: #028482;
}
a:active {
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover {
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Demo:
http://jsfiddle.net/NphBK/
This is a common problem. But to fix this you need to make the parent text-align: center and give the children display: inline-block;
If you want to have it completely equalizing you'll need to switch to display: table and display: table-cell.