Need the following layout

HTML & CSS
1

<div id=“div1” runat=“server” style="display:none>
<asp:button id=“ok” runat=“server” text=“X”>// need this on right of div1
<div id=“div2” runat=“server” style="display:none> asp control</div>
<div id=“div3” runat=“server” style="display:none> asp control</div>
<div id=“div4” runat=“server” style="display:none> asp control</div>
</div>

i div1 i need a button as well as other 3 divs

when i click a button1 div1 will be displayed true & depending on condition div 2 or 3 or 4 will be displayed in div 1

but with above i dont get it

  1. if i have div1.Attributes[“style”] = “display:block”; from code behind i dont get the control in the position set
    but instead if i use
    div1.Visible = true ; i get as positioned as the control is made to attain position from code behind

H_X.Value i get from client side

this.div1.Style.Add(“position”, “absolute”);
this.div1.Style.Add(“left”, Convert.ToInt32(H_X.Value) - 100 + “px”);

2

Sorry I don’t do ASP, but what is that snippet you have in there?

How is it displaying now? How would you like this to differ in the final product? The code you have provided is scarce and replicating it on our end is impossible.

If you have a site, that would be very preferable. While this may technically be a positioning issue(?) most of your code is basically Javascript and ASP. Either way, hopefully we can help, but first we need enough so that we can run a test example page on our end, which means no ASP :).

3

currently i have have the above html

need to display as

<div1> <button control> // button contro to right of div1
<div2> or div3 or div4 will be display : block on condition

</div>

hope i am clear

4

This isn’t HTML, so don’t expect it to do anything meaningful in a browser. Browsers read HTML, not ASP. Your ASP code should be creating pure HTML and pumping that over to the browser.

Since it’s not HTML, styling it and Javascripting it should not work.

What you probably want for real HTML code is something like this:


<div id="div1">
  <button id="ok" value="X">
  <div id="div2"> asp control</div>
  <div id="div3"> asp control</div>
  <div id="div4"> asp control</div>
</div>

You can set a width on div1 with CSS

#div1 {
width: 500px;
overflow: hidden;
}
(or something)
The overflow hidden is going to be so that if we float the button to the right, div1 grows to contain it.

To get the button to the right, you can float it right

#div1 button {
float: right;
}
(it’s a good idea to also give button a width)

Make all the other divs invisible:
#div1 div {
display: none;
}

Now use button’s id to target it with Javascript.

var button;
if (button = document.getElementById(‘ok’)) {
button.onclick = function() {
//logic here to change div2,3,4’s display style to ‘block’ instead of ‘none’;
}
}

5

ok i done

but still some issue

atatched the screen shot

6

post the HTML and CSS code you have right now. Also which browser you are looking in. In the browser go to View Source and that’s the HTML we want to see.

If you don’t have a


<!doctype html>

at the top of your HTML, browsers will not all look the same with a lot of CSS. You must have that line of code at the top.

7

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml” >
<head><title>

<style type=“text/css”>
#div1
{
/width: 500px;/
overflow: hidden;
background-color:silver;
border: thin solid black;
}

#div1 btnok
{
    float: right;
    width:10px;

}

</style>

<div id=“div1” style=“display:none”>
<div id=“Divok” style=“float: right;”>
<input type=“submit” name=“btnok” value=“ok” onclick=“setvalues();” id=“btnok” /></div>
 

                    &lt;div id="div2" style="display:none"&gt;
                        &lt;input name="txtname" type="text" value="c" id="tname" style="height:15px;width:182px;display:block" /&gt;&lt;/div&gt;

</div>

8

Sounds like you need to have an element wrap around div1 and the ok button, and then give that, along with <div2> element, both the same width. Should cause them to stretch proportionately.

9

yes

10

Also


<head>
[color=red]<meta http-equiv="content-type" content="text/html; charset=utf-8" />[/color]
<title>[color=red]</title>[/color]


<style type="text/css">
#div1
{
/*width: 500px;*/
overflow: hidden;
background-color:silver;
border: thin solid black;
}

#div1 btnok
{
float: right;
width:10px;

}
</style>
[color=red]</head>
<body>

[/color]

<div id="div1" style="display:none">
...

at the bottom
[color=red]</body>
</html>[/color]
11

Sorry? I don’t know what you mean by that :).