position: relative; IE lässt freiraum

Status
Nicht offen für weitere Antworten.

flooo

Erfahrenes Mitglied
wenn ihr mal hier schaut
http://www.flozirkus.com/supi/hauptseite2.php
bitte einmal mit opera oder mozilla und dann im IE anschauen, warum lässt der IE dort so einen großen Freiraum (obwohl doch das div verschoben wurde)
es geht um das div über dem Bild (die Inputfelder)
hoffe mir kann jemand helfen, das zerhaut mir das ganze Design
flooo
 
Hi,

mal sehen, ob ich das Problem richtig verstanden habe. Es geht um den Abstand der
Navigation zum Banner, ausserdem der Abstand der Login-Inputs zum Banner.

Zunächst würde ich das gesamte, umschliessende Div mit der CSS-Eigenschaft position: relative;
versehen. Damit beziehen sich die absoluten Positionsangaben enthaltener Elemente relativ
auf die linke obere Ecke des Divs. Damit lässt sich das Login-Div absolut positionieren. Das
hat zur Folge, dass die relativen Angaben der Navigation wieder übereinstimmen.

Ich habe dazu drei CSS-Klassen definiert, die zum Grossteil Deine Angaben enthalten, jedoch
ergänzt wurden.
Code:
.bannerDiv{ width: 100%;
            height: 145px;
            margin-top: 0px;
            margin-bottom: 0px;
            display: block;
            background-color: transparent;
            color: #00176A;
            font-weight: bold;
            text-align: center;
            padding-bottom: 0px;
            position: relative}
.loginDiv{ position: absolute;
           left: 707px;
           top: 68px;}
.finalBannerImg{ margin-bottom: -1px !important; margin-bottom: -4px;}
Angaben, die vor der !important-Anweisung stehen, werden vom IE nicht interpretiert. Somit
ist eine browserabhängige Formatierung möglich.

Der zugehörige HTML-Abschnitt sieht wie folgt aus:
Code:
<div class="bannerDiv">
    <img class="finalBannerImg" src="../bilder/finalbanner.jpg" width="900" height="145" border="0" alt="" />
    <div class="loginDiv">
        <form name="login" method="post" action="hauptseite2.php" style="margin: 0px;">
            <input type="text" name="usernick" style="font-size: 80%; width: 100px;" tabindex="1" /><br />
            <input type="password" name="userpass" style="font-size: 80%; width: 100px;" tabindex="2" /><br /><br />
            <input type="submit" name="login" value="Login" class="hinweis" style="background-color: #C3170F; color: #FFFFFF; border: solid 1px #FFFFFF; font-weight: bold;" />
        </form>
    </div>
</div>
Ich habe mir ausserdem erlaubt, die Breite der Input-Felder auf 100 Pixel zu begrenzen.

Ich hoffe, Du kannst damit etwas anfangen.

Ciao
Quaese
 
tausend dank, aber du musst mir nochmal erklären wie das funktioniert, denn die absolut positionierten input-felder verwirren mir nicht, wozu sind die absolut positioniert? ich dachte immer das ist zum gesamten Fenster, aber anscheinend ist das zum dem bannerdiv
flooo
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück