|
CSS - Invisible Link-list In Navigation-bar Doesn't Appear On Hover
Similar TutorialsI 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. Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! I have a navigation menu that is made of static images (not just the BG but the text as well.. Anyway, I am wanting a rollover to activate the sub-menu... How would I go about doing this? If possible, I'd like to avoid the use of JS... Instead of trying to explain how everything is setup, I have isolated the navigation HTML, CSS, & Images and placed them in a zip. Download: http://www. mediafire.com/?beyjy091wn9 Thanks, - ChrisBe http://i.domaindlx.com/wheelofgod/kingjames.asp The navigation bar isn't lining up I use Mozilla Firefox and the 2 images "examples" and "articles" are not in the column no matter how hard I tried. This might be a CSS problem. This is what I have: Code: /* Layout Stylesheet */
body {
margin:10px;
background:#FFFFFF;
color: #333333;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:1050px;
margin:auto;
}
#hdr {
height:60px;
background:#9ACD32;
color: #333333;
}
#bar {
height:25px;
background:#688E23;
color: #FFFFFF;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #FFCC80;
color: #FFFF33;
width:650px;
padding:0;
}
#l-col {
font: Verdana;
float:left;
background:#9ACD32;
color: #333333;
width:120px;
}
#cont {
width:800px;
background:#FFFFFF;
font: verdana;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:25px;
background:#9ACD32;
color: #FFFFFF;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Code: /* Presentation Stylesheet */
h3, p {
margin:0;
padding:15px;
}
h4 {
margin:0;
padding: 5px 0;
}
p:first-letter {
font-size: 80%;
font-weight: bold;
color:blue;
}
/*<![CDATA[*/a.piclink:active{color:red;background-color:grey;text-decoration:none}
a.piclink:visited{color:blue;background-color:grey;text-decoration:none}
a.piclink:hover{color:#B36B00;background-color:white;text-decoration:none}/*]]>*/
Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. This is kind of a continueation of a thread in the JS forum. But I am trying to do a CSS only thing here, so I thought it would be more appropriate here. I have these tabs that change color by altering the background position. Normal is orange, hover is yellow, and active is supposed to go kind of pink. Hover works fine as you see. But active does nothing, both in FF and IE. I gathered up all the style stuff that's relevant and put it all in the one file, tho that's not usually how I code things. But anyway, the code can talke clearer than I can. http://www.colleenweb.com/tests/atest.html Why doesn't active work??? It's late at night so the head isn't 100% but Ive been beating on it a while. Thanks!!! Hi, Could someone please help me to fix this error in my code. I created this website for my school, http://www.rit.edu/~cie/ but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this. Thanks in advance 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. I'm making a horizontal navigation menu using lists and CSS. It looks fine in IE, but in Mozilla, the double border on the bottom appears just beneath the top one, and the next line shows up after the unordered list. Hard to explain - you'd basically have to check it out for yourself: http://www.michaelaparicio.com/ Any help would be greatly appreciated! Thanks. Regards, Mike Aparicio I am going to heck right now trying to get this navigation to work. Here is what it is A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise? Helllo all: I am having difficulty getting a navigation list to display as separate boxes. I get one large box with all the clickable links therein. I want one box with each link place on it. Here is my HTML code for the list: <ul id="nav"> <li><a href="hey therel">flight1</a></li> <li><a href=" Eaglesoft">Eaglesoft</a></li> <li><a href="state police"">State Police</a></li> </ul> Here is the associated style rule:#nav{font-family:arial;border-styleutset; padding:10px;list-style-type:none; color:#000066;position:absolute;top:2.5in;left:9in; background-color:#ffff00;width:2.7in;text-align:center;display:block;} Can anyone tell me why this list is being parked in one box rather that three separate boxes. The name of my text editor is CoffeeCup. Please understand that I realize that the above html coding does not creat a link..this forum blocked my links..thanks Hi I've been trying make an <a> anchor nested within a <li> list tag appear on the same row as the bullet, with no avail. It's hard for me to explain exactly, so I've uploaded two images: This is how I'd like the list items to appear, substract the extra list item which I have no idea why it appears the Image 1 This is how the list items appear: Image 2 Here's the HTML: Code:
<div id="primary-sidebar">
<div class="shadow">
<div class="tlc"></div>
<div class="trc"></div>
<h2 class="box-title">
Games list
</h2>
<div class="box-content-lhz">
<ul id="games-list">
<li>
<a href="/intersection.html?anarchy_online">Anarachy Onlins</a>
</li>
<li>
<a href="/intersection.html?Aion">Aion</a>
</li>
<li>
<a href="/intersection.html">Aries Online</a>
</li>
<li>
<a href="/intersection.html">Cabal Online</a>
</li>
<li>
<a href="/intersection.html">Eve Online</a>
</li>
<li>
<a href="/intersection.html">Guild Wars</a>
</li>
<li>
<a href="/intersection.html">Harrier</a>
</li>
<li>
<a href="/intersection.html">Jaxsos' world</a>
</li>
<li>
<a href="/intersection.html">Kal Online</a>
</li>
<li>
<a href="/intersection.html">Lemmings</a>
</li>
<li>
<a href="/intersection.html">Leiviathan Online</a>
</li>
<li>
<a href="/intersection.html">Party Online</a>
</li>
<li>
<a href="/intersection.html">World of Warcraft (US)</a>
</li>
<li>
<a href="/intersection.html">World of Warcraft (EU)</a>
</li>
</ul>
</div>
<div class="blc"></div>
<div class="brc"></div>
</div>
</div>
Here's the CSS Code:
ul {
padding-left: 2em;
list-style: square;
}
#games-list {
list-style-image: url("/_images/bullet1.gif");
list-style-position: inside;
margin: 0px;
padding: 0px;
}
#games-list li {
}
#games-list a{
font-weight: bold;
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
color: #424547;
text-decoration: none;
display: block;
background: url(/_images/sprite-list.png) top left no-repeat;
padding: 5px;
padding-left: 20px;
}
#games-list a:hover{
background-position: left -40px;
color: #00a2ff;
}
I'd appreciate anyway help at all, as this has been on my mind for a while. 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? 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 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 -->
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 Hello, The hover link looks good on IE7 and FF but not on IE6 Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
position:absolute;
float:left;
font-size:11px;
color:#FFFFFF;
font-weight:bold;
left:190px;
top:130px;
width:145px
}
#header_navigation ul {
border:1px solid #FF0000;
float:left;
list-style-type:none;
margin:0 30px 0 0;
}
#header_navigation li {
width:145px
}
#header_navigation li:hover {
background-color:#FFFFFF;
}
#header_navigation a {
text-decoration:none;
color:#ffffff;
background-color:none;
}
#header_navigation a:hover {
color:#000000;
background-color:#FFFFFF;
width:145px
}
</style>
</head>
<body>
<div id="header_navigation"><!--begin of header_navigation-->
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="blog.asp">Blogs</a></li>
<li><a href="shoutbox.asp">Shoutbox</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code: Code: #print_category {
position: absolute;
left: 35%;
top: 30%;
font-size: 13px;
text-align: left;
line-height: 2 ;
margin-right: 5em;
}
Properties I want to apply: A:link {color: #000099; text-decoration: underline; } A:visited {color: #000099; text-decoration: none; } A:hover {color: #000099; text-decoration: none; } A:active {color: #000099; text-decoration: none; } How can this be done, Ive tried but to no avail: - A#print_category:active {color: #000099; text-decoration: none; } Thanks! |
|||||||