Jump to content


Form layout with CSS and XHTML

Started by michiel, Feb 07 2008 03:07 PM

7 replies to this topic

#1 michiel

    Young Padawan

  • Members
  • Pip
  • 5 posts

Posted 07 February 2008 - 03:07 PM

Hi there,

I am trying to teach myself how to create a website with XHTML and CSS only using div's so no tables. The problem is that I cant seem to figure out how i change te background colour of a form. I have looked at allot of tutorials but they didnt seem to answer my question.

I want to code the next picture. Could someone please help me out with the code?

Posted Image

So i dont want the code to have tables. please help me.

Thanks in advance,
michiel

#2 shameless_w_o_a_d

    Young Padawan

  • Members
  • Pip
  • 42 posts
  • Gender:Male
  • Location:New Zealand
  • Interests:Web Design, Graphics Design, Computers, Games, Music, Basketball

Posted 07 February 2008 - 11:24 PM

Hi, michiel! :P

I don't believe in the notion that everything should be done for you. I understand that these things can be difficult, but if you have the determination to do it then being hinted along the way is more rewarding for you than if someone hands you the code on a silver platter. :P

To help you in the right direction, however, I suggest you look into the <input> tag (which will be used for the majority of that picture) and the CSS property display - you're going to need to use this too. For the 'Remember' text, I'd suggest you use the <label> tag for accessibility purposes, and to also make your code more semantic.

Sorry if I come off as an arse in saying this, it's not my intention. I just feel that you'll find it far more rewarding in the end if you attempt it yourself and get hints here and there when you require them, not to mention the experience you'll earn whilst doing so. :P

#3 michiel

    Young Padawan

  • Members
  • Pip
  • 5 posts

Posted 08 February 2008 - 05:13 AM

It was not my attention to 'just' get the code. During the weekend ill try to rewrite the code as far as I can. (I deleted it because i got frustrated) :P

michiel

#4 michiel

    Young Padawan

  • Members
  • Pip
  • 5 posts

Posted 09 February 2008 - 07:00 PM

here is the code that i made:
CSS:
a{text-decoration:none;}

#container {height: 96px;width: 366px;}

#loggin_strech {background-image: url(img/loggin_tyle.gif);background-repeat: repeat-x;height: 96px;width: 348px;margin-left:9px;position:absolute;}

#loggin_left {background-image: url(img/loggin_left.gif);position:absolute;height: 96px;width: 9px;}

#loggin_right {background-image: url(img/loggin_right.gif);height: 96px;width: 9px;position:absolute;margin-left:357px;}

#loggin a{background-image: url(img/loggin.gif);height: 22px;width: 69px;margin-top: 59px;margin-left: 273px;position:absolute;text-indent:-9000px;display:block;}

#customer_loggin {background-image: url(img/customer_loggin.gif);height: 15px;width: 82px;margin-top:10px;margin-left: 12px;position:absolute; background-repeat:no-repeat;}

#forgot_box a{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;color: #589cd4;height: 10px;width: 140px;margin-left: 101px;margin-top: 11px;position:absolute;}

.username_box {height: 22px;width: 246px;margin-top: 30px;margin-left: 11px;position: absolute;}

.password_box {height: 22px;width: 246px;margin-top: 59px;margin-left: 11px;position: absolute;}

and the HTML:
<body>
<!-- container -->
<div id="container">
    <div id="loggin_left"></div>
    <!-- loggin_strech -->
    <div id="loggin_strech">
    <div id="customer_loggin"></div>
    <div id="forgot_box"><a href="#">Forgot my Password</a></div>
    <div id="loggin"><a href="#">loggin</a></div>
    <form class="username_box">
    <input type="text" name="username" value="Username" />
    </form>
    <form class="password_box">
    <input type="text" name="password" value="Password" />
    </form>
    <!-- loggin_strech -->
    </div>
    <div id="loggin_right"></div>
<!-- container -->
</div>
</body>

I cant seem to get the boxis to to get the good size. and I cant figure out to change the colour off the boxes. feel free to comment on the code, If you see anything that im doing wrong please say o before i'm teaching myself bad XHTML.

michiel

#5 shameless_w_o_a_d

    Young Padawan

  • Members
  • Pip
  • 42 posts
  • Gender:Male
  • Location:New Zealand
  • Interests:Web Design, Graphics Design, Computers, Games, Music, Basketball

Posted 09 February 2008 - 08:56 PM

Sorry about the slight misunderstanding earlier.

One thing I noticed in your HTML code, is that you wrapped the username and password inputs into separate forms. What this means, is that if you were to submit the form, it would only return either the username or the password - not both. If there is any data you want to submit that is relative to each other (such as a username and password for a login system), you can place it all in one form to allow you to receive all of the necessary information for your back-end server script to function with.

If you wanted to submit the data separately, the layout you have now would work, but you'll only cause the handling of the data to be a lot slower as opposed to having it all handled in one fell swoop.

Another suggestion would be that you have an <input> tag that has its type set to "submit", as this will be what triggers the submission of your form without the intervention of JavaScript to send the form for you. The submit type <input> tag will be your Submit button as shown in the illustration. :biggrin:

In regards to you wanting to know how to change the colours of the boxes, you'd want to look into the background CSS properties.

Just a helpful hint - you can assign a CSS class to individual <input> tags just as you can assign them IDs. ;)

#6 michiel

    Young Padawan

  • Members
  • Pip
  • 5 posts

Posted 10 February 2008 - 05:51 AM

I am now using this code for the Username, Password and Login. how can i change the distance between the 2 imputs? and how can i get the login next to the Password?

is this the good code or am i still far off?

<form action="#">
<p> <input type="text" id="name" value="Username" />
<p> <input type="text" id="pass" value="Password" />
</p>
<p id="login">
  <input name="login" type="submit" value=""  />
</p>
 </form>

 input{margin-left:11px;width:246px;background-image: url(img/user_strech.gif);background-repeat:repeat-x;}

#login input{width:69px;background-image: url(img/loggin.gif);height:22px;margin-left: 273px;margin-top: 59px;}

#7 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 10 February 2008 - 10:18 AM

You can always add a id/class to the input and button itself.

<input type="text" id="pass" value="Password" class="textarea" />

.textarea
{
margin-left: 5px;
}

Not sure where you want the distance but that's kind of the idea. So you could try something like that out. Please tell me if I misunderstood the question.

#8 shameless_w_o_a_d

    Young Padawan

  • Members
  • Pip
  • 42 posts
  • Gender:Male
  • Location:New Zealand
  • Interests:Web Design, Graphics Design, Computers, Games, Music, Basketball

Posted 10 February 2008 - 09:34 PM

Another option available to you, michiel, is to use the width CSS property to determine the length of the input boxes. The same can be done to the button as well if you did wish for your button to be larger in size.

As for the question in regards to the position of the login button next to the password input box, I have already provided a link to help you out. You will need to use the display CSS property to change these elements to be inline elements as opposed to their default setting as block elements. If you're unsure what this means in these terms, I suggest you read the table on the link I provided to help you learn a bit more about what is what. :)

Do note, however, that different browsers have different levels of support for this CSS property. It will be a good idea to check out which properties aren't supported by certain browsers for future reference.

You're definitely on the right track. :P
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design