I'm trying to make a navigation bar with only a right border, but when I do this, there's like an invisible left border on the hover, which does not fully make the border the color I want it to be. (a part of the left side is blue instead of light blue)
This is the CSS
#navbar{
width:900px;
margin:0 auto;
background-color:#3f67c0;
height:60px;
}
#navbar ul {
list-style-type: none;
text-align: left;
margin:0px;
padding:0px;
}
#navbar ul li {
display: inline-block;
}
#navbar ul li a {
display:block;
border-right:#FFF solid 1px;
border-left:none;
border-top:none;
boder-bottom:none;
padding: 20px 40px 20px 40px;
text-decoration: none;
color: #fff;
}
#navbar ul li a:hover {
color: #FFF;
background-color: #35b5eb;
}
This is the HTML
<div id="navbar">
<ul>
<li>HOME</li>
<li>CLAIM</li>
<li>PROOF</li>
<li>HELP</li>
</ul>
</div>
This is caused by the space in the HTML as well as a combination of display: inline-block and its display: block child. The best solution is to remove said space
<li>HOME</li
><li>CLAIM</li>...
You could also use font-size: 0 on the ul and the necessary font-size on the <li> or <a>, or use float: left on the <li> instead of display: inline-block, but these may result in other artifacts
http://jsfiddle.net/ExplosionPIlls/zPjCS/
Related
This is my website.. when you hover over the nav items and a drop down list appears, i want the drop down list to have white text permanently, not turn white.
Also if anyone knows how to make it so when you hover over the menu items a black line appears under the word not the whole background of the word goes black?
http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/
#nav {
padding: 50px;
width: 924px;
height: 100px;
float: none;
}
#nav ul {
list-style: none;
margin-left: 5px;
width: 1000px;
display: table;
}
#nav a {
text-decoration: none;
color: #161717;
}
/*hide sub menu*/
#nav li ul {
display: none;
}
/*show and position*/
#nav li:hover ul {
display: block;
position: absolute;
margin-left: 0px;
margin-top: 0px;
}
/*main nav*/
#nav li {
width: 140px;
font-size: 14px;
display: inline-block;
-webkit-transition: all ease 0.3s;
}
#nav li:hover {}
/*sub nav*/
#nav li li {
color: white;
display: block;
background-color: black;
font-size: 11px;
padding-top: 5px;
padding-left: 5px;
width: 100px;
}
#nav li li:hover {
background-color: #A83133;
}
#nav a:hover {
color: white;
}
<div id="nav">
<div id="firstnav">
<ul>
<span class="font4"><li>SIGN IN</li>
<li>SIGN UP</li>
<li>MY TRIP</li>
</ul></span>
</div>
<ul>
<li>DESTINATIONS
<ul>
<li>Popular Places
</li>
<li>Other places
</li>
</ul>
</li>
I'm unsure if your question is about your top-link turning black when not being hovered
The reason this is happening is you put your hover on your a-element.
a-tags are by default inline elements. Which means they will only take up as much space as the text.
This means that when you hover on your li-element the hover on your link is no longer in effect.
You could change the color of your link when you hover on your li-element instead.
#nav li:hover a {
color:white;
}
As for the black line.
You could just add a border bottom to either your li-elements(if you want it to be the full lenght) or your a-elements(if you want it to only be as long as your word)
#nav li:hover
{
border-bottom: 1px solid #000;
}
Edit: This is a sollution for your top menu-item turning black when hovering. Was this your issue or did you want to change the color of your sub-items?
If so you can just do the following
#nav li li a
{
color:white
}
so the submenu should always have white text?
#nav ul li ul a {
color:#ffffff;
}
but i would recommend to do it with classes... so you do not have such large selectors and you can easily use that styling on other pages.
furthermore if you need to change the html tree or instead of using a list perhaps a div it wont work anymore. so go for classes :).
greetings timotheus
So, basically, i have a navbar. I want a second "navbar" beneath, which is always visible, but without users interaction, it displays nothing. But, when you hover over a tab in the main bar, a dropdown bar starts at a given point, and goes horizontally along the second tier.
This is my bar so far, and i know generally how to make a dropdown-bar, but i figured it would be easier for you to explain to me from this point, instead of telling me what to remove aswell.
http://jsfiddle.net/7yrX7/119/
<div id="nav">
<div id="container">
<ul>
<li><img src="bilder/menu.jpg" style="height:120%; padding-left: 100px"> </li>
<li> Left thing </li>
<li>
Right thing </li>
</ul>
<img src="bilder/facebook.ico" style=" height:100%; float:right; padding-right:50px;">
<img src="bilder/twitter.ico" style=" height:100%; float:right; padding-right: 15px;">
</div>
</div>
<div id="ribbon">
</div>
body,
#nav ul {
padding: 0;
margin: 0;
}
body {
font-family: Arial;
font-size: 17px;
}
#nav {
background: linear-gradient(#999C92,#72776A);
width: 100%;
position:fixed;
height:50px;
}
#nav ul {
list-style-type: none;
font-size:0; /*hack for inline-block removes side margins*/
}
#nav ul a{
list-style-type: none;
text-decoration: none;
}
#nav > ul { text-align:center; }
#nav li {
font-size: 17px;
vertical-align: middle;
float: left;
}
#nav li a{
padding: 15px;
display: block;
display:inline-block;
}
#nav ul li a:hover {
background-color: #333;
color:red;
}
#nav a:visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav li:hover ul {
display: block;
float:left;
}
#nav ul ul {
display: none;
color: red;
border: 1px solid black;
}
#nav a li a:hover {
color: #699;
}
#ribbon {
width: 100%;
height: 20px;
background-color: black;
}
I am basing this fix off of the updated code you posted as an "answer" (in the future, you can update your question instead by using the edit feature).
The trick to getting a persistent bar to display below the main navigation is just to add some div to the end (let's call it ribbon_filler) and make it always visible. When the dropdown appears, it just appears above the ribbon filler. Here's an example of what the CSS for the filler might look like:
#ribbon_filler {
top:50px;
height:50px;
width:100%;
background-color: #ACD661;
border:1px solid black;
}
You can see this used in your code here.
I would look into an implementation of Superfish which is a great jQuery menu and gives you more than you are likely to develop on your own.
http://users.tpg.com.au/j_birch/plugins/superfish/examples/#
Hy, I am very new to html programming and I am trying to make a site. The problem is that I don't understand why I get a white space, in the right of my menu and image,even though I set the width to 100%.I am using Google Chrome.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
<title>Home</title>
</head>
<body>
<nav>
<ul>
<li>Contact
</li>
<li>Muzica</li>
<li>Evenimente
<ul>
<li>Intalnire cu fanii</li>
<li>Concerte</li>
<li>Lansari</li>
</ul>
</li>
<li>Bio
<ul>
<li>Formatia</li>
<li>Istoric</li>
</ul>
</li>
</ul>
</nav>
<div>
<img src = "beregratis.jpg" height=100% width=100% />
</div>
</body>
</html>
Here is the css code:
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul
{
width:100%;
margin-left:-10px;
margin-top:-10px;
margin-right:0px;
background: #A0A0A0 ;
border-style:solid;
border-color:#404040;
padding: 0 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li
{
float: right;
}
nav ul li:hover
{
background: #4b545f;
}
nav ul li:hover a
{
color: white;
}
nav ul li a
{
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul
{
width:auto;
background: #4b545f;
border-radius: 0px;
margin-top:0px;
margin:auto;
margin-left:0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li
{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #757575;
}
div
{
margin-top: -20px;
margin-left: -10px;
}
And here's the link to the image:
http://www.beregratis.ro/images/bere_gratis_2011_02.jpg
1) Add
html, body {
margin: 0;
padding: 0;
}
This will take away the browser defaults for the html and body element.
2) For the menu please remove the
margin-left:-10px; under nav ul.
The -10px margin left is pulling the menu to the left
First of all, you should add html,body{margin:0;} as some browsers add margin to that element.
Main issue you are experiencing :
You are adding a negative margin-left on several elements (.nav ul and .div) so they can't go all the way right and therefore there is a whitespace on the right of image and nav bar.
Here is your code I corrected in this FIDDLE
try with a css reset, there is many of them, like this one http://nicolasgallagher.com/about-normalize-css/
or just ad this at the begin of the stylesheet *{margin:0; padding:0;} that whill reset all the elements to margin and padding 0, if u have this kind of trouble the best u cand do is use the developer tool from your browser, go to metrics, and see whats that blank space, in google chrome for example, if that space apears in green its a paddin, if it is orange is a margin
Try to use a CSS reset for all browsers behave the same way. I just tried to delete the negative margin-left in ul and the space disappeared. Here is the code http://jsfiddle.net/qE69s/
The problem is over, I'm now going on with my website development, thanks.
The problem is on my website (I'm viewing it in Chrome): http://albertorestifo.com/
Between the elements of the navigation menu, there is a undesired space between the border and the next list element. It is visible when you hover on "gallery".
Here the HTML:
<nav>
<ul>
<li class='active'>Home</li>
<li>Gallery</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</nav>
And here the CSS:
header nav, header nav ul, header nav ul li, header nav ul li a { height: 100%; } header nav ul li a { display: block; }
header nav ul li {
display: inline-block;
line-height: 150px;
padding: 0 20px;
border-left: 1px solid #2d2d2d;
}
header nav ul li:last-child { border-right: 1px solid #2d2d2d; }
header nav ul li:hover, header nav ul li.active {
background-color: #0072bc;
}
header nav ul li a {
text-decoration: none;
color: white;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
}
Plus a small reset:
ul, ul li { margin: 0; padding: 0; }
I point out that I'm using Normalize.css, so every browser should display it.
I have no idea how to fix this, it never happened to me in the past!
demo:http://jsfiddle.net/EaAvx/
It is because your list-items are inline-block elements.
Use any of the following solutions:
Change HTML to this: removing the white space in your markup..
<li class='active'>Home</li><li>Gallery</li><li>About Me</li><li>Contact Me</li>
or..
<li class='active'>Home</li><!--
--><li>Gallery</li><!--
--><li>About Me</li><!--
--><li>Contact Me</li>
As an alternative to removing the white space, you can always add a negative margin:
header nav ul li {
margin:0px -2px;
}
or set the font-size to 0px on the parent..
Note, there is still a 1px gap because of this in your CSS:
border-left: 1px solid #2d2d2d;
... if you wanted to, you could avoid all of these 'hacks' and just change the element from inline-block to a floating element.
That's because you have li as inline-block.
Set this:
nav > ul {
font-size:0;
}
nav li {
font-size:16px;
}
And done.
You can remove all whitespaces, compress codes and that works pretty well. Even cross browser.
You could fix that like this, here's a FIDDLE
header nav ul li {
float: left;
list-style: none;
line-height: 150px;
padding: 0 20px;
border-left: 1px solid #2d2d2d;
}
use all selector to set padding and margin then use box-sizing
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0;
margin:0;
}
Demo: http://jsfiddle.net/EaAvx/2/
I'm using an HTML/CSS menu from the article SuckerFish Dropdowns. My particular menu has a grey background. I am trying to get the menu's background to have a fixed width. I tried adding a width parameter to the #navbar section in the CSS but that didn't seem to do anything. How do I get this fixed width behavior?
HTML
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li>System Set-Up & Status
</li>
<li>NMEA Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li></ul>
</li>
<li>UDP Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li><li></li></ul>
</li>
<li>Baro / PoE
</li>
<li>Advanced
</li>
<li>MOB
</li>
</ul>
CSS
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc;
color: #000000;
text-decoration: none; }
#navbar li a:hover {
background-color: #999999; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #c0c0c0;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #999999; }
The CSS snippet is here and the HTML snippet is here
jsfiddle of question:
The #navbar is taking the appropriate width, but it does not have a background-color set so by default it is transparent.
Remove background-color from #navbar li a and add it to #navbar instead. You will also have to remove the height and clear your floats for it to work properly:
#navbar {
background-color: #cccccc;
margin: 0;
padding: 0;
overflow: hidden; /*clear floats */
}
Working example: http://jsfiddle.net/UfuG2/
Since you're floating your menu list items, you'll want to put a clearfix on the unordered list. Then you can set the width and background-color on the ul. Check out http://jsfiddle.net/qT7xs/.