Problem mit Listendarstellung und eingebetteten span-Bereichen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Problem mit Listendarstellung und eingebetteten span-Bereichen Sat, 02 Mar 13 19:12:38 Z https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573354#m1573354 https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573354#m1573354 <p>Hallo,</p> <p>ich habe folgenden html-Code, der eine Auswahlliste nachbauen soll:</p> <pre><code class="block language-html"> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span class="token string">"http://www.w3.org/TR/html4/loose.dtd"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xhtml<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content-type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html; charset=UTF-8<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>link</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>___DropDown.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> [1] <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UIMitte<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UILinks<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>span</span><span class="token punctuation">></span></span>Aktuelle Auswahl<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UIRechts<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>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +--- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeMitte<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>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeLinks<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>span</span><span class="token punctuation">></span></span>Listenpunkt 1<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeRechts<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>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> [2] <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeLinks<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>span</span><span class="token punctuation">></span></span>Listenpunkt 2<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeRechts<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>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeLinks<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>span</span><span class="token punctuation">></span></span>Listenpunkt 3<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeRechts<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>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> | <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +--- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> [3] <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeAbschlussMitte<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeAbschlussLinks<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>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ListeAbschlussRechts<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>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Der zugehörige css-Code:</p> <pre><code class="block language-css"> <span class="token selector">ul</span> <span class="token punctuation">{</span> margin<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> padding<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{</span> list-style-type<span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.UIMitte</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownUIMitte.png<span class="token punctuation">)</span></span> repeat-x<span class="token punctuation">;</span> cursor<span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> height<span class="token punctuation">:</span> 34px<span class="token punctuation">;</span> line-height<span class="token punctuation">:</span> 34px<span class="token punctuation">;</span> text-align<span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.UILinks</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownUILinks.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> float<span class="token punctuation">:</span> left<span class="token punctuation">;</span> height<span class="token punctuation">:</span> 34px<span class="token punctuation">;</span> margin-right<span class="token punctuation">:</span> 14px<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.UIRechts</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownUIRechts.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> float<span class="token punctuation">:</span> right<span class="token punctuation">;</span> height<span class="token punctuation">:</span> 34px<span class="token punctuation">;</span> margin-left<span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 26px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ListeMitte</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownListeMitte.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ListeLinks</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownListeLinks.png<span class="token punctuation">)</span></span> repeat-y<span class="token punctuation">;</span> float<span class="token punctuation">:</span> left<span class="token punctuation">;</span> margin-right<span class="token punctuation">:</span> 14px<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ListeRechts</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownListeRechts.png<span class="token punctuation">)</span></span> repeat-y<span class="token punctuation">;</span> float<span class="token punctuation">:</span> right<span class="token punctuation">;</span> margin-left<span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 26px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ListeAbschlussMitte</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownListeAbschlussMitte.png<span class="token punctuation">)</span></span> repeat-x<span class="token punctuation">;</span> height<span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ListeAbschlussLinks</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownListeAbschlussLinks.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> float<span class="token punctuation">:</span> left<span class="token punctuation">;</span> height<span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ListeAbschlussRechts</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>DropDownListeAbschlussRechts.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> float<span class="token punctuation">:</span> right<span class="token punctuation">;</span> height<span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 26px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die mit den Ziffern 1 und 3 gekennzeichneten Zeilen funktionieren einwandfrei und erzeugen folgende schematische Ausgabe im Browser:</p> <p>UIMitte<br>     +-----------------------------------------------------+<br>     |+-------+                                  +--------+|<br> [1] ||UILinks|                                  |UIRechts||<br>     |+-------+                                  +--------+|<br>     +-----------------------------------------------------+</p> <p>ListeAbschlussMitte<br>     +-----------------------------------------------------+<br>     |+-------------------+          +--------------------+|<br> [3] ||ListeAbschlussLinks|          |ListeAbschlussRechts||<br>     |+-------------------+          +--------------------+|<br>     +-----------------------------------------------------+</p> <p>Bei der mit der Ziffer 2 gekennzeichneten Zeile hingegen habe ich nur die füllende Hintergrundgrafik der Klasse ListeMitte, aber nicht die beiden span-Bereiche, die sich ebenfalls wieder links bzw. rechts ausrichten sollen.</p> <p>Ein Online-Beispiel kann ich leider nicht anbieten, ledig eine <img src="http://img600.imageshack.us/img600/2338/screenshotoc.png" alt="Grafik" loading="lazy"></p> <p>Woran liegt es, dass die mit der Ziffer 2 gekennzeichneten Zeilen sich anders verhalten wie die mit 1 und 3 gekennzeichneten?</p> <p>Alle css-Angaben sind analog aufgebaut bzw. sehe ich mittlerweile keine(n) möglichen Fehler mehr, die Klassennamen stimmen überein, ebenso sind die Grafiken vorhanden (wenn ich deren Namen als Quelle für die Hintergrundgrafik angebe, dann werden mir diese auch angezeigt).</p> <p>Vielen Dank für eure Hilfe.</p> <p>Gruß,<br> Enrico</p> Problem mit Listendarstellung und eingebetteten span-Bereichen Sat, 02 Mar 13 19:57:31 Z https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573355#m1573355 https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573355#m1573355 <p>Om nah hoo pez nyeetz, Enrico!</p> <blockquote> <p>Woran liegt es, dass die mit der Ziffer 2 gekennzeichneten Zeilen sich anders verhalten wie die mit 1 und 3 gekennzeichneten?</p> </blockquote> <p>Möglicherweise am float. Durch das Floaten werden die Elemente nur noch so groß, wie der Inhalt es erfordert. Die span-Elemente sind jedoch leer.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> Problem mit Listendarstellung und eingebetteten span-Bereichen Sat, 02 Mar 13 20:02:42 Z https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573356#m1573356 https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573356#m1573356 <p>Hallo Matthias,</p> <p>danke für Deine Antwort.</p> <blockquote> <p>Möglicherweise am float. Durch das Floaten werden die Elemente nur noch so groß, wie der Inhalt es erfordert. Die span-Elemente sind jedoch leer.</p> </blockquote> <p>Hm, aber die span-Bereiche der Ziffern 1 und 3 sind auch leer und da funktioniert alles wie gewünscht...</p> <p>Enrico</p> Problem mit Listendarstellung und eingebetteten span-Bereichen Sat, 02 Mar 13 20:19:51 Z https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573357#m1573357 https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573357#m1573357 <p>Hi,</p> <blockquote> <p>Hm, aber die span-Bereiche der Ziffern 1 und 3 sind auch leer und da funktioniert alles wie gewünscht...</p> </blockquote> <p>Die haben aber auch explizite Größenangeben ...</p> <p>cu,<br> Andreas</p> <div class="signature">-- <br> <a href="http://MudGuard.de/" rel="nofollow noopener noreferrer">Warum nennt sich Andreas hier MudGuard?</a><br> <a href="http://ostereier.andreas-waechter.de/" rel="nofollow noopener noreferrer">O o ostern ...</a><br> Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.<br> </div> Problem mit Listendarstellung und eingebetteten span-Bereichen Sat, 02 Mar 13 20:40:05 Z https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573358#m1573358 https://forum.selfhtml.org/self/2013/mar/2/problem-mit-listendarstellung-und-eingebetteten-span-bereichen/1573358#m1573358 <p>Hallo Andreas,</p> <p>auch Dir danke für Deine Antwort.</p> <blockquote> <p>Die haben aber auch explizite Größenangeben ...</p> </blockquote> <ul> <li>Mit height: 100%; in der css-Datei habe ich das selbe Resultat, dass die beiden äußeren Rahmen nicht angezeigt werden</li> <li>Gebe ich - zu Testzwecken - die Höhe in px an, dann verschiebt sich alles</li> <li>position-Angaben werden auch ignoriert</li> </ul> <p>Ich verzweifle jetzt bald und setze das mit Tabellen um...</p> <p>Gruß,<br> Enrico</p>