newbie: <div> trouble

[Jeff]

Hey

I'm trying to create a asp.net 2.0 web site. A while ago I created the
registration page using table hacks... but now I want to reprogram that
page. I want to avoid using table hacks... I believe using div is better
than table hacks....

Okay, here is the problem:
http://home.online.no/~au-holme/pub/564/divtrouble.JPG
That picture is divided into 2 groups, the upper part see the registrations
fields based on div and css.. the 3 last fields is placed tidy using a table
hack...

PS: The colors are just to illustrate what area the controls are covering,
in other words the colors are used as debug info

As you see the div approach doesn't look good... so I was wondering if some
of you have some tips about how I can make the div approach look as tidy as
the table hack..

******* registration.aspx: **************
<div style="background-color:Red;">
<div><asp:Label ID="Label1" runat="server" CssClass="tyu"
Text="UserName"></asp:Label><asp:TextBox ID="TextBox1" CssClass="trr"
runat="server"></asp:TextBox></div>
<div style="background-color:Green;"><asp:Label ID="Label2" runat="server"
CssClass="tyu" Text="Password"></asp:Label><asp:TextBox ID="TextBox2"
CssClass="trr" runat="server"></asp:TextBox></div>
<div><asp:Label ID="Label3" CssClass="tyu" runat="server" Text="Confirm
Password"></asp:Label><asp:TextBox ID="TextBox3" CssClass="trr"
runat="server"></asp:TextBox></div>
</div>

******* default.css: **************
..trr {
background-color:#CCBB00;
float:right; }

..tyu {
width:8em;
background-color:Orange;}

any suggestions?

Jeff

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

Hey

I'm trying to create a asp.net 2.0 web site. A while ago I created the
registration page using table hacks... but now I want to reprogram that
page. I want to avoid using table hacks... I believe using div is better
than table hacks....

Okay, here is the problem:
http://home.online.no/~au-holme/pub/564/divtrouble.JPG
That picture is divided into 2 groups, the upper part see the registrations
fields based on div and css.. the 3 last fields is placed tidy using a table
hack...

PS: The colors are just to illustrate what area the controls are covering,
in other words the colors are used as debug info

As you see the div approach doesn't look good... so I was wondering if some
of you have some tips about how I can make the div approach look as tidy as
the table hack..

******* registration.aspx: **************
<div style="background-color:Red;">
<div><asp:Label ID="Label1" runat="server" CssClass="tyu"
Text="UserName"></asp:Label><asp:TextBox ID="TextBox1" CssClass="trr"
runat="server"></asp:TextBox></div>
<div style="background-color:Green;"><asp:Label ID="Label2" runat="server"
CssClass="tyu" Text="Password"></asp:Label><asp:TextBox ID="TextBox2"
CssClass="trr" runat="server"></asp:TextBox></div>
<div><asp:Label ID="Label3" CssClass="tyu" runat="server" Text="Confirm
Password"></asp:Label><asp:TextBox ID="TextBox3" CssClass="trr"
runat="server"></asp:TextBox></div>
</div>

******* default.css: **************
.trr {
background-color:#CCBB00;
float:right; }

.tyu {
width:8em;
background-color:Orange;}

any suggestions?

Jeff

You are trying to apply a width to an inline element (as an asp:Label is
rendered as a span tag), which doesn't work at all. Then you are turning
the textboxes into block elements by floating them, which will make them
try to line up beside each other and make the inline elements try to
flow around them. The two types of elements will fight for the little
space there is, and end up placing themselves wherever there is some
space left.

I usually use html code like this:

<div class="Form">
<div class="Item">
<label for="fldUsername">User name:</label>
<asp:TextBox id="fldUsername" runat="server" />
</div>
<div class="Item">
<label for="fldPassword">User name:</label>
<asp:TextBox id="fldPassword" runat="server" TextMode="Password" />
</div>
</div>

Then format it using css like this:

..Form { border: 1px solid #ccc; padding: 5px; }
..Form .Item { clear: both; }
..Form .Item label { float: left; width: 100px; }
..Form .Item input { float: left; width: 150px; }