Oder CSS: Welches Element muss das erste sein?
Tom
- html
0 Gunnar Bittersmann0 Tom0 MudGuard
0 Christian S.
Hello,
wenn ich in das aktuelle <body>-Element ein <p> oder ein <div> stelle, nimmt es die Breite des aktuellen Viewports an und wächst in der Breite nicht mit, wenn ich das Fenster aufziehe.
Welches Element muss ich nehmen, oder was muss ich als Eigenschaft einstellen, dass sich die Breite soweit ausdehnt, bis der enthaltene Text zuende ist?
Geht das nur mit "norwrap" odr einer Tabelle?
Ein harzliches Glückauf
Tom vom Berg
@@Tom:
wenn ich in das aktuelle <body>-Element ein <p> oder ein <div> stelle, nimmt es die Breite des aktuellen Viewports an und wächst in der Breite nicht mit, wenn ich das Fenster aufziehe.
Doch, das tut es.
Ansonsten bist du schon zu lange hier, um die Tips für Fragende nicht zu kennen.
Live long and prosper,
Gunnar
Hello,
Doch, das tut es.
Nein, tut es leider nicht.
Sorry für die fehlende Info. Siehe http://selfhtml.bitworks.de/forum/ -> get_thread_titles.php
mit fill_thread_file.php kann man ein neues Testfile erzeugen. Das erscheint unter ..002.csv
Ist natürlich voll konkurrierender Betrieb, kann also sein, dass sich das File zwischendruch ändert.
Ich muss eben in den Ort hoch. Das kann etwas dauern.
Bastele daran aber nachher noch weiter.
Ein harzliches Glückauf
Tom vom Berg
Hi,
Doch, das tut es.
Nein, tut es leider nicht.
Doch.
Sorry für die fehlende Info. Siehe http://selfhtml.bitworks.de/forum/ -> get_thread_titles.php
Die Frage ist, warum Du für diese verschachtelte Liste keine verschachtelte Liste nutzt.
cu,
Andreas
Hello,
Die Frage ist, warum Du für diese verschachtelte Liste keine verschachtelte Liste nutzt.
Weil ich zu faul war, die Ausgabefunktion umzuschreiben.
Aber wie es aussieht, werde ich sowieso nicht drum herum kommen...
Schon wegen der Semantik :-)
Ein harzliches Glückauf
Tom vom Berg
Hello,
Die Frage ist, warum Du für diese verschachtelte Liste keine verschachtelte Liste nutzt.
So, nun habe ich die Ausgabefunktion umgebaut auf Liste und es auch hingefummelt, dass man den HTML-Source-Code lesen kann. Valide ist er auch wieder.
Nur sind nun aus einem Problem (Breite) gelich zwei geworden... *grummel*
Der Einfachheit halber mal das Beispiel aus SelfHTML ausgeschnitten:
<ul>
<li>Suchmaschinen <-- Diese Zeile ist bei mir nur zwangsweise drin, hat keinen Inhalt
<ul>
<li>Google</li>
<li>AltaVista</li>
<li>Fireball</li>
</ul>
</li>
<li>Verzeichnisse <-- Diese Zeile ist bei mir nur zwangsweise drin, hat keinen Inhalt
<ul>
<li>Yahoo</li>
<li>Web.de</li>
<li>Dino-Online</li>
</ul>
</li>
<li>Was anderes</li>
<li>Noch was anderes</li>
</ul>
Wie kann ich ich die Liste nun so mittels CSS formatieren, dass die bezeichneten Zeilen keine Ausdehnung in der Höhe haben und auch das nachfolgende <ul> keinen Zwischenraum produziert?
Eine eigene Klasse kann ich ihnen zur Not zuweisen, würde es aber gerne ohne hinbekommen.
Mit height geht es nicht. Da gibts wohl Vererbungsprobleme
Ein harzliches Glückauf
Tom vom Berg
Hi,
<ul>
<li>Suchmaschinen <-- Diese Zeile ist bei mir nur zwangsweise drin, hat keinen Inhalt
Sie hat Inhalt - der steht doch da ...
Der Einfachheit halber mal das Beispiel aus SelfHTML ausgeschnitten
Nutze doch bitte Beispiele, die dem tatsaechlich vorliegenden Problem soweit wie moeglich entsprechen (schon das zweite Mal in diesem Thread, dass angemerkt werden muss, dass du doch eigentlich lange genug hier dabei bist).
Wie kann ich ich die Liste nun so mittels CSS formatieren, dass die bezeichneten Zeilen keine Ausdehnung in der Höhe haben und auch das nachfolgende <ul> keinen Zwischenraum produziert?
Sprichst du von den Default-Margins/Paddings von UL?
Eine eigene Klasse kann ich ihnen zur Not zuweisen, würde es aber gerne ohne hinbekommen.
Nachfahrenselektor existiert.
Mit height geht es nicht. Da gibts wohl Vererbungsprobleme
Da wuerde ich - abgesehen davon, dass height hier weniger sinnvoll waere - eher vermuten, dass das Problem ist, dass du overflow:visible immer noch nicht verstanden hast.
MfG ChrisB
Hello,
Hi,
<ul>
<li>Suchmaschinen <-- Diese Zeile ist bei mir nur zwangsweise drin, hat keinen InhaltSie hat Inhalt - der steht doch da ...
Bei mir hat sie KEINEN Inhalt, nur im Beispiel aus SelfHTML.
Der Einfachheit halber mal das Beispiel aus SelfHTML ausgeschnitten
Nutze doch bitte Beispiele, die dem tatsaechlich vorliegenden Problem soweit wie moeglich entsprechen (schon das zweite Mal in diesem Thread, dass angemerkt werden muss, dass du doch eigentlich lange genug hier dabei bist).
Das Beispiel befindet sich in Diesem Thread. Da müsste man nun nur mal von vorne lesen. Aber ich verlinke es gerne noch ein zweites Mal, exte für Dich:
http://selfhtml.bitworks.de/forum/ --> get_thread_titles_01.php
Mit height geht es nicht. Da gibts wohl Vererbungsprobleme
Nachfahrenselektor existiert.
Genau für diese benötige ich Hilfe.
Da wuerde ich - abgesehen davon, dass height hier weniger sinnvoll waere - eher vermuten, dass das Problem ist, dass du overflow:visible immer noch nicht verstanden hast.
Was hat overflow:visible mit der Höhe zu tun?
Das Breitenproblem ist ja noch gar nicht weiter behandelt worden, weil ich erst auf den Einwand von Andreas eingegangen bin, und die Ausgabefunktion von Paragraph auf unordered List umgebaut habe.
Und dann gilt bei mir bei der Fehlerbehandlung immer LiFo, sonst weiß man nicht, ob die letzte Änderung bleiben darf.
Mal ganz privat gefragt: Hast Du getrunken? Oder sollte das eine Mobbing-Übung werden?
Ein harzliches Glückauf
Tom vom Berg
Hi,
Bei mir hat sie KEINEN Inhalt, nur im Beispiel aus SelfHTML.
Warum bringst du dieses Beispiel dann - wenn es gar nicht deinem Problem entspricht?
Das Beispiel befindet sich in Diesem Thread.
Dann bringe nicht ploetzlich ein anderes, welches mit deinem Problem gar nichts zu tun hat.
Mit height geht es nicht. Da gibts wohl Vererbungsprobleme
Nachfahrenselektor existiert.
Genau für diese benötige ich Hilfe.
Warum - "funzt" es nicht?
Da wuerde ich - abgesehen davon, dass height hier weniger sinnvoll waere - eher vermuten, dass das Problem ist, dass du overflow:visible immer noch nicht verstanden hast.
Was hat overflow:visible mit der Höhe zu tun?
Du schriebst, mit height "funzt" es nicht, dass eine Zeile keine Ausdehnung in der Hoehe bekommt.
Also habe ich *angenommen* - mehr als das gab deine Problembeschreibung ja nicht her - dass du mittels height:0; o.ae. eine Zeile "verschwinden" lassen wolltest. "Funzt" natuerlich nicht, wenn overflow nicht auch entsprechend gesetzt wird.
Mal ganz privat gefragt: Hast Du getrunken?
Noe.
Oder sollte das eine Mobbing-Übung werden?
Das war ein ganz einfacher "ja, auch und gerade du als Stammposter solltest wissen, wie eine *brauchbare* Problembeschreibung aussieht"-Hinweis.
Aber nein, stattdessen eine Fragestellung auf Newbee-Bullsh*t-Level - "wie bekomme ich x hin" und "mit y funktioniert es nicht".
MfG ChrisB
Hello,
Bei mir hat sie KEINEN Inhalt, nur im Beispiel aus SelfHTML.
Warum bringst du dieses Beispiel dann - wenn es gar nicht deinem Problem entspricht?
Also nun sag mal! Ich habe das Beispiel ausgeschnitten, weil es die für mich notwendige Struktur zeigt. Und ich habe den Text dringelassen, weil man schlecht auf etwas verweisen kann, was nicht da ist. Ich habe ja dazugeschrieben, dass bei mir dort nichts steht.
Und wenn man wirklich helfen wollte, hätte man sich davon überzeugen können im verlinkten Beispiel auf meinem Server. Das ist in diesem Thread nun schon zweimal geschehen.
Warum - "funzt" es nicht?
Hast Du noch schwer zu kämpfen unter den Folgen von Christi Himmelfahrt?
Warum diese Leerräume vorhanden sind oder wie man gezielt welche schafft (z.B. Trennlinie zwischen den einzelnen _Hintergründen_ der <li>-Elemente) wollte ich doch vom Forum wissen.
Da wuerde ich - abgesehen davon, dass height hier weniger sinnvoll waere - eher vermuten, dass das Problem ist, dass du overflow:visible immer noch nicht verstanden hast.
Was hat overflow:visible mit der Höhe zu tun?
Du schriebst, mit height "funzt" es nicht, dass eine Zeile keine Ausdehnung in der Hoehe bekommt.
Ich habe dieses Wort nicht benutzt, also lüg nicht.
Und wie overflow:visible das Problem mit dem Hintergrund in der Breite lösen soll, hast Du auch nicht erklärt. Beim Text gibt es kein Problem mehr, nur bei dessen Hintergrund.
Mit Listen können die wenigsten umgehen, ich auch nicht. Und ich wette, dass DU damit auch nicht umgehen kannst.
Wenn ich es nicht überlesen habe beim Studium von
http://de.selfhtml.org/html/text/listen.htm und
http://de.selfhtml.org/css/eigenschaften/listen.htm,
dann sollte es dringend aufgenommen werden in SelfHTML,
wie es sich mit Margin, Indent, Padding usw. bei Listen verhält.
Da gibt es so ein gute Beispiel für die Abstände, so ähnlich wie
http://de.selfhtml.org/css/eigenschaften/randabstand.htm
ich finde es aber im Moment auch nicht.
Ich kriege es jedenfalls nicht hin, zwischen den <li>-Elementen den Hintergrund zu unterbrechen.
Zwischen den beiden Borders zweier Elemente ist trotzdem noch Hintergund vorhanden. Oder habe ich jetzt auch die TFT-Augenkrakheit?
Also ChrisB, bitte nochmals mein höflicher Appell an Dich: Wenn Du helfen willst, erwarte ich sehnsüchtig Deine (ausgetesteten oder nachzulesenden) Vorschläge, und sonst lass es einfach.
Ein harzliches Glückauf
Tom vom Berg
Hi,
Hast Du noch schwer zu kämpfen unter den Folgen von Christi Himmelfahrt?
Nein, auch das nicht.
Warum diese Leerräume vorhanden sind oder wie man gezielt welche schafft (z.B. Trennlinie zwischen den einzelnen _Hintergründen_ der <li>-Elemente) wollte ich doch vom Forum wissen.
Auf margin/padding wies ich dich doch bereits hin.
Du schriebst, mit height "funzt" es nicht, dass eine Zeile keine Ausdehnung in der Hoehe bekommt.
Ich habe dieses Wort nicht benutzt, also lüg nicht.
Ich luege nicht, es stand bewusst in Anfuehrungszeichen, um kenntlich zu machen, dass es nicht woertlich uebernommen war - sondern ein Hinweis darauf, dass deine dieser beruehmtesten aller "Problembeschreibungen" allzu aehnlich war.
Und wie overflow:visible das Problem mit dem Hintergrund in der Breite lösen soll, hast Du auch nicht erklärt.
Tut's ja auch nicht.
Mit Listen können die wenigsten umgehen, ich auch nicht. Und ich wette, dass DU damit auch nicht umgehen kannst.
Jetzt luegst du - oder du verlierst gerne.
Wenn ich es nicht überlesen habe beim Studium von
http://de.selfhtml.org/html/text/listen.htm und
http://de.selfhtml.org/css/eigenschaften/listen.htm,
dann sollte es dringend aufgenommen werden in SelfHTML,
wie es sich mit Margin, Indent, Padding usw. bei Listen verhält.
Es verhaelt sich damit wie bei jedem anderen Element: *Alle* Eigenschaften, zu denen du keine explizite Angabe machst, sind dir *egal*.
Ich kriege es jedenfalls nicht hin, zwischen den <li>-Elementen den Hintergrund zu unterbrechen.
Wo?
Zwischen den beiden Borders zweier Elemente ist trotzdem noch Hintergund vorhanden. Oder habe ich jetzt auch die TFT-Augenkrakheit?
Wenn dein Beispiel ein etwas kontrastreichere Farbkombination verwenden wuerde, koennte man da vielleicht auch leichter was erkennen.
Also ChrisB, bitte nochmals mein höflicher Appell an Dich: Wenn Du helfen willst, erwarte ich sehnsüchtig Deine (ausgetesteten oder nachzulesenden) Vorschläge, und sonst lass es einfach.
Also Tom, noch mal mein Appell an dich: Wenn du Hilfe willst, dann liefere bitte eine brauchbare Problembeschreibung - du solltest ausreichend gut Bescheid wissen, in welchem Umfang eine solche hier erwartet wird. Wenn nicht - dann lass' es einfach.
MfG ChrisB
Hallo Tom
Ich kriege es jedenfalls nicht hin, zwischen den <li>-Elementen den Hintergrund zu unterbrechen.
Oh, das willst du?
Du willst also, dass nur die <li>-Elemente selbst, nicht aber die darin enthaltenen <ul> den Hintergrund haben?
Da die inneren <ul> Nachfahren von <li> sind, haben diese keine andere Hintergrundfarbe, als die <li>-Elemente, in denen sie enthalten sind - solange du nichts anderes verlangst.
Wie wäre es denn mit:
ul {
background-color:#fff;
}
Auf Wiederlesen
Detlef
Hello Detlef,
Oh, das willst du?
Du willst also, dass nur die <li>-Elemente selbst, nicht aber die darin enthaltenen <ul> den Hintergrund haben?
Nein, das will ich nicht.
Da die inneren <ul> Nachfahren von <li> sind, haben diese keine andere Hintergrundfarbe, als die <li>-Elemente, in denen sie enthalten sind - solange du nichts anderes verlangst.
Ich will, dass die <li>-Elemente einen Hintergrund haben und dass sie einen Margin zu den anderen <li>-Elementen einhalten, der dann den normalen Hintergrund hat, so wie das zwischen den <li>-Elementen (.first) auch funktioniert.
Und es ist mir hier inzwischen absolut nicht mehr klar, wer wann was von wem erbt und was durch welche CSS-Angabe (Klasse) in welcher Reihenfolge wieder überschrieben wird.
Nochmals verlinkt hier, damit man nicht durch den Thread blättern muss, die Problemseite:
http://selfhtml.bitworks.de/forum/ --> get_thread_titles_02.php
Mit get_thread_titles.php habe ich angefangen und stehe nun bei ..._02.php
Das Problem mit dem Hintergrund in der Breite existiert ja auch noch.
Meine Ausgangsfrage, als ich noch <p>-Elemente benutzt habe, war ja, wie ich es erreichen kann, dass diese am rechten rand über den aktuellen viewport hinaus einen Hintergund bekommen können.
Diese hat sich leider durch Verwendung der <li>-Elemente nicht erledigt. Ganz im Gegenteil, nun habe ich horizontal das Problem mit dem fehlenden Hintergrund und vertikal das mit dem, der zu viel ist. Es sollen "Rasenstreifen" zwischen den Zeilen entstehen.
Ein harzliches Glückauf
Tom vom Berg
Hallo Tom
Du willst also, dass nur die <li>-Elemente selbst, nicht aber die darin enthaltenen <ul> den Hintergrund haben?
Nein, das will ich nicht.
Das eine Problem wäre also damit nun gelöst.
Na was denn nun?
Vielleicht solltest du dich entscheiden, was du genau willst.
Du knallst uns hier mehrere deiner Versuche hin, mit viel CSS, diversen Klassen, ohne dass wir wirklich wissen, wie es denn letztendlich aussehen soll.
Wie soll es denn nun aussehen?
Nur die Textinhalte der <li>-Elemente mit anderem Hintergrund oder über die gesamte Breite der Liste?
Nur die Textinhalte der ersten Ebene fett oder noch etwas?
Jeweils gleich große Abstände zwischen allen Listenpunkten, oder dann doch noch anders?
Soll es nur in bestimmten Browsern funktionieren, oder in möglichst vielen?
Male mal ein Bild, wie es dann aussehen soll, wenn es fertig ist.
Auf Wiederlesen
Detlef
Hello,
Na was denn nun?
Das hat sich doch inzwischen geklärt.
Du knallst uns hier mehrere deiner Versuche hin, mit viel CSS, diversen Klassen, ohne dass wir wirklich wissen, wie es denn letztendlich aussehen soll.
Nö. Ich habe eine eindeutige Frage gestellt und verstehe diese Agressivität nicht.
Wie soll es denn nun aussehen?
Das verwendete Element, egal jetzt, ob <li> oder <p> soll seinen Hintergrund soweit ausdehnen, wie sein Inhalt sich ausdehnt, und nichzt nur bis zum derzeitigen rechten Rand des Viewports.
Lieber wäre es mir noch, wenn sich alle Elemente mit ihrem Hintergund soweit horizontal ausdehnen würden, wie es das am weitestens nach rechts reichende tun sollte.
Nur die Textinhalte der <li>-Elemente mit anderem Hintergrund oder über die gesamte Breite der Liste?
Über die gesamte Breite der Liste.
Nur die Textinhalte der ersten Ebene fett oder noch etwas?
Nur die Textinhalte der ersten Ebene Fett. Das habe ich ja bisher mit einer Klasse erreicht, wäre aber schön, es nur mit Vorgänger-/Nachfolger-Definitionen einzustellen.
Jeweils gleich große Abstände zwischen allen Listenpunkten, oder dann doch noch anders?
Vor jedem Element der ersten Ebene ein größerer Abstand
Soll es nur in bestimmten Browsern funktionieren, oder in möglichst vielen?
In allen, die W3-konform arbeiten
Ein harzliches Glückauf
Tom vom Berg
Hallo Tom
Über die gesamte Breite der Liste.
Nur die Textinhalte der ersten Ebene Fett. Das habe ich ja bisher mit einer Klasse erreicht, wäre aber schön, es nur mit Vorgänger-/Nachfolger-Definitionen einzustellen.
Versuch es doch mal mit dem CSS statt deinem, das sollte deinem Wunsch doch nahekommen, dann kannst du auch gleich die ganzen Klassen entsorgen.
body {
font-family:century gothic, tahoma, arial,sans-serif;
}
div {
display:table; /* Inhaltsbreite (zumindest in Gecko) */
}
ul, li {
display:block;
margin:0;
padding:0;
list-style:none;
background-color:#fff;
}
li {
margin: 4px 0 0 2em;
white-space:nowrap;
font-weight: bold;
background-color:#cce;
}
li li {
font-weight: normal;
background-color:#dde;
}
* html div, * html ul {
height:1%; /* notwendiges hasLayout für IE 6 */
}
Vor jedem Element der ersten Ebene ein größerer Abstand
Das ist bei deinem etwas unlogischem Listenaufbau nicht so einfach.
<ul>
<li>1-1 x-teGülXküzd~iOi4QMV4 7ÄäU3P&L33-5sZ</li>
<li>
<ul>
<li>2-2 bMl.3-Tcqx6f r.s.zV!HbFrfsZ</li>
<li>3-2 ZTsA_piYI+c Vi&xXcUG!ßmf</li>
Warum steckt die zweite Ebene (<ul>) in einem separaten <li>-Element. Müssten diese nicht eher als Folge bzw. Unterpunkte der Elemente der ersten Ebene betrachtet werden.
<ul>
<li>1-1 x-teGülXküzd~iOi4QMV4 7ÄäU3P&L33-5sZ
<ul>
<li>2-2 bMl.3-Tcqx6f r.s.zV!HbFrfsZ</li>
<li>3-2 ZTsA_piYI+c Vi&xXcUG!ßmf</li>
Dann könnte den <li>-Elementen ein zusätzlicher Abstand gegeben werden, der dann für nachfolgenden wieder aufgehoben wird.
Soll es nur in bestimmten Browsern funktionieren, oder in möglichst vielen?
In allen, die W3-konform arbeiten
Ich habe das nur in FF2, FF3 und IE6 getestet.
Auf Wiederlesen
Detlef
Hello Detlef,
Warum steckt die zweite Ebene (<ul>) in einem separaten <li>-Element. Müssten diese nicht eher als Folge bzw. Unterpunkte der Elemente der ersten Ebene betrachtet werden?
Das könnte schon zutreffen.
Ursprünglich waren noch separate Überschriften geplant. Die sind aber weggefallen.
<ul>
<li>1-1 x-teGülXküzd~iOi4QMV4 7ÄäU3P&L33-5sZ
<ul>
<li>2-2 bMl.3-Tcqx6f r.s.zV!HbFrfsZ</li>
<li>3-2 ZTsA_piYI+c Vi&xXcUG!ßmf</li>
Dann muss ich das Ausgabemodul nur nochmal umschreiben, bleibt mir wohl nichts erspart.
Wenn ich aber dann dafür die Klassen entsorgen kann, ist es die Sache Wert.
Vielen Dank erstmal,
Ergebnis wird dann ja irgendwann sichtbar werden in der Testseite.
Ein harzliches Glückauf
Tom vom Berg
![](http://selfhtml.bitworks.de/Virencheck.gif)
--
Nur selber lernen macht schlau
<http://bergpost.annerschbarrich.de>
Hello,
<ul>
<li>1-1 x-teGülXküzd~iOi4QMV4 7ÄäU3P&L33-5sZ
<ul>
<li>2-2 bMl.3-Tcqx6f r.s.zV!HbFrfsZ</li>
<li>3-2 ZTsA_piYI+c Vi&xXcUG!ßmf
<ul>
<li>4-3 bMl.3-Tcqx6f r.s.zV!HbFrfsZ</li>
<li>5-3 ZTsA_piYI+c Vi&xXcUG!ßmf</li>
</ul>
</li>
</ul>
</li>
<li>6-1 x-teGülXküzd~iOi4QMV4 7ÄäU3P&L33-5sZ</li>
</ul>
Dann muss ich das Ausgabemodul nur nochmal umschreiben, bleibt mir wohl nichts erspart.
Wenn ich aber dann dafür die Klassen entsorgen kann, ist es die Sache Wert.
Und das ist leider gar nicht so trivial, wie man auf den ersten Blick glaubt.
Hat jemand eine Idee, wie man das vernünftig anfängt?
Klassisch top-down mit vielen if/else?
Oder mittels Stacks?
Hab heute irgendwie ein Brett vorm Kopf.
Auf dem Papier steht es schon als Nassi-Shinderman als if/else-Grab, aber das gefällt mir noch nicht. Muss doch elegangter möglich sein!
Das File mit den Listenelementen liegt "zeilenweise" vor.
In jedem Listenelement ist die Eirückungsebene notiert.
Ein harzliches Glückauf
Tom vom Berg
Hi,
Das File mit den Listenelementen liegt "zeilenweise" vor.
In jedem Listenelement ist die Eirückungsebene notiert.
Vielleicht das ganze erst mal in ein mehrdimensionales Array packen?
Wenn das erst mal erzeugt ist, "schleift" es sich darueber doch recht einfach per Rekursion, und auch pro Ebene die benoetigten Listenelemente zu erzeugen, ist im Vergleich dazu, direkt beim Auslesen aus der Datei abhaengig von der Einrueckungsebene zu schauen, welche und wie viele Tags man da jetzt hinbasteln muss, wohl trivial.
MfG ChrisB
Hallo.
Ursprünglich waren noch separate Überschriften geplant. Die sind aber weggefallen.
Die gehören aber nicht in separate [code=html]<li>[/code]-Elemente.
MfG, at
Hello,
Ursprünglich waren noch separate Überschriften geplant. Die sind aber weggefallen.
Die gehören aber nicht in separate
<li>
-Elemente.
Ich habe es ja auch portiert von einer <p>-Lösung, die zugegebnermaßen nicht semantisch war.
Da keine anderen Ideen gekommen sind und ich auch keine fertigen habe, programmiere ich es jetzt in der klassischen Variante.
Das funktionstüchtige und valide Ergebnis wird dann irgendwann meiner Scriptsammlung auftauchen.
Mal sehen, wann ich es schaffe, die letzten Fehler zu beseitigen...
Ist ja eigentlich nur eine Kleinigkeit[1], aber man freut sich, wenn man es später nicht nochmal durchdenken muss :-)
[1] ... die bekanntlich am längsten von der wirklichen Arbeit abhalten können
Ein harzliches Glückauf
Tom vom Berg
Hello Detlef,
Versuch es doch mal mit dem CSS statt deinem, das sollte deinem Wunsch doch nahekommen, dann kannst du auch gleich die ganzen Klassen entsorgen.
Ich habe heute mal etwas Zeit gefunden, die Funktion für die Listenausgabe fertig zu machen und Dein CSS damit zu testen. Das ist spitze so. Die Klassen konnte ich durch den Nachfolger-Selektor entfernen.
Das Ergebnis belibt unter
http://selfhtml.bitworks.de/forum/get_thread_titles_03.php
gespeichert.
Bleibt nur noch ein Wunsch: Wie kann ich den Einzug der Rangstufe nun steuern?
Ein harzliches Glückauf
Tom vom Berg
Hallo Tom
… Dein CSS damit zu testen. Das ist spitze so. Die Klassen konnte ich durch den Nachfolger-Selektor entfernen.
Vielleicht hättest du es wirklich erstmal _genau_ _so_ übernehmen sollen, wie ich es gepostet habe.
Das Ergebnis belibt unter
http://selfhtml.bitworks.de/forum/get_thread_titles_03.php
gespeichert.
Schau dir das mal ganz genau um die Zeile 28 herum an:
background-color:#fff;
{
margin: 0.5em 0 0 1em;
Bei mir sah es so aus:
background-color:#fff;
}
li {
margin: 4px 0 0 2em;
Bleibt nur noch ein Wunsch: Wie kann ich den Einzug der Rangstufe nun steuern?
Die Einrückung kannst du jeweils durch margin-left
(in margin: 0.5em 0 0 1em;
bereits mit 1em enthalten) einstellen. Bei li gilt sie ab der ersten Rangstufe, bei li li ab der zweiten, li li li ab der dritten, ….
Auf Wiederlesen
Detlef
Hello Detlef,
Vielleicht hättest du es wirklich erstmal _genau_ _so_ übernehmen sollen, wie ich es gepostet habe.
Hatte ich wohl auch. Aber ich saß heute im Klassenzimmer und da habe ich nur putty und dann mcedit auf dem Server zur Verfügung. Installationen auf den Hosts müssen beantragt werden und das sit mir zu doof. Es gibt keinen sftp-Client, FTP geht nur über den IE usw...
Außerdem sitze ich ja nicht da zum Programmieren, sondern soll aufpassen und Antworten geben :-)
Habe das File "repariert"
Nun tuts auch unter Firefox, den ich im Classroom auch nicht habe.
http://selfhtml.bitworks.de/forum/get_thread_titles_03.php
Bleibt nur noch ein Wunsch: Wie kann ich den Einzug der Rangstufe nun steuern?
Die Einrückung kannst du jeweils durch
margin-left
(inmargin: 0.5em 0 0 1em;
bereits mit 1em enthalten) einstellen. Bei li gilt sie ab der ersten Rangstufe, bei li li ab der zweiten, li li li ab der dritten, ….
Hmm, war ich arg irritiert durch http://de.selfhtml.org/navigation/css.htm#randabstand
Demnach müsste es doch
margin: 0.5em 0 1em; 0.5em
heißen, wobei 1em die Einrückung wäre - oder?
Ich probiers jetzt aus, nur probieren ist bei CSS nicht wirklich sinnvoll
Ich danke Dir auf jeden Fall nochmal für die Unterstüztung.
Dank Deiner Hilfe haben sich die Verbasteleien in Luft aufgelöst!
Ein harzliches Glückauf
Tom vom Berg
Hello,
Demnach müsste es doch
margin: 0.5em 0 1em 0.5em;
heißen, wobei 1em die Einrückung wäre - oder?
selbstverständlich SO!
Ein harzliches Glückauf
Tom vom Berg
Hello,
ich krieg 'ne Krise.
Der IE 6.0 reagiert (fast) so, wie ich es mir vorstelle, der FF 2.0.0 ist einfach zum Verzweifeln.
Was ist denn nun noch falsch?
Ich lasse die Test-Version nun so bestehen zur Abschreckung.
Eine korrigierte würde dann ggf. unter ..._04.php erscheinen.
Ein harzliches Glückauf
Tom vom Berg
Hallo Tom
Der IE 6.0 reagiert (fast) so, wie ich es mir vorstelle, der FF 2.0.0 ist einfach zum Verzweifeln.
Was ist denn nun noch falsch?
Da machen uns wohl die collapsing margins Probleme.
Vermeiden können wir dies durch folgende Änderung:
li li
{
margin-top: 0; /* Statt den Abstand mittels margin zu erreichen, */
border-top:1px solid #fff; /* nehmen wir einfach einen oberen border. */
font-weight: normal;
background-color:#dde;
}
Auf Wiederlesen
Detlef
Hello und Guten Morgen Detlef,
Der IE 6.0 reagiert (fast) so, wie ich es mir vorstelle, der FF 2.0.0 ist einfach zum Verzweifeln.
Der IE hat aber noch ein Problem mit dem rechten Rand bzw mit overflow:visible.
Element 464 (wenn keine 'ne neue Liste generiert, aber das Script habe ich "obscured by Dot") zeigt da die Probleme ganz deutlich.
Da machen uns wohl die collapsing margins Probleme.
Vermeiden können wir dies durch folgende Änderung:
li li
{
margin-top: 0; /* Statt den Abstand mittels margin zu erreichen, /
border-top:1px solid #fff; / nehmen wir einfach einen oberen border. */
font-weight: normal;
background-color:#dde;
}
Ja, das war es wohl. Ist das ein Feature oder ist es ein Bug?
Immerhin sind sowohl HTML als auch CSS valide. Das prüfe ich hier immer als erstes, wenn Du mir schon so ausführlich hilfst :-))
Schaun wir mal, ob wird das letzte Problem im IE auch noch geknackt kriegen?
Dann sollten unsere Mitleser aber auch ide übrigen Browser nochmal quälen und ihren S\* Äah, ihre Meinung dazu äußern...
Ein harzliches Glückauf
Tom vom Berg
![](http://selfhtml.bitworks.de/Virencheck.gif)
--
Nur selber lernen macht schlau
<http://bergpost.annerschbarrich.de>
Hello,
Der IE 6.0 reagiert (fast) so, wie ich es mir vorstelle, der FF 2.0.0 ist einfach zum Verzweifeln.
Nach dem chirurgischen Eingriff von Detlef ist es nun OK beim FF
Der IE 6.0 hat aber noch ein Problem mit dem rechten Rand bzw mit overflow:visible.
Element 464 (wenn keine 'ne neue Liste generiert, aber das Script habe ich "obscured by Dot") zeigt da die Probleme ganz deutlich.
Der IE 7.0 hat kein Problem mehr mit der Ausdehnung des Textes.
http://selfhtml.bitworks.de/forum/get_thread_titles_04.php
Dann nochmalige Bitte an unsere Mitleser, auch die übrigen Browser nochmal zu quälen und ihre Beobachtungen mitzuteilen.
Ein harzliches Glückauf
Tom vom Berg
Hallo.
Dann nochmalige Bitte an unsere Mitleser, auch die übrigen Browser nochmal zu quälen und ihre Beobachtungen mitzuteilen.
Keine Probleme in den aktuelen Mac-Versionen von Firefox, Opera und Safari.
MfG, at
Hello,
Ich kriege es jedenfalls nicht hin, zwischen den <li>-Elementen den Hintergrund zu unterbrechen.
Oh, das willst du?
Du willst also, dass nur die <li>-Elemente selbst, nicht aber die darin enthaltenen <ul> den Hintergrund haben?
Da die inneren <ul> Nachfahren von <li> sind, haben diese keine andere Hintergrundfarbe, als die <li>-Elemente, in denen sie enthalten sind - solange du nichts anderes verlangst.
Ok, bin Deinem Tipp gefolgt und wie es ausschaut, habe ich also den Hintergrund der innereren <ul> gesehen. Das eine Problem wäre also damit nun gelöst.
Danke!
Ein harzliches Glückauf
Tom vom Berg
@@Tom:
Mit Listen können die wenigsten umgehen, ich auch nicht. Und ich wette, dass DU damit auch nicht umgehen kannst.
Wie hoch ist dein Einsatz? Ich setze dagegen.
Live long and prosper,
Gunnar
Hello,
Mit Listen können die wenigsten umgehen, ich auch nicht. Und ich wette, dass DU damit auch nicht umgehen kannst.
Wie hoch ist dein Einsatz? Ich setze dagegen.
Schlag was vor!
Als erstes wüsste ich dann gerne vom ChrisB, wie er mit overflow:XXX erreicht, dass der Hintergund über den rechten Rand des Viewports hinausgeht.
Die zweite Frage wäre dann die nach gezieltem Einsatz des Nachfahrenselektor für die Abstände, die Fettschrift des <li>-Elementes der ersten Ebene, usw.
Und dann eben den ganzen Rest :-)
Am liebsten wäre mir dann ein ausführlicher Artikel in SelfHTML zum Nachlesen. Dann haben Andere auch noch 'was davon.
Ein harzliches Glückauf
Tom vom Berg
Hi,
Als erstes wüsste ich dann gerne vom ChrisB, wie er mit overflow:XXX erreicht, dass der Hintergund über den rechten Rand des Viewports hinausgeht.
Langsam wird's mir echt zu bloed mit dir ...
Ich schrieb jetzt schon mehrfach, dass du das *mit* *overflow* *nicht* *erreichst*.
overflow:visible bedeutet, wenn der Inhalt die Elementmasze sprengt, dann zeige ihn ueber diese hinausfliessend an - *ohne* das Element selbst zu vergroessern.
Element nicht vergroessert -> "ausserhalb" auch kein Element-Hintergrund.
html und body haben per Default width:auto, werden als Blockelemente damit also so breit dargestellt, wie der Viewport.
Wenn deine Listen diese Breite jetzt sprengen - dann fliesst ihr Inhalt also ueber den Rand von body hinaus. Also nix Hintergrund von body dort.
MfG ChrisB
Hallo.
Die zweite Frage wäre dann die nach gezieltem Einsatz des Nachfahrenselektor für die Abstände, die Fettschrift des <li>-Elementes der ersten Ebene, usw.
Vielleicht solltest du gar keinen einfachen text auf die erste Ebene legen, den du dann nur wieder mühsam selektieren musst, sondern den Text der ersten Ebene in leicht zu selektierende Absätze einschließen.
MfG, at
Hi,
wenn ich in das aktuelle <body>-Element ein <p> oder ein <div> stelle, nimmt es die Breite des aktuellen Viewports an und wächst in der Breite nicht mit, wenn ich das Fenster aufziehe.
Bezieht sich diese Problem auf das nächste?
Welches Element muss ich nehmen, oder was muss ich als Eigenschaft einstellen, dass sich die Breite soweit ausdehnt, bis der enthaltene Text zuende ist?
Geht das nur mit "norwrap" odr einer Tabelle?
im CSS:
white-space: nowrap
Gruß!
Hello,
im CSS:
white-space: nowrap
Das habe ich selbstverständlich schon ausprobiert :-)
Schau mal unter http://selfhtml.bitworks.de/forum/get_thread_titles.php
Im Firefox wird der Hintergund des <p> nur auf den aktuellen Viewport bezogen, im IE wird ja wenigstens in den längeren Zeilen noch der Hintergrund angepasst.
Es machen mMn aber beide falsch.
Was richtig wäre, weiß ich aber auch nicht. :-(
Ein harzliches Glückauf
Tom vom Berg
Hi,
also bei mir sieht die Seite in beiden (FF 2 und IE 7) gleich aus.
Ist der Text zu lang, geht er über das <p> element, allerdings ohne Hintergrund. Scroll man also horizontal nach rechts, ist rechts nur weiß.
Meinst du das?
Wie das zu lösen ist, weiß ich leider auch nicht.
Gruß!
Hello,
also bei mir sieht die Seite in beiden (FF 2 und IE 7) gleich aus.
Ist der Text zu lang, geht er über das <p> element, allerdings ohne Hintergrund. Scroll man also horizontal nach rechts, ist rechts nur weiß.
Meinst du das?
Ja, das ist aber nur beim FF so. Bei meinem IE wird der Hindergund auch verbreitert.
Eigentlich hätte ich angenommen, dass die <p>-Elemente die Breite des breitesten annehmen, da sie sich alle im selben Elternelement befinden.
Ein harzliches Glückauf
Tom vom Berg
Hi,
Ist der Text zu lang, geht er über das <p> element, allerdings ohne Hintergrund. Scroll man also horizontal nach rechts, ist rechts nur weiß.
Ja, das ist aber nur beim FF so. Bei meinem IE wird der Hindergund auch verbreitert.
Der IE kapiert halt nicht, wie overflow:visible laut Spezifikation anzuwenden ist.
MfG ChrisB
Ist der Text zu lang, geht er über das <p> element, allerdings ohne Hintergrund. Scroll man also horizontal nach rechts, ist rechts nur weiß.
Meinst du das?
Öhm, hast du es auch schon mit "min-width" versucht? Sollte doch eigentlich genau das machen, was du willst.
Viele Grüße
Devius
Hallo Tom,
Im Firefox wird der Hintergund des <p> nur auf den aktuellen Viewport bezogen, im IE wird ja wenigstens in den längeren Zeilen noch der Hintergrund angepasst.
ein p {display:table-row;}
könnte u.U. dein Problem beheben. Zumindest in standardkonformen Browsern.
Grüße,
Jochen