scroll: "auto"; trotzdem Umbruch

Hey Leute,

zur Veranschaulichung hängt ein Bild an. Der große rote div-Container <div> wird mit <img> (grün) und <div> (rot) befüllt. Die Bilder (Fahrzeuge) reihen sich sauber nebeneinander ein und verbreitern, wenn notwendig, den großen Div-Container. Obwohl diese nun schon übermäßig breit und scrollbar ist, verhalten sich unteren kleinen Div-Container nicht wie gewünscht:

Es wird je Einheit ein math. Bruch und dazu ein Bild erzeugt. Beide sind jeweils in einem <div style="float:left;">. Auch diese reihen sich sauber nebeneinander ein. Jedoch brechen sie die Zeile um, sobald sie an den Rand des übergeordneten Div-Containers kommen, obwohl dieser bereits scrollbar ist.

[src=html4strict]
<div style="width:100%; height:340px; white-space: nowrap; overflow: auto; overflow-y:hidden;" >
<img src="XXX"><img src="XXX"><img src="XXX"><img src="XXX"><br>
<img src="YYY"><img src="YYY"><img src="YYY"><br>
<img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><img src="ZZZ"><br>
<div style="float:left; margin-left:12px;">BRUCH</div><div style="float:left;">BILD</div><div style="float:left; margin-left:12px;">BRUCH</div><div style="float:left;">BILD</div> //usw.
</div[/src]

Wie schaffe ich es, dass alles in einer Reihe bleibt und keinen Umbruch (außer durch <br>) erzeugt wird?

overflow:hidden?

Dann habe ich ja gar keinen Balken mehr. Ich möchte, dass sich jeglicher Inhalten nach rechts über den Rand hinweg ausbreitet. Sowie die Fahrzeug-Bilder. Die Divs unten brechen aber am Rand um. Das raff ich nicht, weil doch die Breite eh schon erhöht ist durch die vielen LKW-Bilder, von denen 7 - 8 nebeneinander stehen. (siehe Balken) Das macht doch gar keinen Sinn.

Gibts denn rechts (ausserhalb des Sichtbaren) noch mehr LKWs?

Ein richtiges Testcase wäre recht hilfreich.

Ohne Testcase und vernünftigen Code kann man da nur raten. Für mich sieht es so aus als wären die Bilder zu breit und brechen deshalb um. Was passiert wenn du dem Container mal mehr breite gibst?

Ja, da folgen noch mehr LKWs, deshalb ist der Balken auch so klein. Es geht eben noch deutlich weiter nach rechts. Nur die Infanterie will sich dem nicht anschließen und bricht um. Meine Meinung nach, ist es egal, wie breit die Bilder sind. overflow:auto heißt meines Wissens nach, dass ein Balken kommt, sobald es zu breit wird. Der Code ist wegen der automatischen Befüllung so lang. Aber ich breche es mal herunter und schau, ob der Fehler immernoch auftaucht.

Dem Container breiter zu machen verhindert zwar den Umbruch, aber auch den Balken. Bzw. rutschen die Bilder dann vom Papier rechts runter.

--- [2017-04-12 10:59 CEST] Automatisch zusammengeführter Beitrag ---

You do not have permission to view link please Anmelden or Registrieren

Ich habe jetzt den Code einer erzeugten Seite einfach mal kopiert, um den ganzen PHP-Kram nicht herausfiltern zu müssen. Der Fehler ist erhalten geblieben. Leider ist der Code nicht sehr übersichtlich erstellt worden. Vielleicht findet ihr ja aber trotzdem das Problem.

Die letzte Box unterscheidet sich im Code von den vorherigen.

[src=html4strict]
<div style="float:left; margin-left:12px">
<div style="text-decoration:underline; visibility:hidden; position:absolute;">
<!-- verschieben_inf(code, name, zahl, maxi, IDs); -->
<input onfocus="this.select()" autofocus type="text" class="i_slct" id="192" value="0" size="1"
onkeydown="if(event.keyCode == 13) einsetzen_inf(
'192',
'Dronen-Operator',
document.getElementById('192').value,
1,
'37380;');">
</div>
<div id="versch_192" style="cursorointer; text-decoration:underline;" onDblClick="document.getElementById('192').style.visibility = 'visible';"> 0</div>
<div style="cursorointer; " onDblClick="document.getElementById('192').style.visibility = 'visible';">1</div>
</div>

<div style="float:left;">
<img style="float:left;" id="max_192" src="img/unit/19x.png" onmouseover="Tip('blabla')" onmouseout="UnTip()"
onclick="einsetzen_inf(
'192',
'Dronen-Operator',
1,
1,
'37380;');">
</div>
[/src]


Der erste Container beinhaltet den Bruch und der zweite das Bild. Und dieses Paar wechsel sich immer ab. Nur dass eben der letzte Container runterrutscht. Da sie automatisch befüllt und erzeugt werden, können sie sich eigentlich nicht unterscheiden.

Schau Dir das mal an, und passe es ggf an...

[src=php]
<html>
<head>
<style type="text/css">
#header img {width:150px}
#header {white-space:nowrap;}
#footer li, #footer li div{display:inline-block;}
</style>
</head>
<body>
<div style="width: 580px;">
<div id="header" style="height:340px; overflow: auto; overflow-y:hidden;">
<img src="dings.png">
<img src="dings.png">
<img src="dings.png">
<img src="dings.png">
<img src="dings.png">
<ul id="footer">
<li>
<div>1<br />2</div>
<img src="dings.png">
</li>
<li>
<div>1<br />2</div>
<img src="dings.png">
</li>
<li>
<div>1<br />2</div>
<img src="dings.png">
</li>
<li>
<div>1<br />2</div>
<img src="dings.png">
</li>
<li>
<div>1<br />2</div>
<img src="dings.png">
</li>
<li>
<div>1<br />2</div>
<img src="dings.png">
</li>
<li>
<div>1<br />2</div>
<img src="dings.png">
</li>
</ul>
</div>
</div>
</body>
</html>
[/src]

Habs auch mal getestet, was für mich funktioniert, die Truppen in, also den Code den du gepostet hast, alle in einem Div mit definierter (Übergroßer) Breite zu setzen, ansonsten scheint es aber mit dem "white-space: nowrap" so zu sein, dass das floating dir das kaputt macht.... würde ich mal vermuten.

Weil, die Elemente die nicht gefloatet sind, funktionieren!

Danke erst einmal für die Tips. Die werde ich ausprobieren. Habe den Code jetzt extrem eingestampft auf das Notwendigste. Link von oben bleibt der gleiche. Da sieht man jetzt besser durch.

--- [2017-04-12 14:45 CEST] Automatisch zusammengeführter Beitrag ---

Ich habe es jetzt nach dexters Hinweisen nachgebaut (Link is aktuell). Aber nun ist das ganze UL / IL konstrukt eingerückt. Das heißt, die Infanterie ist weiter rechts als die Fahrzeuge. Mit margin und padding krieg ichs nicht hin. Da rücken Brüche und Inf-Bilder nur dichter zusammen. Noch ne Idee? Fast geschafft

--- [2017-04-12 15:05 CEST] Automatisch zusammengeführter Beitrag ---

#footer {margin-left: -30px;}

Damit kann ich etwas schummeln. In allen Browsern sieht es jetzt so aus, wie ich es haben wollte. Richtig sauber erscheint es mir zwar nicht. Aber wenigstens kommt dieser dämliche Umbruch nicht mehr zustande. Ich danke also erst einmal soweit für eure Vorschläge!

Richtig sauber war da eh nix .

Floating lässt deine Elemente zu display: block; Elementen werden, da greift der white-space nicht wie gewünscht. Wenn du die Elemente auf Display: Inline-Block setzt, fließen sie richtig, mit der white-space Regel.

Inline js und CSS würde ich in jedem Fall vermeiden, vorallem bei den Mengen und dem immer wieder wiederholenden Code.

Floating dient normalerweise der Textausrichtung, flexbox oder css-grid wären da für moderne Browser besser geeignet.
Strucktur hatte dein Code auch nicht, das hat @Dexter ja aber schon korrigiert.

PS: eine Standard <ul> benötigt einen Reset des padding/ margin.

PPS: Bin am Mobilgerät, deshalb kann ich kaum Code schreiben.


Eine kleine Änderung noch, zu Dexters Code:
Please dont use id's for Styles!

KingJamez schrieb:

Please dont use id's for Styles!

Zum Vergrößern anklicken....

Meiner Erinnerung nach war da eh ne ID dran wg irgendwelchem JS- und/oder Formular-Gedöns, ich hab das nur für das Testcase etwas lesbarer gestaltet. Des Weiteren halte ich nix von solchen Dogmen, schaden tuts nämlich nicht.

War auch keine Kritik an dir , ist ja nur ein testcase.

Schaden tut es nicht, es kann aber bei Anfängern zu unerwünschten Nebeneffekten führen. CSS sollte wiederverwendbar bleiben. Id's sollen aber unique sein.