A Link question

Discussion in 'HTML' started by [Mystic], Jan 10, 2005.

  1. [Mystic]

    [Mystic] Guest

    Hey guys

    Bascially, I have set the link styles to a white font, but I was wondering,
    what if the text is on a white background? You cannot see it. Is there away
    to set two link colors?

    Is there a way around this?

    Thanks
    [Mystic], Jan 10, 2005
    #1
    1. Advertising

  2. [Mystic]

    saz Guest

    In article <41e1e0b7$>, "[Mystic]" <screwuspammer> says...
    > Hey guys
    >
    > Bascially, I have set the link styles to a white font, but I was wondering,
    > what if the text is on a white background? You cannot see it. Is there away
    > to set two link colors?
    >
    > Is there a way around this?
    >
    > Thanks
    >
    >
    >

    Use CSS, set each group of links as different div classes dependent upon
    the color of the background.

    Brief example:

    div.white a { color: #000000; }

    div.black a { color: #ffffff; }
    saz, Jan 10, 2005
    #2
    1. Advertising

  3. [Mystic]

    Oli Filth Guest

    [Mystic] wrote:
    > Hey guys
    >
    > Bascially, I have set the link styles to a white font, but I was wondering,
    > what if the text is on a white background? You cannot see it. Is there away
    > to set two link colors?
    >
    > Is there a way around this?
    >


    Don't set both the text and background to white? ;)

    You probably want to define some CSS styles, e.g.

    HTML, BODY
    {
    background: red;
    }

    A:link
    {
    color: white;
    }

    DIV.white_bg
    {
    background: white;
    }

    DIV.white_bg A:link
    {
    color: black;
    }

    Now when a link is in a "normal" area, its text will be white, and when
    it falls within a "white_bg" area, its text will be black.
    e.g.

    The background colour for this area is red.
    <A href="xyz">This link text will be white.</A>

    <DIV class="white_bg">
    The background colour for this area is white.
    <A href="abc">This link text will be black.</A>
    </DIV>


    Hope this helps.

    --
    Oli
    Oli Filth, Jan 10, 2005
    #3
  4. [Mystic]

    Neal Guest

    [Mystic] <screwuspammer> wrote:

    > Hey guys
    >
    > Bascially, I have set the link styles to a white font, but I was
    > wondering,
    > what if the text is on a white background? You cannot see it. Is
    > there away
    > to set two link colors?
    >
    > Is there a way around this?


    Rule - when you set the color, also set the background-color.

    I suppose your situation is when you have one div with a black
    background and another with a white background, how do you have the
    colors work?

    Assuming HTML:

    <div id="foo">This is a <a href="zip.html">link</a>.</div>
    <div id="bar">This is a <a href="nut.html">link</a>.</div>

    Here's CSS:

    #foo {background-color: black; color: white;}
    #foo a:link {color: #77f;}
    /* etc. with more #foo a:pseudos */
    #bar {background-color: white; color: black;}
    #bar a:link {color: #007;}
    /* etc. with more #bar a:pseudos */
    Neal, Jan 10, 2005
    #4
  5. [Mystic]

    Mark Parnell Guest

    Mark Parnell, Jan 10, 2005
    #5
  6. [Mystic]

    Neal Guest

    saz <> wrote:

    > Use CSS, set each group of links as different div classes dependent
    > upon
    > the color of the background.
    >
    > Brief example:
    >
    > div.white a { color: #000000; }
    >
    > div.black a { color: #ffffff; }


    1) Rather than class all the links, since in CSS you'll assign the
    background-color to the ancestor element anyway, use the descendent
    selector method and keep unneeded id's and classes out of your HTML.
    (See my post for an example.)

    2) I know this is just an example, but for the record class and ID
    names should be descriptive of the content, not the style. What if you
    want to change the color scheme later? Won't it be confusing if stuff
    that is classed "white" and "black" are NOT a color matching the word?
    Neal, Jan 10, 2005
    #6
  7. [Mystic]

    saz Guest

    In article <>,
    says...
    > saz <> wrote:
    >
    > > Use CSS, set each group of links as different div classes dependent
    > > upon
    > > the color of the background.
    > >
    > > Brief example:
    > >
    > > div.white a { color: #000000; }
    > >
    > > div.black a { color: #ffffff; }

    >
    > 1) Rather than class all the links, since in CSS you'll assign the
    > background-color to the ancestor element anyway, use the descendent
    > selector method and keep unneeded id's and classes out of your HTML.
    > (See my post for an example.)
    >
    > 2) I know this is just an example, but for the record class and ID
    > names should be descriptive of the content, not the style. What if you
    > want to change the color scheme later? Won't it be confusing if stuff
    > that is classed "white" and "black" are NOT a color matching the word?
    >
    >

    Like I said, very brief description. I used colors so he/she would know
    which background color I was referring to.

    The OP really needs to learn some css - this is simple stuff.
    saz, Jan 10, 2005
    #7
  8. [Mystic]

    Neal Guest

    saz <> wrote:
    >
    >> 2) I know this is just an example, but for the record class and ID
    >> names should be descriptive of the content, not the style.
    >>

    > Like I said, very brief description.


    I know YOU know, but was just making sure that was plain.
    Neal, Jan 10, 2005
    #8
  9. [Mystic]

    rf Guest

    "saz" <> wrote

    > Like I said, very brief description. I used colors so he/she would know
    > which background color I was referring to.
    >
    > The OP really needs to learn some css - this is simple stuff.


    Then the OP should be shown how to do the simple stuff *correctly* :)

    --
    Cheers
    Richard.
    rf, Jan 10, 2005
    #9
  10. [Mystic]

    Toby Inkster Guest

    Neal wrote:

    > Rule - when you set the color, also set the background-color.
    >
    > #foo {background-color: black; color: white;}
    > #foo a:link {color: #77f;}

    ^^^

    So then you go and break your own rule! You have not set a background
    colour for this link. An explicit "background-color:transparent" would do.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jan 10, 2005
    #10
  11. [Mystic]

    SpaceGirl Guest

    Neal wrote:
    > [Mystic] <screwuspammer> wrote:
    >
    >> Hey guys
    >>
    >> Bascially, I have set the link styles to a white font, but I was
    >> wondering,
    >> what if the text is on a white background? You cannot see it. Is there
    >> away
    >> to set two link colors?
    >>
    >> Is there a way around this?

    >
    >
    > Rule - when you set the color, also set the background-color.


    Bad rule. What if you have a background image? You could set the
    background of the link to transparent I guess, but still... it's not
    really needed in most cases.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Jan 10, 2005
    #11
  12. SpaceGirl <> wrote:

    >> Rule - when you set the color, also set the background-color.

    >
    > Bad rule. What if you have a background image? You could set the
    > background of the link to transparent I guess, but still... it's
    > not really needed in most cases.


    It's very much needed since you can't possible know the default style.
    Both the UAs default and the users own stylesheet can collide with your
    own styles if you don't set both.

    --
    David Håsäther
    David Håsäther, Jan 10, 2005
    #12
  13. [Mystic]

    Els Guest

    SpaceGirl wrote:

    > Neal wrote:
    >> [Mystic] <screwuspammer> wrote:
    >>
    >>> Hey guys
    >>>
    >>> Bascially, I have set the link styles to a white font,
    >>> but I was wondering,
    >>> what if the text is on a white background? You cannot see
    >>> it. Is there away
    >>> to set two link colors?
    >>>
    >>> Is there a way around this?

    >>
    >>
    >> Rule - when you set the color, also set the
    >> background-color.

    >
    > Bad rule. What if you have a background image? You could
    > set the background of the link to transparent I guess, but


    What if you have images turned off?
    I'd say, if you have a background-image, make sure the
    background-color of the element that has the background-image
    is set to the most prominent colour in that image.
    Then set background-color:transparent to the link in front of
    that image.

    > still... it's not really needed in most cases.


    better safe than sorry :)

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jan 10, 2005
    #13
  14. SpaceGirl <> wrote:

    >> Rule - when you set the color, also set the background-color.

    >
    > Bad rule.


    No, the rule is good, but insufficient.

    > What if you have a background image?


    A good question. That's why authors should set background (i.e. use this
    shorthand property) rather than background-color.

    > You could set the
    > background of the link to transparent I guess,


    That's one option. Another is a declaration like background: black,
    which sets background-color to black and background-image to none.

    > but still... it's not
    > really needed in most cases.


    You mean we shouldn't do things the right way since we so often get away
    with the consequences if we do them wrong? A key point is: the author does
    not really know how often sloppy CSS coding breaks the page on users'
    screens. Another point: if you adopt habits of sloppy coding, you will be
    very confused when you see the problems caused, since you have no idea of
    what's happening, and (being presumably human) you will try hard explaining
    it someone else's mistake rather than your own.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Jan 10, 2005
    #14
  15. [Mystic]

    SpaceGirl Guest

    Els wrote:

    >>>Rule - when you set the color, also set the
    >>>background-color.

    >>
    >>Bad rule. What if you have a background image? You could
    >>set the background of the link to transparent I guess, but

    >
    >
    > What if you have images turned off?


    Ah :)

    > I'd say, if you have a background-image, make sure the
    > background-color of the element that has the background-image
    > is set to the most prominent colour in that image.
    > Then set background-color:transparent to the link in front of
    > that image.


    I considered this with a site I've been working on, but it looked BAD...
    the image in the background is a faint photo and it just didn't work
    design-wise when links had backgrounds. But, the site wouldn't work well
    without images anyway :)

    >
    >>still... it's not really needed in most cases.

    >
    >
    > better safe than sorry :)


    Meh... but less fun!


    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Jan 10, 2005
    #15
  16. [Mystic]

    Els Guest

    SpaceGirl wrote:

    >> I'd say, if you have a background-image, make sure the
    >> background-color of the element that has the
    >> background-image is set to the most prominent colour in
    >> that image. Then set background-color:transparent to the
    >> link in front of that image.

    >
    > I considered this with a site I've been working on, but it
    > looked BAD... the image in the background is a faint photo
    > and it just didn't work design-wise when links had
    > backgrounds. But, the site wouldn't work well without
    > images anyway :)


    How can it look bad if you set background-color to transparent
    so you can see the images behind it?

    >> better safe than sorry :)

    >
    > Meh... but less fun!


    Goes for a lot of things, yes, not for webdesign though (afaics)
    ;-)

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jan 10, 2005
    #16
  17. [Mystic]

    SpaceGirl Guest

    Els wrote:

    > How can it look bad if you set background-color to transparent
    > so you can see the images behind it?
    >
    >
    >>>better safe than sorry :)

    >>
    >>Meh... but less fun!

    >
    >
    > Goes for a lot of things, yes, not for webdesign though (afaics)
    > ;-)
    >


    Can a colour be transparent??? It's not a colour if it's transparent.
    What colour is air? :D

    *hides*

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Jan 10, 2005
    #17
  18. [Mystic]

    Els Guest

    SpaceGirl wrote:

    >> How can it look bad if you set background-color to
    >> transparent so you can see the images behind it?

    >
    > Can a colour be transparent??? It's not a colour if it's
    > transparent. What colour is air? :D


    Colour of air? Transparent of course <g>

    > *hides*


    This is Usenet, let's see for how long you manage to hide ;-P

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Meredith Brooks - I'm A Bitch
    Els, Jan 10, 2005
    #18
  19. [Mystic]

    SpaceGirl Guest

    Els wrote:
    > SpaceGirl wrote:


    > Colour of air? Transparent of course <g>


    nyyyyarg! :)

    and I guess the RGB for the colour of air = "transparent".

    >
    >>*hides*

    >
    >
    > This is Usenet, let's see for how long you manage to hide ;-P
    >


    Damn. *takes the cushion off her head*.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Jan 10, 2005
    #19
  20. [Mystic]

    Karl Core Guest

    "Els" <> wrote in message
    news:Xns95DA9C85A39B9Els@130.133.1.4...
    > SpaceGirl wrote:
    >
    >>> How can it look bad if you set background-color to
    >>> transparent so you can see the images behind it?

    >>
    >> Can a colour be transparent??? It's not a colour if it's
    >> transparent. What colour is air? :D

    >
    > Colour of air? Transparent of course <g>
    >


    Depends on where you live, I guess.
    Ever been to Mexico City? Los Angeles?

    --
    -Karl Core
    Please Support "Project Boneyard":
    http://www.insurgence.net/info.aspx?action=band&item=boneyard
    Karl Core, Jan 10, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    800
    Kevin Spencer
    May 17, 2005
  2. Graham Thomson
    Replies:
    3
    Views:
    448
    Eki Y. Baskoro
    Dec 18, 2003
  3. Dan M
    Replies:
    5
    Views:
    412
  4. kolesdz
    Replies:
    9
    Views:
    520
    Blinky the Shark
    Aug 22, 2007
  5. Marina Limeira

    LINK with another link

    Marina Limeira, Feb 7, 2006, in forum: ASP .Net Web Services
    Replies:
    0
    Views:
    106
    Marina Limeira
    Feb 7, 2006
Loading...

Share This Page