Menu
[url]http://odna.net/adams/signguestbook.html
There it is ^^^
?
I’ve searched the boards, I’ve searched google, I’ve looked at how other people do it, and i’m really having a hard time trying to get it to work using pure css for the layout. I’m new to css though, so perhaps someone with css experience can help me out here… ?
Thanks in advance.
[i]Originally posted by The Cheat [/i]Now, I never said I didn't — stop assuming things. I just couldn't believe you have since it such a specific thing. However, if you have, excellent. That should mean you now have more ways of creating a form using semantically correct markup.
[B]I'm sorry you dont believe me that i've seen that thread.[/B][/QUOTE]
[i]Originally posted by The Cheat [/i]Why the attitude? You asked for help, you got it. This is a free service; we [b]do not need to help you[/b] and you should appreicate all of the help you get. Moreover, the information I provided was completely relevant which it seems you haven't yet realized.
[B]And I dont really give a freaking crap about the whole tables VS. css for possitioning forms argument, OKAY.[/B][/QUOTE]
[i]Originally posted by The Cheat [/i]I don't think you've fully grasped the concept of using CSS for presentational purposes and structual, semantic markup. While CSS is, indeed, the only way you should style a site, semantic markup is what you should use to structure it. Thus, tables (maybe not), labels, or defintion lists should be used.
[B]I personally want to design the layout that is in the link above in my first post, using [b]css[/b].[/B][/QUOTE]
[i]Originally posted by The Cheat [/i]I am by no means "spamming your thread". I'm providing accurate and quite correct information and you're simply not understanding what I'm trying to tell you.
[B]stop spamming my thread. [/B][/QUOTE]
Why the attitude?[/quote]
<!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">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
label {
display: block;
width: 75px;
float: left;
margin: 2px;
}
<i> </i> div {
<i> </i> margin: 3px;
<i> </i> }
<i> </i> /*]]>*/
<i> </i> </style>
<i> </i></head>
<i> </i><body>
<i> </i> <form action="#">
<i> </i> <div>
<i> </i> <div>
<i> </i> <label for="f1">
<i> </i> Name:
<i> </i> </label>
<i> </i> <input type="text" id="f1" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f2">
<i> </i> Address:
<i> </i> </label>
<i> </i> <input type="text" id="f2" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f3">
<i> </i> Gender:
<i> </i> </label>
<i> </i> <input type="text" id="f3" />
<i> </i> </div>
<i> </i> <input type="submit" value="Submit" />
<i> </i> </div>
<i> </i> </form>
<i> </i></body>
</html><!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">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
label {
display: block;
width: 150px;
float: left;
margin: 2px;
font-weight: bold;
}
<i> </i> div {
<i> </i> margin: 3px;
<i> </i> }
<i> </i> h1 {
<i> </i> text-align: center;
<i> </i> }
<i> </i> /*]]>*/
<i> </i> </style>
<i> </i></head>
<i> </i><body>
<i> </i> <h1>Sign Guestbook</h1>
<i> </i> <form action="#">
<i> </i> <div>
<i> </i> <div>
<i> </i> <label for="f1">
<i> </i> Name:
<i> </i> </label>
<i> </i> <input type="text" id="f1" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f2">
<i> </i> E-mail address:
<i> </i> </label>
<i> </i> <input type="text" id="f2" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f3">
<i> </i> Website <acronym title="Uniform Resource Identifier">URI</acronym>:
<i> </i> </label>
<i> </i> <input type="text" id="f3" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f4">
<i> </i> Comments:
<i> </i> </label>
<i> </i> <textarea rows="10" cols="50" id="f4"></textarea>
<i> </i> </div>
<i> </i> <input type="submit" value="Submit" />
<i> </i> </div>
<i> </i> </form>
<i> </i></body>
</html><!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">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
label {
display: block;
width: 150px;
float: left;
margin: 2px;
font-weight: bold;
}
<i> </i> div {
<i> </i> margin: 3px;
<i> </i> }
<i> </i> h1 {
<i> </i> text-align: center;
<i> </i> }
<i> </i> form {
<i> </i> margin: 0 auto;
<i> </i> width: 60%;
<i> </i> }
<i> </i> #btn {
<i> </i> text-align: center;
<i> </i> }
<i> </i> /*]]>*/
<i> </i> </style>
<i> </i></head>
<i> </i><body>
<i> </i> <h1>Sign Guestbook</h1>
<i> </i> <form action="#">
<i> </i> <div>
<i> </i> <div>
<i> </i> <label for="f1">
<i> </i> Name:
<i> </i> </label>
<i> </i> <input type="text" id="f1" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f2">
<i> </i> E-mail address:
<i> </i> </label>
<i> </i> <input type="text" id="f2" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f3">
<i> </i> Website <acronym title="Uniform Resource Identifier">URI</acronym>:
<i> </i> </label>
<i> </i> <input type="text" id="f3" />
<i> </i> </div>
<i> </i> <div>
<i> </i> <label for="f4">
<i> </i> Comments:
<i> </i> </label>
<i> </i> <textarea rows="10" cols="50" id="f4"></textarea>
<i> </i> </div>
<i> </i> <div id="btn">
<i> </i> <input type="submit" value="Submit" />
<i> </i> <input type="reset" value="Reset" />
<i> </i> </div>
<i> </i> </div>
<i> </i> </form>
<i> </i></body>
</html>label {
display: block;
width: 150px;
float: left;
margin: 2px;
font-weight: bold;
[b][color=blue]text-align: right;[/color][/b]
}[i]Originally posted by The Cheat [/i]See? You're catching on quickly. Nice work. ?
[B]i tried changing the width from in the form properties from 60% to 70% and that has done the trick.[/B][/QUOTE]
[i]Originally posted by The Cheat [/i]I don't believe you should have problems either way, but I may be wrong. It really shouldn't make much of a difference, if any.
[B]or should i be using utf-8 ... or does it even matter?[/B][/QUOTE]
[i]Originally posted by The Cheat [/i]It's because IE sucks — this is more so true with the older versions. There isn't really much you can do. However, to center it you can use [font=courier]text-align: center[/font]. This should not work, but does since IE allows you to center block-level elements using [font=courier]text-align[/font], while it should only work on inline-level elements.
[B] Whats up with that.. [/B][/QUOTE]
0.1.9 — BETA 5.28