My first CSS project is:
<!-- m --><a class="postlink" href="http://IE-only.com">http://IE-only.com</a><!-- m -->
I come from a table background, so please correct my terminalogy. I set up a simple four-cell page: top, bottom, left, right. The h1 text is in the top, the tracker image is in the bottom. On the left I have two images, and on the right the content. Part of this content is a form.
Everything was in place until I added the form. Instead of staying inside it's div, it is lined up on the left. Do I need to add a special class to the form tag?
Please take a look at the source code of <!-- m --><a class="postlink" href="http://IE-only.com">http://IE-only.com</a><!-- m --> and if someone could spot my error, I would most appreciate it. Thank you.
Dotan Cohen
<!-- m --><a class="postlink" href="http://lyricslist.comWell">http://lyricslist.comWell</a><!-- m -->, currently you have the form within the "leftcolumn" div. I think maybe you want to move it up into the "rightcolumn" div?I'm fighting your HTML but here's one work around. You need to ditch the tables, absolutes and the deprecated tags like <center>.
.leftcolumn {
width: 240px
}
.leftcolumn input {
width:300px
}
.leftcolumn input[type="text"] {
width:240px
}
.leftcolumn textarea {
width:300px
}
.rightcolumn {
width: 350px;
float: right;
}
.bottom {
clear:both
}Use a proper doctype!
You are using absolute position but then you use the <center> tags. Get rid of the tags. Aren't those depracated?
Then fix your px numbers to position where you want.To NogDog:
Your'e right, that was simply in the wrong div! I'm a little embarrased... I should have ordered my div's better in the code.
To Ray326:
I would like very much to ditch the table, but I need to format the form. I don't yet know how to postion INSIDE a div. All the CSS tutorials that I've seen show how to position in the page, but not in a div. If you have an example of a form formated in CSS, send me a link as I'd love to pick apart the source code.
To drhowarddrfine:
I figure that there is something to replace the center tags, but until I discover it, I put them there. As you can see, this is not yet a live site. I will have all those ugly depreciated tags gone by the time it is!
Thank you everybody!
Dotan Cohen
<!-- m --><a class="postlink" href="http://song-lirics.comThere">http://song-lirics.comThere</a><!-- m --> should be lots of examples here but for starters think tr->div and that's 99% of it.
<form action='/feedback.php' method='post'>
<div style="text-align:center">
<div><label>Name: <input type='text' name='name' size='35' maxlength='64' class='input' /></label></div>
<div><label>Email:<input type='text' name='email' size='35' maxlength='64' class='input' /></label></div>
<div><textarea name='form' rows='12' cols='60'></textarea></div>
<div><input type='submit' value='Send' /></div>
</div>
</form>Thanks. I rewrote the code to learn from it, but what went up is very similar to what you had written.
One last question: If I want to position something INSIDE a div, how do I do that? I now know to postion divs on a page, like so:
position:absolute;
left:5px;
I assume that position:absolute must turn into postion:somethingelse. To what does it turn into? Thank you vey much.
Dotan
<!-- m --><a class="postlink" href="http://IE-only.comMost">http://IE-only.comMost</a><!-- m --> of the time I'm positioning elements within a div via some combination of padding for the div, margins for the contained elements, and floating elements left and/or right.I use position:absolute VERY seldom, generally doing similar stuff to what NogDog posted.There should be lots of examples here but for starters think tr->div and that's 99% of it.
<form action='/feedback.php' method='post'>
<div style="text-align:center">
<div><label>Name: <input type='text' name='name' size='35' maxlength='64' class='input' /></label></div>
<div><label>Email:<input type='text' name='email' size='35' maxlength='64' class='input' /></label></div>
<div><textarea name='form' rows='12' cols='60'></textarea></div>
<div><input type='submit' value='Send' /></div>
</div>
</form>
Wouldn't it be better as <form action="/feedback.php" method="post">
<fieldset>
<legend>Feedback</legend>
<ul>
<li><label>Name: <input type="text" name="name"></label></li>
<li><label>E-mail: <input type="text" name="email"></label></li>
<li class="comment"><label>Your comment: <textarea name="form" rows="12" cols="60"></textarea></label></li>
</ul>
<input type="submit" value="Send">
</fieldset>
</form> ? It is a list of fields, that format allows for plenty of "hooks," it makes it quite obvious this is a form, and makes everything nice and "clicky." Size and maxlength aren't really necessary, class="input" is just stupid (you can access an element, for example p {color: blue;} will set the foreground colour of all paragraph tags to blue, .input would be the same as input.)
Myself, I use position absolute VERY often, often abs pos'ing every element on a page. One trick you can use...just try this out, and play with the idea, I forget where I learned this technique.
CSS:
div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
height: 300px;
width: 300px;
border: 1px solid;
}
HTML:
<div>Example</div>Why go through all that? I mean, I know that you want to use CSS, but why not just put that in the <body> tag? C'mon, that is just overkill!
DotanIt is a list of fields, that format allows for plenty of "hooks,"As good a semantic argument as any.
Size and maxlength aren't really necessaryMore often than not they are at least extremely helpful, though somewhat redundant.
class="input" is just stupid (you can access an element, for example p {color: blue;} will set the foreground colour of all paragraph tags to blue, .input would be the same as input
I no longer remember why that was in there but a class for input type="text may be necessary/useful/efficient for some kinds of styling because the world's favorite non-web browser doesn't know input[type="text"] from shinola. And making field sets into paragraphs makes no semantic sense whatsoever.[1] As good a semantic argument as any.
More often than not they are at least extremely helpful, though somewhat redundant.
[2] I no longer remember why that was in there but a class for input type="text may be necessary/useful/efficient for some kinds of styling because the world's favorite non-web browser doesn't know input[type="text"] from shinola. [3] And making field sets into paragraphs makes no semantic sense whatsoever. 1. Nn. I find them mostly useless (especially since I can disable them), and just...unecessary.
2. If there are form elements of different types (other than text and submit) this'd be useful, I agree.
3. Um...what? That's true, but...why would you bring it up? I suggested a list.for example p {color: blue;} will set the foreground colour of all paragraph tags to blue, .input would be the same as input.3 related to that rambling. No you didn't advise using p for input grouping.
I find them mostly useless (especially since I can disable them), and just...unecessary.The users they are intended for would find them more useful than an error message after a round trip to the server or a silently truncated field in a database. Yes, it's redundant work because you have to CYA on the server but validation on the client is generally appreciated by the user.Eh. This is changing into a usability debate--which I have no problem with--so I'm a tad iffy on replying. What you say is true, but...I guess it's up to the developer in question for the most part.
<!-- m --><a class="postlink" href="http://IE-only.com">http://IE-only.com</a><!-- m -->
I come from a table background, so please correct my terminalogy. I set up a simple four-cell page: top, bottom, left, right. The h1 text is in the top, the tracker image is in the bottom. On the left I have two images, and on the right the content. Part of this content is a form.
Everything was in place until I added the form. Instead of staying inside it's div, it is lined up on the left. Do I need to add a special class to the form tag?
Please take a look at the source code of <!-- m --><a class="postlink" href="http://IE-only.com">http://IE-only.com</a><!-- m --> and if someone could spot my error, I would most appreciate it. Thank you.
Dotan Cohen
<!-- m --><a class="postlink" href="http://lyricslist.comWell">http://lyricslist.comWell</a><!-- m -->, currently you have the form within the "leftcolumn" div. I think maybe you want to move it up into the "rightcolumn" div?I'm fighting your HTML but here's one work around. You need to ditch the tables, absolutes and the deprecated tags like <center>.
.leftcolumn {
width: 240px
}
.leftcolumn input {
width:300px
}
.leftcolumn input[type="text"] {
width:240px
}
.leftcolumn textarea {
width:300px
}
.rightcolumn {
width: 350px;
float: right;
}
.bottom {
clear:both
}Use a proper doctype!
You are using absolute position but then you use the <center> tags. Get rid of the tags. Aren't those depracated?
Then fix your px numbers to position where you want.To NogDog:
Your'e right, that was simply in the wrong div! I'm a little embarrased... I should have ordered my div's better in the code.
To Ray326:
I would like very much to ditch the table, but I need to format the form. I don't yet know how to postion INSIDE a div. All the CSS tutorials that I've seen show how to position in the page, but not in a div. If you have an example of a form formated in CSS, send me a link as I'd love to pick apart the source code.
To drhowarddrfine:
I figure that there is something to replace the center tags, but until I discover it, I put them there. As you can see, this is not yet a live site. I will have all those ugly depreciated tags gone by the time it is!
Thank you everybody!
Dotan Cohen
<!-- m --><a class="postlink" href="http://song-lirics.comThere">http://song-lirics.comThere</a><!-- m --> should be lots of examples here but for starters think tr->div and that's 99% of it.
<form action='/feedback.php' method='post'>
<div style="text-align:center">
<div><label>Name: <input type='text' name='name' size='35' maxlength='64' class='input' /></label></div>
<div><label>Email:<input type='text' name='email' size='35' maxlength='64' class='input' /></label></div>
<div><textarea name='form' rows='12' cols='60'></textarea></div>
<div><input type='submit' value='Send' /></div>
</div>
</form>Thanks. I rewrote the code to learn from it, but what went up is very similar to what you had written.
One last question: If I want to position something INSIDE a div, how do I do that? I now know to postion divs on a page, like so:
position:absolute;
left:5px;
I assume that position:absolute must turn into postion:somethingelse. To what does it turn into? Thank you vey much.
Dotan
<!-- m --><a class="postlink" href="http://IE-only.comMost">http://IE-only.comMost</a><!-- m --> of the time I'm positioning elements within a div via some combination of padding for the div, margins for the contained elements, and floating elements left and/or right.I use position:absolute VERY seldom, generally doing similar stuff to what NogDog posted.There should be lots of examples here but for starters think tr->div and that's 99% of it.
<form action='/feedback.php' method='post'>
<div style="text-align:center">
<div><label>Name: <input type='text' name='name' size='35' maxlength='64' class='input' /></label></div>
<div><label>Email:<input type='text' name='email' size='35' maxlength='64' class='input' /></label></div>
<div><textarea name='form' rows='12' cols='60'></textarea></div>
<div><input type='submit' value='Send' /></div>
</div>
</form>
Wouldn't it be better as <form action="/feedback.php" method="post">
<fieldset>
<legend>Feedback</legend>
<ul>
<li><label>Name: <input type="text" name="name"></label></li>
<li><label>E-mail: <input type="text" name="email"></label></li>
<li class="comment"><label>Your comment: <textarea name="form" rows="12" cols="60"></textarea></label></li>
</ul>
<input type="submit" value="Send">
</fieldset>
</form> ? It is a list of fields, that format allows for plenty of "hooks," it makes it quite obvious this is a form, and makes everything nice and "clicky." Size and maxlength aren't really necessary, class="input" is just stupid (you can access an element, for example p {color: blue;} will set the foreground colour of all paragraph tags to blue, .input would be the same as input.)
Myself, I use position absolute VERY often, often abs pos'ing every element on a page. One trick you can use...just try this out, and play with the idea, I forget where I learned this technique.
CSS:
div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
height: 300px;
width: 300px;
border: 1px solid;
}
HTML:
<div>Example</div>Why go through all that? I mean, I know that you want to use CSS, but why not just put that in the <body> tag? C'mon, that is just overkill!
DotanIt is a list of fields, that format allows for plenty of "hooks,"As good a semantic argument as any.
Size and maxlength aren't really necessaryMore often than not they are at least extremely helpful, though somewhat redundant.
class="input" is just stupid (you can access an element, for example p {color: blue;} will set the foreground colour of all paragraph tags to blue, .input would be the same as input
I no longer remember why that was in there but a class for input type="text may be necessary/useful/efficient for some kinds of styling because the world's favorite non-web browser doesn't know input[type="text"] from shinola. And making field sets into paragraphs makes no semantic sense whatsoever.[1] As good a semantic argument as any.
More often than not they are at least extremely helpful, though somewhat redundant.
[2] I no longer remember why that was in there but a class for input type="text may be necessary/useful/efficient for some kinds of styling because the world's favorite non-web browser doesn't know input[type="text"] from shinola. [3] And making field sets into paragraphs makes no semantic sense whatsoever. 1. Nn. I find them mostly useless (especially since I can disable them), and just...unecessary.
2. If there are form elements of different types (other than text and submit) this'd be useful, I agree.
3. Um...what? That's true, but...why would you bring it up? I suggested a list.for example p {color: blue;} will set the foreground colour of all paragraph tags to blue, .input would be the same as input.3 related to that rambling. No you didn't advise using p for input grouping.
I find them mostly useless (especially since I can disable them), and just...unecessary.The users they are intended for would find them more useful than an error message after a round trip to the server or a silently truncated field in a database. Yes, it's redundant work because you have to CYA on the server but validation on the client is generally appreciated by the user.Eh. This is changing into a usability debate--which I have no problem with--so I'm a tad iffy on replying. What you say is true, but...I guess it's up to the developer in question for the most part.