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

DIV mit absoluter Position verschwindet

N

Nagazi

Mitglied
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.

1. 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.

2. 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: 
    <div id="header"></div>
    <div id="loginform">
        <div id="bann"></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"></div>
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;}
 
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?
 
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
 
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.
 
Wolltest du es so?
Code: 
<!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
 
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 ?
 
HTML: 
<html>
<head>
    <style>
/*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;}
        </style>
</head>
<body>
    <div id="header"></div>
    <div id="loginform">
        <div id="bann"></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 id="copyright">
            <HR SIZE="1" WIDTH="100%">
            <p><center>
            <br></center></p>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
</html>
 
Nein den Beispielcode sollst du verwqenden. Du muss nurnoch dein BG's einbinden.
Code: 
<!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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben