Umbruch vermeiden bei overflow – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Umbruch vermeiden bei overflow Sat, 04 May 13 07:54:02 Z https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578927#m1578927 https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578927#m1578927 <p>Hallo liebes Forum,</p> <p>ich stehe gerade total auf dem Schlauch ... auf meiner Seite sollen die section-Bereiche innerhalb eines div (id="sections") horizontal nebeneinander angeordnet sein, jeweils mit voller Breite (quasi wie float:left), aber alles, was über das Eleternelement (id="sections") hinausragt mittels overflow:hidden versteckt werden. Da aber nun dieses Elternelement  schmaler ist als dessen Inhalt, werden logischer Weise die sections untereinander angeordnet. Hier mal das entsprechende HTML:</p> <pre><code class="block language-html">... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sections<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>section1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Abschnitt 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Inhalt 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>section2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Abschnitt 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Inhalt2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> ... </code></pre> <p>Was die Sache etwas kompliziert macht, ist das responsive Design, also dass die Größe der einzelnen Elemente von der Monitor-Größe des Benutzers abhängt, aber das padding innerhalb des articles fix sein soll ... sonst ließe sich das evtl. mit clip: rect([...]) bewerkstelligen(?).<br> Meine bisherige Lösung positioniert nun die section-Elemente mittels Javascript absolut, was zwar reibungslos funktioniert, aber eigentlich müsste das doch auch ohne script funktionieren; hier mal das CSS ...</p> <pre><code class="block language-css"><span class="token selector">html, body</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>16px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header, article, footer</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header, footer</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>10%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>80%<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid #464646<span class="token punctuation">;</span> <span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">-boz-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">-moz-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div#sections</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">section</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token comment">/* für die Javascript-Lösung */</span> <span class="token property">top</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> <span class="token comment">/* für die Javascript-Lösung */</span> <span class="token punctuation">}</span> </code></pre> <p>... und der zugehörige (jQuery-)Schnipsel:</p> <pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'section'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> left <span class="token operator">=</span> index <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'marginRight'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">,</span> left<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Ich habe schon probiert, die sections per display:inline-block in eine Zeile zu quetschen und den Umbruch mit white-space:nowrap zu unterbinden ... was auch funktionierte, aber dann rutscht jede section mit dem Inhalt der vorangegangenen section mit ...</p> <p>Ich hoffe, ich hab' mich einigermaßen verständlich ausgedrückt. Wäre super, wenn ihr mir helfen könnten.</p> <p>Liebe Grüße und Dank im voraus,<br> WiMu</p> Umbruch vermeiden bei overflow Sat, 04 May 13 09:12:28 Z https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578929#m1578929 https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578929#m1578929 <p>Om nah hoo pez nyeetz, WiMu!</p> <blockquote> <p>Ich hoffe, ich hab' mich einigermaßen verständlich ausgedrückt.</p> </blockquote> <p>Hm. Ich weiß nicht so recht. Du schreibst, die section-Elemente sollen sich wie gefloatet verhalten, gibst ihnen eine Breite von 100% und schneidest mit overflow: hidden für das übergeordnete Element überfließende Inhalte ab ...</p> <p>Für mich heißt das, dass nur ein section-Element sichtbar ist und das zweite nie zu sehen und nicht erreichbar.</p> <p>Matthias</p> <div class="signature">-- <br> Der Unterschied zwischen Java und JavaScript ist größer als der zwischen <a href="http://selfhtml.apsel-mv.de/java-javascript/index.php#sol" rel="nofollow noopener noreferrer">Sol und Soljanka</a>.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> Umbruch vermeiden bei overflow Sat, 04 May 13 12:09:32 Z https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578928#m1578928 https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578928#m1578928 <p>Om nah hoo pez nyeetz, WiMu!</p> <p>absolute Positionierung führt möglicherweise auch zum Ziel. left: (k-1)*100% für das k-te section-Element.</p> <p>Matthias</p> <div class="signature">-- <br> Der Unterschied zwischen Java und JavaScript ist größer als der zwischen <a href="http://selfhtml.apsel-mv.de/java-javascript/index.php#jod" rel="nofollow noopener noreferrer">Jod und Jodeldiplom</a>.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> Umbruch vermeiden bei overflow Sat, 04 May 13 09:36:47 Z https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578931#m1578931 https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578931#m1578931 <blockquote> <p>Für mich heißt das, dass nur ein section-Element sichtbar ist und das zweite nie zu sehen und nicht erreichbar.</p> </blockquote> <p>Ja, klingt komisch, aber genau so soll es sein ... per javascript werden die section-Elemente dann in den "viewport" rein- bzw. rausgeschoben. Bis zu dem Punkt möchte ich aber so weit wie möglich auf Javascript verzichten. Theoretisch könnte man ja statt des overflow:hidden auch overflow:auto nehmen und dann ließen sich die Elemente (fast) normal scrollen.</p> <p>Liebe Grüße,<br> WiMu</p> Umbruch vermeiden bei overflow Sat, 04 May 13 09:43:35 Z https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578930#m1578930 https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578930#m1578930 <blockquote> <p>Für mich heißt das, dass nur ein section-Element sichtbar ist und das zweite nie zu sehen und nicht erreichbar.</p> </blockquote> <p>Achso ... und man kann mit <a href="#section2">weiter</a> in den nächsten Abschnitt springen - ganz ohne script.</p> <p>Liebe Grüße,<br> WiMu</p> Umbruch vermeiden bei overflow Sat, 04 May 13 09:45:55 Z https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578932#m1578932 https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578932#m1578932 <p>Om nah hoo pez nyeetz, WiMu!</p> <blockquote> <p>Ja, klingt komisch, aber genau so soll es sein ... per javascript werden die section-Elemente dann in den "viewport" rein- bzw. rausgeschoben. Bis zu dem Punkt möchte ich aber so weit wie möglich auf Javascript verzichten. Theoretisch könnte man ja statt des overflow:hidden auch overflow:auto nehmen und dann ließen sich die Elemente (fast) normal scrollen.</p> </blockquote> <p>Für mich wäre display: inline-block genau die richtige Lösung. Je nach gewünschter Browser-Unterstützung wäre auch <a href="http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts" rel="noopener noreferrer">flex-box</a> interessant, dort insbesondere der Abschnitt "Umbruch von Elementen in einer Flexbox".</p> <p>Matthias</p> <div class="signature">-- <br> Der Unterschied zwischen Java und JavaScript ist größer als der zwischen <a href="http://selfhtml.apsel-mv.de/java-javascript/index.php#fass" rel="nofollow noopener noreferrer">Fass und Fassade</a>.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> Umbruch vermeiden bei overflow Sat, 04 May 13 09:58:03 Z https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578933#m1578933 https://forum.selfhtml.org/self/2013/may/4/umbruch-vermeiden-bei-overflow/1578933#m1578933 <blockquote> <p>Für mich wäre display: inline-block genau die richtige Lösung. Je nach gewünschter Browser-Unterstützung wäre auch <a href="http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts" rel="noopener noreferrer">flex-box</a> interessant, dort insbesondere der Abschnitt "Umbruch von Elementen in einer Flexbox".</p> <p>Matthias</p> </blockquote> <p>Hallo Matthias,</p> <p>Danke für die Hilfe! inline-block hatte ich schon ausprobiert - das verschiebt die nachfolgenden Section-Elemente je nach Umfang des Inhalts nach unten (hm ... vielleicht ließe sich da was mit line-height machen ...?). Mit flex-box hatte ich vor einiger Zeit noch Probleme, was die browser-Unterstützung angeht - aber das könnte ja mittlerweile behoben sein. Danke jedenfalls für den Tipp, das werde ich mal ausprobieren.</p> <p>Liebe Grüße,<br> WiMu</p>