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

Überlapungsproblem...

K

kruk

Mitglied
Hab mal wieder ein Problem^^
Ich hab jetzt 2 Divs, die ich überlappen lassen will. Nur dabei gibt es ein Problem, nämlich geht der neue Div nicht nach oben, sondern es bildet sich eine Scrollleiste :twisted:
Hab einen unterschiedlichen z-index, und auch schon die visibility von einem div auf hidden gestellt... Hilft alles nichts :sad:

Hoffe ihr könnt mir helfen.
 
Werbung:
Wenn Du Uns noch den verwendeten Code lieferst, könnten Wir mal schauen was Wir machen können. ;)
 
Na dann will ich ihn euch nicht vorenthalten :mrgreen:
Nicht wundern wegen dem login und so, alles nur Design^^

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Trockenübung</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="icon.ico" type="image/x-icon" rel="shortcut icon" />

</head>

<body>
<div id="logindiv" >
    <form action="">
               <br /><br /><br /><br />
        <span class="loginfieldstext">Name:</span>
               <br />
           <input type="text" name="nickname" class="felder" maxlength="20" />
               <br /><br />
        <span class="loginfieldstext">Passwort:</span>
               <br />
           <input type="password" name="passwort" class="felder" maxlength="20" />
               <br /> <br />

        <input type="button" value="Login"/>
              <br />
           <a href="" name="register" id="registerlink">Mitglied werden</a>
    </form>
</div>
<div id="bannerdiv">
    hihi

</div>


</body>
</html>

CSS:
HTML: 
body
{
  background: url(bgimg.png);
  background-size: 100%;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.jpg', sizingMethod='scale')";
  margin:0 0 0 0;
  width:100%;
  height:100%;
}


#logindiv {
    z-index:100;
    background-color:#FF00FF;
    margin-top:0px;
    margin-bottom:;
    margin-right:5%;
    margin-left:80.5%;
    padding-right: 15px;
    padding-left: 12px;
    visibility: ;
}
.felder {
    z-index:111;
    position:relative;
    background-color:transparent;
    font-family: Verdana,arial,helvetica,sans-serif;
    font-weight: bold;
    border-color:transparent;
    width:100%;
}
#registerlink {
    z-index:111;
    margin-right:0px;
}

#bannerdiv {
    z-index:11;
    width:1000px;
    background-color:#00FFFF;
    margin-top:;
    margin-bottom:800px;
    margin-right: ;
    margin-left:100px;
}
 
Werbung:
Ich kann bei diesem CSS nicht erkennen, dass da überhaupt irgendwas übereinander liegt. Die Scrolleiste dürfte durch die merkwürdig großen Außenabstände bei einigen Elementen verursacht werden. Jedoch folgende Hinweise:

Sachen wie
Code: 
visibility: ;
bitte weglassen. Eigenschaften ohne Wert gibt es nicht.

z-index wirkt nur bei Elementen deren "position"-Eigenschaft eine andere als "static" ist. Hier müsstest Du also z.B. "position: relative;" ergänzen.
 
Das "Loginfeld" liegt über dem Bannerfeld. Sollte es zumindest...
Hab jetzt mal den ganzen Müll entfent, und die Scrolleiste wegbekommen, indem ich beim Bannerdiv das margin-bottom durch top ausgetauscht habe. Außerdem hab ich position relative überall hinzugefügt, aber irgendwie hilft lles nichts :(
 
Werbung:
Wenn Du Anpassungen vorgenommen hast, zeig diese auch hier damit man beurteilen kann was nun problematisch ist.

Und als Tipp: wenn Du etwas übereinander haben willst, verwende absolute Positionierung. Aber mit Bedacht.
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>The Wild Horde</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="icon.ico" type="image/x-icon" rel="shortcut icon" />

</head>

<body>
<div id="logindiv" >  haaaaaaaaaaaaaaaaaaaaaaaa
    <!--<form action="">
               <br /><br /><br /><br /> 
        <span class="loginfieldstext">Name:</span>
               <br />
           <input type="text" name="nickname" class="felder" maxlength="20" />
               <br /><br />
        <span class="loginfieldstext">Passwort:</span>
               <br />
           <input type="password" name="passwort" class="felder" maxlength="20" />
               <br /> <br />
        
        <input type="button" value="Login"/>
              <br />   
           <a href="" name="register" id="registerlink">Mitglied werden</a> 
    </form> -->
</div>
<div id="bannerdiv">
    hihi

</div>


</body>
</html>

HTML: 
body
{ 
  background: url(bgimg.png);
  background-size: 100%;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.jpg', sizingMethod='scale')";
  margin:0 0 0 0;
}


#logindiv {
    z-index:100;
    position: relative;
    background-color:#FF00FF;
    margin-top:0px;
    margin-right:30px;
    margin-left:700px;
    width:200px;
    padding-right: 15px;
    padding-left: 12px;    
}
.felder {
    z-index:111;
    position:relative;
    background-color:transparent;
    font-family: Verdana,arial,helvetica,sans-serif;
    font-weight: bold;
    border-color:transparent;
    width:100%;
}
#registerlink {
    z-index:111;
    position: relative;
    margin-right:0px;
}

#bannerdiv {
    z-index:11;
    position: relative;
    width:1000px;
    background-color:#00FFFF;
    margin-top:0px;
    margin-left:100px;
}
 
Werbung:
Hi,
warum versuchst du nicht mal den Tipp von threadi umzusetzen, und nimmst absolute Positionierungen:

Gib doch mal (bei dem von dir zuletzt geposteten Code) dem logindiv position: absolute; statt relative. Dann sollten die sich schon überlappen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben