Solved

Problem getting label's to behave

Posted on 2007-03-29
9
252 Views
Last Modified: 2008-02-01
I'm trying to create some forms on a web page. The forms consists of lines that hold a variety of select's, text input, labels, checkboxes etc. Two examples here: http://www.bitl.no/layout/layout.php and http://www.bitl.no/layout/layout2.php. css is at http://www.bitl.no/layout/layout.css

Problem for layout.php:
I'd like to get all the input fields etc. on the same line but the <label>-section at the end jumps to the next line no matter what I do.

Problem for layout2.php:
I'd like to change the labels in the columns Started and Confirmed into text input instead but as the last line shows the following data jumps to the next line.

Basically I'm wondering what is the proper way of aligning these sorts of widgets.
A specific answer to the two questions and a link to a tutorial or some text explaining this would be highly appreciated.

I'm struggling with a trial-and-error approach to this since most tutorials I find deal with specific issues and not a broader view on the topic.

PS: Examples only tested with firefox. They validate ok so should show up ok in most browsers.

thanks
Johnny Ljunggren
0
Comment
Question by:johnnybaluba
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
9 Comments
 
LVL 28

Accepted Solution

by:
TName earned 300 total points
ID: 18815705
>Problem for layout.php...
Why do you use the label tag there (with the "for" attribute pointing to an id that doesn't exist - "statustemplate")
I think labels should be used as... labels - for adjacent form elements, e.g.:   http://www.quirksmode.org/css/forms.html
<label for="name">Name</label>
<input id="name" name="name">

You could try to use a span instead:
<span class="medium">
  <a href="http://www.bitl.no/layout/maler/todo.txt"> <img src="layout.php_files/OpenTemplate.png" alt="" border="0" height="16" width="16"> Todo2</a>
  </span>
0
 
LVL 11

Assisted Solution

by:alexcohn
alexcohn earned 200 total points
ID: 18815944
The "medium" class is defined in the style sheet layout.css as "block", therefore the ToDo2 label jumps to the next row. To override the class settings, you can set for the <label> tag of the ToDo2

style="display:inline; float:none;"

Note that float style commands block display, therefore resetting one of the two is not enough.

But in general, it seems not correct to use float in your case. If you want to build a non-tabular HTML with fixed columns, you could use the style "display: inline-block;" (note that for Firefox, at least for the older versions, you should use "display: -moz-inline-block", see http://www.thismuchiknow.co.uk/?p=7) instead of "display: block; float: left;". I believe this change to label style in CSS will resolve all problems in your pages.

A tutorial of styles including floating and table replacement can be found here: http://phrogz.net/CSS/


0
 

Author Comment

by:johnnybaluba
ID: 18816880
TName: Good question (why use label) and the answer is lack of knowledge. I got the purpose of label, for and id now (I think).
Your solution works great for layout.php. Should I just rewrite all my labels to use span instead (ie. layout2.php still look strange)?

alexcohn: Thanks for the information and the links. I removed "display: block; float: left;" and wrote "display: -moz-inline-block; display: inline-block;" instead but now the heading all come on their own line. and the Todo2 link still appear on the next line. Can you elaborate a bit on this? I'm trying to learn these things so bear with me :)

I'm also a bit confused about the usage of p, span, div and also ul and li. I'd appreciate a line or two telling when to use one or the other.

thanks again
Johnny
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 28

Assisted Solution

by:TName
TName earned 300 total points
ID: 18817403
Block elements (<div> or  <p> are usually displayed "block")  can contain other (block and/or inline) elements and will (again: usually, there are always exceptions - see float) cause a line-break.
Inline elements (e.g <span>) can only contain other inline elements and are not followed by a line-break:

http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1
http://www.onetwothree.net/borevitz/text/misc/htmltutorial/16blockinline.html
http://www.webdesignfromscratch.com/css-block-and-inline.cfm

About your layout2.php, I would really put all elements that belong into one line into a div (and not use labels as containers).
So if you have 3 lines of elements, you could have 3 divs, each holding (the elements that belong into that) one line, and a wrapper div containing the 3 divs...
To keep block elements in one line, you can float them left for example (or right).
0
 

Author Comment

by:johnnybaluba
ID: 18817834
Thank's, that cleared up a whole lot.
0
 
LVL 11

Expert Comment

by:alexcohn
ID: 18820184
To tell you the truth, I would suggest to use a table for your layout - it looks like it could suit your needs perfectly, even though the CSS purists would hate the idea. Use of <label> tag is not necessary, but it makes no harm. The way you use it without input element id that corresponds the "for" attribute of the label renders the labels useless, but it does not effect the layout. It's that block display style.

Now, it's my fault, I didn't have an updated FireFox at hand at that moment it happens that
  display: -moz-inline-block
stopped to work in v. 1.5 and was replaced (oh why???) with
  display: -moz-inline-stack;
see http://www.nczonline.net/archive/2006/10/382 for details.

As for p, span, div and also ul vs. ol, and li - see the introduction here: http://www.htmlcodetutorial.com/_UL.html - and references around.

0
 

Author Comment

by:johnnybaluba
ID: 18820473
Thanks for the input

I've tried tables on another similar web page I made and it somehow got ok, but I ran into a lot of issues there as well, that's why I wanted to try doing it purely through css. As I don't know the toolbox well enough I tend to do more trial and error than necessary. Learn as you go so to speak.

Your tip works but still since my use of label was not really the correct way, I'll try to rewrite the parts that use label. Haven't had a chance to read the links I've got but I assume using span and proper div's instead would do it?

Johnny
0
 
LVL 11

Expert Comment

by:alexcohn
ID: 18822683
Label tag may be used inside table, div, or span tags. In HTML, some tags define the logics, and some tags define presentation. Label does not define presentation. Generally speaking, the learning curve of CSS is harder than for table-based layout, but if you want to invest in learning CSS, you will be able to build more sophisticated HTML pages.

This is the layout.php in table format:
-------------------------
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Layout</title>
<base href="http://www.bitl.no/layout/" />
 <script src="/layout/calendar.js" type="text/javascript"></script>
<link href="/layout/layout.css" rel="stylesheet" type="text/css" media="screen" />
<style>
  label { display: inline; float: none; }
</style></head>
<body>
<div id="wrapper">
<form name="services" METHOD="get" ACTION="layout.php"><fieldset>
<legend>Tjenester</legend>
<table border="0"><tr><td>
<label for="service" class="mediumpluss heading">Type</label>
</td><td>
<label for="template" class="mediumpluss heading">Comment</label>
</td><td>
<label for="template3" class="medium heading">Offered</label>
</td><td>
<label for="template4" class="medium heading">Ordered</label>
</td><td>
<label for="template5" class="medium heading">Confirmed</label>
</td><td>
<label for="template2" class="medium heading">Template</label>
</td></tr><tr><td>
<select name="Select" class="mediumpluss">
    <option value="-1">&lt;n/a&gt;</option>
    <option value="1">Sel 1</option>
    <option value="2">Sel 2</option>
    <option value="3">Sel 3</option>
    <option value="4">Sel 4</option>
  </select>
</td><td>
<input type="text" name="comment_1" class="mediumpluss" tabindex="2" value="" />
</td><td>
<input type="text" name="offer_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal1.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
</td><td>
<input type="text" name="order_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal2.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
</td><td>
<input type="text" name="confirmed_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal3.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
</td><td>
<label for="statustemplate" class="medium">
<a href="maler/todo.txt" ><img src="OpenTemplate.png" width="16" height="16" border="0" alt="" /> Todo2</a>
  </label>
</td></tr></table>
<script type="text/javascript">
    var servicescal1 = new calendar(document.forms['services'].elements['offer_1']);
    var servicescal2 = new calendar(document.forms['services'].elements['order_1']);
    var servicescal3 = new calendar(document.forms['services'].elements['confirmed_1']);
  </script>
</fieldset>
</form>
</div>
</body>
</html>
-------------------------

I believe that it is easier to read and modify. Note that you do not need to worry about column widths at all - the table takes care of the layout automatically.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question