Anzeige

DIVs der position "absolute" mit gem. Rahmen ausstatten

DIVs der position "absolute" mit gem. Rahmen ausstatten | PSD-Tutorials.de

Erstellt von kirchrath, 12.08.2008.

  1. kirchrath

    kirchrath Noch nicht viel geschrieben

    Dabei seit:
    04.05.2008
    Beiträge:
    39
    Geschlecht:
    männlich
    Software:
    DW/PS CS3
    Kameratyp:
    Canon EOS 400D
    DIVs der position "absolute" mit gem. Rahmen ausstatten
    Sicher ganz einfach aber es will bei mir irgendwie nicht.
    Ich habe zwei Container denen ich eine absolute Position angegeben habe. Jetzt möchte ich aber, dass beide von einem Gemeinsamen Rahmen umgeben werden. Ich weiß aber leider die genaue Höhe des zweiten Containers nicht.

    Wie mach ich das?

    Danke
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    DIVs der position "absolute" mit gem. Rahmen ausstatten
    AW: DIVs der position "absolute" mit gem. Rahmen ausstatten

    Du backst beide in einen div mit variabler Höhe und verpasst diesem einen Rahmen.
     
    #2      
  3. kirchrath

    kirchrath Noch nicht viel geschrieben

    Dabei seit:
    04.05.2008
    Beiträge:
    39
    Geschlecht:
    männlich
    Software:
    DW/PS CS3
    Kameratyp:
    Canon EOS 400D
    DIVs der position "absolute" mit gem. Rahmen ausstatten
    AW: DIVs der position "absolute" mit gem. Rahmen ausstatten

    Also wenn ich dich richtig verstanden habe, meinst du es so - geht aber nicht (zumindest nicht im FF3)

    Link: Unbenanntes Dokument
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    DIVs der position "absolute" mit gem. Rahmen ausstatten
    AW: DIVs der position "absolute" mit gem. Rahmen ausstatten

    Das funzt nicht... du kannst 2 absolut positionierten div (wenn die Höhen nicht fest sind) keinen gemeinsamen Rahmen verpassen...


    Frag dich mal, ob die absolute Positionierung notwendig ist...


    Erklär mal, was du erreichen willst
     
    #4      
  5. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    DIVs der position "absolute" mit gem. Rahmen ausstatten
    AW: DIVs der position "absolute" mit gem. Rahmen ausstatten

    Zum verständniss ... bei den positionierungsarten "absolute" und "float" nimmt man ein Element gewissermassen aus dem normalen Dokumentenfluss.

    Das ist so als ob man zwei folien nimmt ... die erste stellt das eigentliche Dokument dar die zweite ist das absolut positionierte Element. Dabei achtet folie 1 nicht auf folie zwei und umgekehrt.

    bei floats verhält sich das etwas anders.

    Ich bitte dich folgendes durch zulesen--> http://www.psd-tutorials.de/modules.../53441-wie-stell-ich-meine-frage-richtig.html

    Und wie ich jedesmal betone

    FINGER WEG VON ABSOLUTER POSITIONIERUNG

    Im obigen Beitrag findest du den Punkt "Layout macht generell Probleme (dynamic css layouts)"

    Dort kannst du dich zu "float"s belesen.

    Wenn das ungefähr so aussehen soll wie bei deiner verlinkten Seite ist die grobe Struktur ...

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Untitled Document</title>
    6.  #container {
    7.      margin-left: 100px;
    8.     margin-top: 60px;
    9.     width: 500px;
    10.     border: 1px solid red;
    11.  }
    12.  #head {
    13.      height: 100px;
    14.     background: #0000EE;
    15.     margin-bottom: 10px;
    16.  }
    17.  #content {
    18.      background-color: #AAA;
    19.     font-weight: 600;
    20.  }
    21. </head>
    22.  
    23. <div id="container">
    24.  <div id="head">
    25.     a
    26.  </div>
    27.  <div id="content">
    28. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    29.  
    30.  </div>
    31. </div>
    32. </body>
    33. </html>
    34.  
    35.  
    Dafür brauchst du nicht einmal float oder sonst was ausgefallenes.

    Per CSS dem Container eine breite und einen border verpassen(zur positionierung mit den margins spielen), dem Kopf die gewünschte höhe geben (sowie abstand nach unten) und zu guter letzt dem inhalt seinen hintergrund verpassen.

    Fertig.
     
    #5      
  6. kirchrath

    kirchrath Noch nicht viel geschrieben

    Dabei seit:
    04.05.2008
    Beiträge:
    39
    Geschlecht:
    männlich
    Software:
    DW/PS CS3
    Kameratyp:
    Canon EOS 400D
    DIVs der position "absolute" mit gem. Rahmen ausstatten
    AW: DIVs der position "absolute" mit gem. Rahmen ausstatten

    Danke für die Antworten. Ich habs so gemacht wie jackprince es beschrieben hat.
    Das mit den beiden Folien die unabhängig aufeinander liegen ist einleuchtend. Muss jetzt noch schaun ob im IE auch so ausssieht.

    Danke
     
    #6      
x
×
×
teststefan