Solved

Problem getting label's to behave

Posted on 2007-03-29
9
245 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
  • 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now