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>


<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 ;
}

@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 :)

■

HTML, CSS, JavaScript, Ajax

csirip

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>

<!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>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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? :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ezt tette

Poetro · 2012. Júl. 12. (Cs), 16.01

Pont ezt tette.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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/

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés