There is a small gap between the two items in navigation bar.
This is the html, css code:
body{
margin: 0px;
font-family: sans-serif;
}
ul{
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li{
display: inline;
}
a{
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover{
background: grey;
color: black;
}
a:active{
background: white;
}
<ul>
<li>Home</li>
<li>Support</li>
<li>Contact</li>
<li>Support</li>
</ul>
This is the output.
The gap is reduced if I set the margin of a tag to -1.
You can add display: table; to you <ul> element. This will remove the space.
body{
margin: 0px;
font-family: sans-serif;
}
ul{
display: table;
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li{
display: inline;
}
a{
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover{
background: grey;
color: black;
}
a:active{
background: white;
}
<ul>
<li>Home</li>
<li>Support</li>
<li>Contact</li>
<li>Support</li>
</ul>
You can use this, the spacing is because of display:inline. Check here for more information about the spacing
body {
margin: 0px;
font-family: sans-serif;
}
ul {
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li {
display:inline-block;
}
a {
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover {
background: grey;
color: black;
}
a:active {
background: white;
}
<ul>
<li>Home</li><!--
--><li>Support</li><!--
--><li>Contact</li><!--
--><li>Support</li>
</ul>
If I understood you correctly you have to set the margin of every element to 0:
* {
margin: 0;
}
* {
margin: 0;
}
body {
font-family: sans-serif;
}
ul {
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li {
display:inline-block;
}
a {
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover {
background: grey;
color: black;
}
a:active {
background: white;
}
<ul>
<li>Home</li><!--
--><li>Support</li><!--
--><li>Contact</li><!--
--><li>Support</li>
</ul>
It's because of the whitespace. There are a number of techniques you can use to fix the issue.
Remove the space between the closing and opening li tags:
<ul>
<li>
Home</li><li>
Support</li><li>
Contact</li>
</ul>
Remove the closing li tag:
<ul>
<li>Home
<li>Support
<li>Contact
</ul>
Use comments to remove the space:
<ul>
<li>Home</li><!--
--><li>Support</li><!--
--><li>Contact</li>
</ul>
Use font-size:0 for the ul element in the CSS:
ul { font-size: 0; }
li { font-size: 16px; }
Add a space to hide the spaces...
body{
margin: 0px;
font-family: sans-serif;
}
ul{
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li{
display: inline;
}
a{
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover{
background: grey;
color: black;
}
a:active{
background: white;
}
/* Add this */
li:after {
content: ' ';
font-size: 0;
}
<ul>
<li>Home</li>
<li>Support</li>
<li>Contact</li>
<li>Support</li>
</ul>
Removing space and redefining border definitions.
body {
margin: 0px;
font-family: sans-serif;
}
ul {
padding: 15px 0px;
background: grey;
list-style-type: none;
display: inline-block;
}
li {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
float: left;
padding: 15px;
text-align: center;
min-width: 60px;
}
li:first-child {
border-left: 1px solid black;
}
a {
color: white;
text-decoration: none;
display: inline-block;
}
a:hover {
background: grey;
color: black;
}
a:active {
background: white;
}
<ul>
<li>Home</li>
<li>Support</li>
<li>Contact</li>
<li>Support</li>
</ul>
I added this to your css:
a {
margin-right: -5px;
}
Output:
Related
I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a{
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basecode</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
</body>
</html>
You need to clear your floats.
.page-body {
…
clear: left;
}
Demo
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a {
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
clear: left;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
I created a navigation bar. It contains li elements and some of the li elements contains drop down menu. On hovering the specific li element the drop down menu will become visible. The problem is that the drop down menu does not appear under its parent li element. Instead all of them appear in the same position (under the logo) away from their parent elements. What am i missing?
#navigation {
height: 50px;
width: 95%;
margin: auto;
box-shadow: 0px 0 1px 1px #ddd;
padding: 10px;
background-color: #fff;
}
#navigation #nav {
list-style: none;
margin: 0;
padding: 0;
}
#navigation #nav li.nav-block,
#navigation #nav li#logo-container {
display: inline;
margin-left: 10px;
padding: 20px 0px;
width: 50px;
text-align: center;
height: 40px;
line-height: 50px;
font-family: sans-serif;
margin: 2px 0px;
}
#navigation #nav li a.nav-button,
#navigation #nav li a#logo {
text-decoration: none;
color: #333;
padding: 15px 40px;
}
#navigation #nav li.nav-block:hover {
background-color: skyblue;
}
#navigation #nav li.nav-block:hover a.nav-button {
color: #fff;
}
a.category {
cursor: default;
}
#logo-container {
margin-right: 10px;
}
#logo {
font-family: sans-serif;
font-weight: bold;
color: #333;
}
#logo-span {
color: skyblue;
}
.nav-dropdown-menu {
display: none;
z-index: 11;
position: absolute;
width: 200px;
min-height: 50px;
}
.nav-dropdown-menu>ul {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li {
display: block !important;
background-color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 1px 1px #ddd;
width: 100%;
}
#navigation #nav li.nav-block:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li a {
text-decoration: none;
padding: 10px 50px;
color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover {
background-color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover a {
color: #fff;
}
<div id="navigation">
<ul id="nav">
<li id="logo-container"><a id="logo">My <span id="logo-span">Logo</span></a></li>
<li class='nav-block'><a class='nav-button category'>Handy</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=1&cat_id=2'>Dell</a></li>
<li class='dropdown-li'><a href='home.php?brand_id=4&cat_id=2'>Samsung</a></li>
</ul>
</div>
<li class='nav-block'><a class='nav-button category'>Tablet</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=2&cat_id=9'>Sony</a></li>
</ul>
</div>
<li class="nav-block"><a class="nav-button" href="registration.php">Sign Up</a></li>
<li class="nav-block"><a class="nav-button" href="main_login.php">Login</a></li>
</ul>
</div>
Have a look into this. Give position;relative to your li and set left and right of your nav-dropdown-menu
#navigation {
height: 50px;
width: 95%;
margin: auto;
box-shadow: 0px 0 1px 1px #ddd;
padding: 10px;
background-color: #fff;
}
#navigation #nav {
list-style: none;
margin: 0;
padding: 0;
}
#navigation #nav li.nav-block,
#navigation #nav li#logo-container {
display: inline;
margin-left: 10px;
padding: 20px 0px;
width: 50px;
text-align: center;
height: 40px;
line-height: 50px;
font-family: sans-serif;
margin: 2px 0px;
}
#navigation #nav li a.nav-button,
#navigation #nav li a#logo {
text-decoration: none;
color: #333;
padding: 15px 40px;
}
#navigation #nav li.nav-block:hover {
background-color: skyblue;
}
#navigation #nav li.nav-block:hover a.nav-button {
color: #fff;
}
a.category {
cursor: default;
}
#logo-container {
margin-right: 10px;
}
#logo {
font-family: sans-serif;
font-weight: bold;
color: #333;
}
#logo-span {
color: skyblue;
}
.nav-block {
position: relative;
}
.nav-dropdown-menu {
display: none;
z-index: 11;
position: absolute;
left: -39px;
right: 0;
width: 200px;
min-height: 50px;
}
.nav-dropdown-menu>ul {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li {
display: block !important;
background-color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 1px 1px #ddd;
width: 100%;
}
#navigation #nav li.nav-block:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li a {
text-decoration: none;
padding: 10px 50px;
color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover {
background-color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover a {
color: #fff;
}
<div id="navigation">
<ul id="nav">
<li id="logo-container"><a id="logo">My <span id="logo-span">Logo</span></a></li>
<li class='nav-block'><a class='nav-button category'>Handy</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=1&cat_id=2'>Dell</a></li>
<li class='dropdown-li'><a href='home.php?brand_id=4&cat_id=2'>Samsung</a></li>
</ul>
</div>
<li class='nav-block'><a class='nav-button category'>Tablet</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=2&cat_id=9'>Sony</a></li>
</ul>
</div>
<li class="nav-block"><a class="nav-button" href="registration.php">Sign Up</a></li>
<li class="nav-block"><a class="nav-button" href="main_login.php">Login</a></li>
</ul>
</div>
Right now I am stuck with this ribbon bookmark. I don't know how to make a navigation bar where ribbon is like in those two pictures:
Normal
On mouseover
How ribbon looks when page is active.
How ribbon looks when you slide cursor on selected menu. it should slide out.
nav[role="top"] {
width:60%;
float:right;
}
nav[role="top"] li {
float:right;
}
nav[role="top"] ul {
list-style-type: none;
margin: 10px;
padding: 0;
overflow: hidden;
}
nav[role="top"] li a {
color: #b3b3b2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
width:50px;
font-size:11px;
font-family: 'Pontano Sans', sans-serif;
font-weight:600;
}
nav[role="top"] li:hover {
width: 0;
height: 30px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>
Here is my solution for this:
nav[role="top"] ul {
list-style-type: none;
float: right;
}
nav[role="top"] li {
display: inline-block;
position: relative;
float: right;
}
nav[role="top"] a {
display: block;
color: #b3b3b2;
text-align: center;
padding: 14px 0;
text-decoration: none;
width: 70px;
font-size: 11px;
font-family: 'Pontano Sans', sans-serif;
font-weight: 600;
background-color: #103252;
}
nav[role="top"] a::after {
content: '';
display: block;
position: absolute;
width: 0;
height: 20px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
nav[role="top"] a:hover::after {
height: 30px;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>
Please be aware that element div is not allowed as child of element ul. It's not valid.
My problem is that I want to have spacing between the navigation links. I have searched over the internet but all I get are reducing the space.
To be specific, I want to have spacing in between each navigation link that are bordered with a black border.
These are my codes for the navigation bar. I would really appreciate some help. thank you.
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
border: 5px solid #000;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 5px solid #000;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Here it is:
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
border: 5px solid #000;
background-color: #fff;
}
li {
text-align: center;
margin-bottom:10px;
}
li:last-child {
margin-bottom:0;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Demo: https://jsfiddle.net/4fLbx4xa/
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
}
li{
width:100%;
display: block;
margin-top:10px; //this is the height you want
border: 5px solid #000;
color: #000;
background:#000;
padding:10px 0;
}
li a {
text-align: center;
padding: 8px 16px;
text-decoration: none;
color:#fff;
}
li:first-child {
margin-top:0;
}
li:hover {
background-color: #555;
color: white;
}
</style>
You need to use margin to add the white space, but the borders needed a little tweaking, see comments below
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
/*border: 5px solid #000; moved to LI element*/
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
margin-bottom:10px; /*add some margin to create the white space*/
border: 5px solid #000; /*add the border to each LI element rather than UL*/
}
li {
text-align: center;
/*border-bottom: 5px solid #000; remove this bottom border as handled in LI css*/
}
Not sure what you want to achieve but i understood a line between the links, this might help you also if you want it below the links..
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 400px;
background-color: #fff;
border: 5px solid #000;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;}
li {
text-align: center;
float: left;
border-right:solid 1px black;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I am trying to figure out how to remove the last black section of my secondary nav.
I want the "wishlist" link to be the last thing there, not have the border and then more black space afterwards basically. I'm just not sure how to do this.
my html:
<title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<!--Header-->
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<!--Primary navigation-->
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- Secondary Navigation -->
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<li>Wish list</li>
</ul>
my css:
body {
width: 1200px;
height: 130px;
margin: 0 auto;
background-color: #ffffff;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%;
}
header a {
float:left;
display:inline-block;
}
header a img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right:10px;
display: inline;
height: 112px;
width:; 113px;
}
nav {
display: inline;
float: right;
}
nav ul {
list-style: none;
display: inline;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
margin-right: 50px;
padding: 40px 30px;
padding: right 10px;
}
nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ff0000;
background-color: #ffffff;
}
/*secondary navigation*/
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #000000;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
#navigation_layout li {
float: left;
}
#navigation_layout li a {
display: block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
color: #ff0000;
background-color: #fff;
}
I have put it into a jsfiddle here, so it is clearer what I am trying to do.
https://jsfiddle.net/thzfm0fe/1/
Apply the background color to your list items <li> and not the <ul>.
Remove background-color from here:
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
/* background-color: #000000; */
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
And add to here:
#navigation_layout li {
float: left;
background-color: black;
}
https://jsfiddle.net/thzfm0fe/3/
A <ul> by default is a block level element and will fill up the full width of the parent element. Your list items <li> did not fill up the full width of the parent but your <ul> did, hence the extra black after your list items.
By applying the background color to the <li> you don't need to add white border to your anchors anymore. You could apply a margin instead.