Keresés
Hírlevél
 
Kiemelt témák
»Hogy viszonyul ehhez a család?
»Legjobb metodika emberi relációk tárolására
»A programozó hibája, hogy törik a programját?
»Jogosultság kezelés mezőszinten
Állás/munka
»Wordpress szakértőt keresünk
»Kamu álláshirdetők listája
»Front-end fejlesztő / Sitebuilder
»DataStore Developer
»PHP programozó, webfejlesztő munkát keres
» több téma
Tudástár
?Input mezőből visszakapott adat probléma
?HTML-ben a Flash átméretezés torzul
Eredeti mezőnevek lekérdezése
Oldalon keresés 8x írja ki az eredményt
?XML-ből sok szövegmező
TinyMCE és az ékezetek
?Rengeteg hasonló kép betöltése gyorsan (PHP)
Ékezetes kar. nem minden táblában jól
?Shelltreeview gond
Grafikon rajzolás probléma
?Onclick= php függvény
?Egyenes megrajzolása
?Access-ből adott xml fájl kinyerése
Listázás időpont szerint
Exportálás változó könyvtárba
» több téma
Társalgó
»A programozásból jól meg lehet élni?
»MFC tanulás
»Könyvet adok-veszek
»Hogy viszonyul ehhez a család?
»Nintendo wii
»Letölthető az új Rad Studio XE és Delphi XE
»Weblap véleményezés
»Játékmotor elmélet
»Informatikai bulvárlap
»Delphi-ről C++-ra váltás
» több téma
ASP  |  C#  |  C++  |  CSS  |  Delphi  |  Flash  |  HTML  |  Java  |  JavaScript  |  Pascal  |  Perl  |  PHP  |  Python  |  Visual Basic  |  Visual C++  |    »    

Tudástár

»

Inputok szövegeit függőlegesen középre

»

Inputok szövegeit függőlegesen középre

nyitotta: MyR, idő: 2010.02.08., moderátor: Árnyék
  Értesítés változás esetén Felvétel kedvencekhez Küldés emailben Nyomtatható verzió

Kategóriák:Web-programozás » CSS

Sorrend:
Időzóna:
Blokkméret:
Firefoxban a text inputokban lévő szöveg felül helyezkedik el, a buttonok esetében alul. Internet Explorerben a szövegdobozok esetében ugyanez a helyzet, a gombok mondhatni jól jelennek meg. Úgy tűnik egyedül a Chrome az, amely minden esetben szépen középre igazítja.

Jó lenne elérni, ha a Firefox és az IE példát venne róla. A Google-ben olyanokat találtam, hogy line-height, meg display:block, hogy ezek elvileg segítenek. Hát sajnos nálam semmi változás
<input type="text" style="display: block; height: 100px; width:200px; line-height: 90px; text-align:center;" value="Test value">
<input type="button" style="display: block; height: 100px; width:200px;  line-height: 90px; text-align:center;" value="Test button">

Teszteltem FF, IE8, Chrome és Opera-ban
megnéztem, ilyen magas inputtal nincs gond. De ezzel nem jó:

<input type="text" class="szovegmezo" value="Test value">
<input type="button" class="nyomogomb" value="Test button">

input {
width : 80px;
height : 22px;
display : block;
line-height : 10px;
}

input.szovegmezo {
font-family : "Tahoma";
font-size : 12px;
color : #000000;
border-style : solid;
border-width : 1px;
border-color : #000000;
background : transparent;
padding-left : 8px;
padding-right : 8px;
}

input.nyomogomb {
font-family : "Tahoma";
font-size : 10px;
color : #503c46;
font-weight : bold;
}

text-align:center nem kell, a gombok szövegei alapban középre igazodnak, a szövegmezőben meg jó ha balról kezdődik.

A line-height értéke mitől függ?

Miért van az, hogy pl. a Facebook bejelentkező űrlapja minden böngészőben ugyanúgy jelenik meg?
A line-height értéke mitől függ?

ha a magassággal egyenlővé tettem akkor középre pakolta:

input {
width : 80px;
height : 22px;
display : block;
line-height : 22px;
}

viszont ilyenkore a gomb rossz, úgyhogy átpakoltam a line-heightet a szovegmezo classba

Miért van az, hogy pl. a Facebook bejelentkező űrlapja minden böngészőben ugyanúgy jelenik meg?

Jó emberük van aki gondol minden böngészőre és javítja ha valami nem úgy néz ki - pl speciális IE stílus megadásokkal:
.valami {

width:200px;
height:200px;

background-color:red;
* background-color:green;
_ background-color:blue;

}
ahol IE több üzemmódjában más más a színe, egész pontosan kb így:
+-----------------+-------------------+------------+
| Böng. üzemmódja | Dok. üzemmódja    | Háttérszín |
+-----------------+-------------------+------------+
|      IE7        | IE7 Szabványok    |    zöld    |
|      IE7        | Régi stílusú(IE6) |    kék     |     
|      IE8        | IE8 Szabványok    |    piros   |
|      IE8        | IE7 Szabványok    |    zöld    |     
|      IE8        | Régi stílusú(IE6) |    kék     |
|      IE8 komp.  | IE8 Szabványok    |    piros   |
|      IE8 komp.  | IE7 Szabványok    |    zöld    |     
|      IE8 komp.  | Régi stílusú(IE6) |    kék     |
+-----------------+-------------------+------------+
összegezve: IE8 ban piros, IE7ben zöld és IE6ban kék. Persze ez csak IE ismeri - Firefox,Chrome,Opera stb. nem ismeri ezeket, emiatt alapból hibát dob pl Firefoxban:
Figyelmeztetés: A várt deklaráció helyett '*' található. Ugrás a következő deklarációra.
Forrásfájl: ...
Sor: 41

Emiatt viszont nem nagyon lesz CSS valid az oldal, de erre meg ki lett találva a

<!--[if IE 6]>
...
<![endif]-->
és társai ami csak akkor fut le ha tényleg IE6-tal futtatom, ez esetben önmagát nem vágja át a "Régi stílusú módjával" de pl IETesterrel előhozta azt a részt amit betettem pl:

<style type="text/css">
.valami {
width:200px;
height:200px;
background-color:red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
.valami {
background-color:blue;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
.valami {
background-color:green;
}
</style>
<![endif]-->
és ezen kívül vannak még a különböző "hackek" - amik pl megoldják a IE6 áttetsző képproblémáit, és stb.
A jó line-height beállítás a szövegmező esetében megoldotta a problémát. A gomb nem jó, de annak adtam egy kis paddingot aztán máris helyrerakta a feliratot Szóval most így jó. Igen, amúgy annyi line-height kell neki mint height ez a lényeg.
Belépés
E-mail cím:
Jelszó:

RSS források
-Hírek
-Cikkek
-Fórumok
-Állás/munka
Top pontgyűjtők
»Micu1.030
»Interlock280
»mezofi150
»Pitta_100
»Frostech0100
»szbzs.2100
»Hack100
»Riha60
»Akhiles50
»mrchandra50
Top wikieditorok
»Sting
»Doi
»FlamingClaw
»Argathron
»Csaboka2
»Vodka
»Joexy
»Ivn
»Balucinho
»Kelemzol
» ugrás a wikire
A nap kifejezései
»Algoritmus
»Hogyan kezdjem el
»Perl
» ugrás a wikire
Hírek
»Megérkezett a PostgreSQL 9.0 kiadásra jelölt változata
»Letölthető az új Rad Studio XE és Delphi XE
»Function-X digitális művészeti találkozó és demoscene party
»Webfejlesztőknek szóló közösségi oldalt indított a Microsoft
»Letölthető a hardvergyorsított Chrome 7 első fejlesztői kiadása
» több hír
PC Fórum hírek
»Itt az első kép az AMD nyolcmagos processzoráról
»"Szuperdizájnos" érintő-egeret mutatott be a Microsoft
»Szabadalmaztatta a számítógép kikapcsolását a Microsoft
»Vírusriadót váltott ki a webezőknél a Google
»Ingyen iWiW-ezhetnek mobiljaikról a T-Mobile-osok
»Automatikusan kiválogatja legfontosabb leveleink a Google
»OOo4Kids - ingyenes Office csomag gyerekeknek
»Új, gyorsabb Core i3 és Pentium processzorokat jelentett be az Intel
Tagi blogok
»PSP
»Első Programozó
»USB
»PHP, mint sablonmotor egyszerűen