• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

scroll: "auto"; trotzdem Umbruch

nietaL

NGBler

Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
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?
 

Anhänge

  • float.jpg
    float.jpg
    493,6 KB · Aufrufe: 151

nietaL

NGBler

Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
  • Thread Starter Thread Starter
  • #3
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.
 

dexter

Cloogshicer®
Teammitglied

Registriert
14 Juli 2013
Beiträge
5.306
Gibts denn rechts (ausserhalb des Sichtbaren) noch mehr LKWs?

Ein richtiges Testcase wäre recht hilfreich.
 

KingJamez

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
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?
 

nietaL

NGBler

Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
  • Thread Starter Thread Starter
  • #6
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 ---

testseite

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.
 
Zuletzt bearbeitet:

dexter

Cloogshicer®
Teammitglied

Registriert
14 Juli 2013
Beiträge
5.306
Die letzte Box unterscheidet sich im Code von den vorherigen.
 

nietaL

NGBler

Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
  • Thread Starter Thread Starter
  • #8
[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="cursor:pointer; text-decoration:underline;" onDblClick="document.getElementById('192').style.visibility = 'visible';"> 0</div>
<div style="cursor:pointer; " 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.
 

dexter

Cloogshicer®
Teammitglied

Registriert
14 Juli 2013
Beiträge
5.306
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]
 

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.560
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!
 

nietaL

NGBler

Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
  • Thread Starter Thread Starter
  • #11
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. :o

--- [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 :D

--- [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!
 

KingJamez

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
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!

Code:
<style>
.header{ ... }
</style>

<div class="header"></div>
 

dexter

Cloogshicer®
Teammitglied

Registriert
14 Juli 2013
Beiträge
5.306
Please dont use id's for Styles!
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.
 

KingJamez

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
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.
 
Oben