...

View Full Version : CSS & HTML Link Text



Karyn
11-30-2009, 01:12 AM
I'm redoing my website and want to use one feature from the old temporary one I have up now. The problem is that I used a template and modified and I don't know what parts of the CSS accomplish the effect.

When I hover my mouse over the menu items, text appears in one spot in the header. This is what I want to use for my website but don't know which parts of the code cause it to pop up in the book. Can anyone help?

http://karynsplace.net/

Excavator
11-30-2009, 01:51 AM
Hello Karyn,
that is just positioning the spanned text on hover.
This text -
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current">Home<span>Back to the main
page.</span></a></li>
<li><a href="personal.html">Personal Info<span>Psuedo-personal information about me</span></a></li>
<li><a href="hobbies.html">Hobbies<span>Some of the things I do for fun</span></a></li>
<li><a href="index.html">Vero Eros Et<span>Did you vero your eros et today?</span></a></li>
<li><a href="index.html">Duis Te Feugi<span>There is a duis in my te feugi. </span> </a></li>
</ul>
</div>


Hidden and position on hover with this CSS -

#navcontainer li a span {
display: none
}

#navcontainer li a:hover span {
display:block;
position:absolute;
top: -180px;
left:392px;
width:105px;
background-color:transparent;
color:#6f443d;
text-align: center;
padding: 15px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
}

Karyn
11-30-2009, 01:55 AM
Hello Excavator,

Thank you! I'm going to give that a shot and see how it works on my in-progress theme. :)

Karyn
12-02-2009, 08:54 AM
Argh - I'm seriously missing something here. I cannot get this to work and as near as I can tell, I have converted the necessary parts to the menu I'm trying to use for the new design, which is here - http://karynsplace.net/index2.html

Here's the code I'm using for the menu (with the names changed to menu instead of nav*):


#footer, #menu, #menu li a {
background: #636363 url(images/centermenu.png);
color: #FFFFFF;
border-color: #D7D7D7;}

#menu li a:hover, #menu li a#selected, #menu li a#selected:hover{
background: #FFF url(images/centermenu.png);}

#main, #footer, #logo, #menu, #content{
margin-left: auto;
margin-right: auto;}


#menu
{ height: 64px;
width: 870px;
}

#menu ul{margin: 0px auto;}

#menu li
{ float: left;
margin: 0px;
padding: 0px;
list-style: none;
}

#menu li a
{ display: inline;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}

#menu li a span {
display: none;}

#menu li a:hover span {
display:block;
position:absolute;
top: -180px;
left:392px;
width:105px;
background-color:transparent;
text-align: center;
padding: 15px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;}

Can you tell what I've done wrong? As near as I can tell, all of the code that would be needed to make that feature (I have no idea what it's called) work is contained in the last two sections, which are about the span tag.

Excavator
12-02-2009, 05:13 PM
To start with, you're re-using id's.
You have a a div and a ul both with the id menu. Check the suggestion and links about validation in my sig below.

But your span is hovering - you have a huge negative margin that is hovering it off the page but at least it's hovering. Change that top: -180px; to something smaller...
You may also want to use something other than color: #fff; on your span text so you can find it easier.

I think this is where I realize I'm probably too boring to have a website but of course I'll do it anyway. :)
Haha - good for you! This cracked me up :0

Karyn
12-02-2009, 05:35 PM
To start with, you're re-using id's.
You have a a div and a ul both with the id menu. Check the suggestion and links about validation in my sig below.

But your span is hovering - you have a huge negative margin that is hovering it off the page but at least it's hovering. Change that top: -180px; to something smaller...
You may also want to use something other than color: #fff; on your span text so you can find it easier.

Haha - good for you! This cracked me up :0

Oy - this is what I get for deciding to figure this out when I'm in the middle of a strong bout of insomnia. I do usually validate while I'm working because it's so much easier to figure out exactly what you've goofed without having to examine every bit of code instead of just what you've added and anything it modifies, but I figured I'd validate after - which of course makes no sense. I was planning to relocate the location where it hovers after I got it working, since that was the exact code that works on the old one. An insomnia-addled mind is not a pretty thing. :)

I'm glad that amused you. It makes me 1/100000th of a percent less boring. Your website is far less boring than mine - especially the in-dev one for the hair salon! :D

Thanks tons for your help. I'll get this fixed as soon as I get home!

Karyn
12-03-2009, 01:15 AM
Those two changes were exactly the problem - but you knew that. ;)

Thanks so much for your help! You, sir, are Awesome with a side of Awesome Sauce. :)

Excavator
12-03-2009, 02:30 AM
You, sir, are Awesome with a side of Awesome Sauce

hahaha, you crack me up :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum