Thread: CSS questions

    #1
  1. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36

    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. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    11
    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
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    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_years...background.gif)
  6. #4
  7. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    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.
    Pop, pop, fizz, fizz, oh what a relief it is!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    11
    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
  10. #6
  11. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    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
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    11
    Just have a look here , is this what you want?
  14. #8
  15. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    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.

IMN logo majestic logo threadwatch logo seochat tools logo