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.
Results 1 to 4 of 4
  1. #1
    Regular Coder musher's Avatar
    Join Date
    Jan 2005
    Location
    Minnesota
    Posts
    203
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A couple of CSS questions on proper methods

    first one - I've heard it's not proper to use a lot of br tags and trying to figure out a way to set something like this up with out the br tag in between the label and the input field (I'd rather use CSS then BRs that way if I change the layout so label and input are on the same line it would just be changing the CSS file).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head>
      <title>Form Lookup</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">
       body { margin: 0; padding: 0; font-family: verdana; font-size: 12px; }
       fieldset { width: 500px; margin: 0 0; padding: 0 0; }
       p { padding: 0 10px 0; }
       p input { width: 125px; }
       p label {width: 75px; }
       p.submit input{width: 50px; }
      </style>
    </head>
    <body>
      <form method="post" action="" >
        <fieldset>
          <p><label for="fname">First Name<br /></label><input type="text" name="fname" id="fname" /></p>
          <p><label for="lname">Last Name<br /></label><input type="text" name="lname" id="lname" /></p>
          <p><label for="form_id">Form ID<br /></label><input type="text" name="form_id" id="form_id" /></p>
          <p class="submit"><input type="submit" name="submit" value="Find" /></p>
        </fieldset>
      </form>
    </body>
    </html>
    Second question - I have a two column layout left column is just a logo, right column has background image with text and input. is it better/proper to:
    1. Set it up as a two col layout with logo as a css background image.
    2. Set it up as a two col layout with logo as a image inside the div.
    3. One col layout with image positioned to the left and all text/input padded to the right.

    Last question - I have a link and I'm using a small image rather then text in the link which method is better/proper
    1.
    Code:
    <a href="#"><img src="image.jpg" /></a>
    2.
    Code:
     .doit { background: url(image.jpg; }
    <a href="#" class="doit"></a>
    Thanks
    Jim M

    "Lord, help me to become the person my dog thinks I am" - Dawn Ewing
    "If you must know. Yes, I do enjoy running after the dog sled when I fall off" - Me

    www.huskyzone.com -- Woodland Siberians

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Hey Jim, how’s it going? How are the huskies?
    I just happen to be around and thought I might be the one to answer your questions:

    #1: Your layout is pretty good already. However, since the input fields aren’t actually paragraphs I wouldn’t mark them as such. I’d probably rather go with an unordered list (i.e. what is currently a paragraph would be a list element then): http://alistapart.com/articles/prettyaccessibleforms.

    As to the line breaks: Just remove them from the HTML and set the labels and/or inputs to display: block; in the CSS.

    #2: That is really a matter of preference, I guess. But it also depends on how complex the rest of the layout is. I think either way is alright (while method 1 could as well be a one column layout with the logo as background applied to the container and left padding for the container to move the content to the right. depends on how many bg images you have to put).

    #3: Also either way has its pros and cons. What I definitely don’t recommend is to use an empty element. So at least put a text link into the anchor and hide it with one of the numerous CSS image replacement techniques (however, all of them have drawbacks). The method with the image as link works well but remember to put an alt attribute and alternative text if the image can’t be displayed for whatever reason. I.e. if the image would be a button linking to the home page put “home” as alternative text. If the image is a photo put a short description on the content of the photo so people that can’t see it will know what that is. And put a title in the anchor that describes where the link will take them.

    Good luck and take care!
    Last edited by VIPStephan; 05-11-2007 at 05:45 PM.

  • #3
    Regular Coder musher's Avatar
    Join Date
    Jan 2005
    Location
    Minnesota
    Posts
    203
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Stephan been awhile, thanks for the help.
    Things are going good, The kids (huskies) are doing well other then shedding all over the place now since the warm weather has finally gotten here (gotta love all the dog hair).
    I started a new job about a month ago doing web development for Marathon Multimedia (mainly php stuff), so Husky Zone is on hold a bit until the two boys get out of the military in about 6 months.

    So how things going over on your end of the world????
    Thanks
    Jim M

    "Lord, help me to become the person my dog thinks I am" - Dawn Ewing
    "If you must know. Yes, I do enjoy running after the dog sled when I fall off" - Me

    www.huskyzone.com -- Woodland Siberians

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    So far so good over here… I’m relatively busy playing music (which is good) and the German economy is boosting currently so my existence as freelance web designer looks promising (while the disadvantage is that the Euro is getting stronger compared to the Dollar (or Dollar getting weaker) which has a slightly negative impact on the export of my skills to non-Euro countries).

    Congrats on the new job. And even just around the corner from what I read? I hope Husky Zone will keep you busy as well (in a positive manner)? You can’t leave your clients in the lurch!

    Take care and see you around!


  •  

    Posting Permissions

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