Style sheets, include one style within another (not inheritance)

Discussion in 'HTML' started by foldface@yahoo.co.uk, Nov 24, 2003.

  1. Guest

    Hi

    Given something like this:

    <style type="text/css">
    DIV.allowLeft {clear: left;}
    DIV.left {float: left;}
    DIV.leftBig {float: left; width: 300}
    DIV.rightBig {float: right; width: 300}
    </style>

    Is there anyway of placing the 'width:300' bit into another declaration
    (pardon my terminology) so that I only have to change it in one place,
    e.g. something like this:

    <style type="text/css">
    bigWidth = 300;
    DIV.allowLeft {clear: left;}
    DIV.left {float: left;}
    DIV.leftBig {float: left; bigWidth}
    DIV.rightBig {float: right; bigWidth}
    </style>

    The width is only going to apply to some divs

    Thanks
    F
     
    , Nov 24, 2003
    #1
    1. Advertising

  2. wrote:

    > <style type="text/css">
    > DIV.allowLeft {clear: left;}
    > DIV.left {float: left;}
    > DIV.leftBig {float: left; width: 300}
    > DIV.rightBig {float: right; width: 300}
    > </style>


    > Is there anyway of placing the 'width:300' bit into another declaration
    > (pardon my terminology) so that I only have to change it in one place,


    "width:300" is an error (it has no meaning). You probably meant
    "width:300px" (and some browsers will guess that - which they
    shouldn't). You should howevere consider setting the width in "em"s
    instead, particularily if the content is text.

    > e.g. something like this:


    > <style type="text/css">
    > bigWidth = 300;
    > DIV.allowLeft {clear: left;}
    > DIV.left {float: left;}
    > DIV.leftBig {float: left; bigWidth}
    > DIV.rightBig {float: right; bigWidth}
    > </style>


    No variables in CSS. But you can do this:

    <style type="text/css">
    DIV.allowLeft {clear: left;}
    DIV.left {float: left;}
    DIV.leftBig, DIV.rightBig {width: 300px;}
    DIV.leftBig {float: left;}
    DIV.rightBig {float: right;}
    </style>

    You can also use multiple classes. Like this:

    HTML:

    <div class="leftBig whatever">...</div>
    <div class="rightBig whatever">...</div>

    CSS:

    <style type="text/css">
    DIV.allowLeft {clear: left;}
    DIV.left {float: left;}
    DIV.whatever {width: 300px;}
    DIV.leftBig {float: left;}
    DIV.rightBig {float: right;}
    </style>

    --
    Bertilo Wennergren <> <http://www.bertilow.com>
     
    Bertilo Wennergren, Nov 24, 2003
    #2
    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. Mr Newbie

    Style Sheets - Designer - Not Updating

    Mr Newbie, Nov 10, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    342
    Mr Newbie
    Nov 10, 2005
  2. Andreas Bogenberger
    Replies:
    3
    Views:
    1,003
    Andreas Bogenberger
    Feb 22, 2008
  3. Jerry C

    css style sheets not working

    Jerry C, Apr 17, 2008, in forum: ASP .Net
    Replies:
    5
    Views:
    685
    Steven Cheng [MSFT]
    Apr 23, 2008
  4. Carl Corcoran
    Replies:
    1
    Views:
    290
    Bob Barrows
    Nov 12, 2003
  5. Jake Barnes
    Replies:
    6
    Views:
    215
    Lawrence Krubner
    Apr 12, 2009
Loading...

Share This Page