Here's my code:
ul.top-ten li:before {
list-style-type: none;
font-family: 'fontello';
content: '\f08e';
margin:0 5px 0 -15px;
color: #ff9900;
}
I thought this line would strip the bullets away:
list-style-type: none;
However, no joy.
Here's the HTML:
<ul class="top-ten">
<li>Apples</li>
<li>Pears</li>
<li>Lemons</li>
<li>Peaches</li>
</ul>
So all good right? Apparently not...the bullets are still there...any idea why?
"list-style-type" property is applicable on the ul item type. I guess you are trying to add some content for each list item using the before pseudo selector. What you need to do move list-style-type: none; property to ul.top-ten selector.
ul.top-ten {
list-style-type: none;
}
ul.top-ten li:before {
font-family: 'fontello';
content: '\f08e';
margin:0 5px 0 -15px;
color: #ff9900;
}
This should work fine.
Try this, list-style-type needs adding to ul not li (css-tricks)
ul.top-ten {
list-style-type: none;
font-family: 'fontello';
content: '\f08e';
margin:0 5px 0 -15px;
color: #ff9900;
}
add to your li tag list-style: none;
ul li{
list-style: none;
}
Related
On my website the menu looks fine when you just visit the homepage. As soon as you open one of the menus the selected menu turns to bold and the last menu item jumps to the line below.
I want the menu to be displayed on one line and not jump to the row below, but I can't seem to find the part that's scr*wing me over. Anyone have any suggestions or know what's wrong?
You can reserve space for bolded font through adding not visible after content. Here is JSFiddle http://jsfiddle.net/2r4xby06/1 (demo is on hover)
CSS:
ul {
font:normal 16px Arial;
}
li, a {
display: inline - block;
text - align: center;
}
a {
padding: 4px 8px;
text - decoration: none;
color: #333;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
a::after {
display:block;
content:attr(title);
font-weight:bold;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
text-transform: uppercase;
}
HTML:
<ul>
<li>Home</li>
<li>Ploegen</li>
<li>VOOR DE JONGSTEN</li>
<li>KALENDER/STAND</li>
</ul>
Change this
#access .current_page_item > a, #access .current_page_ancestor > a
{
font-weight: bold;
}
To
#access .current_page_item > a, #access .current_page_ancestor > a
{
font-weight: normal;
}
or
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 3em; /*set this to 3em or 3.6em*/
padding-left: 0;
border: 1px solid red;
}
or
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1em; /*set this to 1.2125em to 1em*/
text-decoration: none;
}
#access div {
margin: 0px 8%;
}
This will solve the problem.
When one of the <li> is bold it overflows ( the width becomes bigger ) cause the margins parameters can't be met. So either remove bold or adjust the margins.
I have a top menu bar and when the mouse hovers over each menu item it turns purple.
One of these menus also has a drop down list of further items. When I move the mouse cursor down through these sub-menus the top menu goes back to the original style. I would like it to stay purple even when I am hovering over the sub-menu items. Website is here, if you hover over sub-menu under "About" it shows the problem.
I have searched through a few similar stackoverflow answers. For example this problem and previous answer here. I tried a change from this
#topnav li a:hover {}
to
#topnav li hover:a {}
But neither this suggested change or the original keeps the top menu purple. Full code below:
#topnav {
clear: both;
background: url(nav-bg-orange.png) no-repeat;
height: 87px;
width: 962px;
padding: 6px 63px 6px;
}
#topnav ul {
list-style: none;
float: left;
}
#topnav ul li {
list-style: none;
float: left;
padding: 3px 0 0 0;
border-left: 1px dashed #f38739;
}
#topnav ul li:last-child {
border-right: 1px dashed #f38739;
}
#topnav ul li a {
float: left;
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 15px 20px 15px 20px;
border: 0;
outline: 0;
line-height: 1;
list-style-type: none;
text-transform: uppercase;
}
#topnav li#active a,
#topnav li:hover a {
color: #fff;
background: #745b7c;
display:block;
border-radius: 5px 5px 0 0;
}
/****************************** flyout menus ******************************/
#wsite-menus .wsite-menu li a {
font-family: Tahoma, Geneva, sans-serif;
padding: 11px;
color: #fff;
background: #745b7c;
border: 0;
border-bottom: 1px dashed #9e89a4;
}
#wsite-menus .wsite-menu li:hover a {
color: #fff;
background: #8c7395;
}
You might want to try putting your
#wsite-menus
menu nested in element with class
.wsite-nav-3
In that case it should work correctly.
<li id="pg524622535697207710" class="wsite-nav-3" style="position: relative;">About <div id="wsite-menus"><div class="wsite-menu-wrap" style="position: absolute; left: -1118px; display: block; top: 47px;"><ul class="wsite-menu" style="display: block;"><li id="wsite-nav-977240454937878932" style="position: relative;"><span class="wsite-menu-title">Hatha Yoga</span></li><li id="wsite-nav-788960178245244400" style="position: relative;"><span class="wsite-menu-title">Yin Yoga</span></li><li id="wsite-nav-226130023988115977" style="position: relative;"><span class="wsite-menu-title">Yoga for Men</span></li><li id="wsite-nav-104813911397431638" style="position: relative;"><span class="wsite-menu-title">Prenatel Yoga</span></li><li id="wsite-nav-176000207649938754" style="position: relative;"><span class="wsite-menu-title">Private Classes</span></li><li id="wsite-nav-558168910269966978" style="position: relative;"><span class="wsite-menu-title">Yoga for Business</span></li></ul></div></div> </li>
I haven't checked it on my own, but there's a good chance it's OK.
I asked a friend to take a look at this for me. In ordre to fix the menus I needed to change the javascript that currently animates the sub-menus. Unfortunately, because I'm using a Weebly based template I can't access this code to change it. So looks like a dead-end.
Excuse me. Are you new to CSS?
All you have to do is use UL:HOVER. That's because you're removing your mouse from the LI. So use UL as the trigger. Even if you change LIs, the UL won't go off. :)
I have a menu with four items and each one of them has a different colors.
My challenge is to darken each item on hover and I know I can use opacity to achieve this but before that, every time I hover on one of items it only highlights part of it and skips the padding. I know it is a stupid question to ask but this is my first front end job since 1999 :)
Could you please help me with understanding what is wrong here? thank you all.
this is the menu structure
<div class="menu-bar-inner">
<ul class="menu-bar-menu">
<li class="color1">Item 1</li>
<li class="color2">Item 2</li>
<li class="color3">Item 3</li>
<li class="color4">Item 4</li>
</ul>
and this is my CSS
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}
You can use this for hovering:
.menu-bar-menu li:hover, .menu-bar-menu li:hover a {
background-color: black;
}
it take care of both li element and its child anchor when li is hovered
Demo :http://jsfiddle.net/DajQ9/1/
I'd take the padding off the li elements and put it on the a elements instead. Also, set a to display: block;, so it occupies the entire height and width of its parent li. Like so:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a {
display: block;
padding: 10px 20px;
}
Here's a fiddle: http://jsfiddle.net/82uyt/
Also, you were missing the closing </div> tag.
While there are many ways to fix this, the root of your issue is the fact that you're padding both the container AND the link inside it when you style the li and the li a in one shot. What you're left with is an a tag that has padding inside an li that has padding, and the padding of the li tag is the unchanging color. By adding:
.menu-bar-menu li{
padding:0;
margin:0;
}
AFTER the declaration you have, you can fix this, or simply separate out your declarations to make it a bit more obvious. Also, when in doubt, a tool like the Firebug extension for Firefox will be your best friend. You can launch it, then click an item in your page to see the styles that are affecting that exact piece... sometimes just the highlighting/border while you move around is enough to make you see what's happening.
Yoy need to apply padding to the element on which you are applying the hover action. Here is your code updated. Visit this link: http://jsfiddle.net/dnPmE/1/
css:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
.menu-bar-menu li a{
padding: 12px 40px 14px 40px;
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {
background: #ce5043;
}
.color2 {
background: #fb8521;
}
.color3 {
background: #444444;
}
.color4 {
background: #b3c833;
}
Ok,
So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet.
This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty.
ie8 bug http://www.rocketspark.co.nz/bug_images/ie8_list.png
When I remove the a tag from the li then it jumps back up.
Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my css?
Any insights would be much appreciated.
As asked here is some code
<div id="sub_nav">
<ul>
...
<li><a class="active_page" href="#">Liposculpture</a>
<ul>
<li>What is Liposculpture?</li>
<li>About Liposculpture surgery</li>
<li>After Liposculpture surgery</li>
<li>Post Op Instructions</li>
<li>Liposculpture Side Effects</li>
<li>Liposuction Introduction to</li>
<li>Tumescent Liposculpture</li>
</ul>
</li>
...
</ul>
</div>
For the CSS I will try and show it best I can
#sub_nav li {
width: 200px;
padding:4px 0;
border-bottom: 1px #CCC solid;
}
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
#sub_nav li ul li {
list-style-position: inside;
list-style-type: disc;
font: 11px Arial;
padding-left:15px;
color:#FFF;
border-bottom: none;
}
#sub_nav li ul li a {
padding:0;
margin:0;
text-indent: 0;
}
Hope this helps
change
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
to
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: inline-block;
*display: inline;
*zoom: 1;
}
#salgiza posted the answer in the comments above... "it looks like IE8 is having problems when calculating the width of the "a" (displayed as block) and pushing it down to a new line. The first thing I would try would be adding a width to the "a" element, to see if that's the problem."
I'm not expert about css menus. But I know basic system to make css menu.
I used this system before and works, but this time it is not working.
The site is http://www.uniethos.com. Please check this site
This menu works with all other latest Browsers. But not with IE 6 & 7. I know IE6 don't support hover except anchor. So before I was using Whatever Hover. But this time it is not working and even with IE7. I don't know why its happening. May be there could be some problem with my css. Please check the css.
If you don't have IE 6 or 7 installed you can run one from http://spoon.net/browsers/. Require to install one plugin.
The CSS I'm using for the menu is
.glossymenu{
background: #B4B3B3;
height: 30px;
width: 100%;
padding: 0;
margin: 0;
display:inline-block;
position:relative;
}
.glossymenu ul
{
list-style: none;
padding: 0px;
margin: 0;
padding-left: 0px;
}
.glossymenu li ul
{
display:none;
position:absolute;
width: 80%;
top:30px;
left:0px;
background-color:#5B0C10;
border:0px;
z-index: 99;
}
.glossymenu li li a
{
padding: 0px 10px 0px 10px;
}
.glossymenu li li a:hover
{
background : #871016;
}
.glossymenu li{
float:left;
padding: 0;
}
.glossymenu li a{
float: left;
display:block;
position:relative;
color:#FFF;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #FFF;
background: #5B0C10;
background-position: left;
text-decoration: none;
}
.glossymenu li a:visited{
text-decoration: none;
}
.glossymenu ul li:hover ul
{
display: block;
}
Well I didn't found the problem. But I fixed the menu with custom Javascript code.
sfHover = function() {
var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
People those are also facing the same problem may find this helpfull.
Thanks.
Ofcourse whatever:hover is best. But I don't know why that was not working.
If you face the same problem, you can use this javascript. But you have to understand the code.
sfHover = function() {
// You may have to change the "glossymenu" id with your one
var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
} } if (window.attachEvent) window.attachEvent("onload", sfHover);
In my case, I have a div id named "glossymenu". You have to change this with your id.
And also have to declare another CSS class named "over".
In my case -
.glossymenu li:hover ul, .glossymenu li.over ul
{
display: block;
}
This is enough for one level dropdown menu. You don't need whatever:hover if its ok with you.