style sheet problems from code behind

Question

Hi im trying to set the css style for this but I dont know whats happening I have this code from asp (code behind)

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div.Style["float"] = "left";
Image img = new Image();
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
img.AlternateText = "Test image";
div.Controls.Add(img);
test1.Controls.Add(div);

System.Web.UI.HtmlControls.HtmlGenericControl div1 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div1.InnerText = String.Format("{0}", reader.GetString(0));

div1.Style["float"] = "left";
test1.Controls.Add(div1);

System.Web.UI.HtmlControls.HtmlGenericControl div2 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div2.Style["clear"] = "both";
test1.Controls.Add(div2);

which does this:

My css was originaly this:

div#test1 {
}
div#div
{
  width:90%; 
  z-index:1; 
  padding:27.5px; 
  border-top: thin solid #736F6E;
  border-bottom: thin solid #736F6E;
  color:#ffffff;
  margin:0 auto;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

But I dont know how to change the css now to reflect the changes in my code so that I can apply style to it.

Answer 1

You can always apply css to your div elements by

test1.Attributes["class"] = "yourCSS";

and include the css in your aspx file. You can also try

 test1.Attributes.Add("class", "yourCSS") 

Answer 2

You can try test1.className = "nameofyourcss"; or test1.setAttribute("class", "nameofyourcss");

Answer 3

I suggest you to use Literal instead of generating divs and images. I altered your code using Literal.

Literal literal1 = new Literal();
  literal1.Text =
  string.Format("<div style=\"float: left\"><img src='{0}' alt='Test Image'>
  </img></div>",ResolveUrl("~/userdata/2/uploadedimage/batman-for-facebook.jpg"));
  literal1 = new Literal();
  literal1.Text = string.Format("<div style=\"float: left\">{0}</div>", Reader.GetString(0));
  test1.Controls.Add(literal1);
  literal1 = new Literal();
  literal1.Text = "<div style=\"clear: both\">{0}</div>";
  test1.Controls.Add(literal1);

Answer 4

might want to try something like this by wrapping divs into one more. That is to give a top and bottom borders.

<style type="text/css">
        #test1 .desc
        {
            padding:27.5px; 
            float:left;
            height: 100px; 
        }
        #test1 .img
        {
            float:left;
            padding:27.5px;
        }
        #test1 > div.main
        {
        border-top: thin solid #736F6E;
        border-bottom: thin solid #736F6E;
        color:#000000;
        margin:0 auto;
        white-space: pre;
        white-space: pre-wrap;
        white-space: pre-line;
        }
    </style>

System.Web.UI.HtmlControls.HtmlGenericControl maindiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            maindiv.Attributes["class"] = "main";

            System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div.Attributes["class"] = "img";
            Image img = new Image();
            img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
            img.AlternateText = "Test image";
            div.Controls.Add(img);
            maindiv.Controls.Add(div);

            System.Web.UI.HtmlControls.HtmlGenericControl div1 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div1.InnerText = String.Format("{0}", reader.GetString(0));
            div1.Attributes["class"] = "desc";
            maindiv.Controls.Add(div1);

            System.Web.UI.HtmlControls.HtmlGenericControl div2 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div2.Style["clear"] = "both";
            test1.Controls.Add(div2);
            test1.Controls.Add(maindiv);