• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Formular mittig einer Seite ausrichten

Status
Für weitere Antworten geschlossen.
A

Avardacil

Neues Mitglied
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: 
<html>

<head>

<title>Registrierung - Death Valley</title>

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

</head>

<body style="background-color:#000000">
<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>

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
 
gib der Form ne feste breite und dann:
Code: 
margin:0px auto;

edit: noch besser ist es, aussenrum nen div zu machen mit fester breite und darin die form
 
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;
}

und die Datei nun jetzt so:

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

<head>

<title>Registrierung - Death Valley</title>

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

</head>

<body style="background-color:#000000">
<form action="db_entry.php" method="post" width="300">
<div align="center" id="container">
<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>
 
was soll das denn?!
Code: 
[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000bb]form action[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"db_entry.php" [/COLOR][COLOR=#0000bb]method[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"post" [/COLOR][U][B][COLOR=#0000bb]width[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"300"[/COLOR][/B][/U][COLOR=#007700]>[/COLOR][/COLOR]

<form> hat kein Attribut width! gib der Form eine feste breite über CSS!
 
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;
}


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

<head>

<title>Registrierung - Death Valley</title>

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

</head>

<body style="background-color:#000000">
<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>
 
Also bei mir setzt folgender code das formular genau mittig. im FF sowie im IE7:
Code: 
<!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
Code: 
[COLOR=#000000][COLOR=#0000bb]topmargin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]0[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]marginwidth[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]0[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]marginheight[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]0[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]rightmargin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]0[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000bb]bottommargin[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]0[/COLOR][COLOR=#007700];[/COLOR][/COLOR]
raus.
Code: 
margin:0; 
padding:0;
reicht vollkommen aus!

PS. Kann es sein, das du dein Formular auch vertikal zentriert haben möchtest?
 
Ist zwar nicht die sauberste Lösung (position:absolute und negativer Marginwert) aber die einzige tabellenlose, die ich kenne:
Code: 
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;
}
 
So gehts (Alles mittig, Abstände korrigiert)
Code: 
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;
}
 
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
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben