I am using this code:
#menu {
margin: 0;
padding: 0;
display: block;
overflow: auto;
}
#menu li {
margin: 1px;
padding: 0;
float: left;
}
#menu li a {
display: block;
padding: 2px;
padding-left : 15px;
padding-right: 15px;
font-family: "Tahoma";
font-size: 18px;
color: #8f8b20;
text-decoration : none;
}
#menu li a:hover {
background-color: #dad68c;
padding: 2px;
padding-left : 15px;
padding-right: 15px;
}
#menu li a:active {
color: #ffffff;
background-color: #dad68c;
padding: 2px;
padding-left : 15px;
padding-right: 15px;
}
<ul id="menu">
<li>Home</li>
<li>Foods</li>
<li>Gallery</li>
<li>Site Map</li>
<li>About us</li>
<li>Contact us</li>
</ul>
For a Horizontal CSS menu which is working fine on jsFiddle but when i am using it in my site.. it is giving me bullets of the list, see the image below....
HOW TO GET RID OF THESE BULLETS
F1 F1
Help !!!
Any Key
Modify this style:
#menu li {
margin: 1px;
padding: 0;
float: left;
}
Like this: (You are missing list-style property)
#menu li {
margin: 1px;
padding: 0;
float: left;
list-style:none; // this should remove the bullets
}
More Info:
http://www.w3schools.com/CSS/pr_list-style-type.asp
Have you tried list-style?
ul {
list-style: none;
...
...
}
The CSS code is missing a rule for ul setting list-style: none
You need to override the default <li> style by adding list-style: none; to #menu. Adding that to #menu li will have the same effect, but it takes 3 extra characters. :)
The reason jsFiddle looks fine is that the CSS they're applying to the whole page is dealing with it for you.
Read more about list-style-type, and the short-hand list-style (used above).
Related
I'm trying to add a space above my navigation bar, however the code I'm using is failing to do so.
My CSS
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
A Fiddle
https://jsfiddle.net/xuk2nk46/
.top-nav {
padding-top: 40px;
}
u have given two values to top-padding
.top-nav a {
padding-top: 40px;
}
and
.
top-nav ul a {
color: #000;
padding: 0 10px;}
the second one is applied which is 0 px
.top-nav{
margin-top: 10px;
}
and remove the padding , or keep only one.
Try adding margin-top to .top-nav:
.top-nav {
margin-top: 20px;
}
Margin adds a space outside the element, while padding adds a space inside the element.
By default <a> in an inline element. So padding with top and bottom values won't apply.
You have to change the default type by inline-block to add top and bottom padding on it.
Also, you can group this two properties .top-nav a and .top-nav ul a together like this :
.top-nav ul li a {
display: inline-block;
color: #000;
padding: 20px 10px;
text-decoration: none;
font-size: 20px;
}
And then, you can set top and bottom padding values with this property : padding: 20px 10px; or use margin property like this margin: 20px 10px;
Just add a margin to your .top-nav :
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.top-nav {
margin: 30px 0 0 0; /* ADD MARGIN HERE */
}
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
<nav class="top-nav">
<ul>
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>Join Us</li>
</ul>
</nav>
(see also this Fiddle)
I'm having trouble with adding space to the hovered "home" right/left.
Adding proper spacing so after the hovered section of "home" appears that about and the other pages would follow.
CSS:
nav {
width:460px;
height:50px;
background-color:#0066ff;
float: left;
margin: 15px 0 0 324px;
position: fixed;
}
nav ul {
margin: 0;
padding: 0;
position: fixed;
width:493px;
border: 1px solid green;
}
nav li {
float: left;
text-align: left;
margin:0;
padding: 0 0 0 24px;
display: block;
width: 51px;
height: 50px;
}
nav li:first-child {
float: left;
text-align: left;
margin:0;
padding: 0 15px 0 0;
display: block;
height: 50px;
}
nav a:first-child {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav a {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
color:#fff;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
This problem has been giving me headaches for hours.
Link Update
The blue space beside about can't happen.
Nick, your issue is in the li:first-child selector. Specifically the padding attribute, where it clears the padding, where you're missing the spacing.
Many of your :first-child selectors are redundant, and don't need to be re-specified.
Mixing position:fixed with float:left is generally not a good idea as your CSS will be fighting layout structure.
You only need a position:fixed for the main container, the rest the nav's children will be relative to that.
There's a lot of unnecessary padding and such, you should use your browser's DOM inspector to play with the layout.
Check this JSFiddle that's cleaned it up.
A lot of the time, a small <div> is placed to the left of the "home" link to push it over like so:
#fillerdiv{
width:20px;
background-color:#0066ff;
}
then you could place it like so:
<nav>
<ul>
<div id="fillerdiv"></div>
<li> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
That produces this:
Or you could give the "home" button a specific class and add extra padding for it alone.
#home{
padding-left:20px;
}
And the HTML:
<nav>
<ul>
<li id="home"> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
I played around your code a bit and tried to simplify it. I hope you don't mind.
JSFiddle
/* styles.css */
nav {
float: left;
background: #0066ff;
border: 1px solid green;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
float: left;
display: block;
}
nav a {
margin: 0;
padding: 0;
padding:20px;
color:#fff;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.
My links have these dots in them. As the picture shows.
My code is simple:
HTML
<div id="nav-wrapper">
<div id="navbar">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and the CSS
#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}
#navbar {
}
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}
My question is what is causing these dots? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.
You want to use the code - list-style: none;
so your code will look like
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}
Add this style:
list-style-type: none;
To this selector:
ul#nav li
Modify your declaration for ul#nav li to include this property
list-style:none;
http://jsfiddle.net/bcDDk/
Good evening,
I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!
my css codes are as follow:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
following is my partial html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Crawler</li>
<li>Visual Analytics</li>
</ul>
</div>
Cheers,
ZH
Here is working code:
http://jsfiddle.net/surendraVsingh/vU4C8/1/
Changes to be done in CSS:
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block; /* Add This*/
}
Note: display:inline-block is added so that ul will only take width according to its li's unlike other block elements which take 100% width.
i don't know if this approach is "healthy" or not but it did the trick for me
#nav ul a{margin:0 -2px;}
I have this menu:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li>Start</li>
<li>Vad?</li>
<li>Kom igång!</li>
<li>Läringsartikler<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>Läringsfilmer<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
as you can see in navbar { i tried to use text-align: center or margin:auto but it still wont center the whole menu..
why?
when i change the navbar li to float center instead of float left then it make the whole menu stupid big
You need to specify a width on your navbar ul.
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
There is NO center value for 'float' style attribute
-- Oops dint see that comment
As mentioned, there is no Float:center. In order to center using margin-left and margin-right auto, you either need to set a width (as mentioned above) or change it to display:block.
If you don't want to set a width or can't, there's a CSS hack called Shrink Wrapping that is easy to setup.