View Full Version : If Else statements in CSS
nballon
08-30-2006, 06:14 PM
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?
Set the ID and/or class dynamically.
I can't be more specific without more information.
mwinter
08-30-2006, 08:21 PM
Does anyone know of a way where I can change the widths of certain DIVs depending on the DIV name?
#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
nballon
08-30-2006, 08:25 PM
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="width:(DIV2)">
</div>
<div id=2 style="width:600px">
blah blah blah blah</div>
2nd example - Content for DIV3 is 400px wide
<div id=1 style="width:(DIV3)">
</div>
<div id=3 style="width:400px">
blah blah blah blah</div>
3rd example - Content for DIV4 is 550px wide
<div id=1 style="width:(DIV4)">
</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?
nballon
08-30-2006, 08:32 PM
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...
mburt
08-30-2006, 08:43 PM
Saying "width:DIV4" 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).
nballon
08-30-2006, 08:58 PM
I was giving an example when I wrote width:div4, I know it's not logical...
jscheuer1
08-31-2006, 09:20 AM
This sort of style and markup will do what you want but can be tricky to design the rest of your page around:
<!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"> </div>
<input type="button" onclick="document.getElementById('div2').innerHTML=document.getElementById('div2').innerHTML.toLowerCase()=='gee golly gosh'? ' ' : '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.
WorldSailor
09-01-2006, 11:35 PM
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?
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).
jscheuer1
09-02-2006, 04:45 AM
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).
I'm not clear on how this would be done server side but, asp.net is a bit more powerful than your average server side languages like plain asp and PHP. So, it might be possible. However, the question of what happens on view port resize is interesting. Depending upon how the content in question fits into the rest of the page, this might not even be an issue though.
I'm not clear on how this would be done server side but, asp.net is a bit more powerful than your average server side languages like plain asp and PHP.Even if it were the ultimate in languages and had perfect English syntax, it would still be limited to the information the browser provided and the network speed.
I've had a vague look at ASP.NET and would disagree with you there, by the bye :) From what I see, thanks to its adamant abstraction of the code, the interface exposed to the average user is significantly less powerful than PHP or even ASP.
jscheuer1
09-03-2006, 03:27 AM
I've had a vague look at ASP.NET and would disagree with you there, by the bye :) From what I see, thanks to its adamant abstraction of the code, the interface exposed to the average user is significantly less powerful than PHP or even ASP.
Since neither of us seems to really know what we are talking about here, we should probably just let it drop. My cursory exposure to ASP.NET certainly showed me that it has access to and control over much more than asp, in addition, I got the impression, to being able to accomplish everything asp can. Unless I grossly misunderstood, it is an extension of asp and can be used just the same as asp, or with many extras.
Since neither of us seems to really know what we are talking about here, we should probably just let it drop.Most likely.
Unless I grossly misunderstood, it is an extension of asp and can be used just the same as asp, or with many extras.You may be correct.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.