Formular mittig einer Seite ausrichten

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute!

Also ich habe gerade eine Seite angefangen, und möchte die Registrierung gerne genau in der Mitte der Seite haben…habe das schoneinmal mit einer Tabelle hinbekommen, allerdings nur ein Bild, und diesmal sind es mehrere Textfelder…wenn ich das so wie bei meinem Bild mache, dann zieht HTML das Formular über die ganze Seite :lol:

Hier ist mal die Tabelle + Formular welches ich zentrieren möchte…ausserdem möchte ich die Tabelle noch mit einem Hintergrund Bild versehen, worauf dann das Registrierungsformular sein sollte…

[PHP]

Registrierung - Death Valley
Spielername
E-Mail-Adresse
Passwort
Reich Reich 1

[/PHP]

Das soll zentriert werden und noch mit einem Hintergrundbild versehen werden…mir schwebt da so ein Kasten o.ä. vor, aber das ist ja mein problem ich weiss nur nicht, wie ich das ganze zentrieren könnte

Mit freundlichen Grüßen,

Avardacil

2

gib der Form ne feste breite und dann:

margin:0px auto;

edit: noch besser ist es, aussenrum nen div zu machen mit fester breite und darin die form

3

So habe ich eben ausprobiert aber leider bringt es nicht =(

Die css datei sieht so aus:

[PHP]html, body {
font-family:Comic Sans MS;
font-size:15px;
color:#474747;
margin: 0;
padding: 0;
leftmargin: 0;
topmargin: 0;
marginwidth: 0;
marginheight: 0;
rightmargin: 0;
bottommargin: 0;
margin:0;
padding:0;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
}

td {
font-size:16px;
color:#474747;
}

form {
margin:0px auto;
}[/PHP]

und die Datei nun jetzt so:

[PHP]

Registrierung - Death Valley
Spielername
E-Mail-Adresse
Passwort
Reich Reich 1

[/PHP]
4

was soll das denn?!

<form action="db_entry.php" method="post" [U][B]width="300"[/B][/U]>

hat kein Attribut width! gib der Form eine feste breite über CSS!

5

Entschuldigung, ich bin noch nicht all zu sehr bewandert auf dem Gebiet CSS und das letzte mal habe ich es auch anders zentriert, was ja, wie schon erwähnt, diesmal nicht ging…

Ok dann werde ich das mal tun, ich melde mich wieder…

hat leider nichts gebracht…

CSS:
[PHP]html, body {
font-family:Comic Sans MS;
font-size:15px;
color:#474747;
margin: 0;
padding: 0;
leftmargin: 0;
topmargin: 0;
marginwidth: 0;
marginheight: 0;
rightmargin: 0;
bottommargin: 0;
margin:0;
padding:0;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
}

td {
font-size:16px;
color:#474747;
}

form {
width:300px;
margin:0px auto;
}[/PHP]

Datei:
[PHP]

Registrierung - Death Valley
Spielername
E-Mail-Adresse
Passwort
Reich Reich 1

[/PHP]
6

Also bei mir setzt folgender code das formular genau mittig. im FF sowie im IE7:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style>
html, body {
    font-family:Comic Sans MS;
    font-size:15px;
    color:#474747;
    margin:0;
    padding:0;
}

td {
    font-size:16px;
    color:#474747;
}

form {
        width:300px;
        margin:0px auto;
        border:1px solid black;
} 
</style>

<title>Registrierung - Death Valley</title>

<link href="src/css/register.css" rel="stylesheet" type="text/css">

</head>

<body>
<form action="db_entry.php" method="post">
<div align="center">
<table>
      <tr>
        <td>Spielername </td>
        <td><input type="text" name="nutzername" maxlength="15"></td>
      </tr>
      <tr>
        <td>E-Mail-Adresse </td>
        <td><input type"text" name="email" maxlength="35"></td>
      </tr>
      <tr>
        <td>Passwort </td>
        <td><input type"text" name="passwort" maxlength="35"></td>
      </tr>
      <tr>
        <td>Reich </td>
        <td><select name="reich" size="1">
      <option>Reich 1</option>
    </select></td>
      </tr>
</table>
<br>
<input type="reset" value="Zurücksetzen">
<input type="submit" name="button_reg" value="Registrieren!">

</div>
</body>

</html>

bitte schmeis den ganzen

topmargin: 0;
    marginwidth: 0;
    marginheight: 0;
    rightmargin: 0;
    bottommargin: 0;

raus.

margin:0; 
padding:0;

reicht vollkommen aus!

PS. Kann es sein, das du dein Formular auch vertikal zentriert haben möchtest?

7

hehe das meine ich ja die ganze Zeit =)

Es soll genau in der MITTE des Bildschirmes sein…

Grüße

8

Ist zwar nicht die sauberste Lösung (position:absolute und negativer Marginwert) aber die einzige tabellenlose, die ich kenne:

form { width:300px; height:160px; position:absolute; top:50%; left:50%; margin-top:-80px; /*Hälfte der Höhe*/ margin-left:-150px; /*Hälfte der Breite*/ border:1px solid black; }

9

Vielen Vielen Dank =)

Damit ist das Problem gelöst grins

10

So habe nun wieder ein problem =(

also hier mal die Adresse das problem ist schwer zu übersehen^^

Klick mich bitte

Grüße

11

So gehts (Alles mittig, Abstände korrigiert)

form { width:300px; height:450px; position:absolute; top:50%; left:50%; margin-top:-225px; /*Hälfte der Höhe*/ margin-left:-150px; /*Hälfte der Breite*/ border:1px solid black; } table { padding-top:50px; padding-left:10px; }

12

Nochmals vielen Dank auch an dich =)

Werde in Zukunft wohl mich mehr auf CSS als auf PHP konzentrieren müssen^^

Bis dann

Kann gecloased werden denke ich