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/
Related
I must create a navigation bar exactly how it's shown in the picture below. I was trying to for a whole day. You can see the only code I could write below. The problem is that I used a method from here: Separators For Navigation, but I don't know how to put links and borders to make it look like in the picture. The orange line under the navigation bar doesn't belong to it.
I have a PSD Photoshop file from which I can extract elements of the navigation bar. That's the source of the nav_border.png.
target navigation bar image
my result
My HTML code:
<div id="navbar">
<ul>
<li>First time at auction ?</li>
<li>Next auctions</li>
<li>Rules</li>
<li>Terms of use</li>
<li>FAQ</li>
<li>Contacts</li>
<li></li>
</ul>
</div>
My CSS code (so far):
#navbar {
float: left;
width: 776px;
height: 40px;
border-radius: 8px 8px 0 0;
background-color: #003366;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar a {
color: white;
text-decoration: none;
}
#navbar li + li{
background:url('nav_border.png') no-repeat top left;
padding-left: 10px;
margin-left: 30px;
}
Here's a fiddle that should get you headed in the right direction
https://jsfiddle.net/fx6gtj6o/
#navbar {
background: blue;
border-radius: 8px 8px 0 0;
ul {
list-item-type: none;
padding: 0;
li {
display: inline-block;
text-align: center;
padding: 10px 10px;
border-right: 1px solid black;
a {
color: #FFF;
}
}
}
}
No reason to use any of the images from the actual mockup, you can get everything done with CSS
I'm developing a responsive website and I'm having a little problem with the menu. I'll show the images below to be easier to understand what is happening ...
The menu on a desktop is shown as follows:
And in a mobile device it should be shown as follows:
And currently my code is rendered as follows:
I wish the sub menu was loaded under the menu when rendered on a mobile device, any suggestions how to do it?
Here is my html code:
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>
<ul id="sub-menu">
<li>Todas as categorias</li>
<li>Logo</li>
<li>Campanha</li>
<li>Print</li>
<li>Digital</li>
<li>Indoor</li>
<li>Projetos Especiais</li>
</ul>
</li>
<li>Trabalhe Conosco</li>
<li>Quem Somos</li>
<li>Prêmios</li>
<li><a class="select" href="#">Contato</a></li>
</ul>
The Css code for desktop:
#menu{
position: relative;
width: 200px;
margin: 0px 10px 0 0;
float: right;
background: rgba(255,255,255,0);
text-align: left;
text-transform:uppercase;
}
#menu li{
list-style: none;
}
#menu li a{
list-style: none;
font-family: 'swiss921_btregular';
text-decoration: none;
font-size: 22px;
line-height: 32px;
color: #231f20;
}
#menu li a:hover{
color: #ed1d24;
}
#menu li #sub-menu li a{
margin: 0 0 0 20px;
list-style: none;
font-size: 17px;
line-height: 34px;
font-family: 'swiss921_btregular';
}
#menu li a.select{
color: #ed1d24;
}
And the actual Css code for mobile:
#media screen and (min-width: 0px) and (max-width: 768px){
#menu{
width: 100%;
margin: 50px auto;
float: none;
text-align: center;
}
#menu li{
display: inline-block;
width: auto;
margin: 0 13px;
}
#menu li #sub-menu li a{
margin: 0;
}
}
I have fiddle it: http://jsfiddle.net/r3zeB/
That's basically it, hope someone can help me and sorry for my bad english. Thank you.
You can always place another copy of your sub menu where you want it to be on mobile. Then use a display:none; for it to be shown only when you want it and to hide the other one.
This is maybe not the proper way to do it but it would definitely works
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
I have a horizontal list menu, on which I want to use pseudo selectors: When you hover over the menu item, it should have a thick color underline. Each Menu item have a different width and its underlining effect should match that width
Here is a sample website with its underlining menus: http://www.theblackswantheory.org/
Here is my list:
<div id="other">
<div id="otherTable">
<ul id="ul1">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Google Search Optimization</li>
</ul>
</div>
</div>
CSS:
#otherTable{
display: table;
margin: 0 auto;
}
#otherTable ul{
list-style: none;
}
#otherTable ul li{
display: inline;
margin: 10px;
}
ul#ul1{
color: #fff;
}
So what is the best way of going about this? I tried several things but does not work well (tables, another list below with the underlines etc...)
I would like it pure CSS and no javascript if possible...Which I believe it is
Thank You
Use a bottom border to simulate an underline (see jsfiddle):
#otherTable ul li:hover {
border-bottom: solid red 0.2em;
}
ul#ul1 > li:hover{
text-decoration:underline;
}
http://jsfiddle.net/Tymek/2P8UL/
HTML
<div id="menu">
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Google Search Optimization</li>
</ul>
</div>
CSS
#menu ul,
#menu li,
#menu a {
background: #111;
}
ul#menu {
list-style: none;
}
#menu li {
display: block;
float: left;
}
#menu a {
display: block;
margin: 0 0.5em;
padding: 15px 0 7px;
color: #ccc;
text-decoration: none;
text-transform: uppercase;
font: 13px/18px Arial, Helvetica, sans-serif;
font-weight: 300;
}
#menu a:hover {
color: #fff;
padding-bottom: 4px;
border-bottom: 3px solid #f00;
}
Key part:
#menu a {
padding: 15px 0 7px;
}
#menu a:hover {
padding-bottom: 4px;
border-bottom: 3px solid #f00;
}
Next time use firebug, or something to analize your example.
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).