OK I give, show me a CSS example

[Guest]

It is real easy for me to lay out this table and control <td widths..> etc..
for example.

<table>
<tr><td>Name : </td><td><input type="text' name="name"></td><td><input
type="submit" value="submit"></td></tr>
</table>

What is the correct way for me to control my spacing between my 3 cells in
CSS

<div> tag for each of the 3 with positions ?
I see boxes and padding styles, but can't quite get it to work.

What is the most efficient use here ?

Thanks.

 

[William Tasso]

...
<table>
<tr><td>Name : </td><td><input type="text' name="name"></td><td><input
type="submit" value="submit"></td></tr>
</table>

What is the correct way for me to control my spacing between my 3
cells in CSS

Does this need CSS?
<label>Name: <input type="text' name="name"></label> <input> type="submit"
value="submit">

 

[Guest]

Does this need CSS?
<label>Name: <input type="text' name="name"></label> <input> type="submit"
value="submit">

Ok. Thanks.

But suppose for alignment purposes, I want 25px between 'Name:' and
'<input>'?

Hell, I might even want a second row with 'Occupation : ' and '<input>' and
want each column to line up vertically.

Thanks

 

[Leif K-Brooks]

<table>
<tr><td>Name : </td><td><input type="text' name="name"></td><td><input
type="submit" value="submit"></td></tr>
</table>

That is tabular data if you change the first <td> to <th scope="row">.
Style it with CSS, making the th a certain em width for instance.

 

[Richard]

It is real easy for me to lay out this table and control <td widths..>
etc.. for example.

<table>
<tr><td>Name : </td><td><input type="text' name="name"></td><td><input
type="submit" value="submit"></td></tr>
</table>

What is the correct way for me to control my spacing between my 3 cells
in CSS

<div> tag for each of the 3 with positions ?
I see boxes and padding styles, but can't quite get it to work.

What is the most efficient use here ?

Thanks.

One possible way might be to do it this way:

div.holder { width:00px; height:00px; blah blah blah }
div.box {width:00%; height:00px; blah blah blah float:left;}
div.spacer {width:00% height:00px; blah blah blah float:left;}

<div class="holder">
<div class="box">name:</div>
<div class="spacer"></div>
<div class="box"><input type="text' name="name"></div>
<div class="spacer"></div>
<div class="box"<input type="submit" value="submit></div>
</div>

Brucie dear, I did say one possible way. Purely as an example as how it
COULD be achieved.

 

[Leif K-Brooks]

One possible way might be to do it this way:

div.holder { width:00px; height:00px; blah blah blah }
div.box {width:00%; height:00px; blah blah blah float:left;}
div.spacer {width:00% height:00px; blah blah blah float:left;}

Why the double 0s (00 instead of 0), and why specify a unit for 0 at all?

<div class="holder">
<div class="box">name:</div>
<div class="spacer"></div>
<div class="box"><input type="text' name="name"></div>
<div class="spacer"></div>
<div class="box"<input type="submit" value="submit></div>
</div>

I still don't get the purpose of that div.spacer. I could understand if
it was for clearing the previous row, but it doesn't seem to.

Brucie dear, I did say one possible way. Purely as an example as how it
COULD be achieved.

If you didn't want it to work, that is. Even with the obvious errors
(missing > in HTML, missing ; in CSS) corrected, it will look like this:
http://tw.ecritters.biz/html_examples/richard/insane_form/.

 

[William Tasso]

But suppose for alignment purposes, I want 25px between 'Name:' and
'<input>'?

Don't use px unless you need to align with an image.

Hell, I might even want a second row with 'Occupation : ' and
'<input>' and want each column to line up vertically.

Hell indeed ;o)

ok - I've got a few of these. I'm not happy that I've got to the optimal
markup/css yet, but you are welcome to take it forward if you like. Here's
one:

http://williamtasso.com/components/guestbook.asp

 

[Richard]

Why the double 0s (00 instead of 0), and why specify a unit for 0 at all?

Only to show that there is a number to go in front of the units.

I still don't get the purpose of that div.spacer. I could understand if
it was for clearing the previous row, but it doesn't seem to.

The spacer idea is just that. Rather than the technique of using some
idiotic image deal.
The values for which can be changed to seperate the actual items as desired.

If you didn't want it to work, that is. Even with the obvious errors
(missing > in HTML, missing ; in CSS) corrected, it will look like this:
http://tw.ecritters.biz/html_examples/richard/insane_form/.

What? We're supposed to write the entire code for these people?
It's purely an example.


Isn't the biz tld supposed to be for businesses only? What business is
"ecritters" involved in?

 

[Richard]

Why the double 0s (00 instead of 0), and why specify a unit for 0 at all?

I still don't get the purpose of that div.spacer. I could understand if
it was for clearing the previous row, but it doesn't seem to.

If you didn't want it to work, that is. Even with the obvious errors
(missing > in HTML, missing ; in CSS) corrected, it will look like this:
http://tw.ecritters.biz/html_examples/richard/insane_form/.

http://www.1-large-world.com/samples/submit.html

corrected and functional.

 

[Leif K-Brooks]

What? We're supposed to write the entire code for these people?
It's purely an example.

To the point where it actually works, you mean? Yes, or it's an example
of nothing.

 

[Leif K-Brooks]

http://www.1-large-world.com/samples/submit.html

corrected and functional.

Except for the fact that the submit button is overlapping the input box.
Why not use margins instead of div.spacers, anyway?

 

[Guest]

Don't use px unless you need to align with an image.


Hell indeed ;o)

ok - I've got a few of these. I'm not happy that I've got to the optimal
markup/css yet, but you are welcome to take it forward if you like. Here's
one:

http://williamtasso.com/components/guestbook.asp

Great Examples.
Thanks.

 

[Richard]

Except for the fact that the submit button is overlapping the input box.
Why not use margins instead of div.spacers, anyway?

Oh bullshit. It couldn't possibly overlap due to the spacer box.
As I said above, this is one possible way. Not the only way.

 

[Leif K-Brooks]

Oh bullshit. It couldn't possibly overlap due to the spacer box.
As I said above, this is one possible way. Not the only way.

Maybe it can't, but it does. Have you actually tried it, or are you just
positive that you can't be wrong?

 

[Richard]

Maybe it can't, but it does. Have you actually tried it, or are you just
positive that you can't be wrong?

Yes dumbass. I have checked it out online as I always do before posting the
link.
You're just being frickin nit picky.
Since I have "holder" set to a defined space, it can't possibly overlap.
When the browser window is shrunk, everything stays put and you get a
horizontal scroll bar.
Show me a screen shot, asshole.

 

[Toby A Inkster]

The spacer idea is just that. Rather than the technique of using some
idiotic image deal.

But why not:

<div class="holder">
<label for="name">name:</label>
<input type="text" name="name" id="name">
<input type="submit">
</div>

And use padding-left and padding-right on each element to control spacing?

 

[Daniel Ruscoe]

Show me a screen shot, asshole.

Don't insult people until you have your facts straight.

http://www.dualstone.co.uk/richards-effort.jpg

Opera 7.11, Win 2000 Pro.

- Dan

 

[brucie]

Show me a screen shot, asshole.

i would also be interested in a screen shot of leif's asshole.

 

[Toby A Inkster]

Oh bullshit. It couldn't possibly overlap due to the spacer box.

Well it does. I've tested in both Opera and Mozilla and see the same
effect in both:

http://www.goddamn.co.uk/tobyink/scratch/overlappingcontrols

It is caused by you defining the width for div.box as 60px, but then
putting a 200px-ish text input into one of them.

 

[Wayne D Hammond]

Why the double 0s (00 instead of 0), and why specify a unit for 0 at all?



I still don't get the purpose of that div.spacer. I could understand if
it was for clearing the previous row, but it doesn't seem to.



If you didn't want it to work, that is. Even with the obvious errors
(missing > in HTML, missing ; in CSS) corrected, it will look like this:
http://tw.ecritters.biz/html_examples/richard/insane_form/.

Perhaps you were looking for this?

<div class="holder">
<div class="box">name:</div>
<div class="spacer">&nbsp;</div>
<div class="box"><input type="text" name="name"></div>
<div class="spacer">&nbsp;</div>
<div class="box"><input type="submit" value="submit"></div>
</div>