Frage von rhavin, 44

Warum wird bei einer Webpage ein div anders dargestellt als bei einer gleichartigen?

Hi Leute,

Evtl. sieht ja jemand was, was ich nicht sehe… Ich mach die Website der Fun-Gothic-Band Silberschauer und ich hab zwei Pages, die ziemlich gleichartig aufgebaut werden. CSS und Scripte sind auch alle gleich und der Sourcecode der Seiten is recht einfach.

Einmal die Seite, auf der die Bandmitglieder drauf sind: http://silberschauer.de/cast.html

Und einmal die gleichartige Seite für die Crew-Mitglieder: (Ich kann hier keinen 2. link einfügen, einfach oben im Menü auf Band->Crew)

Wie ihr sehen könnt, wird unser Chico eingerückt, ich kann aber beim besten willen nicht erkennen, woran das liegen kann. Einer 'ne Idee?

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Sawascwoolf, 19

Bei der funktionierenden hast du ein weiteres leeres Div als letztes Element.

Füge also folgendes:

<div class="usrdsc"> </div>

hinter chico ein

Kommentar von ShitzOvran ,

TOP... und so einfach - Ich hoffe der Fragesteller liest das hier noch.

Kommentar von rhavin ,

Auch wenn ich schon selber drauf gekommen bin, hab ich Dich mal ausgezeichnet, weil Du noch am wenigsten Punkte hast ;)

Antwort
von WhiteGandalf, 15

Ja, interessantes Problem, und DejaVue. Und durch Sawascwoolf und den Fragesteller selbst praktisch schon beantwortet. Nur nochmal zum Herausstellen des funktionalen Zusammenhangs für Leute, die später mal wieder über diesen Eintrag stolpern:

Weil im umgebenden Block #pagecont ein text-align: justify eingestellt ist, wird der Text überall dort, wo eine Zeile FORTGESETZT wird, im Blocksatz verteilt, was für die inline-blocks bedeutet, dass sie gleichmäßig über die Zeile verteilt werden, SOLANGE die Zeile eine FORTSETZUNG hat. Die letzte Zeile wird üblicherweise nicht im Blocksatz gesetzt, sondern linksbündig. Im normalen Schriftsatz ist das auch völlig korrekt so.

Beim automatischen dynamischen Verteilen von Blöcken wie hier stört die Abweichung in der letzten Zeile. Die lässt sich aber abfedern, indem eine zusätzliche Pseudo-Zeile erzeugt wird. Allerdings ist dies wieder nicht ganz einfach, wenn eben der Inhalt sich frei nach Anwender-Angebot verteilen dürfen soll.

Dasselbe Problem wiederholt sich regelmäßig zwischen mir (typischerweise 1280er Auflösung) und meinem Chef (irgendwo bei 2500 oder drüber Auflösung). Man muss die letzte Zeile mit hinreichend viel Dummy-Inhalt auffüllen, der eine Null-Zeilenhöhe hat (jedenfalls nicht stört, wenn sich da ein paar Zeilen unten aufwickeln auf Geräten von Unter-Millionären). Dann funktioniert das Prinzip weiterhin und sehr kompatibel.

Oder man denkt sich was aus in Richtung Tabelle und dann auflösungsabhängigen CSS-Spezialisierungen (mit Media-Selektoren). Viele Wege führen nach Rom.

Aber alle Achtung erstmal dafür, dass eine Band sich ne Seite von einem systematisch denkenden CSS-Enthusiasten statt Javascript-Kiddy hinsetzen lässt!

Antwort
von ShitzOvran, 36
#pagecont {
    padding: 0.4em 1em; /* text-align: justify; */ position: relative;
}

Das Problem tritt nicht auf, wenn du den Blocksatz heraus nimmst. Es hat also etwas mit dem Text zutun

Kommentar von rhavin ,

Ich glaub, Du bringst mich auf 'ne Idee, nämlich auf die, daß das eher Zufall ist, daß es auf der anderen Seite klappt und daß die Blöcke hier als ›letzte Zeile‹ nicht auf Zeilenmaß verteilt werden. Ich geh dem mal nach…

Kommentar von rhavin ,

Scheint hieran zu liegen:
https://css-tricks.com/almanac/properties/t/text-align-last/

text-align-last is leider noch nicht in vielen Browsern drin, also muss ich mir wohl was ausdenken, um es zu simulieren -.-


Antwort
von Eutervogel, 44

Dem letzten Block ein float:right geben scheint zu helfen :)

Kommentar von rhavin ,

Danke, aber dann isser aber nich mehr linksbündig, wenn die Seite kleiner wird. Auf der Anderen Seite klappts ja auch…

Kommentar von Eutervogel ,

Jop ShitzOvran hat wohl recht, aber ich frag mich grad, warum du das ganze nicht mit nem Grid machst?!

Kommentar von rhavin ,

Bin mir nicht ganz sicher, wie Du dir das vorstellst. Die Seite soll je nach Browserfenster-Breite eine unterschiedliche Anzahl von Spalten liefern können, das klappt ja auf der anderen Seite auch, die Frage ist also einfach nur: "warum zum Henker hier nicht?"

Kommentar von Eutervogel ,

Genau dafür bietet bootstrap sich ja an.

Aber wenn du aus dem #pagecont das text-align rausnimmst und deinen p tags das mitgibst geht es ja.

Der ganze Aufbau ist halt nicht sooo sauber. 

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten