Ergebnis 1 bis 14 von 14
  1. #1
    serienjunky ist offline Jungspund
    registriert
    17-12-2008
    Beiträge
    10

    position: absolute

    Guten Abend, ich habe ein Problem und hoffe, dass mir hier geholfen werden kann.


    Warum positioniert sich der Div-Container „dropdown“ nicht am Div-Container „rechts“ ?
    Das Eltern-Element von „dropdown“ ist ja „rechts“!


    Code:
    .allgemein {
    width: 200px;
    }
    
    .links {
    width: 100px;
    float: left;
    }
    
    .rechts {
    float: none;
    position: relative;
    }
    
    .dropdown {
    position: absolute;
    left:0;
    top:0;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    }

    Code:
    <div class="allgemein">
       <div class="links">Frage:</div>
       <div class="rechts">
          Textfeld
          <div class="dropdown"></div>
       </div>
    </div>
    mfg serienjunky

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: position: absolute

    Ein absolut positioniertes Element, ist absolut positioniert, d.h. das Elternelement spielt keine Rolle.

  3. #3
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: position: absolute

    Gib Deinem Elternelement mal ne width-Angabe, damit das Kind die Örtlichkeiten begreift.

    @ein schlauer: Eltern spielen eine Rolle:
    position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  4. #4
    serienjunky ist offline Jungspund
    registriert
    17-12-2008
    Beiträge
    10

    AW: position: absolute

    Funktioniert leider immer noch nicht.

  5. #5
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: position: absolute

    Was funktioniert denn nicht? Wie soll es denn werden?


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  6. #6
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: position: absolute

    Hast du sowas im Sinn?
    Schreib doch die Klasse .rechts mal so
    PHP-Code:
    .rechts {
    positionrelative;
    width100px;
    margin-left100px;



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  7. #7
    serienjunky ist offline Jungspund
    registriert
    17-12-2008
    Beiträge
    10

    AW: position: absolute

    Ja, genau. Danke

    Kannst du mir sagen, warum es bei meinem Code nicht geht?

  8. #8
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: position: absolute

    Du musst dem Element .rechts sagen, wohin es sich stellen soll. Das passiert mit der margin-left-Angabe. Bei der Klasse .dropdown musst Du noch top verändern, damit sie drunter steht, also z.B.
    PHP-Code:
    top:20px
    Edit: Es gibt noch andere Möglichkeiten. Du könntest auch .rechts statt mit der margin-Angabe mit
    PHP-Code:
    floatright
    positionieren.
    Geändert von anna55 (22-12-2008 um 01:04 Uhr)


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  9. #9
    serienjunky ist offline Jungspund
    registriert
    17-12-2008
    Beiträge
    10

    AW: position: absolute

    Vielen Dank Anna

    Vieleicht noch mal eine Frage nebenbei.

    Könnte man dies auch mit einer Tabelle realisieren:

    Code:
    <table>
       <tr>
          <td>Frage:</td>
          <td>Textfeld<div id="dropdown"></div></td>
       </tr>
    </table>
    Nur könnte man das div "dropdown" nicht absolut positionieren. Weil man das <td> nicht als Eltern-Element anschauen kann.

  10. #10
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: position: absolute

    Nur als Ergänzung, weil du es offensichtlich nicht gelesen hast:
    Zitat Zitat von anna55 Beitrag anzeigen
    Dort steht, das das Elternelement, absolut positioniert sein muss, ansonsten ist die Position absolut zum body. D.h. in deinem Fall stimmt meine Aussage.

    Kann es sein, dass du das DIV im normalen Textfluss haben willst? Dann reicht ein einfaches display:inline oder du verwendest direkt ein inline Element.

  11. #11
    serienjunky ist offline Jungspund
    registriert
    17-12-2008
    Beiträge
    10

    AW: position: absolute

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Nur als Ergänzung, weil du es offensichtlich nicht gelesen hast:
    Dort steht, das das Elternelement, absolut positioniert sein muss
    Sicher habe ich es gelesen. Und sowieso, habe ich dies schon gewusst.
    Ich habe ja geschrieben, dass ich nicht weiss, ob <td> für das div "dropdown" ein Elternelement ist. Ich versteh sowieso nicht, was alles als Elternelement in Frage kommt.

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Kann es sein, dass du das DIV im normalen Textfluss haben willst? Dann reicht ein einfaches display:inline oder du verwendest direkt ein inline Element.
    Nein, eben nicht! Das Div darf überhaupt nicht im Textfluss sein. Deshalb auch absolute Position. Es sollte nur relativ zum Rand des Div's "rechts" bzw. zur Zelle in der 2. Spalte der Tabelle sein. Vielleicht zur Verständlichkeit; Das div "dropdown" ist versteckt und wird nur bei gewünschten aktionen sichtbar.

    Und da das Layout eher an einer Tabelle ran kommt, dachte ich zuerst, dass ich es mit <table> lösen kann:

    Code:
    <table>
       <tr>
          <td>Frage1:</td>
          <td>Textfeld1<div id="dropdown1"></div></td>
       </tr>
       <tr>
          <td>Frage2:</td>
          <td>Textfeld2<div id="dropdown2"></div></td>
       </tr>
       <tr>
          <td>Frage3:</td>
          <td>Textfeld3<div id="dropdown3"></div></td>
       </tr>
    </table>
    Aber leider funktioniert es nicht.

  12. #12
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: position: absolute

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Dort steht, das das Elternelement, absolut positioniert sein muss, ansonsten ist die Position absolut zum body.
    Nicht wirklich. Die sind etwas sparsam mit ihren Worten und schreiben, das Element muss positioniert sein, also 'position:relative;' geht auch. Bei SELFHTML gibt es das Ganze etwas ausführlicher:
    SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

    Tabellen sind - außerhalb der Datendarstellung - nicht wirklich eine gute Wahl.
    Ich hatte - auf Basis Deines ersten Posts mal ne Gegenüberstellung gemacht, kam aber da sofort mit den IEs ins Gehege (wahrscheinlich geht das noch viel einfacher):
    PHP-Code:
    <!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" lang="de"
    <
    head>
    <
    title>Test</title>
    <
    style type="text/css">
    .
    allgemein {
    width200px;
    }

    .
    links {
    width100px;
    floatleft;
    }

    .
    rechts {
    positionrelative;
    width100px;
    margin-left100px;
    }  

    #rechts {
    positionrelative;
    width100px;
    }  

    .
    dropdown {
    positionabsolute;
    left:0;
    top:0;
    width100px;
    height100px;
    border1px solid black;
    }

    #dropdown {
    positionabsolute;
    top:11px;
    display:block;
    width100px;
    height100px;
    border1px solid black;
    }

    *+
    html #dropdown {
    positionabsolute;
    top0;
    left:0;
    }

    *
    html #dropdown {
    positionabsolute;
    top0;
    left:0;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    table>
       <
    tr>
          <
    td class="links">Frage:</td>
          <
    td id="rechts">Textfeld<div id="dropdown"></div></td>
       </
    tr>
    </
    table>

    <
    br />
    <
    br />
    <
    br />
    <
    br />
    <
    br />
    <
    br />
    <
    br />

    <
    div class="allgemein">
       <
    div class="links">Frage:</div>
       <
    div class="rechts">
          
    Textfeld
          
    <div class="dropdown"></div>
       </
    div>
    </
    div>
    </
    body>
    </
    html


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  13. #13
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: position: absolute

    Na ja, Du kannst auch hier mit position arbeiten, aber was wird einfacher mit ner Tabelle?
    PHP-Code:
    <!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" lang="de"
    <
    head>
    <
    title>Test</title>
    <
    style type="text/css">
    .
    allgemein {
    width200px;
    }
    .
    links {
    width100px;
    floatleft;
    }
    .
    rechts {
    positionrelative;
    top:10px;
    width100px;
    }  
    .
    dropdown {
    positionrelative;
    top:-20px;
    display:block;
    width100px;
    height20px;
    border1px solid black;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    table>
       <
    tr>
          <
    td class="links">Frage1:</td>
          <
    td class="rechts">Textfeld1<div class="dropdown"></div></td>
       </
    tr>
       <
    tr>
          <
    td class="links">Frage2:</td>
          <
    td class="rechts">Textfeld2<div class="dropdown"></div></td>
       </
    tr>
       <
    tr>
          <
    td class="links">Frage3:</td>
          <
    td class="rechts">Textfeld3<div class="dropdown"></div></td>
       </
    tr>
    </
    table>
    </
    body>
    </
    html
    Edit: Ich würde im Falle der Tabelle aber eher alles aus dem Style rauswerfen und ungefähr sowas schreiben:
    PHP-Code:
    .allgemein {
    width200px;
    }
    .
    links {
    width100px;
    }
    .
    rechts {
    width100px;
    }  
    .
    dropdown {
    margin-top:-20px;
    width100px;
    height20px;
    border1px solid black;

    Geändert von anna55 (22-12-2008 um 15:16 Uhr)


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  14. #14
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: position: absolute

    Zitat Zitat von serienjunky Beitrag anzeigen
    Sicher habe ich es gelesen. Und sowieso, habe ich dies schon gewusst.
    Ich habe ja geschrieben, dass ich nicht weiss, ob <td> für das div "dropdown" ein Elternelement ist. Ich versteh sowieso nicht, was alles als Elternelement in Frage kommt.
    Hier findest Du ne gute Einführung zum Thema Familienstammbaum:
    Cascading Style Sheets { Grundlegendes : Dokumentstammbaum }


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

Ähnliche Themen

  1. my site
    Von hidingmyfame im Forum Site-Check
    Antworten: 29
    Letzter Beitrag: 11-08-2008, 10:06
  2. Genaue Positionierung und Browser
    Von ~red~ im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 31-10-2005, 18:01
  3. IE zeigt alles falsch!
    Von cuychactao im Forum CSS und (X)HTML
    Antworten: 16
    Letzter Beitrag: 23-12-2004, 13:53
  4. (CSS) margin und position absolute
    Von Konfusion im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 11-12-2002, 23:32
  5. Absolute Position des Muszeigers
    Von Dieter im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 31-10-2001, 22:17

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •