|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
October 10th, 2003, 02:54 PM
|
||||
|
||||
|
CSS questions
Hi all,
I have a site at http://www.geocities.com/early_years_nh/funstuff.html which is working just fine, but there's a small problem. Actually, it's not even a problem, just an annoyance that I can't seem to wrap my brain around... I am FAIRLY new to HTML and CSS, so please bear with me if this sounds simple. It probably is... Check out the site, and you'll notice that ALL of the links, even the ones in the middle, inherit the same properties from the style sheet. Well, I want the links to the right and left sides of the screen to remain exactly as they are, but I don't want the 3 image links in the middle to use those properties. For the 3 image links, I set up a class in my CSS specifically for them so they would use it instead of the properties for the other links. In the html, I put those image links in a <div>. First of all, do I even need the <div>? It would seem not. Secondly, looking at the CSS code below, can someone tell me why the classes are being ignored and the image links are getting the same properties as all the other links? I thought that having classes in the CSS allowed for distinguishable characteristics within a page! I've done it before. Is my syntax just wrong? Thanks! Here's the CSS: Code:
/* CSS Document */
/* fun.css */
body {
background-image: url("multiple_heart_background.gif");
}
a:link { font-family: kidtypepaint, Verdana, Geneva, Arial, Helvetica, san-serif;
font-weight: normal;
color: #800080;
text-decoration: underline;
font-size: 14px;
text-transform: none;
}
a:visited {
font-family: garamond, Verdana, Geneva, Arial, Helvetica;
font-weight: bold;
color: #ff3333;
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
}
a:hover {
font-family: Verdana, Geneva, Arial, Helvetica, san-serif;
font-weight: bold;
color: #CD853F;
text-decoration: underline;
font-size: 14px;
text-transform: uppercase;
}
a:active { font-family: Verdana, Geneva, Arial, Helvetica, san-serif;
font-weight: bold;
color: #ffffff;
text-decoration: underline;
font-size: 11px;
text-transform: uppercase;
}
h2
{
padding-top: 30px;
color: #6a5acd;
padding-bottom: 30px;
border: 0px;
font-family: space toaster, kidtypepaint, Verdana, Geneva, Arial, Helvetica;
font-size: 1em;
text-align: center;
text-decoration: underline;
letter-spacing: .5em;
}
/* Image Links */
.middle
{ font-family: garamond, Verdana, Geneva, Arial, Helvetica;
font-weight: bold;
color: #ff3333;
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
}
Chris PS: Oh, before I forget. In addition to all that, can anyone tell me why the background image is not showing up? I have tried putting it in the body tag in html, and in a table! Neither of those methods worked either. Thanks!
__________________
Pop, pop, fizz, fizz, oh what a relief it is!
|
|
#2
October 11th, 2003, 03:36 AM
|
|||
|
|||
|
Replace the style middle by something like this:
a.middle:active, a.middle:link, a.middle:visited { font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; color: Blue; text-decoration: none; } a.middle:hover { color: Black; text-decoration: underline; } And change you body tag to: <body class="body"> That should display the background image. Success
|
|
#3
October 11th, 2003, 04:22 AM
|
||||
|
||||
|
use
.middle a { /* some style */ } this will let you set style to the a-tags within the div .middle you probably have the wrong url to the background picture, couldn't get any picture when i tried the url. (http://www.geocities.com/early_year..._background.gif)
|
|
#4
October 11th, 2003, 08:14 AM
|
||||
|
||||
|
Thanks, guys. I appreciate the responses. I got the background to work. It must have been a typo on my part, but damned if I can find out what the typo was! lol
Anyway, I am still having trouble with the CSS. It is still not working in the middle section. What am I doing wrong here? I applied your suggestions individually. Some had no affect at all, some affected the entire page! I even tried setting up seperate left and right classes for the links on the sides, but that was met with strange results as well. I have changed the CSS back to its original so as not to screw anything up. I have my CSS book handy and am reading away, to no avail. This is driving me crazy! Any more ideas? Chris Last edited by cjwsb : October 11th, 2003 at 09:01 AM.
|
|
#5
October 11th, 2003, 11:33 AM
|
|||
|
|||
|
You now use this code for the links in the middle:
<A href="http://www.geocities.com/early_years_nh/activities.html" ><IMG src=" blablabla Insert the style class in like this: <A href="http://www.geocities.com/early_years_nh/activities.html" class="middle"><IMG src=" blablabla
|
|
#6
October 11th, 2003, 11:51 AM
|
||||
|
||||
|
Ok, leaving the CSS the way it was, I inserted the style class like you said. No difference. Every single link on the page still has all the same attributes. Argh!!! What am I doing wrong? I will make it as easy as I can. For now, I'd be more than happy to just settle for browser defaults on the 3 middle image links. How can I do that?
Chris
|
|
#8
October 11th, 2003, 01:28 PM
|
||||
|
||||
|
EXACTLY! I just looked at the CSS you did and copied it to mine. I SEE IT! Ok, great. Now I understand why it wasn't working. Thanks! That was driving me crazy, but now I am a little smarter
 Chris; Last edited by cjwsb : October 11th, 2003 at 01:33 PM.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS questions |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
