Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 39
  1. #1
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts

    [ANNC] New HTML & CSS FAQ

    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

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts

    Template for question-answers

    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
    Last edited by liorean; 03-29-2004 at 03:06 PM.

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    Last edited by liorean; 03-14-2004 at 09:56 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Q: How can I handle forms without tables?

    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:
    Code:
    <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:
    Code:
    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:
    Code:
    <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'.
    Last edited by jeskel; 03-14-2004 at 10:32 AM.

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    For consistency, add these:
    - You have no "Q: " in the title.
    - You have no colon after the "A" in the body.
    - Use &#0091;color=blue]&#0091;/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.
    Last edited by liorean; 03-14-2004 at 10:06 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thx for poiting it out David. I will work on that and post a little something asap.

  • #7
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've posted a new topic: Why won't my page validate?.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Nice!

    Do you think you could capitalise the first letter in question, though?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #10
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Garadon just suggested me to do that change. Since it doesn't seem to work as it should I'll change it back, though.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #11
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Yeah it would do nicely.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #13
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts
    done

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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

  • #15
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,459
    Thanks
    1
    Thanked 23 Times in 21 Posts
    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...
    Last edited by Alex Vincent; 03-16-2004 at 02:58 AM.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •