Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
  1. #1
    Member sopiaz57's Avatar
    Join Date
    Sep 2003
    Posts
    41
    Member #
    3058
    Hey guys, this is driving me nuts, here is the code


    <html>
    <body bgcolor="green">
    <head>
    <link href="styles.css" rel="stylesheet" type="text/css">

    </head>
    Hello world, this is normal links
    <a href="http://www.google.com"> Google</a>


    <div class="menu2">

    Hello world, this is div links
    <a href="http://www.google.com"> Google</a>

    </div>
    </body>



    All i want to happen is for the second google link to be red instead of the default color which is blue. I need to use the dib because i have about 200 <a> link tags that need this style.

    here is the css.


    thank you.

    body{
    margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;
    }

    a {color: Blue;
    font-size: 10;
    font-family: sans-serif;
    text-decoration: none;}

    a:hover{ color: White;
    font-size: 10;
    font-family: sans-serif;
    text-decoration: none;}

    a.menu2 {color: red;
    font-size: 10;
    font-family: sans-serif;
    text-decoration: none;}

    a.menu2:hover{ color: White;
    font-size: 10;
    font-family: sans-serif;
    text-decoration: none;}






    table{ color: black;
    font-size: 10;
    font-family: sans-serif;
    }
    "It's very important not to embellish on your order. No extraneous comments. No questions. No compliments."
    - Jerry, in "The Soup Nazi"

  2.  

  3. #2
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Try this:

    Code:
    .menu2 a:link, .menu2 a:visited {
    
    color: red;
    font-size: 10;
    font-family: sans-serif;
    text-decoration: none;
    
    }
    
    .menu2 a:hover, .menu2 a:active { 
    
    color: white;
    font-size: 10;
    font-family: sans-serif;
    text-decoration: none;
    
    }

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    well... for starters... this is wrong

    HTML Code:
    <html>
    <body bgcolor="green">
    <head>
    <link href="styles.css" rel="stylesheet" type="text/css">
    
    </head>
    it should be

    HTML Code:
    <html>
    <head>
    <link href="styles.css" rel="stylesheet" type="text/css">
    
    </head>
    <body bgcolor="green">
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    and yes... trico's right.

    a.menu2 is when you want to apply a class to a link. if you want to apply a class to p or div or span or whatever you do .menu2 a
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Ive got a question? Its not really related to sopiaz57 question....

    I am making "boxes" that are below one another using CSS. Im using div tags with an Id to make them. Im noticing that their is a 3px gap between each box. So all I do is set position to relative and top to -3px.Now they are directly under one another like I want it.

    Is "div" doing this? Can I do it a different way so that I wont get the 3px spacing?

  7. #6
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Have you (jbagley) tried margin-top: 0px; or margin-bottom: 0px; depending on which one you want?

  8. #7
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    I will give the margin thing a try. But I do remember someone saying that div or span tags make whitespace above and below them. for example <p> tags makes white space....

  9. #8
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    But I do remember someone saying that div or span tags make whitespace above and below them.
    I'm certain that is incorrect.

    By eliminating both margin/padding with values of zero you remove the possability for the current div/span etc you have to disrupt an area with white space. However pairs of <div>/<span> tags by default don't use any padding or margin unlike <p>aragraphs or <h1>eadings.

    Either way it will ensure you're not getting values shared between different #ID's... check that you are not using the same name as another part of your stylesheet. You might want to post up what code you had been using to make these boxes, depending on whether or not the person who started this thread minds it being hijacked, in which case make a new thread.

  10. #9
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    very weird... I set margin top to 0px and it worked for the one box. But the box that uses a background image has a 3px gap... so I have to set the margin top to -3px.... Heres the code... I will upload the files so u can see it.... give me a sec.
    Code:
    body {
    padding: 0px;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 1em;
    margin-top: 5px;
    margin-bottom: 0px;
    }
    
    #header {
    width: 700px;
    height: 60px;
    background-image: url(images/winAccHeader.gif);
    background-repeat: no-repeat;
    }
    
    #navbar {
    background-image: url(images/navBar.gif);
    background-repeat: no-repeat;
    width: 700px;
    height: 20px;
    position: relative;
    top: -2px;
    padding-top: 1px;
    padding-left: 2px;}
    
    #space {
    background-image: url(images/space.jpg);
    background-repeat: no-repeat;
    width: 700px;
    height: 116px;
    margin-top: 0px;}
    
    #mainContent {
    border-left: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    border-right: 1px #000000 solid;
    width: 698px;
    height: 500px;
    margin-top: 0px;}

  11. #10
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Ok here is the page: http://www.eadsdirect.co.za/winacc/index.html check the gap under the grey bar.... the blue bar is called #space. So if you check the CSS you can see I used margin-top = 0px.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:40 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com