ugrás a tartalomhoz

függőlegesen és visszintesen is középre igazitott szövegmezők , elöttük megjelenő feliratttal hogyan

troy1979 · 2012. Júl. 12. (Cs), 14.50
sziasztok

klasszikus 2 hasábos login formot szeretnék késziteni, (vagyis egyik oszlopban a mező neve, a mellette lévő oszlopban a maga a mező)

úgy hogy ne a mező+felirata igazodjon visszintesen az oldal közepére, hanem maga a mező igazodjon viszintesen az oldal közepére, és a mező elött jelenjen meg a mező cimkéje

az alábbi html és css kóddal rendelkezem eddig:

<div id="wrapper">
<div id="cell">
<div id="content">
<div align="center" location="logo" id="logo-container" style=""><div class="v-embedded v-embedded-image" style="width: 100px; height: 48px;"><img src="/themes/mycompany/img/logo.png"></div></div>
<label for="login-email">Username / Felhasználónév</label>
<div location="email-field" style=""><input type="text" class="v-textfield" id="login-email"></div>
<label for="login-password">Password / Jelszó</label>
<div location="password-field" style=""><input type="password" class="v-textfield" id="login-password"></div>
<div location="login-button" style=""><div tabindex="0" class="v-button v-button-login login" role="button"><span class="v-button-wrap"><span class="v-button-caption">Bejelentkezés/Sign in</span></span></div></div>
</div>

</div>
</div>

@charset "utf-8";

#wrapper {
	display:table;
	width: 100%;
	height: 100%;
	}
#cell {
	width: 100%;
	height: 100%;
	border: 1px solid black;
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	 }
	 
#content {
	border: 1px solid red;
	width: ;
}

label {
	color: #ffffff;
	
}




.v-button-login {
	background-color: #fe5e00 !important ;
}
Hogyan tudnám elérni, hogy a szövegmezők feliratai ne a szövegmezők fölé, hanem a szövegmezők elé kerüljenek, annélkül, hogy a szövegmezők visszintes helyzete (vagyis hogy középre vannak igazitva ) ne változzon?

Elöre is köszönöm a segitségeteket :)
‹ Karakterkészlet probléma. Tábla kezelő webalkalmazás ›
 ■
1

Lerajzolnád?

Poetro · 2012. Júl. 12. (Cs), 15.30
Lerajzolnád kérlek, hogy mit is szeretnél? Mit jelent, hogy a mező előtt?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
#wrapper {
    display:table;
    margin: 0 auto;
    height: 100%;
}
#cell {
    width: 100%;
    height: 100%;
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}

#content {
    border: 1px solid red;
}

label {
    color: #000;
    display: inline-block;
    width: 12em;
    white-space:nowrap;
}

body, html {
    height: 100%;
}

body {
    margin: 0 auto;
}

.v-button-login {
    background-color: #fe5e00 !important ;
}

  </style>
</head>
<body>
  <div id="wrapper">
    <div id="cell">
      <div id="content">
        <div id="logo-container"><div class="v-embedded v-embedded-image" style="width: 100px; height: 48px;"><img src="/themes/mycompany/img/logo.png"></div></div>
        <div class="email-field"><label for="login-email">Username / Felhasználónév</label>  <input type="text" class="v-textfield" id="login-email"></div>
        <div class="password-field"><label for="login-password">Password / Jelszó</label>  <input type="password" class="v-textfield" id="login-password"></div>
        <div class="login-button"><div tabindex="0" class="v-button v-button-login login" role="button"><span class="v-button-wrap"><span class="v-button-caption">Bejelentkezés/Sign in</span></span></div></div>
      </div>
    </div>
  </div>
</body>
</html>
5

bocs srácok a késői válaszért

troy1979 · 2012. Júl. 13. (P), 16.13
kipróbáltam a kódot, amit irtál, és ezt szeretném csak kicsit más elrendezéssel/pozicionálással

a te megoldásodban az egész pirossal keretezett rész (vagyis a teljes 2 hasábos login form ) igazodik az oldal visszintes közepére

Én viszont azt szeretném hogy a második hasáb/oszlop (vagyis a logó, és a username és password textfield-ek, valamint a login gomb )igazodna visszintesen középre, és ehhez a fix poziciohoz képest kerülne a mezők caption-je a mezők elé

Én eddig 1 használható megoldást tudtam kigondolni: fix szélességet adok mindennek, amit középre szeretnék igazitani

Mert ha fix szélessége van minden-nek, akkor akkor meg lehet azt csinálni, hogy középre igazitattok mindent ( vagyis a piros dobozt), és aztán az egész dobozt eltolom még x pixel-el, hogy a kivánt hatást elérjem :)

Van erre esetleg más megoldás is , arra az esetre amikor nem tudom vagy nem akarom megadni a középre igazitandó elemek szélességét?
6

Pl. készítesz egy konténert

Hidvégi Gábor · 2012. Júl. 13. (P), 16.31
Pl. készítesz egy konténert két hasábbal, amelyek szélessége 50%, a bal oldali tartalmát pedig jobbra igazítod.
7

Szivesen töltenék fel screenshot-ot , csak nem tudom hogyan

troy1979 · 2012. Júl. 13. (P), 16.31
Azt hiszem volt már kérdés talán, de ti melyik képmegosztó szolgáltatást szoktátok használni ha pl screenshot-ot kell valamihez mellékelni itt a weblabor-on?

Vagy esetleg lehet képet feltölteni a hozzászoláshoz, csak én vagyok vak? :)
2

Középre igazítás

Hidvégi Gábor · 2012. Júl. 12. (Cs), 15.55
A középre való igazítás – főleg, ha függőlegesen is szeretnéd – a legegyszerűbb, ha táblázatba pakolod az űrlapelemeket.
3

ezt tette

Poetro · 2012. Júl. 12. (Cs), 16.01
Pont ezt tette.
4

Mégsem jó

Hidvégi Gábor · 2012. Júl. 12. (Cs), 16.13
A tartalom körül van "táblázat", az elemek önálló divekben, tehát igazából ránézésre nem igazán jó megoldás.
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">

tr {
  vertical-align: middle;
}

label {
  color: #000;
  width: 12em;
  white-space:nowrap;
}

body, html {
  height: 100%;
}

body {
  margin: 0 auto;
}

  </style>
</head>
<body>
  <table>
    <tr>
      <td align="center"><label for="login-email">Username / Felhasználónév</label></td>
      <td align="center"><input type="text" class="v-textfield" id="login-email"></td>
    </tr>
    <tr>
      <td align="center"><label for="login-password">Password / Jelszó</label></td>
      <td align="center"><input type="password" class="v-textfield" id="login-password"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="Bejelentkezés/Sign in" class="v-button-login"></td>
    </tr>
  </table
</body>
</html>
8

A leges legelső verzió tényleg táblázatos volt

troy1979 · 2012. Júl. 13. (P), 16.37
mivel hogy visszintesen és függőlegesen is középre szerettem volna igazitani a tartalmat

a div-es , és display property-s megoldást innen vettem:

http://blog.themeforest.net/tutorials/vertical-centering-with-css/
9

Nehéz ügy

Pepita · 2012. Júl. 17. (K), 02.28
Ha jól értettem, két oszlop közül a jobb oldalit akarod a tartó konténer közepére tenni.

A fix pixelméretet eltolással nem javaslom, mert felbontásfüggő. (Vagy a tartalmazó konténer is fix méretű, fúj...)

Meg tudod oldani js-el (jQuery), de ennek ugye hátránya, ha véletlen kikapcsolják. Azt gondolom, a "jobboldali" dobozodat kellene helyesen középre igazítani (és absolute), a balt kezdetben alá. Aztán ready-kor a balnak absolute pozícióként meg tudsz adni számított koordinátákat, amit a tartókonténer méreteiből és a jobb méreteiből/pozíciójából számítasz. Lehet z-index-ekkel is játszanod kell. Megéri?