Responsive Design: Hintergrund passt sich nicht an, wenn nicht mit Text gefüllt

[hegi108]

Guten Tag

Auf der "problematischen Seite" sollte der Titel in einem eigen Balken mit Abstand zum ersten Kapitel sein. Es sollte also aussehen wie auf http://shiatsu-bewegung.ch/shiatsu.php (wobei, wie man sieht, auch auf dieser Seite diese Titelzeile nicht funktioniert, denn sie ist identisch aufgebaut, aber noch mit einem leeren gif <img src="images/leer1x1.gif" width="625" height="1"> verlängert. Das ist jedoch keine Lösung, da der text vom Besitzer der Seite selber eingegeben werden kann. Zusätzlich bricht die Zeile so auf kleineren Displays nicht um, was ja die Voraussetzung für responsive Design wäre!)

Hier der dazugehörige CSS-Code:

#body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/lindenblatt.jpg) no-repeat center fixed;
	-moz-background-size: cover;
	background-size: cover;
	margin: 0px auto;
	padding: 0px;
	max-width:1100px;
	height:100%;
	/* */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  /* */
}

Content enthält den Header (hier nicht gezeigt) mit dem fixen Menu und dem darunter scrollenden Hauptteil.

#content {
	position: relative;
    max-width: 1080px;
    min-width: 200px;
	margin:0 auto;
}

#haupt {
	position: relative;
	float:left;
    width: 100%;
	z-index: 3;
	padding-top: 110px;
	padding-bottom:20px;
}

Die Box mit hellem Hintergrund:

#.box {
	position:static;
	float:left;
	min-width:200px;
	max-width:1080px; 
	z-index: 3;
	padding-top:20px;
	padding-left:50px;
	padding-right:50px;
	padding-bottom:0px;
	background:rgba(255,255,255,0.7);
}

#.boxinb {
	white-space:normal;
	float:left;
	position:relative;
	min-width:200px;
  max-width: 100%;
	max-width:960px; 
	margin-bottom: 15px;
}

Die Box ohne Hintergrund, ergibt die Zwischenräume:

#.zwr {
	position:static;
	float:left;
	max-width:1080px; 
	min-width:200px;
	z-index: 3;
	padding-top:20px;
	background:rgba(255,255,255,0);
}

#.titel {
    font-family: mistral;
    font-size: 2em;
    font-weight: 500;
    color: #BDA10A;
}

und hier der HTML-Code:

  <div id="haupt">

    <div class="box">
      <div class="boxinb">
		    <div class="titel">
          <?php webyep_shortText("Titel", false); // WebYepV1 ?>
        </div>
      </div>
    </div>
    <div class="zwr">
    </div>
            
    <div class="box">
....usw...

Hat jemand eine Lösung?

Vielen Dank zum Voraus

hegi108

[Nils unreg]

Hallo hegi108,

Die .box ist nur so breit wie es der Inhalt erfordert, weil sie float: left hat.

Warum hat sie das? Ich finde keine Bildschirmgrösse in der eine Mehr-Spaltigkeit zu sehen ist.

Kann es sein daß du float bei .box nur benutzt, um die Floats darin einzuschließen?

Dann rate ich dir besser den Clearfix zu verwenden:

http://nicolasgallagher.com/micro-clearfix-hack/

Es gibt versch. Arten um Floats einzuschließen. width: 100% bei der .box ginge auch. Aber der Clearfix ist eigentlich Standart.

Nils

[Gunnar Bittersmann]

@@Nils unreg

Es gibt versch. Arten um Floats einzuschließen. width: 100% bei der .box ginge auch. Aber der Clearfix ist eigentlich Standart.

Nein, das ist es nicht (mehr).

Wann immer man auf „Floats einschließen“ und „Clearfix“ stößt, ist das ein sicheres Zeichen, dass Floats missbrächlich verwendet werden, um Boxen nebeneinander darzustellen. Zu diesem Zweck gibt es Flexbox und Grid als saubere Lösung – kein Grund mehr, Floats als Hack zu verwenden.

LLAP 🖖

[Nils unreg]

Es gibt versch. Arten um Floats einzuschließen. width: 100% bei der .box ginge auch. Aber der Clearfix ist eigentlich Standart.

Nein, das ist es nicht (mehr).

Der Clearfix ist Standart um Floats einzuschließen. Lese-Verständnis ist nicht so deine Stärke, was?

Flexbox und Grid

... werden Floats für Spaltenlayout wohl bald ablösen. Sehe ich auch so. Antwortest du das auf jede Frage warum ein Floatlayout nicht funktioniert? Besonders hilfreich.

Nichts für ungut

Nils

[Gunnar Bittersmann]

@@Nils unreg

Es gibt versch. Arten um Floats einzuschließen. width: 100% bei der .box ginge auch. Aber der Clearfix ist eigentlich Standart.

Nein, das ist es nicht (mehr).

Der Clearfix ist Standart um Floats einzuschließen.

Floats einzuschließen ist nicht Standard.

Flexbox und Grid

... werden Floats für Spaltenlayout wohl bald ablösen.

Das haben sie längst. Wer heute noch Floats zum Layouten missbraucht, ist der Zeit weit hinterher.

Selbst Bootstrap verwendet jetzt Flexbox.

Antwortest du das auf jede Frage warum ein Floatlayout nicht funktioniert? Besonders hilfreich.

Selbstverständlich weise ich bei jedem Floatlayout darauf hin, dass das nicht mehr zeitgemäß ist. Genauso wie bei jedem Tabellenlayout.

LLAP 🖖

[Nils unreg]

Der Clearfix ist Standart um Floats einzuschließen. Floats einzuschließen ist nicht Standard.

Wie ich sehe ist es dir nicht möglich dich mit anderen Menschen auszutauschen. Du spielst immer die selbe Leiher ab ohne zu lesen was Andere schreiben. Hauptsache du kannst wiedersprechen ... egal was Andere gesagt haben.

Wer heute noch Floats zum Layouten missbraucht, ist der Zeit weit hinterher.

Wie gut daß du zeitgemäß bist ... und ca. 95% Seiten im Web nicht weil sie mit Floats Layouten.

Selbstverständlich weise ich bei jedem Floatlayout darauf hin, dass das nicht mehr zeitgemäß ist. Genauso wie bei jedem Tabellenlayout.

Was ist das für ein unpassender Vergleich bitte ?!

Nils

[Gunnar Bittersmann]

@@Nils unreg

Wer heute noch Floats zum Layouten missbraucht, ist der Zeit weit hinterher.

Wie gut daß du zeitgemäß bist ... und ca. 95% Seiten im Web nicht weil sie mit Floats Layouten.

Und? Wann wurden denn 95% dieser 95% erstellt? Heute?

Ich darf dich zitieren? „Lese-Verständnis ist nicht so deine Stärke, was?“

Selbstverständlich weise ich bei jedem Floatlayout darauf hin, dass das nicht mehr zeitgemäß ist. Genauso wie bei jedem Tabellenlayout.

Was ist das für ein unpassender Vergleich bitte ?!

Tabellenlayout: HTML-Technik zum Layouten missbraucht (weil damals nichts anderes zur Verfügung stand)
Floatlayout: CSS-Technik zum Layouten missbraucht (weil damals nichts anderes zur Verfügung stand)

Unterschied: HTML vs. CSS
Gemeinsamkeit: Technik zum Layouten missbraucht (weil damals nichts anderes zur Verfügung stand)

Wo ist der Vergleich unpassend, bitte‽

LLAP 🖖

[Tabellenkalk]

Hallo,

und hier der HTML-Code:

  <div><div><div><div>
....usw...

Ne, das ist kein HTML-Code, sondern HTDS (Hypertext-Div-Suppe). Löffel die bitte erstmal aus und befasse dich mit HTML.

Gruß
Kalk

[MrMurphy1]

Hallo

Um die Seite überhaupt vernünftig gestalten zu können sollte noch viel mehr korrigiert werden:

Attribute wie width und height entfernen. Die stehen sogar in a-Elementen.

Abstände nicht durch br-Elemente, Grafiken, geschützte Leerzeichen, leere div-Elemente, oder leere Absätze erzeugen. Das kommt alles vor.

Text nicht direkt in Container-Elemente wie div, header, main, footer, article ... schreiben. Sondern nur in dafür vorgesehene Elemente wie p, h1 ... h6, li, dt, dd, td, figcaption ... schreiben.

Und nebenbei die Umlaute direkt schreiben.

Gruss

MrMurphy

[hegi108]

Vielen Dank für die guten Tips. Ihr habt mir super geholfen. Nun läuft die Seite so, wie sie soll.

Leider weiss ich nicht, wie ich den Thread schliessen kann.

[Gunnar Bittersmann]

@@hegi108

Leider weiss ich nicht, wie ich den Thread schliessen kann.

Gar nicht. Jeder, der noch seinen Senf dazugeben will, kann das auch weiterhin tun. Und das ist auch gut so.

LLAP 🖖