|
CSS - Display Flooting Div When Hover Another Href
Hello friends!
I have a menu item href called "underbar-tag0". When I hover this: the background of the class changes - as you can see in the code. Everything is fine. But what I also want is that when I hover the href: a (another) floating div should get visible. (First not showing, but when hover the menu href it gets visible) (the name of the "invisible" Div is protip, the position of it is not important at the moment.) This is what my HTML looks like. Code: <div class="protip"></div> <div class="underbar"> <a href="" class="underbar-tag0">Click here.</a> </div> This is what my CSS looks like. Code:
.protip {
height: 164px;
width: 191px;
z-index: 500;
position: absolute;
background-image: url(../../Root/recommended.png);
}
.underbar {
height: 42px;
width: 1100px;
}
a.underbar-tag0 {
display: block;
width: 90px;
height: 32px;
float: left;
color:#000;
background-image: url(../../Root/buy_blue.png);
background-repeat: no-repeat;
background-position: 0px 0px;
margin-right: 0px;
padding-top: 9px;
padding-left: 40px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 80px;
font-weight: bold;
}
a.underbar-tag0:hover {
color:#9C0;
background-image: url(../../Root/buy_blue.png);
background-repeat: no-repeat;
background-position: 0px -45px;
I have searched the Internet very long time without answers. Is this possible, like somehow link so when the class "underbar-tag0:hover" activates then "protip" is displayed? Sorry if my English is bad, I am from Europe but I think you understand me. Similar TutorialsHi, I just want to change the color when I mouseover an href without a style sheet. This does not work: <a href="test.html" style="a:hover { color: #DA8525; }">Test</a> Is that suppose to work? Hi, I have a link in my page. When the user hovers over the link, the page is flickering. This is the code I have used Code:
a
{
color: #42C0FB; background: inherit;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
line-height: 1.8em;
}
a:hover
{
color: #6C757A; background: inherit;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
<a href="WelcomePage.asp?UserName=User_nm" id="Welcome" title="Home Page" target="_blank">Welcome to my Page</a>
I am checking in IE 6 and IE 7. How to avoid the flickering, when user hovers over the link. Thank you I'm having a funky issue with a page in IE. I've got tables and have css setting the border properties of cells in the table. My issue is when mousing over Anchors in td's in the table the borders of the td's will sometimes dissapear. Its just funky. Its doing it on 2 different machines running IE6 ...Has anyone esle seen this? Is this some variant of the Guillotine Bug? Hi there, I have a script that displays content when a link is hovered on which then hides when the mouse is hovered off it. Is there a way to make it so the content stays there until one of the other links is hovered on? This is my CSS: PHP Code: div#links a span {display: none;} div#links a:hover span {display: block; position: absolute; top: 200px; left: 0; width: 125px; padding: 5px; margin: 10px; z-index: 100; color: #AAA; background: black; font: 10px Verdana, sans-serif; text-align: center;} div#links a:hover {color: #411; background: #AAA; border-right: 5px double white; } and this is the HTMl PHP Code: <div id="links"> <a href="http://www.meyerweb.com/eric/css/">Link 1<span>1</span></a> <a href="http://www.meyerweb.com/eric/css/">Link 2<span>2</span></a> <a href="http://www.meyerweb.com/eric/css/">Link 3<span>3</span></a> </div> Any ideas? Hello, I'm trying to make "tool-tip text" that I can position and style when a user rolls over a link. I have an id called menuTipsAppointments that I want to keep hidden until the user rolls over my Appointments anchor. I'm starting with: Code: #menuTipsAppointments {
display: none;
}
Then I do this: Code: a#appointments:hover {
display:block;
width: 30px;
height: 61px;
background-image: url(images/pin-over.png);
background-repeat: no-repeat;
background-position: top left;
#menuTipsAppointments display: block;
}
The extra bits in this block (above the menuTipsAppointments id) are related to the link's FIR. If my syntax is okay, I'm guessing that I can't do this with :hover, and am hoping for another way to go about it. This is my first site and is already quite messy, so whatever works is cool. Many thanks! Hey there Does anyone know why my code he a.linky:hover .spany{display:block} ...does not work in ie6 but works SWEET in FF? CSS: .linky{z-index:200; display:block; position:relative; cursorointer; } .spany{ display:none; position:absolute; left:0px; top:0px; width:120px; height:120px; background:#ffffff; } a.linky:hover .spany{display:block; } HTML: <a class="linky" href="http://www.domain.co.nz/"> <span class="spany"></span> <img src="http://www.domain.co.nz/thumb.jpg" width="120" height="120" border="0" style="vertical-align:bottom"/> </a> Thanks heaps guys for even looking! Im writing a combination navigation bar and contextual layout box model for a large dynamically generated site. The contextual layout is so that i can set a variable in the appropriate markup and then have the correct collumns display. I have two problems. #1. When I mouse over the menus and try to go down my menus they dissapear. If I take out the layout styling they work properly in both IE and Firefox. #2. Anyway to get the menus to appear above form elements? I would appreciate any help.... my code... Quote: /* default layout.php */ body { color: #000; background-color: #fff; margin: 0; } p, h1, h2, h3, h4 { margin: 0; padding: 1em; } h2, h3, h4 { color: #cc0000; } #layoutlogic-abc, #layoutlogic-ab, #layoutlogic-a { background-color: #fff; margin: 0 -1px; width: 100%; border:1px solid black; } #footer { color: #000; position: relative; z-index: 13; width: 100%; } #footer a { color: black; } #layoutlogic-abc .page { background-color: #fff; width: auto; border-right: 150px solid #eee; border-left: 200px solid #eee; } #layoutlogic-ab .page { background-color: #fff; width: auto; border-left: 200px solid #eee; } #layoutlogic-a .page { background-color: #fff; width: auto; } .section { margin: 0; width: 100%; } .col-a, .col-b, .col-c { position: relative; float: left; padding: 2.5em; } .col-a a, .col-b a, .col-c a{ color: blue; } .col-a { margin-right: 1px; } .col-b { margin: 0 -3px 0 -2px; } .col-c { margin-left: 1px; } #layoutlogic-abc .col-a, #layoutlogic-ab .col-a { margin-left: -200px; z-index: 10; width: 200px; padding-top: 1em; } #layoutlogic-abc .col-b, #layoutlogic-ab .col-b { z-index: 20; width: 100%; padding-top: 1em; border: 1px solid black; } #layoutlogic-abc .col-c { color: #fff; margin-right: -150px; z-index: 10; width: 150px; padding-top: 1em; } #layoutlogic-a .col-b, #layoutlogic-ab .col-c, #layoutlogic-a .col-c { display: none; } .floatright { float: right; margin: 1em 1em 0 2em; } .floatleft { float: left; margin: .8em 0 .8em 1.6em; } .clear { clear: both; } .page > .section { border-bottom: 1px solid transparent; } .garamond {font-family: garamond;} ."Times New Roman" {font-family: "Times New Roman";} .verdana {font-family: verdana;} .arial {font-family: arial;} ."Times New Roman" {font-family: "Times New Roman";} and my markup: PHP Code: <body> <div align="center"><h1><img src="/images/banner.gif" alt="UCWDC Banner" /></h1></div> <div id="nav"> <ul class="level1"> <li><a href="/home/"><?= $menu1 ?></a></li> <li class="submenu"><a href="/my_ucwdc/"><?= $menu2 ?></a> <ul class="level2"> <li><a href="/my_ucwdc/my_account.php"><?= $menu2array[0] ?></a></li> <li class="submenu"><a href="/my_ucwdc/online_community.php"><?= $menu2array[1] ?></a> <ul class="level3"> <li><a href="/my_ucwdc/forum.php"><?= $submenu2array[0] ?></a></li> <li><a href="/my_ucwdc/marketplace.php"><?= $submenu2array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $submenu2array[2] ?></a></li> </ul></li> <li><a href="/my_ucwdc/membership.php"><?php echo ($menu2array[2])?></a></li> <li><a href="/my_ucwdc/history.php"><?= $menu2array[3] ?></a></li> <li><a href="/contacts/officers.php"><?= $menu2array[4] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu2array[5] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu2array[6] ?></a></li> <li><a href="/events/results.php"><?php echo($menu2array[7])?></a></li> </ul></li> <li class="submenu"><a href="/events/"><?= $menu3 ?></a> <ul class="level2"> <li><a href="/events/events_by_date.php"><?= $menu3array[1] ?></a></li> <li><a href="/events/event_reviews.php"><?= $menu3array[2] ?></a></li> <li><a href="/events/results.php"><?= $menu3array[0] ?></a></li> <li><a href="/events/register.php"><?= $menu3array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/competition/"><?= $menu4 ?></a> <ul class="level2"> <li class="submenu"><a href="/rules/"><?= $menu4array[0] ?></a> <ul class="level3"> <li><a href="/rules/couples.php">Couples</a></li> <li><a href="/rules/line.php">Line Dance</a></li> <li><a href="/rules/pro_am.php">Pro-Am</a></li> <li><a href="/rules/team.php">Team</a></li> </ul></li> <li class="submenu"><a href="/dances/"><?= $menu4array[1] ?></a> <ul class="level3"> <li><a href="/dances/triple_2.php"><?= $dancesarray[0] ?></a></li> <li><a href="/dances/polka.php"><?= $dancesarray[1] ?></a></li> <li><a href="/dances/night_club.php"><?= $dancesarray[2] ?></a></li> <li><a href="/dances/cha_cah.php"><?= $dancesarray[3] ?></a></li> <li><a href="/dances/waltz.php"><?= $dancesarray[4] ?></a></li> <li><a href="/dances/2_step.php"><?= $dancesarray[5] ?></a></li> <li><a href="/dances/east_coast_swing.php"><?= $dancesarray[6] ?></a></li> <li><a href="/dances/west_coast_swing.php"><?= $dancesarray[7] ?></a></li> </ul></li> <li class="submenu"><a href="/music/"><?= $menu4array[2] ?></a> <ul class="level3"> <li><a href="/music/release_dates.php"><?= $musicarray[0] ?></a></li> <li><a href="/music/music_news"><?= $musicarray[3] ?></a></li> <li><a href="/music/dj_forum"><?= $musicarray[2] ?></a></li> <li><a href="/music/music_match.php"><?= $musicarray[1] ?></a></li> </ul></li> </ul></li> <li class="submenu"><a href="/worlds/"><?= $menu5?></a> <ul class="level2"> <li><a href="/worlds/worlds_register.php"><?= $menu5array[0] ?></a></li> <li><a href="/worlds/worlds_swing.php"><?= $menu5array[1] ?></a></li> <li><a href="/worlds/worlds_workshops.php"><?= $menu5array[2] ?></a></li> <li><a href="/worlds/worlds_schedule.php"><?= $menu5array[3] ?></a></li> <li><a href="/worlds/worlds_line.php"><?= $menu5array[4] ?></a></li> <li><a href="/worlds/worlds_competitors.php"><?= $menu5array[5] ?></a></li> <li><a href="/worlds/worlds_hotels.php"><?= $menu5array[6] ?></a></li> <li><a href="/worlds/worlds_sponsor.php"><?= $menu5array[7] ?></a></li> <li><a href="/worlds/worlds_contacts.php"><?= $menu5array[8] ?></a></li> <li><a href="/wolrds/worlds_updates.php"><?= $menu5array[9] ?></a></li> </ul></li> <li class="submenu"><a href="/judge/"><?= $menu6?></a> <ul class="level2"> <li><a href="/judge/about_judge.php"><?= $menu6array[0] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu6array[1] ?></a></li> <li><a href="/judge/judge_curriculum.php"><?= $menu6array[2] ?></a></li> </ul></li> <li class="submenu"><a href="/classes/"><?= $menu8 ?></a> <ul class="level2"> <li><a href="/classes/zip_code_match.php"><?= $menu8array[0] ?></a></li> <li><a href="/classes/classes_events.php"><?= $menu8array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu8array[2] ?></a></li> <li><a href="/classes/classes_judging.php"><?= $menu8array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/contacts/"><?= $menu9 ?></a> <ul class="level2"> <li><a href="/contacts/officers.php"><?= $menu9array[0] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu9array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu9array[2] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu9array[3] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu9array[4] ?></a></li> <li><a href="/contacts/webmaster.php"><?= $menu9array[5] ?></a></li> </ul></li> </ul> </div> <div id="layoutlogic-abc"> <div class="page"> <div class="section"> <div class="col-a"> <fieldset><legend>Login:</legend> <table width="100%" border="0"> <tr> <td align="right">Username:</td><td align="center"><input type="text" size="10" /></td> </tr> <tr> <td align="right">Password:</td><td align="center"><input type="password" size="10" /></td> </tr> <tr> <td colspan="2" align="center"><a href="#">Forgot Password?</a></td> </tr> <tr> <td colspan="2" align="center"><a href="new-member.html">Not a Member yet?</a></td> </tr> </table> </fieldset> <div align="center"><input type="submit" value="Login"></div> <hr /> <p>left Content </p> <hr /> </div> <div class="col-b"> <div class="floatright"><img src="header2.jpg"></div> <p >Content</p> </div> <div class="col-c"> <p>Content</p> </div> <div class="clear"></div> </div> </div> <div id="footer"><h3>Footer</h3><p>Site Design and Maintenence by <a href="#">WestonWebWorks.com</a>.</p></div> </div> </body> </html> Thanks I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! Code:
<div id="topNav">
<ul id="cssdropdown">
<li class="topNavTitle"><a href="" class="atopNavTitle">---A---</a>
<ul class="subuls">
<li><a href="a.php">AAA</a></li>
<li><a href="b.php">BBB</a></li>
</ul>
</li>
<li class="topNavSep"></li>
<li class="topNavTitle"><a href="" class="atopNavTitle">---B---</a></li>
</ul>
</div>
<style type="text/css">
li.topNavTitle a.atopNavTitle {
margin-top: 20px;
padding-top: 20px;
}
</style>
Hi, I am trying to move <a href="" class="atopNavTitle">---A---</a> <a href="" class="atopNavTitle">---B---</a> down 20px. I have tried the above style but it does nothing. What do I do wrong? how may i define that <a name> is not related to general selector by <a> tag? e.g. i don't want when i mouse over <a name> to change its color defined ny a:hover. assidning separate class to them is nightmare. Hi there, this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site. I know the #blah should be used to set an id for it, but here's my concern; 1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">). 2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different? thanks in advance. Hello! could someone take a look at my site and tell me why the links inside my content are whacked out? when you click on them they jump around... i have been trying for two days to figure out which other style i am using is interfering, but i cant find that little sucker...and i have deconstructed it several times... i think i am just too close to the code and need another pair of eyes. here a link to a page with the problems...its the sample menu links in the center of the page green-bistro dot com on the menus page oh, and another strange thing, like on this page, if i link to a page with .php in the extention, the link wierds out, but the mailto link works fine... green-bistro dot com on the eco events page thanks in advance for anyone who can help!!! Hi, is there a method of setting the color for title="some text" in a hyperlink ? e.g. [<a href="index.php?page=links.php" title="Redlake Valley business websites">Local Links</a>] TIA Mike Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out... I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself... What I'm trying to accomplish is the same thing, only with a div that has textual content.... I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings... I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail.... I hope this is a decent enough description of the problem... anyway to accomplish this??? Hi, I am at this point too tired to continue to search for my answer, so I am going to just ask... I would like to be able to control the color and underlining of the links in the unordered list. This list will appear on every page in the site. I am not sure what the CSS code is or in which class/id to place it in my css file. the page code is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="nav.js" type="text/javascript"></script>
<title>Natura Culina :: Welcome</title>
</head>
<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()" bgcolor="#D89607">
<div class="allcontent">
<div id="header">
<ul id="navigation">
<li><a href="index.php">home</a></li>
<li><a href="products.php">products</a></li>
<li><a href="ingredients.php">ingredients</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="testimonials.php">testimonials</a></li>
<li><a href="links.php">links</a></li>
</ul><!---end navigation--->
</div><!-- end header -->
<div class="textArea">
<p align="center"><span class="header1">Welcome to
Natura Culina Organic Skin Care </span></p>
<p><br />
<img src="/images/all229.jpg" width="367" height="233" align="left" class="left" /><span class="bodyBold">Natura
Culina</span> creates luxurious skin care products that will appeal to your
senses, inspired by skin care traditions used at centuries old European
Spas.</p>
<p>We are <em><span class="bodyBold">so over</span></em> using chemical
solutions for our skin problems because they are so unsatisfactory.<br>
We are <em><span class="bodyBold">so back</span></em> to feeding
our skin with natural ingredients, oils, vitamins and antioxidants.</p>
<p>All the oils used in our products are cold pressed and certified
organic. All our ingredients are carefully blended to create effective,
nourishing and natural products for your skin. All body products
are made after placing an order to assure freshness. </p>
<p> </p><p> </p><p> </p>
<p align="center"><em><span class="bodyBold">Start loving your skin
again with Natura Culina Food For Your Skin.</span></em></p>
</div><!---end contentBGColor--->
</div><!---end allcontent--->
</body>
</html>
and the CSS sheet code is this: Code: body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #D89607;
}
#body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #E1A21A;
}
.allcontent {
width: 736px;
margin-left: auto;
margin-right: auto;
border: thin dotted;
margin-top: 10px;
}
#header {
background-image: url(/images/banner1.jpg);
background-repeat: no-repeat;
height: 260px;
margin-top: -18px;
}
.textArea {
background-color: #E1A21A;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#navigation li {
float: left;
list-style: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 240px;
}
#navigation {
font-size: 16px;
font-weight: bold;
color: #fff;
}
img.left {
padding: 0px 10px 0px 0px;
float: left;
}
.header1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.bodyBold {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
}
.itemBorder { border: 1px solid #73090E }
.itemText { text-decoration: none; color: #F3F7FD; font: 14px Arial, Helvetica }
.itemTextHeaders { text-decoration: none; color: #E6EBF2; font: bold normal 13px Verdana, Arial, Helvetica, sans-serif}
Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css). Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script: http://javascript-array.com/scripts...drop_down_menu/ And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code: Code:
<html>
<head>
<style>
<!--
#sddm a
{ display: block;
}
#sddm span
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #3D97D6;
border: 1px solid #5970B2}
#sddm span a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #3D97D6;
color: #FFF;
font: 11px arial}
#sddm span a:hover
{ background: #2875DE;
color: #FFF}
-->
</style>
<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
</head>
<body>
<span id="sddm">
<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
<a href="#">Add as Friend</a>
<a href="#">Send message</a>
<a href="#">View Profile</a>
<a href="#">Report</a>
</span>
</span>
this text comes after the username
</body>
</html>
So i hope its clear what i wanna do, i always find it hard to explain things Hi, My CSS has a simple declaration for "A" href tags: Code:
a {
color:#8D603B ;
text-decoration: underline;
font-weight:bold;
}
a:visited {
color:#8D603B ;
font-weight:bold;
}
a:hover {
color:#A97043 ;
font-weight:bold;
}
So, this is used throughout the site. However, I want to specify a different style for the "A" tag if it is within a certain DIV. For example, Code: <div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div> <div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div> The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS. Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)? Thanks very much! I've got two hidden maps which display in a div when the link is hovered. If I put an H3 inside the anchor to style the link text, it doesn't inherit the link and hover colors of the rest of the site. If I move the H3 outside the <a href> it breaks the hidden span stuff in Firefox. But the colors work! If I just use normal text it works fine but displays inline and small and crappy... Here is my CSS for the div: Code: div#maplinks {margin:10px 0; padding:0;}
div#maplinks a span {display: none;}
div#maplinks a:hover span {display: block;
position: absolute; top: 1em; left: 330px; width: 420px;
padding: 0px; margin: 0px; z-index: 100;
background: white;
text-align: center;}
and the HTML Code: <div id="maplinks"> <a href="images/sabah-map-400X319.jpg"><h3> View Sabah Map</h3><span><img class="centimg" src="images/sabah-map-400X319.jpg" width="400" height="319" border=0 alt="Sabah Map"><p class="credit">Sabah Tourism</p></span></a> <a href="images/borneo-map.gif"> Map of Borneo and Region<span><img class="centimg" src="images/borneo-map.gif" width="420" height="330" border=0 alt="Borneo Map"><p class="credit">Expedia.com</p></span></a> </div> <!-- maplinks --> How would I address this <h3> element? Or do I try to style that div's a:link and a:hover? (that didn't seem to work). Hi there, I want to create a hyperlink to an external page from my web site. Is it possible to show that external content on my page without using frame set. From the attachment, link 1 & link 2 are external links inside a div. I want to show it on the second div on the bottom. Thanks. I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code Code: .globalNav, .globalNav td {
margin: 0px;
padding: 0px;
width: 100%;
height:28px;
border-bottom: 1px solid #94AEC1;
border-collapse: collapse;
}
.globalDiv{
color:#fff;
width:100%;
height:28px;
background:#94AEC1 url(../images/grad_bar.gif);
background-color:#94AEC1;
margin:0px;
padding: 0px 0px 0px 10px;
overflow:hidden;
}
.globalDiv a{
font-size:10pt;
color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
text-decoration:underline;
}
.globalDiv a:hover{
text-decoration:none;
}
Thanks |
|||||||