I have two questions:
Can I set the border-right's height?
Can I hide the last li's border-right?
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
border-right: 1px solid #aba;
}
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
Instead of a border you can experiment with ::before and ::after
ul {
display: flex;
}
li {
position: relative;
display: flex;
justify-content: center;
flex: 1;
padding: 10px 0;
background-color: gray;
list-style-type: none;
}
li::after {
content: "";
position: absolute;
top: 5px; /* control the 'height' with top/bottom */
bottom: 5px;
right: 0;
width: 5px; /*same as what your border was */
background-color: black; /* instead of border-color */
}
li:last-child::after { /*hides last 'border' */
display: none;
}
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
Try #banner ul li:last-child { border-right: 0; or border-right-color: hsla(0, 0%, 0%, 0);}
fiddle
https://jsfiddle.net/Hastig/kkx33des/
Hide the last border
This is your border:
li { border-right: 1px solid #aba; }
But you don't want it to appear on the last item. So try this instead:
li + li {
border-left: 1px solid #aba;
}
The new rule applies a left-side border to li elements that come immediately after another li. This will exclude a left border on the first li and a right border on the last li.
Shorter borders
You want the borders to be less than full height. You can achieve the effect with absolutely-positioned pseudo-elements:
li {
position: relative; /* establish the containing block for abspos children */
}
li+li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
width: 2px;
background-color: red;
}
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
/* border-right: 1px solid #aba; */
position: relative;
}
li+li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
width: 2px;
background-color: red;
}
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
Try This :
li:not(:last-child):after {
content: "";
display: inline-block;
margin-left: 40px;
border-right: 3px solid orange;
height: 20px;
top: 5px;
position: absolute;
}
Full Code :
body {
margin: 0;
padding:0;
}
#banner {
height:30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
vertical-align: middle;
}
#banner ul{
list-style: none;
height:30px;
padding: 0;
position: relative;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align:center;
}
li:not(:last-child):after {
content: "";
display: inline-block;
margin-left: 40px;
border-right: 3px solid orange;
height: 20px;
top: 5px;
position: absolute;
}
<div id="banner">
<ul >
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
To remove the border for the last li, use the pseudo-class :last-child
I used display:flex and align-item:center after adding a margin to the top and bottom of the li to center it
body {
margin: 0;
padding:0;
}
#banner {
height:30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul{
list-style: none;
height:30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
width: 100px;
text-align:center;
border-right:1px solid #aba;
margin-top:10px;
margin-bottom: 10px;
}
#banner ul li:last-child {
border-right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="banner">
<ul >
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
</body>
</html>
U can try pipe symbol as an alternaten using :after selector of each li
You need :last-child pseudo Css selector to hide the border of last li
Related
I am trying to create a Navigation Menu with dropdown sub-menus. When I am trying to change "display" property from "None"to "Block" for Nested it is not working. Here below is code.
In the Code I have created Main Navigation Menu under with class="nav". and dropdown required on hover over elements in nav class.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS</li>
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Use !important in this style because your styles applied on id(which has highest priority in CSS) are not getting overridden by your style.
.nav>ul>li:hover ul {
display: block !important;
}
Also incase of products. the ul was not inside the li element.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block !important;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
OR
Change your id to class in case of products and services and your code will work without important as well.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.products li {
padding: 9px 0px;
}
.services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul class="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul class="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
This is an issue of specificity: you set the display: none; on an id selector, which has very high specificity, but set display: block; on a very low specificity selector: the descendant selector. The id will override that selector no matter where they show up in the cascade. Consider abstracting your display:none to only be a descendant selector (removing that property from #products, etc.), and it should work fine:
.nav>ul>li ul{
display: none;
}
Some helpful reading:
https://www.w3schools.com/css/css_combinators.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Navigation Menu with dropdown sub-menus
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 150px;
position: absolute;
top: 165px;
right: 206px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.products li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.services {
list-style-type: none;
width: 100px;
height: 147px;
position: absolute;
top: 165px;
right: 85px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.services li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
I would remove the display: none from the services and products css because IDs have high specificity and will override other rules. While !important might temporarily solve this issue, I would not rely on !important as it could cause more issues later on.
You can declare a non-hovered rule with display: block alongside your current hovered rule.
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li ul {
display: none;
}
.nav>ul>li:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
This question already has an answer here:
css3 "::after" pseudo-element not working
(1 answer)
Closed 5 years ago.
I use the li:after to add content after the li, but not work.
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
}
#banner ul li :after {
content: "a";
top: 1px;
bottom: 1px;
right: 0;
width: 5px;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
</body>
</html>
Why the contents do not shows ?
Because you have this top: 1px; bottom: 1px; right: 0; you need to use position and there is a space between a and ::after
with that space, it would apply ::after to all children of li. So it is the same as
#banner ul li *::after
See a Snippet
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
max-width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
position:relative;
}
#banner ul li::after {
content: "a";
position:absolute;
top: 1px;
bottom: 1px;
right: 5px;
width: 5px;
background-color: red;
}
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
There should be no space between the element (li) and :after.
It should be:
#banner ul li:after
and not
#banner ul li :after
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
}
#banner ul li:after {
content: "a";
top: 1px;
bottom: 1px;
right: 0;
width: 5px;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
</body>
</html>
When I put my cursor right on top of the link text, the link is not clickable, but if I put my cursor a little bit below the text, it becomes clickable. I'm learning right now so please explain to me why it's doing that and how to fix it.
HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8">
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
*{
margin: 0;
padding: 0;
}
header{
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1{
color: white;
position: relative;
left: 100px;
top: 5px;
}
nav{
margin-top: -20px;
margin-right: 100px;
}
nav ul{
float: right;
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover{
background-color: #84FFFF;
}
.main{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop{
width: 1024px;
}
.title{
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3{
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
It's because your <h1> is a block-level element, which will lay over the menu elements. If you give it display: inline-block, it will work as supposed.
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
See my example below.
* {
margin: 0;
padding: 0;
}
header {
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1 {
color: white;
position: relative;
left: 100px;
top: 5px;
display: inline-block;
/* Added */
}
nav {
margin-top: -20px;
margin-right: 100px;
}
nav ul {
float: right;
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover {
background-color: #84FFFF;
}
.main {
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop {
width: 1024px;
}
.title {
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3 {
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About
</li>
<li>My Work
</li>
<li>Contact Me
</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
The problem is occurring because of the interaction between some of your styles. You're floating the nav ul element to the right, but you're also setting the nav ul li display to inline-block which is also doing an implicit float (try replacing it with float: left and you'll see the same behavior).
If you set the position:relative on your nav ul, it willforce the elements to float correctly within the ul container.
nav ul{
float: right;
margin: 0;
padding: 0;
position:relative; /*ADD THIS*/
}
I'm having trouble with the header div of this website I'm making. There is padding or something appearing underneath my horizontal menu bar even though my padding is set to 0. I know that similar posts have been made about the but I have read quite a few and none of the answers seemed to do the trick for me. I have changed the background of the header div to yellow to make it more visible. There is also a pixel or two on either side of the menu bar which are unwanted. I'll put my css and html code below. screenshot
<div class="big header">
<img src="Images/headerphoto.jpg" alt="header_photo">
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
<li><a class="logo" href="http://www.linkedin.com"><img alt="in" src="Images/linkedinlogo.png"></a></li>
<li><a class="logo" href="http://www.facebook.com"><img alt="fb" src="Images/facebooklogo.png"></a></li>
<li><a class="logo" href="http://www.twitter.com"><img alt="tw" src="Images/twitterlogo.png"></a></li>
<li><a class="logo" href="http://www.rss.com"><img alt="rs" src="Images/rsslogo.png"></a></li>
</ul>
</ul>
And here is the relevant CSS. (The 'Big' class is what I'm using for all the major elements on the page.)
body {
background-image:url("Images/background.png");
background:tile;
}
.header img {
width: 100%;
}
.header {
background-color: yellow;
height: auto;
padding-top: 30px;
padding-left: 0px;
padding-bottom: 0px;
margin-top: 10px;
}
.big {
width: 80%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px #C5C5C5;
}
Here is the css for my navbar.
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin-top: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"]{
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float:right;
list-style-type:none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
I have added an example to show http://codepen.io/simondavies/pen/jWjoBy
It working please check out the css, html etc
I have guestimated some stuff... Hope it will be a help
<div class="big header">
<div class="header-img"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97150&w=1000&h=150" alt="header_photo"></div>
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<li><!--<ul class="logo"></ul>--></li>
</ul>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background-color: yellow;
height: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-img{
width: 100%;
height: 150px;
padding: 30px 0 15px 0;
margin: 0;
}
.header-img img {
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.big {
margin: 0 auto;
padding: 0;
margin-top: 10px;
width: 80%;
box-shadow: 0px 0px 20px #C5C5C5;
}
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin: 0;
padding: 0;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"] {
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float: right;
list-style-type: none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
You have an error in your HTML:
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
The only descendants of either <ul> or <ol> should be <li>. It is possible that this could be the issue.
I corrected the markup in two ways, without reproducing your issue:
By wrapping <ul class="logo"> inside of an <li> (essentially assuming it was a sublist in your list
By closing your first <ul>, and then letting the second list sit adjacent to it
But I also could not reproduce your issue by leaving the markup alone
So, the issue may be:
You need to use a CSS reset to remove default margins and paddings that the browser is providing
There is another ruleset that is adding padding to your .header
That other ruleset may have a higher specificity
That other ruleset may have an !important declaration
I have tried probably 15 suggestions from stackoverflow on how to center nav. Can you help? I just want to center the nav and be able to hover over Expertise without the rest of the nav bar getting jumbled around.
Here is my markup:
<nav id="header-home-nav">
<div id="menu">
<ul>
<li id="" class="">About</li>
<li id="line-li"><p class="nav-lines">|</p></li>
<li id="" class="">Contact</li>
<li id="" class=""><p class="nav-lines">|</p></li>
<li id="" class="">Expertise
<ul id="" class="sub-menu">
<li>▶ Finance</li>
<li>▶ Operations</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
</ul>
</li>
</ul>
</div>
</nav>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width:100%;
background-color: #666666;
}
#menu li {
background-color: #1b1b1b;
display: block;
float: left;
position:relative;
}
#menu a {
color: #ffffff;
display: block;
text-align: center;
text-decoration: none;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index:100;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
z-index:5;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
text-align: left;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
EDIT:
Here is a jsfiddle:
http://jsfiddle.net/8A9tq/
Sorry, forgot to add it.
EDIT:
Responsive is important. So I needs to be centered regardless of screen size.
You can add the following:
#header-home-nav {
width: 100%;
}
Then, give the child (#menu) some kind of max-width and auto margins:
#menu {
background: #1B1B1B;
margin: 0 auto;
max-width: 300px;
position: relative;
font-size: 0.8em;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
}
This seems to work: http://jsfiddle.net/4Eqad/
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
margin-left:25%;
}
Note the new edition is the margin-left:25%. You can make that whatever you would like.
Nav centered: http://jsfiddle.net/8A9tq/1/
To center an element you need three things: a set (non-percentage) width, block display (automatic with block level elements, but it's a good practice anyway), and your left and right margins to be set to auto:
width: 300px;
display: block;
margin: 0 auto;
So for your example, depending on which element you want to center you could try:
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width: 300px;
display:block;
margin: 0 auto;
background-color: #666666;
}
or
#menu {
position: relative;
font-size: 0.8em;
margin: 0 auto;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:300px;
display:block;
}
and so on
Here you can keep your markup and just says to the position has to be 50% left and 50% right.
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
left: 50%;
right: 50%;
}
Fiddle: http://jsfiddle.net/uPs8J/2/