tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
946
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    flooo flooo ist offline Mitglied Brokat
    Registriert seit
    May 2004
    Ort
    Berlin
    Beiträge
    283
    wenn ihr mal hier schaut
    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
     

  2. #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    .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 :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK

  3. #3
    flooo flooo ist offline Mitglied Brokat
    Registriert seit
    May 2004
    Ort
    Berlin
    Beiträge
    283
    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
     

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 11.02.10, 13:58
  2. Absolute Position -> relative Position
    Von LL0rd im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 29.09.09, 12:30
  3. Antworten: 5
    Letzter Beitrag: 09.04.09, 20:05
  4. relative Position bestimmen
    Von Divi im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 18.08.04, 17:08
  5. CSS (position:relative) und Links
    Von Wolfsbein im Forum CSS
    Antworten: 5
    Letzter Beitrag: 09.01.02, 16:09