Warum? und anderes Layer gehampel ...

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Warum? und anderes Layer gehampel ...

    Folgendes etwas farbenfrohes Beispiel:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!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" dir="ltr">
    	<head>
    		<title>Divs</title>
    		<style type="text/css">
    
    		body {
    			background: yellow;
    		}
    
    		div.header {
    			position: relative;
    			height: 100px;
    			background: green;
    		}
    
    		div.content {
    			position: relative;
    			height: 400px;
    			background: blue;
    			margin: 0px;
    		}
    
    		div.footer {
    			position: relative;
    			height: 100px;
    			background: red;
    		}
    
    		div.gothiclayer {
    			position: relative;
    			height: 50px;
    			width: 50px;
    			background: magenta;
    			margin: 20px;
    		}
    
    		</style>
    	</head>
    	<body>
    		<div class="header">
    		</div>
    		<div class="content">
    			<div class="gothiclayer">
    			</div>
    		</div>
    		<div class="footer">
    		</div>
    	</body>
    </html>
    Aus welchem Grunde verschiebt sich (im Firefox und Opera) die Position den "content" Layers, wenn der "gothiclayer" einen Margin hat ...

    Wahsaga hat sicherlich 'ne Erklärung ...
    carpe noctem

    [color=blue]Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht![/color]
    [color=red]Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung![/color]

  • #2
    Hallo, gebe dem gothiclayer mal ein position:absolut ...

    Gruß php_fussel

    Kommentar


    • #3
      Das geht nicht ... im Original gibt es 2 Layer untereinander, die die Höhe des "content" Layers beeinflussen sollen.

      Ich könnte sonst auch einfach left und top verwenden.
      carpe noctem

      [color=blue]Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht![/color]
      [color=red]Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung![/color]

      Kommentar


      • #4
        hat imho überhaupt nichts mit position zu tun. liegt wohl daran, dass content noch keinen inhalt hat. daher kommt es zu diesem ergebnis.

        lösung 1:
        PHP-Code:
            div.gothiclayer {
              ...
              
        margin0 20px;
            } 
        lösung zwei
        PHP-Code:
            <div class="content">
              
        bla blubb
              
        <div class="gothiclayer">
              </
        div>
            </
        div
        und zur veranschaulichung
        PHP-Code:
            div.content {
              ...
              
        border1px solid #000;
            

        peter
        EDIT:
        das position kannst du imho weglassen
        Zuletzt geändert von Kropff; 10.03.2009, 19:31.
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          @Peter: Das ist ja prinzipiell richtig ... aber aus welchem Grunde sollte ich auf meiner Website unbedingt ein "bla blubb" stehen haben wollen?

          Was, wenn der Content-Layer einfach nur 2 Layer (mit je "bla" oder "blub") enthalten soll.

          Für mich ist das Verhalten von FF und Opera einfach unlogisch. Zumal der Layer durch den Linken Anteil des Margins auch nicht nach rechts verschoben wird ...
          carpe noctem

          [color=blue]Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht![/color]
          [color=red]Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung![/color]

          Kommentar


          • #6
            Sobald Text eingegeben wird, dann funzt es zwar, aber das div richtet sich dann auch am Text aus (und wandert weiter nach unten, wenn der Text wächst).
            Da Du die Höhe des content-divs mit den anderen beiden divs bestimmen willst, ist float:left auch keine Option (was sonst funzen würde). Komisch ...

            Gruß php_fussel
            EDIT:
            ... oder nimm das margin weg und gib dem content-div ein padding:20px ...
            EDIT:
            ... oder lass das margin und gebe dem content-div ein padding:1px ... das funzt auch ...
            Zuletzt geändert von php_fussel; 10.03.2009, 19:57.

            Kommentar


            • #7
              hab des rätsels lösung aus meiner internen todo-liste für meinen auftritt. schau dir mal das hier an, dann hast du deine antwort. btw: im safari sieht es genau so aus.

              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                @Kropff: Das "Problem", auf das du hier verlinkst, bezieht sich auf "zusammenfallende", engl. collapsing, margins.

                goth' Problem ist aber, dass der äussere Container verschoben wird, wenn der innere ein margin-top bekommt (richtig?)

                Die Erklärung findet sich in der CSS 2.1-Spezifikation zwar auch unter der Überschrift Collapsing margins, ist aber eine etwas andere:
                The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
                Das heisst im konkreten Falle, weil #content kein border-top oder padding-top hat (und #gothiclayer kein "clearance"), wird das margin-top von #gothiclayer an #content "weitergereicht", und dann #content mit Abstand von dem was vor ihm kommt dargestellt.


                Original geschrieben von goth
                Für mich ist das Verhalten von FF und Opera einfach unlogisch.
                Das mag sein :-) - aber es ist gemäß der Spezifikation.
                Zumal der Layer durch den Linken Anteil des Margins auch nicht nach rechts verschoben wird ...
                Für die horizontalen Margins ist kein derartiges Verhalten definiert, im Gegensatz zu den vertikalen.
                Zuletzt geändert von wahsaga; 10.03.2009, 19:58.
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  @Kropff: Das "Problem", auf das du hier verlinkst, bezieht sich auf "zusammenfallende", engl. collapsing, margins. Die Erklärung findet sich in der CSS 2.1-Spezifikation zwar auch unter der Überschrift Collapsing margins, ist aber eine etwas andere:
                  auf die habe ich mich bezogen. sorry, vergessen, darauf hinzuweisen. mea culpa.

                  peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar

                  Lädt...
                  X