✔ Html - Positionierung

[ma8391]

Hallo,
ich habe folgendes Problem: Auf meiner Startseite sollen zwei Button mit jeweiligem Text darunter nebeneinander und mittig erscheinen. Dies funktioniert auch soweit, doch wenn ich die Auflösung des Rechners ändere, dann verschieben die sich. Meine Frage nun, was kann ich in meinem Code besser machen, damit das nicht passiert oder es sich nicht so schlimm verschiebt?
Danke für die Antworten.

<div class="login"> <form action="login.php"> <input     class='Button' type="submit" value="Log in"> </form> <p class='Text1'>Text....</p> </div> <div class="register"> <form action="register.php"> <input     class='Button' type="submit" value='register'> </form> <p class='Text1'>Text.....</p> </div>
 

 div.login{ text-align:center; position: absolute; top: 29%; right:27%}

div.register {text-align:center; position: absolute; top: 29%; left:27%}

.Button {Background-color: #6CB6FF; font-family:Bradley Hand ITC; font-size: 24; font-weight: bold}

 

[Maik]

Hi,

worauf bezieht sich denn bei dir das "mittige" Erscheinungsbild der Formular-Buttons?

 

[ma8391]

mittig heißt, dass es zwei Buttons gibt die in der Mitte der Seite (also horizontal in der Mitte), nebeneinander auf gleicher Höhe stehen sollen. Bei meiner jetzigen Auflösung 1680 x 1050 Pixeln funktioniert das auch, doch wenn ich die Auflösung ändere, verschieben sich die.

 

[benninet]

das problem ist eigentlich klar, du hast pronzent angaben

um eine box genau in der mitte zu positionieren muss du in etwa das als stylesheet verwenden

position:absolute; left: 50%; top: 50%; width:455px; height:250px; margin-left: -227px; margin-top: -125px;

du positionierst es also erst unter der mitte, und ziehst dann im margin die hälfte der größe ab (455/2 = in etwa 227, 250/2 = 125...)

 

[Maik]

Du brauchst mir nicht zu erklären, was "mittig" bedeutet. Vielmehr wollte ich mit meiner Frage den Kontext in Erfahrung bringen. Außerdem war mir deine Bildschirmauflösung bis eben noch nicht bekannt, und somit eben auch nicht der Zusammenhang, was für dich "mittig" ist.

Wie sieht denn überhaupt der übrige Quellcode der Seite aus? Arbeitest du mit einem entsprechenden Hintergrund(bild), der/das den Kontext herstellt, dass sich die Buttons bei deiner Auflösung in der horizontalen Mitte befinden? Gibt es evtl. eine Online-Version, um sich das mal "live" anschauen und sich ein Bild von den Gegebenheiten machen zu können?

Ansonsten solltest du die Elemente in ein übergeordnetes DIV-Element mit fester Breite einbetten, und dieses im Viewport horizontal zentriert positionieren, denn so lange sie anscheinend am linken und rechten Fensterrand positioniert sind, verschieben sie sich auch beim Skalieren der Fenstergröße.

@benninet: Bitte beachte die Netiquette bzgl. deiner durchgängigen Kleinschreibung. Vielen Dank

 

[ma8391]

@benninet: Danke, hat mir sehr geholfen