See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo
Related
I used a tutorial to build a responsive navigation menu which was working great here:
http://nova.umuc.edu/~ct386b09/giotto/index.html
I added a logo and some other elements and have lost the hover when the media size changes as seen here:
http://nova.umuc.edu/~ct386b09/giotto2/index.html
I have have a feeling it's somewhere here but cant tell what it might be:
HTML:
<ul class="nav hidden">
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`
I can post the entire HTML/CSS if needed.
The problem is that your #header and #navbar have hardcoded height values and the .nav elements, while the #menu is float:left due to the nav class it has.
You need to set height:auto for the #header and #navbar in the mobile version and also either add overflow:hidden on the #navbar or remove the float:left from the .nav.
So the actual problem was that the .full-width element was overlaid on the open menu and it was intercepting the mouse events.
There is this rule in line 81 of your CSS for width below 759px :
ul.nav {
position: static;
display: none;
}
And there is no hover rule which changes that diplay: none. So you should add this rule directly under the one above:
#navbar:hover ul.nav {
display: block;
}
Good afternoon,
I am trying to create a menu bar with a sub-nav under some parents, however the childs are not aligning.
I have change the child bicolour to red to highlight the concern.
There is a chance that by entering the sub-nav text may cure the concern.
I have listed below the CSS and HTML.
Kind regards
Gary.
Danceblast
Your problem is this:
#dropnav ul li {
margin-left: 20px;
}
It's being applied to the subnav's child li's aswell, you can target the subnav directly and set the margin to 0
#subnav li {
margin-left:0px !important;
}
OR
#dropnav #subnav li {
margin-left:0px;
}
if you dont want to use !important.
#dropnav ul li {
margin-left: 20px;
}
You want to remove the margin as well as you want to check for your text-alignment.
At the moment your elements use
text-align: center;
on all its parents and childs. You probably want that to be:
text-align: left;
Hope that helps.
I have a bullet points issue in Internet Explorer. I already tried to remove the doubled displayed bullets in ie, but I can't figured out why they always be displayed. In Internet Explorer 11 it shows my own icon (a green hook) and the generated icon from the browser. I want to keep the green hook and would like remove the gray bullets. Please take a look here.
If you don't have Internet Explorer, please take a look at my . Thanks!
My CSS Code to generate the bullets:
ul,li, .nav ul, .nav li {
list-style:none;
list-style-type: none;
list-style-position:inside;
margin:0;
padding:0;
}
.content ul{list-style:none;margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
content:'';
background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
background-position:left center;
padding:0 0 0 20px;
margin:0 0px 0 0;
list-style:none;
white-space:normal
}
.content ul {padding: 0 0 0 15px;}
.content ul li ul {padding: 0 0 0 15px;}
.content ul li.list:before{background: none;}
The bug comes from pagespeed optimization. When I add the css code directly before the closed body, then the unwanted bullets appear. If I embedded the css file directly in the head, then everythings theem to be ok. I hope someone need this solution too.
I'm having the same trouble of nickName: I just applied a speed optimization appending static resources at the end of body tag (couldn't make dynamic ones) and IE11 doesn't render (some of) the LIs correctly. When I moved the
<style type="text/css">
ul li {
list-style: none;
}
</style>
part to the header, everything restarted working correctly.
The solution is to load the CSS code lazy with JavaScript loadCSS from scottjehl. His framework loads a CSS file asynchronously. Please search for loadCSS from [c]#scottjehl, Filament Group, Inc.
Please remove list-style-position: inside; from line 3 of your CSS file. It will remove bullets from list items.
To remove bullets and tick marks from social buttons, you need to use background image wisely and target specific pseudo element. Please read about it in CSS specification to understand it better.
.socializm ul li:before {
background: none;
}
It's because you applying list-style: none; to the parent and not the child li. Your also applying it to the pseudo-class :before. You just need it on the actual list-item itself.
You code is:
.content ul{list-style:none;margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
content:'';
background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
background-position:left center;
padding:0 0 0 20px;
margin:0 0px 0 0;
list-style:none;
white-space:normal
}
Your code SHOULD be:
.content ul{margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
content:'';
background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
background-position:left center;
padding:0 0 0 20px;
margin:0 0px 0 0;
white-space:normal;
}
/* -- added -- */
.content ul li{ list-style: none; }
Css:
li {list-style: none;}
you need to apply, use just tag li and that's it. The problem is solved
I want to make a list with list-style-type: disc; to list some programs.
But the list-items don't get this "disc" and have scrollbars , i don't know why... look here (Link).
It just should be a list with the disc-icon and no scrollbars on the right for every list-tiem.
html:
<ul>
<li>flashtool</li>
<li>test</li>
</ul>
css:
ul {
list-style-type: disc;
}
The problem is in the declaration of the following class.
main > ul li
{
overflow:auto;
}
The above code will point the first level ul under main. That is perfect. But look at the next selector. It will select all the child-selector of li. This is wrong in your case. It should point only first level of li also. Update the code like below. It will work.
main > ul > li
{
overflow:auto;
}
The reason why your list-style-type is not working is the absence of list-style-position: inside. So your CSS need the following modification:
main > ul li .content > ul {
list-style-type: disc;
list-style-position: inside;
}
in your common.css line number 4
Use
.content ul{
list-style-type:disc;
list-style-position:inside;
}
if you want to remove scrollbar set overflow:hidden
I've removed the bullet on my lists using
ul li { list-style: none; }
But I'm still getting an indentation on the lists as if the bullet was there.
I need the list-item in the image to be exactly centered.
Browsers ship a default styling attached to <ul/> and <li/> tags
ul,li { list-style-type: none;
list-style-position:inside;
margin:0;
padding:0; }
http://meyerweb.com/eric/tools/css/reset/
All the answers provided will fix your issue, but I definately recommend that you look in to using a reset stylesheet so you don't have cross browser issues!
The best one (well most popular one at least), is most likely this:
http://html5doctor.com/html-5-reset-stylesheet/
Hope that helps your issue, but if you don't want to use a reset style sheet simply:
ul, li{
margin: 0;
padding: 0;
}
You can also add a margin and padding 0:
ul li {
list-style: none;
margin:0;
padding:0;
}
If you want to center the text, try
li{
padding-left: 0px;
padding-right:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}