Autor Zpráva
Tirus
Profil
potřeboval bych v následující ukázce zarovnat inputy napravo jako je u jednoho nastavený float:right, ovšem nechci, aby mi to dával na nový řádek. Jak se to dá udělat prosím?

<style type="text/css">
<!--
#RoomManager .doorNumber, #RoomManager .keeper, #RoomManager .area {
	margin:0; 
	padding: 0;
}
#RoomManager .doorNumber #doorNumber { margin-left:91px; }
#RoomManager .keeper #keeper { margin-left:50px; }
#RoomManager .area #area { float:right;}
#RoomManager .submit { 
margin-left: 240px;}
#RoomManager {
width: 30%;
margin:0 0 0 30px;
}
-->
</style>
</head>

<body>
<form id="RoomManager" name="RoomManager" method="post" action="#">
<div>
<p class="doorNumber">Číslo dveří: 
  <input type="text" name="doorNumber" id="doorNumber" />
</p>
<p class="keeper">Správce místnosti: 
  <input type="text" name="keeper" id="keeper" /></p>
<p class="area">Pavilon/patro:  
  <input type="text" name="area" id="area" />
</p>
  <p class="submit"><input name="submit" type="button" value="Zpracovat" /></p>
</div>
</form>
panther
Profil
Tirus:
buď dej input před „popisek“, nebo nech plavat i „popisek“. Popisek je záměrně v uvozovkách, používej label.
Tirus
Profil
panther:
ok, takže když to dám do label.. jak tedy pak pracovat s tím CSS? spadnu do stejného problému. Jde mi o to, aby ten input byl zarovnán úplně vpravo
panther
Profil
Tirus:
tak znovu.

Buď dej input před „popisek“, nebo nech plavat i „popisek“. Co je na tom nejasného?
Tirus
Profil
panther:
omlouvám se, ale fakt už si nevím rady. Zkusil jsem to tak jak jsi psal, ale nebyl jsem toho schopnej docílit. Tak bych se rád zeptal, jak to nastylovat když využívám tedy label

<form id="RoomManager" name="RoomManager" method="post" action="#">
<div>
<label for="doorNumber">Číslo dveří: </label>
<input type="text" name="doorNumber" id="doorNumber" />
<label for="keeper">Správce místnosti: </label>
<input type="text" name="keeper" id="keeper" />
<label for="area">Pavilon/patro:</label>
<input type="text" name="area" id="area" />
<input name="submit" type="submit" value="Zpracovat" />
</div>
</form>


zde se mi to dá do jednoho řádku.. a když to začnu floutovat, tak se to rozhází. Takovéto pozicování už fakt není má silná stránka
BigBear
Profil
Tirus:
Nezkoušel jsem to a vidím to jen zběžně a nevím, jestli správně chápu, co chceš udělat, ale panther ti psal: „dej input před ‚popisek‘“ a to by mohlo pomoct ;-)
Tirus
Profil
BigBear:
prohodil jsi nicky..

ano, dej input před popisek.. to jsem udělal a stejně mi to nepomohlo.. teď mi dochází, že mi mohl blbnout dreamweaver
BigBear
Profil
Tirus:
Jo, promin, uz jsem to opravil :-[ ... jestli to stale jeste nemas, hod mi nekam obrazek toho, jak to ma vypadat a ja se ti to pokusim nastylovat, hm? :-)
Tirus
Profil
BigBear:
např.
Jedná se o to, že formulář bude mít šířku třeba 40% a label má být nalevo a input napravo. .. či nějak normálně to napozicovat.
BigBear
Profil
Tirus:
Tohle je jedno z řešení (já na to používám tabulky - od toho tu jsou. Je-li potřeba, aby něco mělo tabulkovou strukturu, proč to do ní nedat. Nikoliv celý layout, to je pomalé a zastaralé, ale formulář uvnitř stránky... proč ne ;-) )
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
  <head>
    <title>Formular</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="cz" />
    
    <style type="text/css">
      .clear_both { clear: both; height: 0; line-height: 0; font-size: 0; overflow: hidden; }
    
      #wrapper { width: 40%; border: 1px black solid; }
      #RoomManager { padding: 10px; }
      label { display: block; float: left; }
      input { float: right; }
      input.text { width: 200px; }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <form id="RoomManager" name="RoomManager" method="post" action="#">
        <label for="doorNumber">Číslo dveří: </label>
        <input class="text" type="text" name="doorNumber" id="doorNumber" />
        <div class="clear_both"></div>

        <label for="keeper">Správce místnosti: </label>
        <input class="text" type="text" name="keeper" id="keeper" />
        <div class="clear_both"></div>

        <label for="area">Pavilon/patro:</label>
        <input class="text" type="text" name="area" id="area" />
        <div class="clear_both"></div>
        
        <input name="submit" type="submit" value="Zpracovat" />
        <div class="clear_both"></div>
      </form>
    </div>
  </body>
</html>
Tirus
Profil
BigBear:
v tabulce jsem to také dělal, ovšem chtěl jsem to zkusit jinačím způsobem :) .. Zkoušel jsem to přímo napozicovat
ovšem teď už to chápu :) ... za každý label a input dát clear :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: