DIV mit absoluter Position verschwindet

Nagazi · 19. März 2012 um 15:51

Moin,

da meine Loginform hässlich aussah habe ich nun mal ein bisschen mit CSS gescriptet. Auf der Seite sind 3 große Div´s. Ein header, footer und loginform.

Die Loginform würde ich gerne zentrieren. Wenn ich left:50% und right:50% angebe und eine feste größe von 400px in der höhe und 300px in der Breite wandert der Container links auf 50% und rechts auf ca. 20% abstand.
Der Footer klebt unter dem header fest. Sind beides nur 40px Hohe zeilen und der Footer „verschmilzt“ mit dem Header. Sobald ich doch diesen absolut positioniere verschwindet er. Solange er aber nicht auf position:absolute ist kann er ja meines Wissens nach nicht unter die Loginbox wandern da diese ja genau in der mitte liegt.

Hier mal der HTML ausschnitt sowie CSS

[HTML]

Benutzername:<input type=„text“ size=„24“ maxlength="50"name=„username“>

Passwort:

[/HTML]

[CODE]/PANELS/
#footer {
left:100%;
right:100%;
bottom:0px;
height:40px;
margin-bottom:-10px;
margin-left:-8px;
margin-right:-8px;
background-image:url(‚/images/footer.png‘);
background-repeat:repeat-x;
}
#header {
left:100%;
right:100%;
top:100%;
height:40px;
margin-left:-8px;
margin-right:-8px;
margin-top:-10px;
background-image:url(‚/images/header.png‘);
background-repeat:repeat-x;
}
#bann {
left:100%;
right:100%;
height:30px;
background-image:url(‚/images/bann.png‘);
background-repeat:repeat-x;
z-index:2;
}
#loginform {
right:50%;
bottom:50%;
width:400px;
height:250px;
top:50%;
background-color:#888888;
position:absolute;
}

/Formulare/
#lform {
left:5%;
right:5%;
top:45px;
bottom:5%;
}

label { display: inline-block; width: 10em;}[/CODE]

threadi · 19. März 2012 um 20:35

left, right, bottom und top wirken nur auf nicht-static positionierte Elemente. Du hast so einige static-positionierte Elemente die dennoch solche Eigenschaften haben - bringt also nichts.

Auch bringt es nichts die jeweils gegenüberliegenden Werte gleichzeitig anzugeben. Also top und bottom oder left und right. Dadurch verwirrst Du die Browser eher, so dass sie nicht wirklich wissen wie es nun dargestellt werden soll.

Und um sich dieses „schieben“ mal anzuschauen - kann man das irgendwo auch mal sehen? Nachdem Du o.g. korrigiert hast?

Nagazi · 19. März 2012 um 20:59

Ne sorry läuft alles nur Local

devilseye · 19. März 2012 um 21:57

hmm könnte schwierig werden wesshalb verwendest du nicht margin: 0 auto; ?
ich möchte dir nicht auf die füsse treten nimmt mich nur wunder. denn der browser
nimmt die 50% und „schiebt“ dein loginform bis in die mitte rein. und die 2. angabe wird
ignoriert ausser sie wird auf important gesetzt.
Ausserdem musst du beachten dass dein loginform ja auch noch eine breite hat also
sind das auch noch ein paar % welche für das loginform drauf gehen.
und da nicht jeder die gleiche Bildschirmauflösung hat nimmt dann dein loginform mehr
oder weniger platz ein.
Hoffe konnte dir weiterhelfen. wenn nicht sags mir dann mach ich dir eine kleine skizze
ist kein problem.

mfg

Nagazi · 20. März 2012 um 11:50

Wäre klasse wenn du mir eine kleine Skizza anfertigen könntest.

War von mir so gedacht das sich die Loginseite an jede Browsergröße anpassen kann. Deswegen habe ich alles mit Prozentualen Werten gemacht und trotzdem noch feste Größen eingetragen für Smartphones/Tabs.

devilseye · 20. März 2012 um 19:11

[ATTACH]2552.vB[/ATTACH][ATTACH]2553.vB[/ATTACH]
so ich hoffe das hilft dir weiter

djheke · 20. März 2012 um 19:39

Wolltest du es so?

<!DOCTYPE html>

<html lang="de">

<head>
 <meta charset="UTF-8" />
 <title>Testcase</title>
 <style>

* {
 margin:0;
 padding:0;
}

html , body , #container {
 height:100%;
}
body {
 min-height:500px;
 background:#ddd;
}

#container {
 margin-bottom:-40px;
 position:relative;
 float:left;
 width:100%;
 background:#ddd;
}

/*PANELS*/
#footer {
 position:relative;
 z-index:99;
clear:both;
height:40px;
background:#aaa;
}
#header {
height:40px;
background:#aaa;
}
#bann {
height:30px;
background:#dad;
}

/*Formulare*/
#lform {
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0px;
 width:400px;
 height:300px;
 background:#a33;
 color:#fff;
 margin:auto;
}

label { display: inline-block; width: 10em;}
 </style>
 </head>

 <body>
<div id="container">
 <div id="header">Header</div>
      <div id="bann">Banner</div>
        <div id="lform">
            <form action="login.php" method="post">
            <label>Benutzername:</label><input type="text" size="24" maxlength="50"name="username"><br><br>
            <label>Passwort:</label><input type="password" size="24" maxlength="50" name="password"><br>
            <input type="submit" value="Login">
            </form>
        </div>
</div>
    <div id="footer">Footer</div> 

 </body>

</html>

Die Zenriermethode ist ubrigens von fricca
Bild mittig ausrichten - XHTMLforum
CSS vertical center using float and clear

Nagazi · 20. März 2012 um 20:50

Klasse das von djheke wars. Ist nun zentriert. Kann sein das ich bei der Bildererklärung was falsch angegeben habe.

Jetzt wäre noch das Problem das der header und der footer Div direkt untereinander sind (Nicht gestapelt). Wie bekomme ich nun den Footer (welcher über den ganzen Bildschirm geht) runter ?

djheke · 20. März 2012 um 20:54

Kopiere dir doch den gesamten Code, dann sollte doch alles ok sein.

Ubrigens ist dein Problem hier auch beschrieben
http://www.html.de/css/43268-bild-horizontal-und-vertikal-div-zentrieren-will-vertikal-nicht.html#7

Nagazi · 20. März 2012 um 21:14

[HTML]

/*PANELS*/ #footer { left:100%; right:100%; bottom:100%; height:40px; margin-bottom:-10px; margin-left:-8px; margin-right:-8px; background-image:url('/images/footer.png'); background-repeat:repeat-x; } #header { left:100%; right:100%; top:100%; height:40px; margin-left:-8px; margin-right:-8px; margin-top:-10px; background-image:url('/images/header.png'); background-repeat:repeat-x; } #bann { left:100%; right:100%; height:30px; background-image:url('/images/bann.png'); background-repeat:repeat-x; z-index:2; } #loginform { position:absolute; left:0; right:0; top:0; bottom:0px; width:400px; height:225px; color:#FFFFFF; background:#4D4D4D; margin:auto; } #copyright { left:5%; right:5%; } /*Formulare*/ #lform { left:5%; right:5%; top:45px; bottom:5%; position:absolute; }

label { display: inline-block; width: 10em;}

Benutzername:

Passwort:

[/HTML]

djheke · 21. März 2012 um 10:02

Nein den Beispielcode sollst du verwqenden. Du muss nurnoch dein BG’s einbinden.


<!DOCTYPE html>  <html lang="de">  <head>  <meta charset="UTF-8" />  <title>Testcase</title>  <style>  * {  margin:0;  padding:0; }  html , body , #container {  height:100%; } body {  min-height:500px;  background:#ddd; }  #container {  margin-bottom:-40px;  position:relative;  float:left;  width:100%;  background:#ddd; }  /*PANELS*/ #footer {  position:relative;  z-index:99; clear:both; height:40px; background:#aaa; } #header { height:40px; background:#aaa; } #bann { height:30px; background:#dad; }  /*Formulare*/ #lform {  position:absolute;  left:0;  right:0;  top:0;  bottom:0px;  width:400px;  height:300px;  background:#a33;  color:#fff;  margin:auto; }  label { display: inline-block; width: 10em;}  </style>  </head>   <body> <div id="container">  <div id="header">Header</div>       <div id="bann">Banner</div>         <div id="lform">             <form action="login.php" method="post">             <label>Benutzername:</label><input type="text" size="24" maxlength="50"name="username"><br><br>             <label>Passwort:</label><input type="password" size="24" maxlength="50" name="password"><br>             <input type="submit" value="Login">             </form>         </div> </div>     <div id="footer">Footer</div>    </body>  </html>

Nagazi · 21. März 2012 um 13:14

Genau so sollte es sein vielen Dank,

muss man das charset auch immer mit angeben bzw. den Typen oder die Sprache?

djheke · 21. März 2012 um 15:24

Wir müssen nur eines, aber JA.

Nagazi · 21. März 2012 um 15:36

Okay vielen dank.

Verrätst du mir auch wofür die Parmeter wichtig sind?