nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Der Martin
Der Martin
Hallo
ich habe eine Liste, die die Eigenschaft list-style-image:url("Pfad/zum/Bild.png"); hat.
Jetzt soll aber jedes zweite Element eine Trennlinie sein. Dazu habe ich diesen ein Hintergrundbild verpasst und list-style-type:none; gesetzt.
Das funktioniert in allen Browsern außer dem IE.
Kann mir Jemand sagen welche Änderungen ich vornehmen muss, damit das auch im IE klappt, oder mir eine Seite empfehlen auf denen die gängigsten IE-Hacks aufgeführt sind?
Danke schonmal, Supreme
Hi,
ich habe eine Liste, die die Eigenschaft
list-style-image:url("Pfad/zum/Bild.png");hat.
Jetzt soll aber jedes zweite Element eine Trennlinie sein.
Du missbrauchst also leere(?) List-Items, um einen optischen Effekt zu erreichen?
Kann mir Jemand sagen welche Änderungen ich vornehmen muss, damit das auch im IE klappt, oder mir eine Seite empfehlen auf denen die gängigsten IE-Hacks aufgeführt sind?
Erst mal solltest du sinnvolles HTML erstellen.
Wenn es sich tatsächlich so verhält, wie von mir vermutet, ist das derzeit nicht der Fall.
MfG ChrisB
Du missbrauchst also leere(?) List-Items, um einen optischen Effekt zu erreichen?
Tut mir leid. Um die Schändlichkeit dieser Sache wusste ich nicht.
Erst mal solltest du sinnvolles HTML erstellen.
Wenn es sich tatsächlich so verhält, wie von mir vermutet, ist das derzeit nicht der Fall.
Danke, aber konkreter Hinweis wie der von Matthias wäre nützlich gewesen.
Grüße Supreme
Om nah hoo pez nyeetz, Supreme!
Beachte Chris' Posting.
Für eine sinnvolle Hilfe, wäre ein Online-Beispiel sinnvoll. Das einfachste wäre, den betreffenden li's eine Klasse zu geben (oder wenn es einer Regelmäßigkeit folgt die Pseudoklasse ::nth-child() zu verwenden) und diesen List-Elementen ein border-bottom und entsprechenden Abstand zu verpassen.
Einfache Lösungen, die auf deiner unsemantischen Struktur aufbauen, gibt es auch, aber die möchte ich dir nicht liefern.
Matthias
@@Matthias Apsel:
nuqneH
Pseudoklasse ::nth-child()
Pseudoklasse und '::' widerspricht sich. Pseudoklassen haben ein ':'; Pseudoelemente (in CSS 3) zwei '::'.
- Einfache Lösungen, die auf deiner unsemantischen Struktur aufbauen, gibt es auch, aber die möchte ich dir nicht liefern.
4. Und auch später nicht.
Qapla'
Om nah hoo pez nyeetz, Supreme!
- Beachte Chris' Posting.
Hab ich.
- Für eine sinnvolle Hilfe, wäre ein Online-Beispiel sinnvoll. Das einfachste wäre, den betreffenden li's eine Klasse zu geben (oder wenn es einer Regelmäßigkeit folgt die Pseudoklasse ::nth-child() zu verwenden) und diesen List-Elementen ein border-bottom und entsprechenden Abstand zu verpassen.
Habs geändert. Bzw. ich habe einfach allem Listen Elementen einen border-bottom verpasst. Sieht zwar jetzt anders aus, gefällt mir aber sogar besser.
- Einfache Lösungen, die auf deiner unsemantischen Struktur aufbauen, gibt es auch, aber die möchte ich dir nicht liefern.
Einverstanden. Ich will auch keinen Mist behalten.
Danke
Supreme.
Kann mir dann Jemand sagen, was ich bei folgender Navigation besser machen kann, da auch hier wieder der IE Chaos anzeigt?
Also es handelt sich dabei um eine horizontale Navigationsleiste.
Die Stylesheets dazu sehen wie folgt aus:
#topNavi{
list-style:none;
text-align:center;
height:55px;
padding:25px 0 0 59px;
margin:0;
border-bottom:1px solid gray;
}
#topNavi li{
float:left;
padding:0 1em;
margin-right: 1em;
color: #E9E9EA;
font-family: Tahoma,sans-serif;
font-size: 8pt;
text-decoration: underline;
border-right:1px dotted gray;
}
Grüße Supreme
Om nah hoo pez nyeetz, Supreme!
Kann mir dann Jemand sagen, was ich bei folgender Navigation besser machen kann, da auch hier wieder der IE Chaos anzeigt?
Also es handelt sich dabei um eine horizontale Navigationsleiste.
Die Stylesheets dazu sehen wie folgt aus:
Man könnte darüber streiten, ob der Plural an dieser Stelle richtig ist.
CSS und HTML müssen eine Einheit bilden. Ohne HTML kann man die (logische) Richtigkeit des CSS nicht beurteilen und umgekehrt.
Matthias
Sorry, die Liste sieht so aus:
<ul id="topNavi">
<li style="margin-left:25%;">
<a href="URL">
<img src="images/topMenuButton.gif" alt="">
<p>Home</p>
</a>
</li>
<li>
<a href="URL">
<img src="images/topMenuButton.gif" alt="">
<p>Über uns</p>
</a>
</li>
<li>
<a href="URL">
<img src="images/topMenuButton.gif" alt="">
<p>Produkte</p>
</a>
</li>
<li>
<a href="URL">
<img src="images/topMenuButton.gif" alt="">
<p>Referenzen</p>
</a>
</li>
</ul>
Grüße
Om nah hoo pez nyeetz, Supreme!
Es handelt sich sicher um Hintergrundbilder, also Verzierung. Verzierungen gehören ins CSS.
Es ist nicht nötwändig, die Umlaute zu maskieren.
Dann beschreibst du bitte noch, wie deine Navigation aussehen soll und verlinkst nicht auf die aktuelle Seite . f.
Matthias
Es ist nicht nötwändig, die Umlaute zu maskieren.
Warum nicht?
Dann beschreibst du bitte noch, wie deine Navigation aussehen soll und verlinkst nicht auf die aktuelle Seite . http://forum.de.selfhtml.org/my/?t=204120&m=1381867#m1381867f.
Also es soll so aussehen:
Die Elemente sollen nebeneinander stehen, getrennt duch eine vertikale gestrichelte Linie. Dabei soll jedes Element aus einem Bild und einem darunter zentrierten stehenden Text bestehen. Ist das einigermaßen ersichtlich geworden?
Probleme bereitet mir vorallem das horizontale, da ich glaube ich da der Fehler im IE entsteht.
Grüße Supreme
@@Supreme:
nuqneH
Es ist nicht nötwändig, die Umlaute zu maskieren.
Warum nicht?
Qapla'
Danke. So viele Konventionen. Haben die auch einen praktischen Hintergrund oder geht es dabei nur um die Theorie?
@@Supreme:
nuqneH
Danke. So viele Konventionen. Haben die auch einen praktischen Hintergrund oder geht es dabei nur um die Theorie?
Für mich hat „Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen“ einen doch sehr praktischen Hintergrund.
Qapla'
Für mich hat „Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen“ einen doch sehr praktischen Hintergrund.
Ja seh ich auch so, aber in meinem Fall benutze ich ja kaum Umlaute, von daher würde ich das Problem nicht als signifikant bezeichnen
@@Supreme:
nuqneH
Für mich hat „Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen“ einen doch sehr praktischen Hintergrund.
Ja seh ich auch so, aber in meinem Fall benutze ich ja kaum Umlaute, von daher würde ich das Problem nicht als signifikant bezeichnen
Die Grenze zwischen wenigen und vielen Nicht-ASCII-Zeichen ist wo?
Qapla'
Die Grenze zwischen wenigen und vielen Nicht-ASCII-Zeichen ist wo?
Ich würde sagen, sobald es unübesichtlich wird jedes zu ersetzen.
@@Supreme:
nuqneH
Die Grenze zwischen wenigen und vielen Nicht-ASCII-Zeichen ist wo?
Ich würde sagen, sobald es unübesichtlich wird jedes zu ersetzen.
Du weichst der Frage aus. Bei wievielen genau ist die Grenze?
Qapla'
Du weichst der Frage aus. Bei wievielen genau ist die Grenze?
Naja auf eine abstrakte Frage kann es keine konkrete Antwort geben ;) wenn du mir sagst was viel und was wenig ist, dann sag ich dir wo die Grenze liegt.
Das kann höchstens im Einzelfall entschieden werden meine Meinung nach. DAs ganze ist aber relativ irrelevant, da man ja für so einen Fall Konventionen hat nicht wahr.
Om nah hoo pez nyeetz, Supreme!
Du weichst der Frage aus. Bei wievielen genau ist die Grenze?
Naja auf eine abstrakte Frage kann es keine konkrete Antwort geben ;)
was ist eine abstrakte Frage?
etwas abstrahieren bedeutet verallgemeinern. Damit ist "wieviel ist 2 + 3?" eine abstrakte Frage. Es gibt sicher eine Antwort.
;-)
Matthias
etwas abstrahieren bedeutet verallgemeinern.
Nicht unbedingt unter dem Begriff "abstrakt" kann man auch ein Objekt verstehen (z.B. eine Frage), das eine reine Erfindung des menschlichen Vestandes ist und in der Natur an sich nicht vorkommt. Zum Beispiel "Seele" oder "viel".
Damit ist "wieviel ist 2 + 3?" eine abstrakte Frage. Es gibt sicher eine Antwort.
Konkret hingegen ist Mathematik oder die Dinge die empirisch nachweisbar sind wie "Tisch" oder "Baum"
Insofern habe ich unter abstrakter Frage verstanden, dass an der Definition von viel und wenig i.a. mangelt.
Om nah hoo pez nyeetz, Supreme!
etwas abstrahieren bedeutet verallgemeinern. Nicht unbedingt unter dem Begriff "abstrakt" kann man auch ein Objekt verstehen (z.B. eine Frage), das eine reine Erfindung des menschlichen Vestandes ist und in der Natur an sich nicht vorkommt. Zum Beispiel "Seele" oder "viel".
Genau das trifft auf die Zahlen zu.
Matthias
etwas abstrahieren bedeutet verallgemeinern.
Nicht unbedingt unter dem Begriff "abstrakt" kann man auch ein Objekt verstehen (z.B. eine Frage), das eine reine Erfindung des menschlichen Vestandes ist und in der Natur an sich nicht vorkommt. Zum Beispiel "Seele" oder "viel".Genau das trifft auf die Zahlen zu.
Naja ich bin da etwas duch Kant beeinflusst, was das angeht. Aber ich glaube, dass eine Diskussion darüber hier zu weit führen würde...
Was ich meinte war: abstrakt im Sinne von "nicht-konkret/nicht-empirisch-bestimmbar".
@@Supreme:
nuqneH
Du weichst der Frage aus. Bei wievielen genau ist die Grenze?
Naja auf eine abstrakte Frage kann es keine konkrete Antwort geben ;)
Die Frage ist konkret. Und darauf gibt es eine konkrete Antwort: 0 ist wenig, alles größer 0 ist viel.
DAs ganze ist aber relativ irrelevant, da man ja für so einen Fall Konventionen hat nicht wahr.
Ja, die Konvention ist, die richtigen Zeichen zu verwenden, keine Escapes.
Qapla'
Die Frage ist konkret. Und darauf gibt es eine konkrete Antwort: 0 ist wenig, alles größer 0 ist viel.
Ja ich denke, dass das Teil der Konvention ist. Und mit der 0 bin auch nicht so ganz einverstanden. Die von dirr verlinkte Seite sagt zum Bsp, dass &,< und > nicht benutzt werden sollen.
DAs ganze ist aber relativ irrelevant, da man ja für so einen Fall Konventionen hat nicht wahr.
Ja, die Konvention ist, die richtigen Zeichen zu verwenden, keine Escapes.
Das meinte ich damitv;)
@@Supreme:
nuqneH
Und mit der 0 bin auch nicht so ganz einverstanden.
Die Diskussion begann mit Umlauten, nicht mit Zeichen, die in einem bestimmten Kontext escapet werden müssen.
Die von dirr verlinkte Seite sagt zum Bsp, dass &,< und > nicht benutzt werden sollen.
Im Fall von XML (XHMTL) gilt für & und < sogar: nicht benutzt werden DÜRFEN.
(Auf SGML (HTML) und sein Wenn-aber-dann-doch-nicht hab ich gerade keinen Bock. Und auf die für Menschen ziemlich unlesbare HTML5-Spec auch nicht.)
Qapla'
Hallo,
Für mich hat „Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen“ einen doch sehr praktischen Hintergrund.
Ja seh ich auch so, aber in meinem Fall benutze ich ja kaum Umlaute, von daher würde ich das Problem nicht als signifikant bezeichnen
das mag schon sein - aber warum sollte man grundlos eine unkomfortable und lästige Variante verwenden, wenn auch in geringer Dosierung?
So long,
Martin
das mag schon sein - aber warum sollte man grundlos eine unkomfortable und lästige Variante verwenden, wenn auch in geringer Dosierung?
Da hast du sicherlich Recht. Aber wenn ich z.B. mal ein geschütztes Leerzeichen mache, um einen Zeilenumbruch zu verhindern, ist das eher komfortabel oder seh ich das falsch?
@@Supreme:
nuqneH
Aber wenn ich z.B. mal ein geschütztes Leerzeichen mache, um einen Zeilenumbruch zu verhindern, ist das eher komfortabel oder seh ich das falsch?
Auch das ist im verlinkten Artikel erwähnt.
Qapla'
Om nah hoo pez nyeetz, Supreme!
Die Elemente sollen nebeneinander stehen, getrennt duch eine vertikale gestrichelte Linie. Dabei soll jedes Element aus einem Bild und einem darunter zentrierten stehenden Text bestehen. Ist das einigermaßen ersichtlich geworden?
na dann los:
Listelemente sind von Hause aus Blockelemente, das heißt sie nehmen immer die gesamte zur Verfügung stehende Breite ein und beginnen in einer neuen Zeile.
<div id="nav">
<h3>Wegweiser</h3>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li>aktuelle Seite</li>
<li><a href="#">Seite 4</a></li>
</ul>
</div>
im css:
#nav li {float: left}
damit erscheinen sie nebeneinander und werden so groß, wie ihr Inhalt es erfordert.
Da die das Hintergrundbild ein bekanntes Format hat, müssen die Listenelemente auch eine definierte Größe haben. Dieses soll oben sein und sich nicht wiederholen.
background-image: url(bla.png);
background-position: 0 0;
background-repeat: no-repeat;
background-color: passende Farbe;
Damit die Schrift jetzt dort hinkommt wo sie hin soll:
text-align: center;
padding-top: 100px;
Jetzt stellst du fest, dass die Boxen etwas zu groß geworden sind, also musst du die Höhe wieder verkleinern.
eine andere Möglichkeit ist die Verwendung von
display: inline-block;
Das hat den Nachteil, dass ältere Browser dies nicht verstehen und den Vorteil, dass man das Aufzählungszeichen nicht entsorgen braucht.
Für die Trennlinie bietet sich an:
#nav li {border-left: 3px solid red;}
und for dem ersten soll sicher keine Begrenzungslinie sein
#nav li:first-child {border-left: 0 none;}
Im selfhtml-wiki kannst du einiges nachschlagen
Matthias
Ich muss mich noch sehr intensiv mit CSS beschäftigen. Danke für diese Antwort, so habe ich schonmal eine Vorlage und erkenne auch die Richtung, in die sich der Quelltext entwickeln sollte.
Melde mich nochmal, falls es noch Problemne gibt.
Grüße Supreme
Hallo,
Sorry, die Liste sieht so aus:
<ul id="topNavi">
<li style="margin-left:25%;">
<a href="URL">
<img src="images/topMenuButton.gif" alt="">
<p>Home</p>
</a>
</li>
das ist ungültiges HTML. Ein a-Element darf keine Blockelemente wie z.B. p enthalten.
Je nachdem, wie der Browser intern "gestrickt" ist, wird er das Markup auf unterschiedliche Weise korrigieren. - Was hat das p-Element hier deiner Meinung nach für einen Sinn? Ich kann keinen erkennen.
<p>Über uns</p>
Das Verstümmeln der Umlaute ist unnötig, wenn du eine Zeichencodierung verwendest, die sie eigentlich darstellen könnte - und das tust du sehr wahrscheinlich (ISO-8859-x, UTF-8). Oder bist du auf US-ASCII eingeschränkt?
Das geschützte Leerzeichen ergibt an dieser Stelle auch keinen Sinn.
Ciao,
Martin
Ein a-Element darf keine Blockelemente wie z.B. p enthalten.
Je nachdem, wie der Browser intern "gestrickt" ist, wird er das Markup auf unterschiedliche Weise korrigieren.
Danke das werde ich mir merken und habe es auch schon korrigiert.
Das Verstümmeln der Umlaute ist unnötig, wenn du eine Zeichencodierung verwendest, die sie eigentlich darstellen könnte
Alles klar.
Das geschützte Leerzeichen ergibt an dieser Stelle auch keinen Sinn.
Wollte halt nen Zeilenumbruch, der vorher da war verhindern.
Grüße
Hallo,
Das geschützte Leerzeichen ergibt an dieser Stelle auch keinen Sinn.
Wollte halt nen Zeilenumbruch, der vorher da war verhindern.
ich dachte mir schon sowas - das ist aber eindeutig eine Sache der Darstellung und daher eigentlich mit CSS zu lösen - beispielsweise über die CSS-Eigenschaft white-space des betreffenden Elements.
Das HTML zu ändern, nur um eine bestimmte Art der Darstellung zu erzielen (oder zu verhindern), ist normalerweise ein No-Go.
Eine typische Verwendung des geschützten Leerzeichens ist dagegen das Zusammenkleben einer Maßeinheit und ihres Zahlenwerts, oder das Binden einer Ordnungszahl an das nachfolgende Wort wie z.B. "René wohnt in der 3. Etage." Hier wäre es ein typographischer Unfall, wenn zwischen "3." und "Etage" zufällig ein Zeilenumbruch käme, der ansonsten aber an jeder Stelle im Fließtext auftreten kann und darf.
Ciao,
Martin