...

View Full Version : My "A" headache



julieg
07-18-2008, 07:36 PM
Hi all.

I'm sure what I'm doing is a stupid little mistake, but I'm not catching it.

I'm working on the following site for a friend. It's currently location is its "beta" form: http://members.cox.net/juliegleaton/jamie/index.html

My problem is that I'm trying to set up different "links" - like my roll overs I have in my style sheet - for example, the about button I have this:

#about {
left: 0px;
width: 125px;
height: 325px;
background:url(../graphics/about.jpg);
cursor: pointer;
position: absolute;
}

..then this...

#about a:hover {
background: url(../graphics/about_ro.jpg);

}

...and the roll over isn't working.

I'm also trying to assign a "small" link id for links like the my name at the very bottom of the front page... and I set that up like this:

#small a:link
{
FONT-SIZE: 9px;
COLOR: #999999;
FONT-family: Arial, Helvetica, sans-serif;
border: 0px;
text-decoration: none;

}

(with the same for active, visited, hover) - and those don't work either - they just follow the format that I have for the a:link.

Any advise would be greatly appreciated.

Thanks.

jcdevelopment
07-18-2008, 07:42 PM
try this for the roll over



#about a {
left: 0px;
width: 125px;
height: 325px;
background:url(../graphics/about.jpg);
cursor: pointer;
position: absolute;
}

#about a:hover {
background: url(../graphics/about_ro.jpg);

}



can you post your html for the other question. lets take a look at what you have.

jerry62704
07-18-2008, 07:46 PM
I code my css with this:
background-image: url("/RIN/images/BannerBackground.jpg");

using the background-image and quotes on the url. Try it, it might help. There is one extra "<" on line 36 you might want to remove.

Can't see the css, but are the "a" tags in the right order? (link, visited, hover, active)

julieg
07-18-2008, 07:51 PM
Sure - an example would be the last div on the page...


<div class="tinytype">Copyright &copy; 2008 - All Rights Reserved &nbsp;-&nbsp;&nbsp;Website by <a id="small" href="http://members.cox.net/juliegleaton" target="julie">Julie Gleaton</a></div>

And my CSS has this:



.tinytype {
font-family:Arial, Helvetica, sans-serif;
color: #999999;
font-size: 10px;
vertical-align: middle;
text-align:center;
padding-top: 5px;
}

#small a:link
{
font-size: 10px;
color: #999999;
font-family: Arial, Helvetica, sans-serif;
border: 0px;
text-decoration: none;

}

(#small a:active/visited/hover are all the same)

julieg
07-18-2008, 07:55 PM
I put the A in after the #about, and my button disappeared. (I'm working on a local site so you won't see it on the cox.net linked I posted above)

If it helps, here's my code in the index.html:



<div id="container">
<div id="links">
<a id="about" href="about.htm"></a>
<a id="portfolio" href="portfolio.htm"></a>
<a id="weddings" href="weddings.htm"></a>
<a id="contact" href="contact.htm"></a>
</div>
</div>

harbingerOTV
07-18-2008, 07:58 PM
The issue is that an "A" is an inline element therefore it woun't hold a width or a height. It's size is determined by it's contents. Since you have no contents you need to make it a block element.

If your making a horizontal navigation add:

float: left;

If your nav is vertical add:

display: block;

see if those do anything for it.

_Aerospace_Eng_
07-18-2008, 08:01 PM
This will make your rollovers work for your navigation, you seem to be misunderstanding how cascading works.

#about {
left: 0px;
width: 125px;
height: 325px;
background:url(../graphics/about.jpg);
cursor: pointer;
position: absolute;
}
a#about:hover {
background: url(../graphics/about_ro.jpg);

}
This will work for your small link

.tinytype {
font-family:Arial, Helvetica, sans-serif;
color: #999999;
font-size: 10px;
vertical-align: middle;
text-align:center;
padding-top: 5px;
}

a#small
{
font-size: 10px;
color: #999999;
font-family: Arial, Helvetica, sans-serif;
border: 0px;
text-decoration: none;

}

julieg
07-18-2008, 08:08 PM
I code my css with this:
background-image: url("/RIN/images/BannerBackground.jpg");

There is one extra "<" on line 36 you might want to remove.

Can't see the css, but are the "a" tags in the right order? (link, visited, hover, active)

All my other CSS used background, and the images display fine. But I tried it for poops and giggles... and still no roll overs.

I removed the < on my local copy already - I need to update that site with what I've done... I'm trying to get this baby ready to roll over the weekend.

My As were NOT in the correct order, but I changed them and it's still the incorrect size.

I'll log in and update my files on line.

Also, there are addons for Mozilla you can get to view a site's CSS/JS/etc - this is my fave https://addons.mozilla.org/en-US/firefox/search?q=JSView&cat=all - I know some peeps are anti Mozilla (and anti IE), but that tool is awesome.

Thx for the help... I'll update my files inna sec...

julieg
07-18-2008, 08:18 PM
Thank you Aerospace - that did work.

And yeah, there is much I misunderstand because I'm "self taught". I worked for a company that threw their website at me and said, "g'luck!"... and it was just me and my little HTML for dummies book. I've come a long way, but there's still much I don't know and am still trying to master.

In the meantime, I'm trying to use my skills for good and build solid websites for my friends to improve my portfolio.

Thanks again for your help!

-Julie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum