iasonas: problem mit div-positionierung: div hinter div, statt darunter

hallo zusammen.

komme nicht mehr weiter. magst du mal schauen?

anforderung:

  • 4 divs untereinander.
  • "oben": hat feste höhe. klappt.
  • "bild": hat 30 % höhe und breite 100%. klappt (gesamtgröße passt sich an browserbreite automatisch an. so solls sein).
  • "mitte": hat 70% höhe ....klappt nicht. liegt HINTER der "bild"-div. soll aber darunter anfangen. und genau DAS krieg ich nicht hin.
  • "unten": hat feste höhe, ist immer unten. klappt.
html, body {
height: 100%;
}

body {
margin: 0; 
padding: 0;
}

#wrapper {
width: 100%; 
margin: auto auto; 
min-height: 100%; 
position: relative;
}

* html #wrapper {height: 100%;} /* IE Hack für 100 % Höhe */

#oben {
        height:100px;
        background:#285a72;
}

#bild {
	width: 100%;
	height: 30%;
background-image: url('b-tunnel.jpg');
background-repeat:no-repeat;
background-position: center;
background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
}

#mitte {

margin-bottom: 2em; 
float: left;
}

#unten {
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%;
height: 30px;
background:#285a72;
}

* html #unten {bottom: -1px;} /* Nächster IE Hack, da bottom: 0; als bottom: 1px interpretiert wird */
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>HIIIIIILFEEEEEEEE</title>
  <link rel="stylesheet" href="style.css">
  </head>

 <body>

  <div id="wrapper">
  
  <div id="oben">oben
  </div>
  
  <div id="bild">
  </div>
    
   <div id="mitte">
    Lorem ipsum dolor sit amet, ...  
   </div>
   <br style="clear: both;" />
   <div id="unten">
    Erdgeschoss !
   </div>

  </div>

 </body>
</html>
  1. @@iasonas

    • "mitte": hat 70% höhe ....klappt nicht. liegt HINTER der "bild"-div.

    Works as designed.

    * html #wrapper {height: 100%;} /* IE Hack für 100 % Höhe */
    […]
    * html #unten {bottom: -1px;} /* Nächster IE Hack, da bottom: 0; als bottom: 1px interpretiert wird ]*/

    Aus welchem Museum ist das denn? Kein noch in Gebrauch befindlicher IE macht damit irgendwas.

    <div id="wrapper">

    Das div ist „bedauerlich bis ärgerlich“.

    <div id="oben">

    Ich wäre gern ein header-Element? Bitte lass mich doch …

    <div id="mitte">

    Ich wäre gern das main-Element? Bitte lass mich doch …

    <br style="clear: both;" />

    Ich wäre gern gar kein Element. Styling ist Sache von CSS, nicht von zugemülltem HTML.

    <div id="unten">

    Ich wäre gern ein footer-Element? Bitte lass mich doch …

    LLAP 🖖

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hallo Gunnar

      <br style="clear: both;" />

      Ich wäre gern gar kein Element. Styling ist Sache von CSS, nicht von zugemülltem HTML.

      Mal aus reiner Neugier: Mir ist jetzt schon in einigen deiner Posts deine Abneigung gegen <br> aufgefallen, aber wie würde ich denn statt dessen in CSS einen Zeilenumbruch an der richtigen Stelle erzeugen?

      Ich meine, versteh mich nicht falsch, mir ist schon klar, dass im Sinne von responsive Design das manuelle Setzen eines Umbruchs zumindest weit seltener sinnhaft ist, als in einem starren Layout, aber nichtsdestoweniger gibt es dafür doch hin und wieder gute Gründe...

      Sollte man dann jedesmal mit <p> einen neuen Absatz einfügen und in CSS den Abstand anpassen?

      Und was ist mit <i> und <b>, sind diese Elemente dann aus deiner Sicht auch deprecated? Ich meine, das ist ja auch Styling im weitesten Sinne, oder?

      Beste Grüße,

      var

      1. Hallo und guten Morgen,

        Mal aus reiner Neugier: Mir ist jetzt schon in einigen deiner Posts deine Abneigung gegen <br> aufgefallen, aber wie würde ich denn statt dessen in CSS einen Zeilenumbruch an der richtigen Stelle erzeugen?

        • Zeilenumbruch, content-abhängig, mit CSS passendes Wrapping und im Content "\r\n"

        • Zeilenumbruch semantik-abhängig, durch Markup, passendes Element wählen

        Und wenn es dann Paragraph-Elemente sein sollten, kann man denen auch eine passende Class zuordnen: name, strasse, ort, telefon, ...
        Aber dafür gibt es teilweise auch schon eigene Elemente im HTML 5

        Grüße
        TS

        1. Hallo und guten Morgen

          Dir auch einen guten Morgen ;-)

          • Zeilenumbruch, content-abhängig, mit CSS passendes Wrapping und im Content "\r\n"

          Dazu ist diese Seite im Wiki recht aufschlussreich, aber hast du irgendeine Referenz bezüglich der Verwendung von "\r\n" zur Hand? Ist das eine Markierung für CSS? Gibt's da ein Anwendungsbeispiel?

          • Zeilenumbruch semantik-abhängig, durch Markup, passendes Element wählen

          Das sollte natürlich als erstes geprüft werden!

          Und wenn es dann Paragraph-Elemente sein sollten, kann man denen auch eine passende Class zuordnen: name, strasse, ort, telefon, ...

          Ich dachte Classeritis wäre mittlerweile auch als Krankheitsbild anerkannt!? ;-)

          Naja, das mit den Kontaktdaten ist aber jedenfalls ein klassisches (sic!) Beispiel für eine Situation, in der Zeilenumbrüche definitiv erwünscht sind...

          Dank und Gruß,

          var

          1. Hallo und guten Morgen,

            • Zeilenumbruch, content-abhängig, mit CSS passendes Wrapping und im Content "\r\n"

            Dazu ist diese Seite im Wiki recht aufschlussreich, aber hast du irgendeine Referenz bezüglich der Verwendung von "\r\n" zur Hand? Ist das eine Markierung für CSS? Gibt's da ein Anwendungsbeispiel?

            Nun, Zeilenumbruch im Plain-Text wird in def Webwelt eben durch "\r" "\n" odef "\r\n" dargestellt. Muss ich noch efklären, welche Bytewerte dahinterstecken hinter den Parserersatzzeichen? ;-p

            Und wenn es dann Paragraph-Elemente sein sollten, kann man denen auch eine passende Class zuordnen: name, strasse, ort, telefon, ...

            Ich dachte Classeritis wäre mittlerweile auch als Krankheitsbild anerkannt!? ;-)

            Wieso? MMn vollkommen legitim hier. Überall im Text, wo eine Angabe der Klasse "strasse" in einem <p>-Element vorkommt, soll sie gleich behandelt werden. Und wenn das an einzelnen Stellen nicht erwünscht ist, oder eben nurals Kind von <address>, dann kann man das ja auch spezifizieren.

            Grüße
            TS

            1. @TS

              Ok, ich glaube jetzt ist es klar. ;-)

              Nochmals danke für die Infos!

              Gruß,

              var

            2. @@TS

              Und wenn es dann Paragraph-Elemente sein sollten, kann man denen auch eine passende Class zuordnen: name, strasse, ort, telefon, ...

              Ich dachte Classeritis wäre mittlerweile auch als Krankheitsbild anerkannt!? ;-)

              Wieso? MMn vollkommen legitim hier. Überall im Text, wo eine Angabe der Klasse "strasse" in einem <p>-Element vorkommt, …

              Look Ma, no classes!

              … soll sie gleich behandelt werden. Und wenn das an einzelnen Stellen nicht erwünscht ist, oder eben nurals Kind von <address>, dann kann man das ja auch spezifizieren.

              Es gibt auch Attributselektoren: [property="streetAddress"]

              LLAP 🖖

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hallo,

        mit dem br-Element Abstände zu erzeugen ist mit HTML5 / CSS3 schlicht falsch. Das widerspricht dem Grundsatz Inhalt und Gestaltung zu trennen.

        Das br-Element ist nur dort erforderlich, wo Blockelemente nicht verwendet werden dürfen, aber trotzdem Umbrüche eingefügt werden sollen, zum Beispiel innerhalb des figcaption-Elements.

        Und was ist mit <i> und <b>, sind diese Elemente dann aus deiner Sicht auch deprecated?

        Nein. Sie sind aber nicht mehr dafür gedacht Text als fett oder kursiv auszuzeichnen, sondern haben eine semantische Bedeutung bekommen. Siehe zum Beispiel

        http://t3n.de/news/html5-neue-aufgaben-elemente-small-340838/

        Klassen sollten nur dort verwendet werden, wo sie erforderlich sind. Auch das gehört zur Trennung von Inhalt und Gestaltung. Anfänger verwenden Klassen viel zu häufig.

        Gruss

        MrMurphy

        1. Hallo MrMurphy1

          Und was ist mit <i> und <b>, sind diese Elemente dann aus deiner Sicht auch deprecated?

          Nein. Sie sind aber nicht mehr dafür gedacht Text als fett oder kursiv auszuzeichnen, sondern haben eine semantische Bedeutung bekommen. Siehe zum Beispiel

          http://t3n.de/news/html5-neue-aufgaben-elemente-small-340838/

          Danke für die Info und insbesondere für den Link - da ist es wirklich gut beschrieben!

          Klassen sollten nur dort verwendet werden, wo sie erforderlich sind. Auch das gehört zur Trennung von Inhalt und Gestaltung. Anfänger verwenden Klassen viel zu häufig.

          ACK

          Gruß,

          var

        2. Hallo und guten Morgen,

          Klassen sollten nur dort verwendet werden, wo sie erforderlich sind. Auch das gehört zur Trennung von Inhalt und Gestaltung. Anfänger verwenden Klassen viel zu häufig.

          Dann lass uns das Beispiel mit der Adresse mal bitte auf den Punkt bringen.

          Wie müsste die deiner Meinung nach semantisch ausgezeichnet und mit Style belegt werden?
          Rahmenbedingungen: Es gibt Adressen, bei denen keine Strasse dabei steht, bei anderen fehlt die Telefonnummer, noch andere haben davon zwei und eine Faxnummer, usw.

          <address>
          
          <!-- wie geht es hier weiter? -->
          
          </address>  
          
          

          Und bitte das CSS dafür nicht vergessen!

          Grüße
          TS

          1. @@TS

            <address>
            
            <!-- wie geht es hier weiter? -->
            
            </address>  
            

            Bevor es weitergeht, erstmal checken, ob der Anfang stimmt.

            “The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

            “The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)” [HTML5]

            LLAP 🖖

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Hallo,

            du wirst leider unsachlich und kindisch.

            Zunächst ging es um Klassen im Zusammenhang mit dem p-Element, nicht mit dem adress-Element.

            Rahmenbedingungen: Es gibt Adressen, bei denen keine Strasse dabei steht, bei anderen fehlt die Telefonnummer, noch andere haben davon zwei und eine Faxnummer, usw.

            Das CSS wird doch immer dem vorhandenen Inhalt angepasst, egal ob mit oder ohne Klassen. Wo ist das Problem?

            Dann lass uns das Beispiel mit der Adresse mal bitte auf den Punkt bringen.

            Dann musst du auch den gesamten HTML-Quelltext und den CSS-Quelltext mit den Klassen liefern. Dann kann ich dir zeigen wie es ohne die Klassen umzusetzen ist.

            Ich kann ja nicht wissen von welchen Angaben du ausgehst. Wenn ich nicht weiß worauf du hinauswillst kannst du ja in jedem Fall sagen das ich falsch liege - sowas ist Kindergartenniveau.

            Ich stelle dir ein Regal hin mit der Bitte es anzumalen und du malst es blau an. Dann kann ich immer kommen und hinterher sagen, rot wäre besser gewesen (oder grün oder gelb oder ...) - wie albern. Du musst also schon im Voraus alle wichtigen Infos liefern.

            Gruss

            MrMurphy

            1. Hallo und guten Morgen,

              du wirst leider unsachlich und kindisch.

              Was ist daran unsachlich oder kindisch. Es ist nur sachlich falsch. Und das Gunnar nun relativ sachlich gerade gerückt. Das <address>-Element ist nicht für klassische Adressen gedacht.

              Dann lass uns das Beispiel mit der Adresse mal bitte auf den Punkt bringen.

              Dann musst du auch den gesamten HTML-Quelltext und den CSS-Quelltext mit den Klassen liefern. Dann kann ich dir zeigen wie es ohne die Klassen umzusetzen ist.

              Ich muss gar nicht. Ich habe ja nicht behauptet, man könne ganz ohne Klassen auskommen, bzw. die Verwendung von Klassen wäre ein Anfängerfehler. Ich weiß es eben nicht besser.

              Und wenn Du nicht Angst hättest, dass es jemand anderes noch besser weiß als Du, und dich dann genauso runtermacht, wie Du das mit mir hier tust, dann würdest Du einfach mal ein gutes Beispiel liefern.

              Grüße
              TS

              1. Hallo,

                deine Frage kann schlicht niemand beantworten. Egal welche Lösung ich liefere kannst du immer schreiben, sie sei verkehrt. Und sowas ist Kindergarten, zumal wenn du trotz eines entsprechenden Hinweises auf einer Antwort bestehst.

                Wenn ich die Frage so in einem Forum stellen würde, würde ich auch keine Antwort erhalten, sondern die Aufforderung

                1. Das zugehörige HTML komplett zu liefern und

                2. mitzuteilen, was ich wie formatiert haben möchte.

                Gruss

                MrMurphy

        3. @@MrMurphy1

          Das br-Element ist nur dort erforderlich, wo Blockelemente nicht verwendet werden dürfen, aber trotzdem Umbrüche eingefügt werden sollen

          Njein. Es ist auch dann nicht erforderlich:

          <p typeof="PostalAddress" vocab="http://schema.org/">
            <span property="streetAddress">Edward-Snowden-Platz 1</span>
            <span property="postalCode">01099</span>
            <span property="addressLocality">Dresden</span>
          </p>
          

          (Gibt’s die Adresse wirklich?)

          [property="streetAddress"] { display: block }
          

          Und überhaupt finde ich es sinnvoller, Inhalt auszuzeichnen, nicht die Lücke dazwischen.

          LLAP 🖖

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. Hi,

            <p typeof="PostalAddress" vocab="http://schema.org/">
              <span property="streetAddress">Edward-Snowden-Platz 1</span>
              <span property="postalCode">01099</span>
              <span property="addressLocality">Dresden</span>
            </p>
            

            (Gibt’s die Adresse wirklich?)

            [property="streetAddress"] { display: block }
            

            Ungewöhnlich, in den meisten Fällen ist das erst posthum möglich, das eine Straße nach einer Person benannt wird. Und das ist meiner Meinung nach auch gut so.

            cu,
            Andreas a/k/a MudGuard

            1. @MudGuard

              Ungewöhnlich, in den meisten Fällen ist das erst posthum möglich, das eine Straße nach einer Person benannt wird.

              Naja, nach Lage der Dinge stehen die Chancen nicht schlecht, dass das Kriterium „posthum“ hier in nicht all zu ferner Zukunft erfüllt sein wird...

              Gruß,

              var

              1. Hallo,

                Naja, nach Lage der Dinge stehen die Chancen nicht schlecht, dass das Kriterium „posthum“ hier in nicht all zu ferner Zukunft erfüllt sein wird...

                Die Benamsung erfolgte nicht posthum, die Chance dass sich das nachträglich ändert beträgt ziemlich genau Null.

                Gruß
                Kalk

          2. Hallo und guten Morgen,

            Das br-Element ist nur dort erforderlich, wo Blockelemente nicht verwendet werden dürfen, aber trotzdem Umbrüche eingefügt werden sollen

            <p typeof="PostalAddress" vocab="http://schema.org/">
              <span property="streetAddress">Edward-Snowden-Platz 1</span>
              <span property="postalCode">01099</span>
              <span property="addressLocality">Dresden</span>
            </p>
            
            [property="streetAddress"] { display: block }
            

            Und überhaupt finde ich es sinnvoller, Inhalt auszuzeichnen, nicht die Lücke dazwischen.

            Das ist doch schon mal eine Diskussionsgrundlage.
            Nun wüsste ich gerne noch, wo ich denn über diese Art der Style-Auszeichnung nachlesen kann und ab welchem CSS / in welchen Browsern das funktionieren kann?

            Grüße
            TS

            1. @@TS

              Nun wüsste ich gerne noch, wo ich denn über diese Art der Style-Auszeichnung nachlesen kann

              Style-Auszeichnung?? Die Auszeichnung hat nichts mit Styling zu tun.

              Nachlesen kann man das auf meinen Vortragsfolien, bei Schema.org und im RDFa-Primer.

              und ab welchem CSS / in welchen Browsern das funktionieren kann?

              Attributselektoren gab’s schon in CSS 2.1 und funktionieren in allen heutigen Browsern.

              LLAP 🖖

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. nachtrag:

    das bild-div soll eine prozentuale höhe haben. das div darunter soll immer an der unterkante des bild-divs angesetzt werden. so wie nach einem break. das bekomme ich nicht hin. wenn ich position absolute aus dem bild-div entferne ist es weg. hier komme ich nun nicht weiter.

    hat hier jemand eine lösung? vielen dank für alle konstruktiven und nicht-überheblich-arroganten antworten.

    1. Hallo iasonas,

      das bild-div soll eine prozentuale höhe haben. das div darunter soll immer an der unterkante des bild-divs angesetzt werden. so wie nach einem break. das bekomme ich nicht hin. wenn ich position absolute aus dem bild-div entferne ist es weg. hier komme ich nun nicht weiter.

      Es gibt überhaupt keinen Grund, das Bild in ein Element zu stecken. Mit position: absolute nimmst du das Element aus dem Textfluss, andere Elemente können sich nicht mehr an ihm orientieren.

      Das einfachste dürfte sein, dem Bild display: block zu geben.

      Bis demnächst
      Matthias

      --
      Signaturen sind bloed (Steel) und Markdown ist mächtig.
      1. @matthias ich danke dir für deine unterstützung! es klappt. es ist toll. habe zu kompliziert gedacht. ...wobei nun bei meinem 27 zoll-monitor die hälfte des bildschirms mit dem bild voll ist. deshalb hatte ich das jpg als background-img in ein div gesteckt, damit ich hier mit prozenten arbeiten kann (also: 30% bild , 70% text):

        #bild {
        width: 100%;
        height: 30%;
        background-image: url('b-tunnel.jpg');
        background-repeat:no-repeat;
        background-position: center;
        background-size: 100% auto;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        	display: block;
        }
        
        #mitte {
        height: 70%;
        margin-bottom: 2em; 
        float: left;
        }
        

        gibts hierfür keine lösung? :-) gruß iasonas

        1. Hallo,

          sollen bild und text übereinander oder nebeneinander stehen?

          Gruss

          MrMurphy

          1. hi MrMurphy

            untereinander. bild div: 30% mitte (text) div: 70%

            1. Hallo,

              deine Höhenangaben können nicht funktionieren. Du hast vier Container, einer hat 30% Höhe, einer 70%, einer 100px und einer 30px. Mehr als 100% Höhe geht aber nicht. Ansonsten müssen die Browser halt tricksen.

              Wovon soll überhaupt die Höhe genommen werden? Und was ist wenn der Text mit den 70% Höhe nicht mehr auskommt?

              Ich mache mal folgenden Vorschlag:

              <!DOCTYPE html>
              <html lang="de">
              <head>
                 <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
                 <title>Layout 02</title>
                 <meta name="description" content="HTML5, CSS3">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <!-- Um alte IE HTML5-tauglich zu machen -->
                 <!--[if lt IE 9]>
                    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                 <![endif]-->
                 <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
                 <style>
                    /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
                    header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                       display: block;
                    }
                    * {
                       -moz-box-sizing: border-box;
                       box-sizing: border-box;
                    }
                    html {
                       font-size: 120%;
                       line-height: 1.3;
                    }
                    body {
                       margin: 0;
                    }
                    body>* {
                       padding: 0.5rem;
                       margin: 0;
                    }
                    body>aside {
                       padding: 0;
                    }
                    img {
                       max-width: 100%;
                       min-width: 100%;
                    }
                    header {
                       background-color: #285A72;
                    }
                    footer {
                       background-color: #285A72;
                    } 
                 </style>
              </head>
              <body>
                 <header>
                    <h2>header</h2>
                 </header>
                 <aside>
                    <img src="http://www.bgu-umwelt.de/neu/b-tunnel.jpg" alt="Ich glaub ich bin im  Wald">
                 </aside>
                 <main>
                    <h1>main</h1>         
                    <p>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. 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. 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.</p>
                 </main>
                 <footer>
                    <h2>footer</h2>
                 </footer>
              </body>
              </html>
              

              Schreib' bitte, wenn dich daran etwas stört bzw. was du anders gelöst haben möchtest.

              Irgendwie habe ich das Gefühl, das wir noch nicht verstanden haben, was du überhaupt erreichen willst.

              Gruss

              MrMurphy

              Gruss

              MrMurphy

        2. @@iasonas

          K> deshalb hatte ich das jpg als background-img in ein div gesteckt, damit ich hier mit prozenten arbeiten kann (also: 30% bild , 70% text)

          Das kannst du auch mit der Einheit vh tun.

          Gehört dein Bild zum Inhalt oder ist es Verzierung? Davon hängt ab, ob es in ein img-Element (mit zugehörigem alt-Text) gehört oder ob es ein Hintergrundild sein sollte.

          Verlinke doch mal deine Seite, damit man sich ein Bild davon machen kann. (No pun intended.)

          LLAP 🖖

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        3. hier der link (zeigt den urzustand):

          http://www.bgu-umwelt.de/neu/

          das bild macht was es tun soll, nämlich sich proportional zum browserfenster verhalten.

          der text drunter (im mitte-div, 70%) soll unter dem bild-div (30%) beginnen. ich weiss, das funktioniert nicht, weil ich dem bild-div die position absolut gegeben habe. wenn ichs raus nehme ist das bild weg.

          matthias gab mir darauf den hinweis, das img nicht als background-img bzw. gleich doch ohne das div drum herum zu setzen. nur dann klappt das nicht mehr mit der prozentualen höhen-ausrichtung von 30%. und die ist wichtig.

          danke für eure hilfe. ich bin am verzweifeln ...und am lernen gunnar ;-)

          1. @@iasonas

            hier der link (zeigt den urzustand):
            http://www.bgu-umwelt.de/neu/

            Nee, hier der Link: http://www.bgu-umwelt.de/neu/ (Icon Link hinzufügen über dem Eingabefeld)

            matthias gab mir darauf den hinweis, das img nicht als background-img bzw. gleich doch ohne das div drum herum zu setzen.

            Um img vs. background-image abzuwägen, müsstest du meine Frage beantworten.

            LLAP 🖖

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. gunnar, es tut mir leid, aber ich komme mit deiner überheblichen art nicht klar. und deine frage habe ich nicht verstanden. es mag noch menschen geben, die nicht so genial wie du sind. gerne kannst du dich aus meinem forumsbeitrag raushalten. danke.

              1. @@iasonas

                und deine frage habe ich nicht verstanden.

                Ich weiß nicht, was an „Gehört dein Bild zum Inhalt oder ist es Verzierung?“ unverständlich wäre.

                gerne kannst du dich aus meinem forumsbeitrag raushalten. danke.

                Wenn du keine Hilfe willst, werde ich mich nicht aufdrängeln.

                LLAP 🖖

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. Hallo Gunnar Bittersmann,

                  und deine frage habe ich nicht verstanden.

                  Ich weiß nicht, was an „Gehört dein Bild zum Inhalt oder ist es Verzierung?“ unverständlich wäre.

                  Ergänzung:
                  Und auch da gibt es Grenzfälle über die man sich trefflich streiten könnte, ein Firmenlogo beispielsweise. Ein Bild, welches zum Inhalt gehört, wäre etwa ein Foto von den Büroräumen einer Firma, auch wenn es „nur“ die netten Arbeitsbedingungen illustrieren soll.

                  Weiterhin ist zu beachten, dass „in der Grundeinstellung“ Hintergrundbilder (also Verzierungen) häufig nicht gedruckt und in der „kontrastreichen Darstellung“ (im FF. zum Beispiel erreichbar über Einstellungen → Inhalt → Farben nicht angezeigt werden.

                  Bis demnächst
                  Matthias

                  --
                  Signaturen sind bloed (Steel) und Markdown ist mächtig.