Gå til innhold

Tekst etter "Input" mittstilling

xatic

Anbefalte innlegg

xatic

xatic

Skrevet
Skrevet

Heisann.

 

Dette fungerer fint i FireFox og Chrome men IE7 (og under?) liker det ikke. Teksten blir ikke "mittstilt i høyden".

 

Se på dette bildet for en bedre forklaring,

 

hjelp.jpg

 

Hvordan skal jeg mittstille denne på best mulig måte? Prøvde med margin-top: -2px; men funherte ikke så bra.

 

HTML

<body>
<div id="wrapper_center">
<div id="wrapper">
	<div id="meny">
		<ul class="meny">
			<li>Forsiden</li>
			<li>Informasjon</li>
			<li>Registrer</li>
			<li>Logg Inn</li>
		</ul>
	</div> <!-- End Meny -->
	<div id="content">
	<div id="feilmelding"> Beklager, det har skjedd noe feil ... </div>
		<div id="form">
		<form action="registrer.php" method="post">
			<input type="text" name="username" class="input" /> Brukernavn <br />
			<input type="text" name="mail" class="input" /> Mail <br />
			<input type="password" name="password1" class="input" /> Passord (1) <br />
			<input type="password" name="password2" class="input"/> Passord (2) <br /> 
			<input type="submit" name="submit" class="input" value="Registrer Meg" style="width: 162px;"/>
		</form>
		</div> <!-- End Form -->
	</div> <!-- End Content -->
	<div id="nye_brukere" style="text-align: center">
	<p> Her kommer en liste over nye brukere </p>
	</div> <!-- End Nye_Brukere -->
</div> <!-- End Wrapper -->
</div> <!-- End CenterWrapper -->
</body>

 

CSS

* {
margin: 0px;
padding: 0px;
font-family: Tahoma;
font-size: 12px;
color: black;
}

.input {
width: 150px;
padding: 5px;
margin-bottom: 5px;
border: 1px dashed #c9d2db;
background-color: #f0f3f6;
}

#wrapper_center{
margin-left: auto;
margin-right: auto;
width: 500px;
}

#wrapper {
width: 500px;
float: left;
margin-top: 10px;
}

#meny {
width: 490px;
padding: 5px;
float: left;
}

#content {
width: 488px;
padding: 5px;
float: left;
border: 1px dashed #c9d2db;
background-color: #f0f3f6;
}

#feilmelding {
width: 476px;
border: 1px solid #e43d3d;
background-color: #ffc2c2;
margin-bottom: 5px;
text-align: center;
padding: 5px;
}

#nye_brukere {
padding: 5px;
float: left;
width: 490px;
}

ul {
list-style: none;
}

ul.meny li {
float: left;
margin-right: 10px;
padding: 5px;
}

ul.meny li:hover {
text-decoration: underline;
}

 

Hjelp? :D

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Haraldson

Haraldson

Skrevet
Skrevet

Anbefaler deg å legge input-ene i en uordna liste (<ul>) i hver sitt listepunkt (<li>). Så legger du tekstene i hver sin label (<label>) og fjerner <br />. <label> gir du deretter et for-attributt som matcher tilhørende inputs id-attributt.

 

Eksempel:

<ul>
<li>
<input type="text" name="username" id="username" class="input" />
<label for="username">Brukernavn</label>
</li>
</ul>

 

Så stiler du sånn som dette:

form ul {
list-style: none;
/* og andre fine ting */
}

form ul li {
/* kanskje en padding-bottom her? */
}

form ul li label {
line-height: 20px; /* line-height tilsvarende total høyde (padding+border+height/font-størrelse) i piksler */
}

Lenke til kommentar
xatic

xatic

Skrevet
  • Forfatter
Skrevet

Hm, jeg prøvde dette men det hjalp ikke noe? Prøvde også og kopiere det samme som du nevnte men teksten i IE detter forsatt "ned" i forhold til <input text>. Finnes det andre løsninger eller gjør jeg feil?

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...