ul li format Probleme

[Hubi]

Ich fange gerade an mich mit css zu beschäftigen und habe ein Problem mit der ul li Formation.

Kann mir jemand helfen wo ich den Fehler hier habe, es wird nämlich keine Formation angezeigt.

Danke

Hubi

#menu{background:#fff}	  
  
ul#menu {list-style-type: none;margin:0;padding:0;}	  
li#menu{width:120px; height:40px; border: 1px solid #000; float:left;}	  
li#menu a:hover{background:#c0c0c0}

<div id="titel">  
<ul>  
<li><a href="URI">titel</a></li>  
<li><a href="URI">titel</a></li>  
<li><a href="URI">titel</a></li>  
<li><a href="URI">titel</a></li>  
</ul>  
</div>

[ChrisB]

Hi,

Kann mir jemand helfen wo ich den Fehler hier habe, es wird nämlich keine Formation angezeigt.

#menu{background:#fff}

ul#menu {list-style-type: none;margin:0;padding:0;}
li#menu{width:120px; height:40px; border: 1px solid #000; float:left;}
li#menu a:hover{background:#c0c0c0}

  
Dir scheint nicht mal ansatzweise klar zu sein, was der Selektor #menu bedeutet. Bitte informiere dich, bspw. im Wiki.  
<http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_(Selektoren)>  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[suit]

Ich fange gerade an mich mit css zu beschäftigen und habe ein Problem mit der ul li Formation.

Kann mir jemand helfen wo ich den Fehler hier habe, es wird nämlich keine Formation angezeigt.

Du formatierst ein ul-Elemente mit der ID "menu" obwohl diese in deinem HTML nicht exsitieren.

Du formatierst li-Elemente mit der ID "menu" obwohl diese in deinem HTML nicht exstieren.

Nebst dessen kann in demselben Dokument unmöglich ein li-Element und ein ul-Element mit derselben ID vorkommen (bzw. darf nicht).

#menu{background:#fff}

ul#menu {list-style-type: none;margin:0;padding:0;}
li#menu{width:120px; height:40px; border: 1px solid #000; float:left;}
li#menu a:hover{background:#c0c0c0}

>   
>   
> ~~~html

<div id="titel">  

> <ul>  
> <li><a href="URI">titel</a></li>  
> <li><a href="URI">titel</a></li>  
> <li><a href="URI">titel</a></li>  
> <li><a href="URI">titel</a></li>  
> </ul>  
> </div>

Ich denke dein HTML sollte eher so ausehen[1]

<div id="menu">  
  <ul>  
    <li><a href="/foo/">foo</a></li>  
    <li><a href="/bar/">bar</a></li>  
    <li><a href="/baz/">baz</a></li>  
    <li><a href="/qux/">qux</a></li>  
  </ul>  
</div>

alternativ in HTML5 auch so

<nav id="menu">  
  <ul>  
    <li><a href="/foo/">foo</a></li>  
    <li><a href="/bar/">bar</a></li>  
    <li><a href="/baz/">baz</a></li>  
    <li><a href="/qux/">qux</a></li>  
  </ul>  
</nav>  

[1] ja, ich bin mir der Redundanz des div-Elemens bewusst, es erleichtert aber die Migration auf HTML5 und erlaubt zudem Spielereien wie etwas das hier (um bei Screenreader zumindest eine sinnvolle Überschrift zu haben).

<div id="menu">  
  <h2>Hauptmenü</h2>  
  <ul>  
    <li><a href="/foo/">foo</a></li>  
    <!-- ... -->  
  </ul>  
</div>

[Hubi]

Danke für die Hinweise:

Jetzt schauts schon besser aus, nur es ist trotz Anweisung margin:0;padding:0; nicht links am Seitenrand sondern gut 100 Pixel davon entfernt.

FRAGE: Läuft alles unter html5 auch auf allen alten Browser!!!!

.menu ul{margin:0;padding:0;}  
.menu li{list-style-type: none;width:120px; height:40px; border: 1px solid #000; float:left;}  
.menu li:hover{background:#c0c0c0;}  

 <ul class="menu">  
    <li><a href="/foo/">foo</a></li>  
    <li><a href="/bar/">bar</a></li>  
    <li><a href="/baz/">baz</a></li>  
    <li><a href="/qux/">qux</a></li>  
  </ul>  

[suit]

Jetzt schauts schon besser aus, nur es ist trotz Anweisung margin:0;padding:0; nicht links am Seitenrand sondern gut 100 Pixel davon entfernt.

Ohne das restliche CSS bzw. das HTML lässt sich das nicht beantworten - die Standardformatierung von ul- oder li-Elementen erklärt jedenfalls keine 100 Pixel.

FRAGE: Läuft alles unter html5 auch auf allen alten Browser!!!!

Zuerst etwas allgemeins:

Fragen werden in unserer Sprache gewöhnlicherweise mit einem Fragezeichen beendet.

Wenn mehrere Fragezeichen oder Ausrufezeichen in einem natürlichsprachlichen deutschen Text aufeinanderfolgen, macht mal ziemlich sicher etwas falsch.

Mit anderen Worten: Satzzeichen sind keine Rudeltiere.

Um deine Frage zu beantworten:
Für den Internet Explorer bis einschließlich Version 8 ist der sg. <http://ejohn.org/blog/html5-shiv/@HTML5 Shiv> notwendig - dh, du bist auf JavaScript angewiesen, wenn du die neuen HTML5-Elemente nutzen willst.

Solltest du beim HTML-4.01-Sprachumfang bleiben aber einfach nur einen HTML5-Doctype verwenden wolle, ist das aber kein Problem.

<ul class="menu">

  
Wenn ein Menü dieser Art mehrmals in einem Dokument vorkommen kann ist eine Klasse die richtige Wahl, wenn dieses Menü in der Form aber exakt genau 1x vorkommt - was gewöhnlicherweise der Fall ist - ist eine id die bessere Wahl.

[troll]

Das ist der Fehler !

<html>  
<head>  
<title></title>  
<style type="text/css">  
  ul {margin: 0; padding: 0;}  
  li {margin: 0; padding: 0; list-style: none;}  
</style>  
</head>  
<body>  
  <ul>  
    <li>Beispiel 1</a></li>  
    <li>Beispiel 2</a></li>  
    <li>Beispiel 3</a></li>  
  </ul>  
</body>  
</html>

<html>  
<head>  
<title></title>  
<style type="text/css">  
.menu ul{margin: 0; padding: 0;}  
.menu li{margin: 0; padding: 0;list-style: none;}  
</style>  
</head>  
<body>  
<ul class="menu">  
    <li>foo</li>  
    <li>bar</li>  
    <li>baz</li>  
</ul>  
</body>  
</html>

@suit,
da deine Antwort auf viel Wissen zu basieren scheint
frage ich mich wieso du als ein Möchtegernprofi in dieser Materie
den Fehler im Code des Themenerstellers nicht siehst?
Eben solche dummen Antworten wie deine haben mich vor 2 Jahren dieses Forums verwiesen.
Mehr als nur Klugscheissern sehe ich in deiner Antwort nicht !

Und wenn du solch ein Profi bist dann erkläre mal
wieso die beiden oberen HTML obwohl sie doch identisch
sind dennoch im Browser unterschiedlich ausgeführt werden.
Ansonsten halt die Backen still,
denn solche Antworten nehmen jedem Newbie die Lust am Programieren !
Kein wunder, dass du ne spam-Email-Adresse hast -.-

[ChrisB]

Hi,

Eben solche dummen Antworten wie deine haben mich vor 2 Jahren dieses Forums verwiesen.

Offenbar nicht erfolgreich genug.

Bitte teile uns mit, was wir machen müssen, um für mindestens zwei weitere Jahre unsere Ruhe vor deinem Dummgetrolle zu haben, Danke.

Mehr als nur Klugscheissern sehe ich in deiner Antwort nicht !

Bei dir sehe ich nicht mal das Klug.

MfG ChrisB

[suit]

Es heisst ja eigentlich "Don't feed" aber ich bin offebar nicht der erste.

da deine Antwort auf viel Wissen zu basieren scheint
frage ich mich wieso du als ein Möchtegernprofi in dieser Materie
den Fehler im Code des Themenerstellers nicht siehst?

Der Code des OP ist augenscheinlich fehlerfrei, nichts erklärt die beschriebenen 100 Pixel Abstand vom linken Rand. Period.

Eben solche dummen Antworten wie deine haben mich vor 2 Jahren dieses Forums verwiesen.

Ich sehe die Antworten nicht als dumm an, immerhin hat meine erste antwort dem OP bereits signifikant weitergeholfen.

Mehr als nur Klugscheissern sehe ich in deiner Antwort nicht !

Kannst du das näher erläutern, ich kann dir nicht folgen. Meine erste Antwort in diesem Thread ist technisch einwandfrei und

Und wenn du solch ein Profi bist dann erkläre mal
wieso die beiden oberen HTML obwohl sie doch identisch

Sie sind nicht identisch, zudem fehlt jeweils der Doctype was einen durchschnittlichen Browser in ziemlich unkontrolliertes Verhalten zwingt (Quirks).

denn solche Antworten nehmen jedem Newbie die Lust am Programieren !

HTML programmiert man nicht.

Kein wunder, dass du ne spam-Email-Adresse hast -.-

Wieso? Eine an diese Adresse verschickte E-Mail kommt einwandfrei bei mir an - es ist lediglich ein zeitlich begrenzt genutztes Alias für meine reguläre Adresse - die ist übrigens auch kein Geheimnis.

Und jetzt GTFO - EOD meinerseits.

[Gunnar Bittersmann]

@@suit:

nuqneH

Wenn mehrere Fragezeichen oder Ausrufezeichen in einem natürlichsprachlichen deutschen Text aufeinanderfolgen, macht mal ziemlich sicher etwas falsch.

‽‽ ;-)

<ul class="menu">

Wenn ein Menü dieser Art mehrmals in einem Dokument vorkommen kann ist eine Klasse die richtige Wahl

@role="navigation" (ARIA). Dann kann man sich auch eine Klasse sparen (es sein denn, man legt auf IE < 7 noch Wert).

Qapla'

[MudGuard]

Hi,

FRAGE: Läuft alles unter html5 auch auf allen alten Browser!!!!

Ja natürlich. Da die Programmierer der Browser damals noch nicht wissen konnten, was alles wie in HTML5 definiert sein wird, haben sie einfach vorgesorgt und vorsichtshalber alle, aber auch wirklich alle, Möglichkeiten schon mal implementiert.

cu,
Andreas