introduction and help needed

[aoshima]

hi, I'm Sin, and I'm new here, nice to meet you all

i'm still an amateur in web designing especially in xhtml and i have problems with my project, currently i'm using xhtml and i'm having trouble making my form in order, the form is sort of like this :

name:blabla
address:blablabla

how do i make it into this :

name : blablabla
address : blablabla

thx a lot for the help

~sin~

[Tyssen]

I'm sorry, I don't get what you're trying to achieve. Your 2nd example is different from the first only in that you've added spaces around the :

[aoshima]

ow, what i mean is, i want to make the name and the address textbox that we will fill later in the same alignment, how do i do that ?

~sin~

[leehack]

Hows about having all the text labels on the line above the box with the box on the next line. This way all of your labels are aligned and the start of your boxes are aligned, however different their sizes are.

Something like http://www.chic-wedding-cars.co.uk/bookings.html.

[aoshima]

actually, i want my site to be like this site http://two.guestbook.de/register.cgi
but i can't seem to get it right

[Tyssen]

It depends which way you want them aligned. Are the inputs aligned along their left or right edges or is the text aligned left or right?

[Tyssen]

OK, so now we've seen what it's s'posed to look like. Now we need to see what you've got so far.

[aoshima]

the code so far is like this

.line{
display:inline;
}

<div><form name="purchaseForm" action="process.php" method="post">

<fieldset>
<legend>This is a label for the folder</legend>

<div>
<label class="line">First Name </label>
<input type="text" class="textInput" name="fName" id="fName" value="" />
</div>

<div>
<label class="line">Street Address</label>
<input type="text" name="str_addr" id="str_addr" />
</div>

<div>
<label class="line">City</label>
<input type="text" name="city" id="city" />
</div>

[Tyssen]

Instead of display: inline, make your labels float: left and give them a width.

[aoshima]

i try that and it doesn't work instead of making them like the site, mine turns into a stairs, did i do something wrong ?

[gnarly]

i try that and it doesn't work instead of making them like the site, mine turns into a stairs, did i do something wrong ?

It'll be because you didn't clear your floats. There's a couple of ways to fix this:

First way: Very simply makes sure each div and it's contents will appear below any floated elements:

fieldset div {
     clear: both;
}

More: http://www.w3schools.com/css/pr_class_clear.asp

Second way is a little more complex, and makes the div expand to contain any floated elements:

fieldset div {
     height: 1%;
     overflow: hidden;
}

More: http://www.pmob.co.uk/temp/float-clear.htm

[Tyssen]

Probably, cos I did a quick test when before I posted and it looked OK. Would need to see your page or more of you code to tell for sure.

[aoshima]

i got it now, thanks for the help