[ANNC] New HTML & CSS FAQ

[liorean]

I created a new FAQ in the HTML & CSS forum. Everybody that feel like they can contribute are encouraged to do so. The thread: <http://codingforums.com/showthread.p...threadid=35014>

If you feel like you can't contribute yourself, but have a good question, post it here so that I or some other member on these forums can write it if they feel like they can do it well. If you have any input on the questions already answered in it, post that input here.

Thanks!
// David

[liorean]

Question title:
"Q: + question

Answer body:
"[​u][​b]A[​/b][​/u]: " + answer


For consistency, here's a few writing guidelines:

• Code snippets should be wrapped in [​code][​/code] blocks.
• Comments within code blocks should be wrapped in [​color=green][​/color].
• Script snippets in running text should be wrapped in [​color=blue][​/color].
• If you write an example of an error, the code causing the error should be wrapped in [​color=red][​/color].
• Use [​i][​/i] to wrap text that the user should replace by own code.
• In running text, use [​b][​/b] to wrap JavaScript objects.
• Please don't include your signature if it isn't relevant to the question, and make sure that no part of any script snippets included in the post are replaced by smilies.

Thanks
// David

[liorean]

Darn you Alex, you beat me to that. I was writing on the same third question! Oh well, I guess I'll have to find some other topic to write on.

[jeskel]

Hi, could you comment this Q/A before I post it? Thanks a lot. Don't hesitate to point out typo as well as grammar syntax problems. Thank you very much.



A: The forms layouts usually rely heavily on tables to keep everything lined up. You can easily achieve the same thing by applying a little CSS to your page.

Using tables, you would line up your form elements like that:

<form action="whatever.php" method="post">
<table>
<tr>
<td>First name:</td>
<td><input type="text" name="first_name" size="20" maxlength="30" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" size="20" maxlength="30" /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value selected="Not specified">Not specified</option> 
<option value="Male">Male</option> 
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</form>

You can easily achieve the same thing using CSS. Here is the CSS part:

form p {
width: 350px;
clear: both;
}

form p label {
display: inline;
float: left;
width: 100px;
}

form p input, form p textarea, form p select {
margin: 0;
}

And here is the HTML part:

<form action="whatever.php" method="post">
<p><label for="first_name">First name:</label>
<input type="text" name="_name" size="20" maxlength="30" /></p>
<p><label for="last_name">Last name:</label>
<input type="text" name="last_name" size="20" maxlength="30" /></p>
<p><label for="gender">Gender:</label>
<select name="gender">
<option value selected="Not specified">Not specified</option> 
<option value="Male">Male</option> 
<option value="Female">Female</option>
</select></p>
</form>

Labels float to the left of the paragraphs appearing within forms while form fields will apear to the right. To make it short, the clear property will achieve what the </tr><tr> used to do. Note that my explanations are based on Dan Shafer's book 'HTML Utopia, Designing Without Tables Using CSS'.

[liorean]

For consistency, add these:
- You have no "Q: " in the title.
- You have no colon after the "A" in the body.
- Use [color=blue][/color] to wrap running parts of code in the text.

A couple of other things:
- Please indent the code samples to make them easier to read.
- Floating labels not at all appearing is an old moz bug. I don't know if it's fixed yet, but since 1.2, Netscape 7.0 and Camino 0.7 are all affected I'd say you should be very wary of this and make sure you test the code in at least one of the browsers I mentioned.

[jeskel]

thx for poiting it out David. I will work on that and post a little something asap.

[me']

I've posted a new topic: Why won't my page validate?.

[liorean]

Nice!

Do you think you could capitalise the first letter in question, though?

[me']

Have done. There appears to be a problem with the Table of Contents, though. I assume you just put [url=#postxxxxx], but VBulletin appears to have parsed it as http://#postxxxxx, meaning all those links are invalid.

[liorean]

Garadon just suggested me to do that change. Since it doesn't seem to work as it should I'll change it back, though.

[jeskel]

Would adding a link to this page and quoting the following text be enough? I could also post an alternate code using span but it should be ok. What do you think David? Any suggestions about my code are more than welcome.

http://www.pixy.cz/blogg/clanky/css-...andlabels.html

Notes
Older versions of Safari didn't support legend, just the fieldset border is visible. Camino (post-Chimera) has a bug causing floated labels are replaced with input fields. Buggy Opera6/Mac: legend is displayed inside the fieldset (among other text). MSIE/Mac only displays legend on the right side if text-align:right is specified. NS6 fails badly on these constructs (thanks to Manuel Razzari); however, NS7 works fine.

[liorean]

Yeah it would do nicely.

[jeskel]

done

[Antoniohawk]

Hey me' you could also add the following links to your post in the faq, for added reference.

Tags: http://www.w3.org/TR/REC-html40/index/elements.html

Attributes: http://www.w3.org/TR/REC-html40/index/attributes.html

[Alex Vincent]

Originally posted by liorean
Darn you Alex, you beat me to that. I was writing on the same third question! Oh well, I guess I'll have to find some other topic to write on.

I guess great minds think alike. I just hope my answer didn't leave anything out for someone new to the idea of XHTML. (No way am I going to inflict the full complexibility of possibilites XML offers in a thread like that!)

The XML FAQ thread is wide open...