no more tables, use them div's for layouts !

Necuno

Necuno

Court Jester
Joined
Sep 27, 2005
Messages
58,566
Reaction score
3,437
great, but i can't seem to find that nice example that was posted here sometime ago :o:D

yes i suppose its time to drop ye olde html table for making those "great" layouts, labels left + input right.

anyone be so kind to link a link for me to start off :)
 
Try sitepoint.com and search for css layout - you will find a great deal of help available
 
but i can use this instead of using table to do the layout for the controls for example,

Businessname: []
Business Type: [\/]
country: [\/] city: [\/]

normally i would stick the above into a html table with 4 columns and 3 rows.
 
Necuno said:
but i can use this instead of using table to do the layout for the controls for example,

Businessname: []
Business Type: [\/]
country: [\/] city: [\/]

normally i would stick the above into a html table with 4 columns and 3 rows.
Click to expand...
You're probably better off using another tut for that. You may well end up using either divs and spans, or (the better option IMNSHO) lists. I've gone as far as to use dictionary items - they work quite well. Either way, they are more correct semantically than divs and spans...
 
Sorry for the double post, but I checked my latest feedback HTML to see what I'd done. It looks as follows:

Code: 
/* CSS */
form#feedback label {
	text-align: right;
	float: left;
	display: block;
	width: 150px;
	margin: 5px 0 0;
	padding: 0;
}
form#feedback input, form#feedback textarea {
	font-weight: normal;
	width: 200px;
	margin:5px 0 0 10px;
}
form#feedback select {
	margin:5px 0 0 10px;
	background-color: #fff;
	width: 204px;
}
form#feedback br {
	clear:left;
}
Code: 
<form action="feedback.php" method="post" id="feedback">
  <fieldset>
    <legend>Product Enquiry Form</legend>
    <label for="selectbox" accesskey="p">Product Supplier</label>
    <select id="selectbox">
      <option selected="selected">Option 1</option>
      <option>Option 2</option>
    </select>
    <br>
    <label for="textbox1">Demand</label>
    <input type="text" id="textbox1">
    <br>
    <label for="kludge"></label>
    <button type="submit" id="submit">Send</button>
  </fieldset>
</form>

Result:
uXTLwseP8tVGftj-JTnyKg


Hope that helps.
 
Last edited:
FarligOpptreden said:
Now, the tricky part comes when trying to design a complex page layout using only divs... ;)
Click to expand...
Not so tricky once you catch on. ;) I love the feeling of finally getting it right though.

Remember to develop for Cairo (Firefox), then tweak for Webkit (Safari/Chrome), and then IE. Makes for a much smoother process.
 
Raithlin said:
Not so tricky once you catch on. ;) I love the feeling of finally getting it right though.
Click to expand...
Same here! It's just awesome seeing a very complex DIV/CSS-based layout coming together and working in pretty much any browser you throw at it... :)

Raithlin said:
Remember to develop for Cairo (Firefox), then tweak for Webkit (Safari/Chrome), and then IE. Makes for a much smoother process.
Click to expand...
Same process I go through atm, but also test in Opera. If you do it properly and CORRECTLY the first time, adding in new pages or sections is a breeze. Also, you kind of realize after a while what works 99% of the time in all browsers, so you just tweak the anomalies later on.
 
cool, thanks for the repliess.

/goes to the non-table layout dojo and starts to train
 
Raithlin said:
Sorry for the double post, but I checked my latest feedback HTML to see what I'd done. It looks as follows:

Code: 
/* CSS */
form#feedback label {
	text-align: right;
	float: left;
	display: block;
	width: 150px;
	margin: 5px 0 0;
	padding: 0;
}
form#feedback input, form#feedback textarea {
	font-weight: normal;
	width: 200px;
	margin:5px 0 0 10px;
}
form#feedback select {
	margin:5px 0 0 10px;
	background-color: #fff;
	width: 204px;
}
form#feedback br {
	clear:left;
}
Code: 
<form action="feedback.php" method="post" id="feedback">
  <fieldset>
    <legend>Product Enquiry Form</legend>
    <label for="selectbox" accesskey="p">Product Supplier</label>
    <select id="selectbox">
      <option selected="selected">Option 1</option>
      <option>Option 2</option>
    </select>
    <br>
    <label for="textbox1">Demand</label>
    <input type="text" id="textbox1">
    <br>
    <label for="kludge"></label>
    <button type="submit" id="submit">Send</button>
  </fieldset>
</form>

Result:
uXTLwseP8tVGftj-JTnyKg


Hope that helps.
Click to expand...

hmmm can i do the same for asp controls ?, or is that via the CssClass property only?

evedently
Code: 
   <style>
        fieldset#fsVendorInput label
        {
            text-align: right;
            float: left;
            display: block;
            width: 150px;
            margin: 5px 0 0;
            padding: 0;
        }
        fieldset#fsVendorInput input, fieldset#fsVendorInput textarea
        {
            font-weight: normal;
            width: 150px;
            margin: 5px 0 0 10px;
        }
        fieldset#fsVendorInput select
        {
            margin: 5px 0 0 10px;
            background-color: #fff;
            width: 204px;
        }
        fieldset#fsVendorInput br
        {
            clear: left;
        }
    </style>

doesn't really style out

Code: 
<fieldset id="fsVendorInput">
      <asp:Label ID="Label2" runat="server" Text="Class:"></asp:Label>
      <asp:DropDownList ID="ddlVendorClass" runat="server"></asp:DropDownList>
     <br />
      <asp:Label ID="Label3" runat="server" Text="Name:"></asp:Label>
     <asp:TextBox ID="txtVendorName" runat="server"></asp:TextBox>
      <br />
      <asp:Label ID="Label4" runat="server" Text="Number:"></asp:Label>
      <asp:TextBox ID="txtVendorNumber" runat="server"></asp:TextBox>
</fieldset>

i obviously need to use this kind of thing in a .net web applications. lol, tables seems soo much less effert and beter over the use of the non table solutions, but i'll goog around to see the what and how :)
 
Last edited:
still looking for something to do as per my OP and example. so far it seems allot less effort to just stick the asp labels and input controls into a table for the basic layout for <what> : <input>

lol @ Why tables for layout is stupid, seems like nice pictorial for me level of understanding of css layouting :D
 
Last edited:
Necuno said:
hmmm can i do the same for asp controls ?, or is that via the CssClass property only?

evedently
Code: 
   <style>
        fieldset#fsVendorInput label
        {
            text-align: right;
            float: left;
            display: block;
            width: 150px;
            margin: 5px 0 0;
            padding: 0;
        }
        fieldset#fsVendorInput input, fieldset#fsVendorInput textarea
        {
            font-weight: normal;
            width: 150px;
            margin: 5px 0 0 10px;
        }
        fieldset#fsVendorInput select
        {
            margin: 5px 0 0 10px;
            background-color: #fff;
            width: 204px;
        }
        fieldset#fsVendorInput br
        {
            clear: left;
        }
    </style>

doesn't really style out

Code: 
<fieldset id="fsVendorInput">
      <asp:Label ID="Label2" runat="server" Text="Class:"></asp:Label>
      <asp:DropDownList ID="ddlVendorClass" runat="server"></asp:DropDownList>
     <br />
      <asp:Label ID="Label3" runat="server" Text="Name:"></asp:Label>
     <asp:TextBox ID="txtVendorName" runat="server"></asp:TextBox>
      <br />
      <asp:Label ID="Label4" runat="server" Text="Number:"></asp:Label>
      <asp:TextBox ID="txtVendorNumber" runat="server"></asp:TextBox>
</fieldset>

i obviously need to use this kind of thing in a .net web applications. lol, tables seems soo much less effert and beter over the use of the non table solutions, but i'll goog around to see the what and how :)
Click to expand...

Remember that ALL ASP.NET controls eventually render HTML controls back to the client. The Label you are declaring there isn't the actual HTML label tag you are looking for, it renders a <span> back to the client. Instead of using <asp:label> rather just use <label>. Remember to set the "for" attribute of the label to refer back to the control the label is for, i.e.:

Code: 
<label id="lblForVendorClass" runat="server" for="ddlVendorClass">Class:</label>
<asp:DropDownList ID="ddlVendorClass" runat="server"></asp:DropDownList>

Just keep in mind that the "for" attribute refers to the DOM ID of the element, while the ID you specify for an ASP.NET control refers to the server-side ID. If you place your ASP.NET controls inside a user control or (in case of AJAX 2.0) an update panel, the client-side ID will receive a prefix. So you end up with a client-side ID like "ctl00_ucSomeControl_ddlVendorClass". The "for" attribute should ALWAYS refer back to the client-side ID of the control which the label is for.

A useful tip is to always declare the labels for runat="server" so you can access the "for" attribute and set it to the correct client-side ID, i.e.:

Code: 
lblForVendorClass.Attributes["for"] = ddlVendorClass.ClientID;

Hope it helps!
 
thanks,

working

i need to do this web side of .net more often than desktop. Rereading through Raithlin and your post (FarligOpptreden), i see what you guys meant. there is actually no need to use the asp labels over <label>. (yes i know the "for" part is missing, but ill add that when it is used inside a container :))

Code: 
    <style>
        fieldset#fsVendorInput label
        {
            text-align: right;
            float: left;
            display: block;
            width: 150px;
            margin: 5px 0 0;
            padding: 0;
        }
        fieldset#fsVendorInput input, fieldset#fsVendorInput textarea
        {
            font-weight: normal;
            width: 150px;
            margin: 5px 0 0 10px;
        }
        fieldset#fsVendorInput select
        {
            margin: 5px 0 0 10px;
            background-color: #fff;
            width: 204px;
        }
        fieldset#fsVendorInput br
        {
            clear: left;
        }
    </style>

with

Code: 
<fieldset id="fsVendorInput">
 <label for="ddlVendorClass" runat="server"> Class:</label>
 <asp:DropDownList ID="ddlVendorClass" runat="server"></asp:DropDownList>
 <br />
 <label for="txtVendorName" runat="server">Name:</label>
 <asp:TextBox ID="txtVendorName" runat="server"></asp:TextBox>
 <br />
 <label for="txtVendorNumber" runat="server">Number:</label>
  <asp:TextBox ID="txtVendorNumber" runat="server"></asp:TextBox>
</fieldset>
 
Last edited:
The problem in doing it that way, is that when you have a multiline textbox (i.e. a textarea) the "label" will be grounded to the base of the control next to it. You'd probably want it floating top-left to the control though... Also, by using <label> tags with "for" and "accesskey" attributes, you can add keyboard shortcuts to the control it references. ;)
 
FarligOpptreden said:
The problem in doing it that way, is that when you have a multiline textbox (i.e. a textarea) the "label" will be grounded to the base of the control next to it. You'd probably want it floating top-left to the control though... Also, by using <label> tags with "for" and "accesskey" attributes, you can add keyboard shortcuts to the control it references. ;)
Click to expand...

lol, first time i see the "for" thing anyways. :o:D
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X