|
CSS - Unorder List Bullets Hover Switching?
Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS?
I've tried something like this.. Code:
#ulist ul{
list-style: none;
}
#ulist li a{
list-style: square;
}
the list Code: <ul id="ulist"> <li><a href="#">Element 1</a></li> <li><a href="#">Element 2</a></li> <li><a href="#">Element 3</a></li> <li><a href="#">Element 4</a></li> </ul> But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element. If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it? Cheers, Fozzy Similar TutorialsI need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. What the hack? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must: - wrap around a floated element - have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements) I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas? I have this: Code:
li {
line-height: 25px;
}
Which does sort of what I want. What I really want is for the spacing between bullets to be 25px and the line spacing within a bulletted point to be normal .. is there a way to do that? Hi, I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong. How can I remove the circle bullets from the expanding menus on this page ? Thanks Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out? Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!) Code snippet is posted below. Cheers. from stylesheet: .bulletList li { margin-bottom: 1.5em; padding-left: 0.75em; list-style-image:url(../images/hsdmini.jpg); color: #547A98; } from page: <table width="100%" > <tr> <td align="left"> <ul class="bulletList"><strong> <li>Credit cards accepted</li> <li>Cheques accepted</li> <li>Delivery to europe</li> <li>40,000 products in store!</li> </strong> </ul> </td> </tr> </table> For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time. Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav. Below is code I'm using to troubleshoot: Code:
<ul><li><a href="#">dog</a></li>
<li><a href="#">cat</a></li>
<li class="here"><a href="#">fish</a></li>
<ul>
<li><a href="#">trout</a></li>
<li><a href="#">angel</a></li>
<li><a href="#">salmon</a></li>
</ul>
<li><a href="#">turtle</a></li>
<li><a href="#">elephant</a></li>
</ul>
Code:
li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}
If a user is on the page fish, they will see that bullet point to page salmon. Any recommendations? Hi, I am new to css and have written a code for a list menu in my page and i have added an image for instead of selecting the default bullets in css (ie. square, circle etc. so now my problem comes it looks perfect in Firefox browser but in IE 6 & 7 the position of the bullet image changes . In firefox it shows the bullet besides the text written and it is centered and perfect as i need but in IE 6 and 7 the image of the bullet moves up and sticks to the text instead of maintaining some distance with the text. i am providing u the link of my page below: r-interactive.net/clients/reed%5Fcss/ Also i am mentioning the css code which i have used for the list menu below : Css : Code: ul#listmenu {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #959595;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-indent: 5px;
list-style-type: none;
list-style-image: url(../images/main_images/img_industry_bullet.gif);
list-style-position: inside;
}
ul#listmenu li {
list-style-image: url(../images/main_images/img_industry_bullet.gif);
margin-top: 0;
margin-right: 0;
margin-left: 0;
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 0.5em;
padding-left: 0;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #207EC9;
clear: both;
}
Html : Code: <ul id="listmenu"> <li> Jewelry Industry</li> <li> Aluminium Industry</li> <li> Electronics Industry</li> <li> Pharmaceutical Industry</li> <li> Oil & Gas Industry</li> <li> Cosmetics Industry</li> </ul> Help is always appreciated. basically I'd like to build a four layer div element, the layer order by z-index should be interface layer, number presentation layer, background border layer and background layer here is my html code PHP Code: <style> .bg{background:url(images/bg.gif) no-repeat 0 0;} .borderLayer{background:url(images/border.gif) no-repeat 0 0;} .interfaceLayer a{display:block;height:50px;width:50px;padding:4px 0 0 0;cursor:pointer} .interfaceLayer a:hover{background:url(images/broder1.gif) no-repeat 0 0;} </style> <table> <tr> <td style="padding:10px;"> <div style="z-index:9999;position:relative;"> <div class="interfaceLayer" style="top:-2px;left:-2px;position:absolute;"><a><img width="50px" height="50px" src="images/pixel.gif"/></a></div> </div> <div style="z-index:99;position:relative;"> <div class="numLayer" style="left:28px;top:33px;position:absolute;z-index:100;"><span style="color:white;">100</span></div> </div> <div style="z-index:50;position:relative;"> <div class="borderLayer" style="top:-2px;left:-2px;position:absolute;width:56px;height:54px;"/> </div> <div style="position:relative;"> <div class="bg" style="width:43px;height:45px"/> </div> </td> </tr> </table> also js action will taken when interface Layer get onclick event which reset border layer and background image the code problem is when onclick action taken the z-index it seems doesn't follow, my numberLayer get screw by my broder layer image. more to mention the initial z-index appear to be in the right order I have this little menu on this site: http://kris.dreamhosters.com/mhw/ When I view it in IE6 it is shifted to the left several pixels. Upon hovering over it, it shifts to where it belongs. I've done some search both here and on google and just can't find an answer. Fortunately it doesn't seem to do this in IE7, but I still like my pages to work in IE6. Any insight greatly appreciated. Hi, I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though! I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together! Where am I going wrong?? Here's the CSS for the elements: Code: #leftcol{
float:left;
padding: 0;
width: 170px;
background-color: #FFFFFF;
}
#SectionNav {
background-image:url(../assets/images/sectionNavBack.png);
background-repeat: no-repeat;
background-color: transparent;
width:150px;
height: 323px;
left: 0px;
top: 0px;
padding-left: 0px;
display: block;
}
#SectionNav ul{
margin-top: 0px;
padding-top: 25px;
background-color: transparent;
list-style-type: none;
font-size: 80%;
list-style-image: url(../assets/images/ballBullet.png);
display: block;
}
#SectionNav ul li a{
color: #FFFFFF;
display: block;
margin-top: -5px;
padding-botton: 10px;
margin-bottom: 10px;
text-decoration: none;
height: 21px;
background-image: url(../assets/images/SectionBtnBack.png);
font-weight: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#SectionNav ul li a:hover, #SectionNav ul li a:focus {
background-color: #0000FF;
color: #FFCC00;
}
Here's the HTML: Code: <div id="leftcol"> <div id="SectionNav"> <ul> <li><a href="index.php">Home</a></li > <li><a href="#">News</a></li > <li><a href="#">Handicaps</a></li > <li><a href="#">Leaderboard</a></li > <li><a href="#">Competions</a></li > <li><a href="#">Media</a></li > <li><a href="#">Courses</a></li > <li><a href="#">Links</a></li > </ul> </div> <!--End of SectionNav--> </div> I've played around with the various margins etc but no joy. The page can be found at: http://beta.sussexeast-gs.org.uk/index.php Excuse the colours they're there to help me with layout for now. Thanks ok i have a list that has style:none. this list is a link.. now whenever a user wants to hover over it i want to add a pointer (arrow perhaps) on the left of the list... Code:
#menu li {
list-style:none;
}
#menu a, #menu a:visited {
text-decoration:none;
color:#0033FF;
}
#menu li a:hover {
list-style-image:url(images/pointer.jpg);
}
#menu a:hover {
background-color:#0033FF;
color:white;
font-weight:bold;
}
now html Code: <ul> <li><a href="home.php">Home</a></li> </ul> Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it. I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is: frontlinescreative.com/aljc2/indexCSS.html In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser. My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right. Any ideas on where I've gone wrong? In IE7, the list <ul> is present on pageload, but once you go mouse over it, it disappears. The hover works fine in FF and IE6. I don't think the system matters, but my testing is IE6, and FF on XP and IE7 is on a Vista machine. I've searched all over for a fix to this problem, but all I've been able to find are some issues with IE7 on <ul> lists and whitespace. My CSS is not great and some of the fixes talked about a hasLayout() set to true - which I don't know how to do - or if I was just reading that wrong. I know the issue is with the hover - because when I remove the css for the hover - it works fine and does not disappear. On a side note - if I'm on IE7 and I go into Internet Options and just click in and out - the page works fine. (Crazy MS). Code: <style type="text/css">
ul#listmenu
{
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}
/** unordered list item for top menu **/
ul#listmenu li
{
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
width: auto !important;
font-size: 14px;
line-height: 23px;
white-space: nowrap;
}
/** unordered list item link for top menu **/
ul#listmenu li a
{
padding: 0 17px 0 10px;
width: auto;
text-decoration: none;
color: #FFFFFF;
font-size: 14px;
background: url(../images/bullet_menu.gif) 0 6px no-repeat;
}
ul#listmenu li a:hover {
background: url(../images/bullet_menu_over.gif) 0 6px no-repeat;
text-decoration:none;
color: #FFA820;
}
table.tabletop {
margin: 20px 0 0 20px;
width: 100%;
}
</style>
<!-- start image header -->
<div style="position:relative; float:left;clear:left;width: 768px;height: 243px;background: #FFF;background: url(../images/banner.jpg) 0 0 no-repeat;">
<table cellpadding="0" cellspacing="0" class="tabletop">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td nowrap="nowrap">
<ul id="listmenu">
<li>
<a href="somelink.php" class="listmenu" >About Us</a>
</li>
<li>
<a href="somelink.php" class="listmenu" >Operations</a>
</li>
<li>
<a href="somelink.php" class="listmenu" >Customers</a>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- end image header -->
I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style. Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HOTWORKS</title> <link rel="stylesheet" href="stylz.css" type="text/css"> </head> <body class="top" id="bdy" > <!-- Site navigation menu --> <ul class="navbar" id="navlist"> <li><a href="tools.html"><br>Tools</a> <li><a href="glass.html"><br>Glass <br> Artwork</a> <li><a href="pottery.html"><br>Ceramic<br> Artwork</a> <li><a href="about.html"><br>About</a> </ul> <!-- Main content --> <h1> </h1> <p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> TOOLS - ART - MISCELLANEA <br> <address> </address> </body> </html> Code: #navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
Just to be complete, and in case there is something in here that you might need, here is the full css file: Code:
body.top {
padding-left: 11em;
font-family: Fantasy, "Times New Roman", Times, serif;
font-size:15px;
color: #000000;
/*background-image: url(images/tab3.jpg) ; */
background-position: 210px 10px;
background-repeat:no-repeat;
background-color: #000000;
margin-left:5cm;
}
body.top { background-image: url(images/tab3.jpg) ; }
ul.navbar {
color: #000000;
list-style-type: none;
position: absolute;
display:block;
float:left;
left: 1em;
}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar li {
text-align:center;
/* vertical-align:100px; */
background: #000000;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none ;
top:10%;
height:4em;
}
a:link {
color: white }
a:visited {
color: white }
#navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:144px;
height:137px;
color:#fff;
text-decoration:none;
background:url("images/drawer4.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
}
#navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
#navlist a:active {
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FFC741;
}
I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; }
But it doesn't change the links text colour. This is the first time I've ever not been able to hack around something. I am about to pull my hair out trying to figure out what i wrong with my bulleted menu in CSS. If you look at this page you will se that the arrow bullet for the list is aligning in the middle of a nested UL: http://www.porphyriafoundation.com/about-the-apf/scientific-advisory-board How on earth do I get that stupid little arrow to move up next to the parent item?! If you know the solution I will kiss you through the internet! Here is the CSS: Code: http://dev.porphyriafoundation.com/modules/system/system-menus.css?A
li.expanded (line 11)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
}
ul.menu li (line 8)
{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0.5em;
}
http://dev.porphyriafoundation.com/themes/apf_one/apf_one.css?A
#block-menu-primary-links ul.menu, #block-menu-primary-links li.leaf, #block-menu-primary-links li.collapsed, #block-menu-primary-links li, #block-menu-primary-links .item-list ul, #block-menu-primary-links .item-list ul li (line 135)
{
list-style-position: outside;
list-style-image: none;
list-style-type: none;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
background-color: #ffffff;
width: 173px;
}
#block-menu-primary-links .block-inner li.abouttheapf ul li.expanded (line 394)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 16pt;
}
Hi there, I have a menu system which uses <UL> etc, but it displays the bullet point. Is there a way to remove these bulllets? Many thanks! Here's a quicky before the weekend (FINALLY!!!)... Is there a way to detect if a user clicks on a bullet (or the entire LI tag)? I have this list, but I would like the browser to react differently when clicking on the LI text vs. the LI bullet icon. I've read about putting the icon in background and then moving the text, and this seems to work except for a bug concerning text wrapping... so please don't suggest that... I might be dreaming here... but the forums are usually very resourceful so why not!! Thanx a ton. Olografix Hello, What is the best way to adjust the vertical spacing between bullets? I tried inserting a br tag inbetween the li tags, but that isn't "valid" XHTML. So for now I'm using the margin-bottom property... Code:
li {
margin-bottom:20px;
}
Any suggestions? |
|||||||