I have 2 nav bars which I want to be on top of each other without spaces, but for some reason there is an empty line as if I had used .
HTML part
<!DOCTYPE html>Logo!
<BR>
<ul class="menu">
<li>Home
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
</ul>
<ul class="submenu">
<li>subheader1
</li>
<li>subheader2
</li>
<li>subheader3
</li>
</ul>
CSS part:
.submenu {
text-align: left;
background-color: #C2F0C2;
}
.menu {
background-color: #98bf21;
}
body {
width: 900px;
margin: 2em auto;
}
.menu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: center;
font-size:0;
}
.menu li {
display: inline;
list-style: none;
}
.menu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #FFFFFF;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #98bf21;
}
.menu a:hover, a:active {
background-color: #7A991A;
}
.submenu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: left;
font-size:0;
}
.submenu li {
display: inline;
list-style: none;
}
.submenu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #000000;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #C2F0C2;
}
.submenu a:hover, a:active {
background-color: #7A991A;
}
Fiddle
I'm not sure which part I need to change so I included all of it.
How can I remove the empty line?
E: I failed with the fiddle and forgot to press update, should have the right one now.
Apply padding:0 and margin:0 for your menu and submenu classes.
.menu, .submenu{margin:0; padding:0;}
DEMO
You just have to add this in your CSS :
.menu {margin-bottom:0px;}
.submenu {margin-top:0px;}
Have a good day.
Note: I see on firefox all together, so it give me 2 pixels on the two square join. For that i used this technique
You can use pseudo :last-child
CSS
div {
display: inline-block;
padding: 15px;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 2px solid red;
margin: 0;
white-space:0;
}
div:last-child {
border-right: 2px solid red;
}
DEMO HERE
Related
I am having trouble styling a basic nav.
I would like the nav menu colour to be grey and when it is hovered over turns to the green colour with a bottom border. It also jumps around on hover. I tried to add in border-bottom: transparent; but I think it is being overridden. I have played about moving the code and the a tag seems to be the culprit but I am not sure how to solve it. Hence all the styles.
HTML
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li{
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
padding: 10px;
}
a {
text-decoration: none;
}
.nav a {
color: #70B0A8;
}
Here is a fiddle to see what I'm talking about.
You have define
.nav a {
color: #70B0A8;
}
at the end of your CSS which will surely override your :hover effect and also you've defined :hover color for .nav li:hover { instead of .nav li:hover a { viz not a right way to define hover effect for a tag inside li.
Further you should first define the border-bottom and padding for your li tag initially instead of :hover to prevent the jumping issue.
You have to change your CSS like the Snippet below.
Code Snippet
a {
text-decoration: none;
}
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li {
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
padding: 10px;
border-bottom: 1px solid transparent;
}
.nav li a {
color: #70B0A8;
}
.nav li:hover {
border-bottom-color: #97A6AA;
cursor: pointer;
}
.nav li:hover a {
color: #97A6AA;
}
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png" />
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
The padding on your hover style was causing it to jump around.
Replace your .nav li:hover with the below.
.nav li:hover a{
color: #97A6AA;
text-decoration: underline;
cursor: pointer;
}
https://jsfiddle.net/c1egheLy/
So you remove the padding on hover and simply change the CSS around to suit what you need such as below:
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
}
.nav li{
display: inline;
text-align: right;
color: grey;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li a:hover {
color: #70B0A8;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
}
.nav a {
color: grey;
text-decoration: none;
}
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
Im slightly baffled as to why you don't have your logo beside the menu links too but thats simply moving the <img> into <class="nav"> but then within this instance you'd need to add width:100%; to .nav {} CSS
Replace this lines in your code
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #18961d; //Green Color
cursor: pointer;
/* padding: 10px; */ //Remove this padding line
}
I hope this helps..
I have created a html page with ul and li's to show some links and set up some background color to the li's. Now I want to add vertical line on the li's.
When I try to set up a image it is coming as shown in figure 1 but I want it to be as shown in figure 2.
figure 1
figure 2
What I have tried so far:
ul#sitemap1 {
list-style: none;
}
ul#sitemap1 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
#sitemap1 li {
clear: left !important;
margin-top: 0px !important;
padding: 10px !important;
background: url('/Images/ConnectLine.JPG') no-repeat !important;
float: inherit;
}
ul#sitemap1 li a:hover {
background-color: Orange;
}
ul#sitemap2 {
list-style: none;
}
ul#sitemap2 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap2 li a:hover {
background-color: Orange;
}
ul#sitemap3 {
list-style: none;
}
ul#sitemap3 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap3 li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">
Home
<li>Services</li>
<li>Organizational Change</li>
<li>kit</li>
<li>Sheets</li>
</ul>
<ul id="sitemap2">
Engagement
<li>Ideas</li>
<li>WorkSmart</li>
</ul>
<ul id="sitemap3">
Related Links
<li>GO-TIME</li>
</ul>
I suggest remove the id's form the CSS, no need to duplicate the same CSS just refer to the ul tag.
You can use :after pseudo-element to create the line.
Use :last-child to remove the line form the last item.
ul {
list-style: none;
}
ul li {
width: 220px;
position: relative;
margin-bottom: 20px;
}
ul li:after {
content: "";
position: absolute;
top: 90%;
left: 50%;
height: 25px;
background: black;
width: 4px;
border-radius: 5px;
border: 2px solid white;
z-index: 100;
}
ul li:last-child:after {
display: none;
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">Home
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">Engagement
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">Related Links
<li>GO-TIME
</li>
</ul>
you can use a pseudo element ::after in the a child of li
Note you can only have li as direct childs of ul. otherwise it is invalid HTML
I tweaked your CSS removing duplicated properties.
ul {
list-style: none;
margin-top: 30px
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
position: relative
}
ul li a::after {
position: absolute;
top: 100%;
left: 50%;
background: black;
width: 5px;
height: 100%;
content: ""
}
ul li:last-of-type a::after {
background: transparent;
height: 0
}
ul li a:hover {
background-color: Orange;
}
<div>
<h1>Innovations</h1>
<ul id="sitemap1">
<li>Home
</li>
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">
<li>Engagement
</li>
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">
<li>Related Links
</li>
<li>GO-TIME
</li>
</ul>
Try this, same you could try for sitemap 1 and 3.
ul#sitemap2 li::after{
content:'';
border:3px solid #111;
height:50px;
margin-left:110px;
}
I am trying to create a horizontal navigation bar with the following properties:
The anchor text is centered horizontally and vertically in the list
items.
The entire list item is a clickable link.
On hover, the background colour of the list item and the colour of the anchor text are swapped.
Here is a fiddle that manages to accomplish only #2. None of the solutions that I have found for #1 seem to work. #3 escapes me.
Advice is appreciated.
Here is the working code:
#navbar ul {
list-style-type: none;
display: table;
}
#navbar li {
display: table-cell;
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
}
#navbar li:hover {
background-color: black;
}
#navbar li a {
display: block;
text-decoration: none;
color: black;
}
<div id="navbar">
<ul>
<li>Intro</li>
<li>Bio</li>
<li>Issues</li>
</ul>
</div>
You can use this css. Check this link https://jsfiddle.net/oynd1sq6/
#navbar li:hover a{
color:#ffffff;
}
You can use below CSS to get all the 3 things you wanted.
#navbar ul
{
list-style-type: none;
display: table;
}
#navbar li{
float: left;
text-align: center;
}
#navbar li a
{
display: table-cell;
width: 200px;
height: 50px;
text-decoration: none;
color: black;
vertical-align: middle;
background-color: #f0e68c;
}
#navbar li a:hover{
color: #f0e68c;
background-color: black;
}
I have used vertical-align: middle to align text it vertically and gave your li styling to a tag to achieve this.
Fiddle here: http://jsfiddle.net/MasoomS/6mn0fun4/1/
Just two modification you need is.
To accomplish #1:
Make line height of anchor same as line height of li tag. i.e. 50px
To Accomplish #3
Add style rule for anchor.
#navbar li:hover a{
color:#f0e68c;
}
Here is fiddle
#navbar ul {
list-style-type: none;
display: table;
}
#navbar li {
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
;
}
#navbar li:hover {
background-color: black;
}
#navbar li a {
display: inline-block;
text-decoration: none;
color: black;
line-height: 50px;
/*Make the line height same as height of li tag*/
}
/*Add style for anchor*/
#navbar li:hover a {
color: #f0e68c;
}
<body>
<div id="statement">
<div id="navbar">
<ul>
<li>Intro
</li>
<li>Bio
</li>
<li>Issues
</li>
</ul>
</div>
</div>
</body>
</html>
Below Code is for html
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
Below code is for css
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
Try this i hope it will work for you
Try this ... just changed ur css
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
https://fiddle.jshell.net/ofp184pn/1/
Only updated your code...
For color hover effect add:
#navbar li a:hover{
color: #f0e68c;
background-color: black;
}
And for horizontal align you should add "line-height" and "vertical-align" properties to your "#navbar li" selector:
#navbar li
{
display: table-cell;
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
line-height: 50px;
vertical-align: middle;
}
JsFiddle
Your all 3 problems are solved.
Check it out
#navbar ul{
list-style-type: none;
float:left;
}
#navbar li{ width: 100px;
height: 50px;
text-align: center;
background-color: #f0e68c;
float:left;
}
#navbar li:hover{
background-color: black;
}
#navbar li a{
display: inline-block;
text-decoration: none;
height:100%;
color: black;
}
#navbar li a:before{
height:100%;
vertical-align:middle;
content:'';
display:inline-block;
}
I have a dropdown below ive creaeted, but im having troulbe centering the the menu. Ive tried to put <center> tags around it and also set the ul to margin auto 0 but its not working. Is there anything im missing?
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
I went ahead and put it on jsfiddle Here
I assume that you actually want to center the list items rather than just the menu.
JSfiddle Demo
Revised CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center; /* added this */
font-size:0; /* whitespace adjustment */
}
ul li {
font-size:1rem; /* font-size reset */
display: block;
position: relative;
/* float: left; removed this */
display: inline-block;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
Do you want the whole menu centered? If so, it helps to stick that all within something, like a table or div
so I added the following to your code:
css
#navbar {
width: 50%;
margin: 0 auto;
}
html
<div id="navbar">
all your ul/li's
</div>
all together
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
#navbar {
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
</div>
Here is a JSFiddle that demo's what I think you're after: JSFiddle
Basically, I changed your parent <li> to display: inline-block and removed the float: left property. To center those parent nav items, I applied text-align: center to the parent <ul>. Then I changed the nested dropdowns ul ul to be text-align: left and then set those <li>'s to display: block.
Final CSS (changed some selectors to target differently):
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* added this */
}
ul > li {
display: inline-block; /* changed from display: block */
position: relative;
/*float: left;*/
}
ul ul { text-align: left; } /* added this */
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul ul li { display: block; } /* added this */
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
the text within the li is a link, where as the entire li item including the text should work as a link. How can I get it so that the entire li item operates as link as opposed to just the text within the li?
CSS:
#navbar {
width: 900px;
height: 50px;
background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}
#navbar ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align: center;
}
#navbar ul li {
height: 50px;
width: auto;
float: left;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
height: 100%;
}
#navbar a:link {
font-weight:bold;
color: black;
font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
text-decoration: none;
}
#navbar a:hover {
background-color: #003300;
color: gold;
}
#navbar a:visited {
color: black;
}
a:active {
background-color: #003300;
color: gold;
}
HTML:
<div id="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>READING</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
Here's a screenshot for reference: (home has my cursor over)
Cheers
here's a quick example for you:
http://jsfiddle.net/DFS5P/
You then should move some of the li css to the a css - like so
#navbar ul li {
height: 50px;
width: auto;
float: left;
}
#navbar ul li a {
display: block;
height: 100%;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
Give your padding & height to anchor instead of LI. Write like this:
#navbar ul li {
float: left;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
height: 50px;
}
Check this http://jsfiddle.net/DFS5P/1/
Try adding
width:100%;
to:
#navbar ul li a {
display: block;
height: 100%;
}
If you remove the padding from the list items and give them a fixed width, it works as you need.
#navbar ul li {
height: 50px;
width: 100px;
float: left;
line-height: 50px;
border-right: 1px solid black;
}
jsFiddle example
It is definately not the best way, but sometimes I just move the entire 'li' inside the 'a' tag. This way everything witin the 'li' goes to the link in when you click on it.
Works fine by me, but as I said it is not the best way.