Listen element

[berni]

Hi

ich habe vor gehabt listen elemente <ul><li> mit css zu formatieren.
Ich wollte das bei <li> keine auflistungspunkte erscheinen.
 list-style:none
Die auflistungspunkte sind zwar weg, aber der Platz wird immernoch ganz eingenommen als währen sie noch da.
Wie kann ich das machen das der Platz nicht mehr eingenommen ist?

Nur mal ne frage nebenbei bei. Was ist bei CSS das Display element?
 z.b Display:Block
?

Danke für eure Hilfe...

Schöne Pfingsten!

berni

[Cheatah]

Hi,

Wie kann ich das machen das der Platz nicht mehr eingenommen ist?

wie machst Du es bei beliebigen anderen Elementen, dass ein solcher Platz nicht mehr eingenommen wird, bzw. wie machst Du es, _damit_ er eingenommen wird?

Nur mal ne frage nebenbei bei. Was ist bei CSS das Display element?

Nichts. In CSS gibt es keine Elemente.

Cheatah

[Gunnar Bittersmann]

Hello out there!

Wie kann ich das machen das der Platz nicht mehr eingenommen ist?

wie machst Du es bei beliebigen anderen Elementen, dass ein solcher Platz nicht mehr eingenommen wird, bzw. wie machst Du es, _damit_ er eingenommen wird?

Ergänzend dazu wäre noch zu sagen, dass verschiedene Browser diesen Abstand unterschiedlich über ihr Browserstylesheet erzeugen: manche mit Innen-, manche mit Außenabstand; IIRC je nach Broser auch für das Listen- oder das Listenitem-Element.

Nur mal ne frage nebenbei bei. Was ist bei CSS das Display element?

Nichts. In CSS gibt es keine Elemente.

Hättest berni wenigstens noch sagen können, dass es in CSS „Eigenschaften“ (“properties”) gibt.

See ya up the road,
Gunnar

[Richard]

Hallo,

Nur mal ne frage nebenbei bei. Was ist bei CSS das Display element?
z.b Display:Block

Damit kannst du erreichen, dass der Link das gesamte Elternelement (in dem Fall <li>) ausfüllt. Sinnvoll ist das v.a. beim Hovern. Der IE ist aber zu blöd dafür bzw. macht es nur, wenn du mit der Maus direkt über den Linktext fährst.

Beste Grüße

[Gunnar Bittersmann]

Hello out there!

Damit kannst du erreichen, dass der Link das gesamte Elternelement (in dem Fall <li>) ausfüllt. Sinnvoll ist das v.a. beim Hovern. Der IE ist aber zu blöd dafür bzw. macht es nur, wenn du mit der Maus direkt über den Linktext fährst.

Nö. Falls doch, liegt die Blödheit nicht beim IE. >;->

See ya up the road,
Gunnar

[Richard]

Hallo,

Der IE ist aber zu blöd dafür bzw. macht es nur, wenn du mit der Maus direkt über den Linktext fährst.

Nö.

Äh, doch. Nur dann ändert er die Hintergrundfarbe (wenn eingestellt) des gesamten <li>-Elements. Wenn ich über eine andere, textfreie Stelle des <li>-Elements fahre, passiert nix.

-----------------------------------
|                                 |
| Linktext                        |
|                                 |
-----------------------------------

^^                  ^^
Beim Überfahren     Im IE6 passiert
mit der Maus        hier gar nichts.
wird alles ge-
hovert

Falls doch, liegt die Blödheit nicht beim IE. >;->

Sondern?

Beste Grüße

[Cheatah]

Hi,

Falls doch, liegt die Blödheit nicht beim IE. >;->
Sondern?

an demjenigen der glaubt, :hover würde magisch bei Elementen greifen, die sich ganz woanders befinden als der Mauszeiger, und deswegen das entsprechende Element nicht über den gewünschten Bereich ziehen. In *keinem* Browser reagiert :hover außerhalb des <a>-Elementes, wenn es auf das <a>-Element angewendet wird.

Cheatah

[Richard]

Hallo,

Also nochmal: Es ging um display:block.

HTML:

  
<ul>  
  <li><a href="#">Linktext</a></li>  
</ul>  

CSS:

  
a:link{  
    display:block; color:red; background-color:yellow;  
    }  
  
a:hover{  
    display:block; color:red; background-color:orange;  
    }  

<li> und <ul> werden auch noch aufgehübscht.

Und dann ändert sich die background-color des Links, der aufgrund von display:block die gesamte <li> ausfüllt, im IE nur dann, wenn man mit der Maus direkt über den Linktext fährt.

Beste Grüße

[Gunnar Bittersmann]

Hello out there!

a:link{
    display:block; color:red; background-color:yellow;
    }

a:hover{
    display:block; color:red; background-color:orange;
    }

Und dann ändert sich die background-color des Links, der aufgrund von display:block die gesamte <li> ausfüllt, im IE nur dann, wenn man mit der Maus direkt über den Linktext fährt.

Nein, die Hintergrundfarbe ändert sich bei allen Links, die aufgrund von display:block die gesamte Box des li-Elements ausfüllen.

Warum letzeres nur für unbesuchte Links gilt, ist dein Geheimnis.

See ya up the road,
Gunnar

PS: Ich kann auch keine Unterschiede im Verhalten von IE und FF sehen.

[Richard]

Hallo,

PS: Ich kann auch keine Unterschiede im Verhalten von IE und FF sehen.

In der Navigation meiner Homepage sehe ich genau den eben beschriebenen Effekt.

Beste Grüße

[Axel Richter]

Hallo,

PS: Ich kann auch keine Unterschiede im Verhalten von IE und FF sehen.
In der Navigation meiner Homepage sehe ich genau den eben beschriebenen Effekt.

Wie breit sind Deine A-Elemente in den LI-Elementen?

Ja, sie sollten, weil "display:block;", so breit sein, wie die LI-Elemente. Der IE rendert das aber anders, wenn Elemente mit "Layout" mit Elementen "ohne Layout" gemischt werden. Gib den #navi a eine Breite von 100% und auch der IE macht, was Du willst.

Alternativ kannst Du auch nur für den IE (Conditional Comments) alle Elemente auf den Status haslayout setzen. In Deinem Beispiel:

<!--[if lt IE 7]>
<style>
 * { height: 1px; }
</style>
<![endif]-->

<!--[if IE 7]>
<style>
 * { zoom: 1; }
</style>
<![endif]-->

Kurze Erklärung zum height:1px;: CSS height rendert der IE bis 6 wie min-height.

Dann kannst Du das "richtige" CSS so belassen, wie es für standardkonforme Browser ausreichend ist.

viele Grüße

Axel

[Richard]

Hallo,

Ah ja, gut. Danke euch allen! Hab das gleich geändert, den <a>s width:100% gegeben und a:link, a:visited usw. zu a zusammengefasst.

Beste Grüße

[Gunnar Bittersmann]

Hello out there!

In der Navigation meiner Homepage sehe ich genau den eben beschriebenen Effekt.

Ah ja, ich auch.

Weiß nicht, was das wieder für ein IE-Bug ist, aber Ashura hat’s wohl getroffen.

Warum gibst du die Eigenschaften, die für alle Linkzustände gleich sind, nicht für #navi a an, für #navi a:link etc. nur die jeweiligen?

Ich find deinen CSS-Quelltext auch schwer lesbar. Jens Meierts XHTML- und CSS-Code-Richtlinien bei GMX geben da gute Tips.

Und deine Webseite finde wohl nicht nur ich schwer lesbar. Blaue Schrift ist ungünstig; das hängt mit der Physiologie des menschlichen Auges zusammen.

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Nein, die Hintergrundfarbe ändert sich bei allen Links, die aufgrund von display:block die gesamte Box des li-Elements ausfüllen.

Ich kann Richards Problem momentan auch nicht nachvollziehen, aber gab es da nicht eine Situation, in der der IE zusätzlich zu display:block noch width:100% benötigte?

Einen schönen Sonntag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

aber gab es da nicht eine Situation, in der der IE zusätzlich zu display:block noch width:100% benötigte?

Das ist wohl so eine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>TEST</title>  
    <style type="text/css">  
[code lang=css]      a {  
        background: #CCF;  
        display: block;  
      }  
      a:hover {  
        background: #66C;  
      }

</style>
  </head>
  <body>
    <ul>
      <li><a href="foo">foo</a></li>
      <li><a href="bar">bar</a></li>
    </ul>
  </body>
</html>[/code]

und es geht auch im IE.

      ul {  
        width: 200px;  
      }

dazu und der von Richard beschriebene Effekt tritt auf.

      a {  
        width: 100%;  
      }

dazu und er ist wieder weg.

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

Äh, doch. Nur dann ändert er die Hintergrundfarbe (wenn eingestellt) des gesamten <li>-Elements. Wenn ich über eine andere, textfreie Stelle des <li>-Elements fahre, passiert nix.

Du möchtest bitte nicht verwechseln, für welches Element du Eigenschaften änderst.

---

|                                 |
| Linktext                        |

^^                  ^^
Beim Überfahren     Im IE6 passiert
mit der Maus        hier gar nichts.
wird alles ge-
hovert

^^
                       In meinem IE5
                       passiert auch hier
                       der Farbwechsel

Dein Quelltext wäre hilfreicher gewesen als diese Skizze.

Falls doch, liegt die Blödheit nicht beim IE. >;->

Sondern?

Schaun wa mal. >;->

See ya up the road,
Gunnar

[Orlando]

Hallo berni,

list-style:none
Die auflistungspunkte sind zwar weg, aber der Platz wird immernoch ganz eingenommen als währen sie noch da.
Wie kann ich das machen das der Platz nicht mehr eingenommen ist?

Experimentiere mit [ref:self811;css/eigenschaften/randabstand.htm#margin_left@title=margin-left] und [ref:self811;css/eigenschaften/innenabstand.htm#padding_left@title=padding-left].

Nur mal ne frage nebenbei bei. Was ist bei CSS das Display element?

Siehe [ref:self811;css/eigenschaften/positionierung.htm#display@title=SELFHTML: display]

Grüße
 Roland