CSS formatting anchor differently based on enclosing div

Discussion in 'HTML' started by Willem, Oct 3, 2004.

  1. Willem

    Willem Guest

    Hi,

    I'm trying to format the anchors enclosed in a div with a certain class to
    be formatted differently from the anchors on the rest of the page. The html
    is use:

    <div class="navigation"><a href="/">home</a> other anchors</div>

    Part of the stylesheet:

    ..navigation { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
    10pt; margin-bottom: 4pt}
    a.navigation { font-size: 180px; color: #99FF00}

    The style for a.navigation is a bit overdone for being sure it works :)
    According to the docs on w3c.org and some other css pages the definition
    'a.navigation' should work (at least according to my intrepetation). But it
    doesn't.

    The links in the div are created by a generic script using SSI so including
    a class in the anchors is not really an option.

    So is this kind of formatting possible and how?

    Regards,
    Willem
     
    Willem, Oct 3, 2004
    #1
    1. Advertising

  2. Willem wrote:
    > I'm trying to format the anchors enclosed in a div with a certain class to
    > be formatted differently from the anchors on the rest of the page.


    Easy. Use a descendent selector:
    http://w3.org/TR/CSS2/selector.html#descendant-selectors

    > .navigation { font-family: Verdana, Arial, Helvetica, sans-serif;
    > font-size: 10pt; margin-bottom: 4pt}


    Font sizes specified in points are a VERY bad idea:
    http://css-discuss.incutio.com/?page=UsingPoints

    > a.navigation { font-size: 180px; color: #99FF00}


    Pixels are better, but still a bad idea:
    http://css-discuss.incutio.com/?page=UsingPixels

    > According to the docs on w3c.org and some other css pages the definition
    > 'a.navigation' should work (at least according to my intrepetation). But
    > it doesn't.


    No. "a.navigation" means "An <a> element that has class 'navigation'". It
    does not mean "An <a> element that descends from another element that has
    class 'navigation'".

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Oct 3, 2004
    #2
    1. Advertising

  3. "Willem" <> writes:

    F> Hi,
    >
    > I'm trying to format the anchors enclosed in a div with a certain class to
    > be formatted differently from the anchors on the rest of the page. The html
    > is use:
    >
    > <div class="navigation"><a href="/">home</a> other anchors</div>
    >
    > Part of the stylesheet:
    >
    > .navigation { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
    > 10pt; margin-bottom: 4pt}
    > a.navigation { font-size: 180px; color: #99FF00}


    You would only use a.navigation if your HTML looked something like this:

    <a href="/" class="navigation">home</a>

    Looking at the HTML you're using, you need this CSS instead:

    ..navigation a { font-size: 180px; color: #99FF00}


    HTH
    Matt
     
    Matt N. Jones, Oct 3, 2004
    #3
  4. On Sun, 3 Oct 2004 20:15:36 +0200, Willem
    <> wrote:

    [snip]

    > <div class="navigation"><a href="/">home</a> other anchors</div>


    [snip]

    > a.navigation { font-size: 180px; color: #99FF00}


    [snip]

    > So is this kind of formatting possible and how?


    Yes, it's just that your selector is backward.

    a.navigation

    applies to an A element with the class, navigation. What you want is an A
    element that is the descendant of another element with the class,
    navigation:

    .navigation a

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Oct 3, 2004
    #4
  5. Willem

    Willem Guest

    Thanks all for the correct answer(s)! '.navigation a {};' does the trick.

    "David Dorward" <> wrote in message
    news:cjpg6h$t7m$1$...

    Thanks for the extra comments on the stylesheets and the link to this site,
    it's very informative.

    > Pixels are better, but still a bad idea:
    > http://css-discuss.incutio.com/?page=UsingPixels


    I know the basic problems with points & pixels but didn't know the big
    difference between mac & pc regarding screen resolution. I already was
    planning to offer at least two stylesheets for different font sizes using
    server side scripting so the accessibility problem shouldn't be that big of
    a problem.

    Willem
     
    Willem, Oct 4, 2004
    #5
  6. Willem wrote:

    > I already was planning to offer at least two stylesheets for different
    > font sizes using server side scripting so the accessibility problem
    > shouldn't be that big of a problem.


    Ah! What a good idea! Break the _normal_ control and then make the user
    learn a _different_ control which can't do as much. Clever! :)

    Seriously, some people need very large text, others do not. They know what
    they need better then you, so leave the font size of body text alone.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Oct 4, 2004
    #6
    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. Replies:
    2
    Views:
    427
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    788
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    219
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    343
    Martin Honnen
    Jun 26, 2005
  5. libsfan01

    referencing enclosing div tag

    libsfan01, Jul 27, 2006, in forum: Javascript
    Replies:
    2
    Views:
    75
Loading...

Share This Page