simpli Posted March 15, 2009 Share Posted March 15, 2009 Hi, I am having trouble aligning these text box. I would like them to be aligned one under the other but I don't know what is screwed in my CSS. Also how can i ensure that 1. item 1 10. item 10 are aligned like illustrated above? I am fairly new to css. Thanks for the help and here is my code, J-R <style type="text/css"> form { position:absolute; top:1em; left:18em; } form fieldset { border:1px solid green; margin: 0; } fieldset legend { color: black; background: #F8F8F8; } form label1 { display: inline; padding: 0; } form label { display: inline; float: left; width: 10em; padding: 0; margin-top:10px; } form input, form textarea, form select { display: inline; padding: 0; float: left; margin-top:3px; } form input2 { display: inline; padding: 0; } </style> <?php print <<<htmldebut <form id="frmchoixronde1" name="frmchoixronde1" method="POST" enctype="application/x-www-form-urlencoded" onsubmit='return formValidator()'> <b>Entrez vos choix pour la premiere ronde</b> htmldebut; $nbjoueurs = 10; echo '<br/>'; echo '<fieldset>'; for ($i=1; $i <= $nbjoueurs; $i++) { echo '<b><label for="player_' . $i .'" style="width:2em">' . $i . '</label></b><input name="player_' . $i . '" id="player_' .$i . '" type="text" size="30"><br/>'; } echo '</fieldset>'; ?> </form> <br/> </body></html> Quote Link to comment Share on other sites More sharing options...
Daniel0 Posted March 15, 2009 Share Posted March 15, 2009 Can't you just use an ordered list (<ol>)? echo '<ol>'; for ($i=1; $i <= $nbjoueurs; $i++) { echo '<li><input name="player_' . $i . '" id="player_' . $i . '" type="text" size="30"></li>'; } echo '</ol>'; Quote Link to comment Share on other sites More sharing options...
dropfaith Posted March 15, 2009 Share Posted March 15, 2009 i was thinking that as well would be way easier code and to align it like that just li {text-align:right;} in your css Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 15, 2009 Share Posted March 15, 2009 Where are all the newbies to CSS being told to use position:absolute?!? It is getting epidemic. Simpli, what doctype are you using (looks like xhtml judging from the </br>?) Quote Link to comment Share on other sites More sharing options...
simpli Posted March 18, 2009 Author Share Posted March 18, 2009 I dont even know what a doctype is. The only reason i am using absolute is because i understand it and I find it simple. Do you have any suggestion? Why is absolute wrong? Thanks for the advice, J-R Quote Link to comment Share on other sites More sharing options...
haku Posted March 18, 2009 Share Posted March 18, 2009 absolute positioning is the html equivalent of fools gold. It looks like it should solve all your problems, but once you scratch beneath the surface a little (eg. use monitors with a different resolution than the monitor you designed it on), you find that it just ends up causing more problems than it solves. Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted March 18, 2009 Share Posted March 18, 2009 absolute positioning is the html equivalent of fools gold. It looks like it should solve all your problems, but once you scratch beneath the surface a little (eg. use monitors with a different resolution than the monitor you designed it on), you find that it just ends up causing more problems than it solves. I disagree, you just have to know when and how to use it. It is a tool like anything else that serves its purpose. In this case it doesn't make any sense and it certainly doesn't make sense to absolutely position something with ems. The reason they probably don't align is due to the label. By default it is an inline element and setting with width will not help. Make it a block element and float it left if you wish for the desired effect. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 18, 2009 Share Posted March 18, 2009 I agree with haku - it is best that anyone starting to learn css never even be shown position:absolute. I agree with jcombs - an advanced css coder should consider any tool available for a task in which it may be suited. I will say this, however ... "position:absolute" should never be used to create a page layout wireframe. I dont even know what a doctype is. Any html document you create that does not use a "doctype", is called "quirks mode" and it is not web standards compliant. The doctype is the first thing on your page (not <html>). It tells the browser what markup language it is written in - html 4.01, XHTML 1.0, and what specification to display it as - strict, transitional or frameset. Php freaks uses a transitional version of xhtml 1.0 - Here is the doctype for this page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> I prefer using a strict version of html 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> If you leave off the doctype, your site will look different in every browser because in "quirks mode" you are letting the browser determine the default version to use. For the most part, only IE likes no doctype. So your page will look how you designed it in IE only but blow up in other browsers. By using a doctype, you ALMOST force IE to play by thesame rules as other browsers ... almost. <html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.