Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: If Else statements in CSS

  1. #1
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default If Else statements in CSS

    Does anyone know of a way where I can change the widths of certain DIVs depending on the DIV name? I.E. - a certain div (DIV1) would inherit the width of another div (DIV2) depending on what content was within DIV2.

    Example -
    I have an aspx page that has two divs - DIV1 and DIV2. DIV1's width and content is constant on the page but DIV2's width and content changes depending on from where you come on the website. How can I pass along the width from DIV2 to DIV1?

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Set the ID and/or class dynamically.

    I can't be more specific without more information.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by nballon
    Does anyone know of a way where I can change the widths of certain DIVs depending on the DIV name?
    Code:
    #div-identifier {
        /* Set width property */
    }
    but that isn't what you mean, is it?

    I.E. - a certain div (DIV1) would inherit the width of another div (DIV2) depending on what content was within DIV2.
    That's an entirely different matter, and the short answer is no, you can't do that.

    A div element is a block-level element. Block-level elements receive their widths in three ways: as a length value, a percentage value, or a calculated value. In the first case, the width is absolute, and the element will simply overflow its ancestors if necessary. In the second case, the width is computed as a percentage of the containing block. For statically- or relative-positioned block-level elements, the containing block is the nearest block-level ancestor. In the third case, the width must satisfy an equation such that the width plus the left and right margins, borders, and padding, equal the width of the containing block.

    As you can see, width calculations are based only ancestors, if any elements at all. Siblings or specific elements are not considered. It may be possible to use scripting to obtain the dimensions of one element and assign that to another, but it isn't reliable on the Web.

    Mike

  4. #4
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Twey, what more information do you need? I can give you as much as possible without violating my company's privacy policy. I can give you another example that I hope helps you out -

    DIV1 - needs to be set to a width that is determined by the width of DIV2 (which would vary depending on what page it came from) so here's what I mean -
    1st example - Content for DIV2 is 600px wide
    <div id=1 style="widthDIV2)">
    </div>
    <div id=2 style="width:600px">
    blah blah blah blah</div>

    2nd example - Content for DIV3 is 400px wide

    <div id=1 style="widthDIV3)">
    </div>
    <div id=3 style="width:400px">
    blah blah blah blah</div>

    3rd example - Content for DIV4 is 550px wide

    <div id=1 style="widthDIV4)">
    </div>
    <div id=3 style="width:550px">
    blah blah blah blah</div>

    As you can see, I want the width for DIV1 to be set to the width of the div below it...Does that help?

  5. #5
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    MWinter, I thought maybe your solution was it but yeah you are right, what I am trying to do might not be feasible I don't know of another way unless you can use If/Else statements meaning if DIV2 = x_width, set DIV1 width to that width...

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Saying "widthIV4" isn't really logical in css. The best you could do is give the div tag and call it's properties there (as mwinter said).
    - Mike

  7. #7
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I was giving an example when I wrote width:div4, I know it's not logical...

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,989
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    This sort of style and markup will do what you want but can be tricky to design the rest of your page around:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #cont {
    position:absolute;
    width:auto;
    }
    #div1 {
    border:1px solid black;
    }
    </style>
    </head>
    <body>
    <div id="cont">
    <div id="div1">Hi</div>
    <div id="div2">&nbsp;</div>
    <input type="button" onclick="document.getElementById('div2').innerHTML=document.getElementById('div2').innerHTML.toLowerCase()=='gee golly gosh'? '&nbsp;' : 'gee golly gosh';" title="toggle div2 content">
    </div>
    </body>
    </html>
    Notes: Click the button to toggle div2's content. You will see div1 expand and contract in some browsers, and in others it will expand but not contract. However, if as you say, the page is loaded fresh each time that div2 gets different content, this wouldn't matter as, div1 only needs to conform onload then, and it will. No javascript is required for this effect. The javascript onclick event for the button is simply to show what happens when the content of div2 is changed.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Sep 2006
    Location
    Honolulu
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    nballon - Meaning no disrespect... since this is an aspx page, that implies the use of asp.net. Why don't you handle the decision and sizing on the server side? I mean, isn't that the whole point of asp.net?

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Why don't you handle the decision and sizing on the server side?
    And how exactly do you suggest s/he does that? The required information is not available to the server, nor could the server-side script feasibly regenerate the values at every point at which the input value could change (window resize events, for example).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •