This question already has answers here:
I need an unordered list without any bullets
(16 answers)
Closed 6 years ago.
Im working on a project and im using some ul and li's.
But i cant seem to figure out how to remove those pesky black dots that come with those lists.
Can any of you help me with this?
Edit: i completely forgot to search this site if there was already an answer (derp) turns out there was! Marked this as a duplicate, thanks for helping me everyone!
Relatable post
Those black dots you are referencing to are called bullets.
They are pretty simple to remove, just add this line to your css:
ul {
list-style-type: none;
}
There you go, this is what I used to fix your problem:
CSS CODE
nav ul { list-style-type: none; }
HTML CODE
<nav>
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
<li>Cheese
<ul>
<li>Smelly</li>
<li>Extra smelly</li>
</ul>
</li>
</ul>
</nav>
CSS :
ul{
list-style-type:none;
}
You can take a look at W3School
Related
This question already has answers here:
Why is my background color not showing if I have display: inline?
(6 answers)
Inline container isn't showing background color when wrapping elements [duplicate]
(1 answer)
Closed 1 year ago.
In this little example I have attached I expected the yellow background to extend to the li tags that are children of the ul but this seems not to be how it behaves when display:inline is applied to the ul tag.
What's the logic behind this behaviour?
P.D. I know how to fix this issue. I could make the ul tag an inline block, but this is not what this question is about. I exactly thought that the below code would have behavef as if display-block was applied. In the end, you have a tag surrounding a content. display:inline makes it show in the same line but shouldn't it big as big as its content?
.li {
background-color:red;
}
.inline-ul {
display:inline;
background-color:yellow;
}
.inline-li {
/*display:inline;
background-color:green;*/
}
<html>
<head>
</head>
<body>
<nav>
<ul class="mainMenu">
<li>Item1</li>
<li class="li">
<span>Item2</span>
<span>Item3</span>
<ul class="inline-ul">
<li class="inline-li">Item11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</nav>
</body>
</html>
I am making a webpage for a college project.
I have a navigation bar made with an unordered list and css, and i cannot figure out how to create a bulleted list on that page without it also going into the nav bar.
I am new to programming and html in general.
HTML
<ul>
<li>
Home
</li>
<li>Hobbies</li> <li>Contact</li>
<li>Image Gallery</li>
</ul>
thank you
Change your menu html tags to <nav> <ul> so that it looks something like this...
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Then apply your menus CSS to that style set only i.e.
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Now you can create your bullet point list normally on the same page without conflict. i.e.
<ul>
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1</li>
</ul>
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
You can use a class or id from your CSS. E.g.
.nonbulletnav {
list-style-type: none;
}
Or
#nonbulletnav {
list-style-type: none;
}
Then in your html code just give that class or id to <ul> element as:
<ul class="nonbulletnav">
....
....
</ul>
list-style-type is an important attribute. With this you can style the bullets in different ways like use square instead of circular bullets. You can read about it on MDN. As it is obvious list-style-type: none takes off the bullets and indents the list element properly.
To create a bulleted list, use the unordered list tags <ul></ul> and list item <li></li> tags as shown in the example below.
<ul>
<li>Example</li>
<li>Example2</li>
<li>Example3</li>
</ul>
The above example would create a bulleted list as shown below.
Example
Example2
Example3
If you wanted to change this list to an ordered list (numbered list), change the <ul></ul> tags to <ol></ol>, as shown in the example below.
<ol>
<li>Example</li>
<li>Example2</li>
<li>Example3</li>
</ol>
The above example would create a numbered list as shown below.
1.Example
2.Example2
3.Example3
If you wanted to apply CSS style or use an image as your bullet list, create CSS code similar to the example below.
#content ul li
{
list-style-Type: none;
padding: 0 0 4px 23px;
background: url(http no-repeat left top;
}
In this example, using an external .css file, we're telling the web page to only change the bulleted items in the <div id="content"></div> section. If you want all bulleted items to change, you can remove the #content in the above example. In the second line, the list-style-Type: none; tells the browser to display no bullets. In the third line, the padding: 0 0 4px 23px; is the padding and indent around the bullets. Finally, the last background line tells the browser to use an image as the bullet and where to display it. With this CSS code, we get bullets as shown below.
I am just starting out in web coding and am gettng an issue with positioning of menu bar items when I trying to recreate the BBC website. The menu options should go from right to left but are instead just being shows as a list which is on the same line as the logo and sign in section at the top.
I hope you can assist in telling me where I am doing wrong. Here is my jsbin code dump:
https://jsbin.com/wuteni/edit?html,output
Any assistance or tips will be most appreciated.
#topmenudiv ul {
margin:0;
padding:0;
list-style-type:none;
}
#topmenudiv ul li {
display:inline;
vertical-align:top;
}
And to now have the images also in-line change HTML to:
<div id="topmenudiv">
<ul>
<li><img src="images/signin.png"/></li>
<li><img src="images/bbclogo.png"/></li>
<li> News </li>
<li> Sport </li>
<li> Weather </li>
</ul>
</div>
I have being trying to find a solution with a menu i have on a custom html website that it is not appearing but i can't for some reason find a solution and i'm quite curious what i'm doing wrong.
<div class="header_area fix" id="header">
<div class="header_top fix">
<div class="left_logo floatleft fix">
<img src="img/logo.png" alt="Burning Desire Stoves Fireplace and Fire Centre" />
</div>
<div class="main_menu floatright fix">
<button style="floatright" id="mobile_button">Menu</button>
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">Stoves
<ul>
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul>
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
</div>
</div>
You can check the website here
The site is a for a client of mine he said he added some extra menu option without touching the css and then the menu broke. More importanly the dropdown of the menu is not appearing and i was trying to make come the surface with some display:block or z-index with no luck.
Also he has add a PHP CMS called Couch which is adding tag.
To give you a better idea the following code as actually a snippet and it is located in a most likely cms path "editor/snippets/header"
.main-menu>ul>li>ul {
position:absolute;
}
Your Menu Has a Dropwown but it is not hidden , so it takes some space. and the header has oveflow hidden, so the menu is becoming hidden entirely.
Add this css and your menu will be shown,
but you need to add code for dropdown to work.
This CSS is all kinds of jacked up.
The issues:
overflow: hidden on the .fixed element is causing the text to disappear.
As far as I can tell, there's no CSS that displays the drop down lists on hover
The drop down lists aren't hidden, so they're taking up space forcing the main list out of the nav bar
There's still list-style-type:disc for the li elements
I'll fiddle with it for a minute, but those are the issues.
Update I fiddled with the CSS and got the dropdowns to display. You'll have to make them look pretty with some CSS, but they're working. Yeah, it's kind of hacky, but I did what I could with the 5? CSS sheets all competing for screen time.
/* menu extra css */
.dropdown:hover .dropdown-hidden {
display:block;
}
.dropdown-hidden {
float: none!important;
display: none;
position: absolute;
z-index: 99999999;
left: 0px;
background: #fff;
}
.dropdown-hidden li {
display: block;
float: none!important;
position: relative;
}
.fix {
overflow: inherit!important;
}
li {
list-style-type: none;
}
-
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">
Stoves
<ul class="dropdown-hidden">
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul class="dropdown-hidden">
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
This question already has answers here:
Should I use <ul>s and <li>s inside my <nav>s?
(9 answers)
Closed 9 years ago.
today i wanted to have a closer look over the nav element from html5. and i've seen on most websites that the way it should be used is with an ul li inside. Well that wouldn't be very semantic because the nav element already acts like a list. Even on MDN i've seen the example using nav ul li elements. But how about just simple nav with links inside and even dropdown
<nav>
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
<a href="#" id="dropdown-menu">Dropdown
<nav class="dropdown">
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
</nav>
</a>
</nav>
Is it semantic, is it wrong ? if it's correct the way i used why everyone uses ul li elements inside of nav ?
Update: just for the example i've updated the topic and added the css and js
Javascript
$('#dropdown-menu').on("click", function(e) {
$('.dropdown').slideDown(100);
});
CSS
.dropdown {
display: none;
}
I think good practice (required for wordpress for example) is building navigation this way:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</nav>
Always use ul, it's natural - navigation is a list.