Méretezés és pozicionálás

Elrendezzük űrlapunk elemeit.

A pozicionálás és igazítás megoldható táblázat segítségével is, de most a táblázatmentes megoldást választjuk.

A beviteli mezők előtt elhelyezett címkék display tulajdonságát blokk-ra állítva blokkdobozként méretezhetővé válnak. Balra úsztatjuk őket és egyenlő szélességűre állítjuk, így a mögöttük elhelyezkedő beviteli mezők bal szélei egymás alá kerülnek.

Fontos! A beviteli mezők szélessége állítható a HTML kódban a size tulajdonságnál megadott karakterszámmal is, de ekkor a különböző böngészők ugyanazon karakterszámhoz más-más valós szélességet rendelnek. A beviteli mezők magassága is böngészőfüggő. Éppen ezért, a stíluslapon beállítjuk a beviteli mezők szélességét és magasságát is.

Példa:

Forráskód


<style>
body {background-color:#ffddcc; color:#662210; font:14px/24px Verdana, Geneva, sans-serif;}
/*Méretezés */
form { padding:10px; width: 600px;  }
.felasznalo input { width:220px; height:22px;}
form textarea {width:440px; height:150px; }
/*Pozicionálás */
.label_1 {display: block; width: 70px; float: left; text-align: right; margin-right: 10px; }
.targy input { margin-left: 140px; }
.felasznalo span  { display: inline-block; color: #ff0000; margin-left: 15px; font-size: 0.92em; width:220px; text-align: center;
}
</style>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_urlap_info_meret_pozicio_01.html