Christian 1000: Menü, Listenformatieren, erstes Feld andere Farbe als der Rest

Ich möchte ein Horizontales Menü verwirklichen. Dabei soll der Home Button, also der erste in der Zeile aber eine andere Farbe haben. Ich wollte das mit <span> verwirklichen, aber ich bekomme es einfach nicht hin. Kann mir jemand sagen, wo ich da etwas falsch mache?

Christian

  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
     "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>menu</title>  
<style type="text/css">  
#menu_horizontal  
	{  
	width:100%;  
	border-bottom:1px solid #666;  
	overflow:hidden;  
	}  
  
#menu_horizontal ul  
	{  
	margin:0;  
	padding:0;  
	list-style:none;  
	}  
  
#menu_horizontal li  
	{  
	display:inline;  
	margin:0;  
	padding:0;  
	}  
  
#menu_horizontal a  
	{  
	color:#FFF;  
	padding:2px 10px 3px 10px;  
	margin:0 3px 0 0;  
	float:left;  
	text-decoration:none;  
	background:#800000;  
	}  
  
#menu_horizontal a:hover  
	{  
	background:#008000;  
	}  
	  
	  
#menu_horizontal span  
	{  
	background:#000080;  
	}	  
</style>  
  
</head>  
<body>  
<div id="menu_horizontal">  
  <ul>  
    <li><span><a href="#">Home</a></span></li>  
    <li><a href="#">Menu 2</a></li>  
	<li><a href="#">Menu 3</a></li>  
	<li><a href="#">Menu 4</a></li>  
	<li><a href="#">Menu 5</a></li>  
  </ul>  
</div>  
</body>  
</html>  
	  
  

  1. Om nah hoo pez nyeetz, Christian 1000!

    Grundsätzlich ist ein Element meist dann überflüssig, wenn sich nur ein einziges Element in ihm befindet.

    Bei dir ist es zudem so, dass von dem Span nichts zu sehen ist, weil der Link dieses überdeckt.

    Du könntest die Pseudoklasse first-child verwenden.

    Matthias

    --
    Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. Leider muss ich gestehen, das ich mit den Cild Funktionen überhaupt nicht zurecht komme und es auch nicht funktioniert. In keinster weise!

      Christan

      1. Hi,

        Leider muss ich gestehen, das ich mit den Cild Funktionen überhaupt nicht zurecht komme und es auch nicht funktioniert. In keinster weise!

        Und was sollen wir mit dieser Aussage jetzt anfangen ...?

        </hilfe/charta.htm#tipps-fuer-fragende>

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Ich bin genausoweit wie am Anfang, bei meinem ersten Posting. (LEIDER)

          Christian

          1. Hi,

            Ich bin genausoweit wie am Anfang, bei meinem ersten Posting. (LEIDER)

            Und auch mit dieser Aussage sind wir immer noch genauso weit wie vorher, weil du uns nicht zeigst, wie du versucht hast, diese an sich simple Sache umzusetzen und in welchem Browser du sie getestet hast - sondern nur „funzt nich“ von dir gibst, was eine reichlich dümmliche Art ist, ein Problem zu beschreiben.

            Bitte berücksichtige die Tipps für Fragende doch endlich - so schwer ist das doch wohl nicht?

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            1. Also gut, ich versuch in einem neuen Anlauf,
              ich glaube aber das ich auf dem Holzweg bin:

              #menu_horizontal a

                      {  
                      color:#FFF;  
                      padding:2px 10px 3px 10px;  
                      margin:0 3px 0 0;  
                      float:left;  
                      text-decoration:none;  
                      background:#800000;  
                      }  
                
              #menu_horizontal:first-cild a  
                      {  
                      background:#000800;  
                      }	
              

              Kann ich nicht einfach eine Klasse (.class) machen und den einen LINK, irgendwie seperat formieren)

              <li><a class="seperat" href="#">Home</a></li>

              Christian

                
                
                
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                   "http://www.w3.org/TR/html4/loose.dtd">  
              <html>  
              <head>  
              <title>menu</title>  
              <style type="text/css">  
              #menu_horizontal  
                      {  
                      width:100%;  
                      border-bottom:1px solid #666;  
                      overflow:hidden;  
                      }  
                
              #menu_horizontal ul  
                      {  
                      margin:0;  
                      padding:0;  
                      list-style:none;  
                      }  
                
              #menu_horizontal li  
                      {  
                      display:inline;  
                      margin:0;  
                      padding:0;  
                      }  
                
              #menu_horizontal a  
                      {  
                      color:#FFF;  
                      padding:2px 10px 3px 10px;  
                      margin:0 3px 0 0;  
                      float:left;  
                      text-decoration:none;  
                      background:#800000;  
                      }  
                
              #menu_horizontal:first-cild a  
                      {  
                      background:#000800;  
                      }		  
              		  
              		  
              #menu_horizontal a:hover  
                      {  
                      background:#008000;  
                      }  
                
                
                
              </style>  
                
              </head>  
              <body>  
              <div id="menu_horizontal">  
                <ul>  
                  <li><a href="#">Home</a></li>  
                  <li><a href="#">Menu 2</a></li>  
                  <li><a href="#">Menu 3</a></li>  
                  <li><a href="#">Menu 4</a></li>  
                  <li><a href="#">Menu 5</a></li>  
                </ul>  
              </div>  
              </body>  
              </html>  
              
              
              1. Hi,

                #menu_horizontal:first-cild a

                Das ist weder die korrekte Schreibweise, noch die richtige Platzierung.

                Du willst nicht das (überflüssige) Div-Element mit der ID #menu_horizontal selektieren, wenn es das erste Kind von etwas ist - sondern ...?

                MfG ChrisB

                --
                RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                1. Om nah hoo pez nyeetz, ChrisB!

                  Du willst nicht das

                  [möglicherweise | nach derzeitigem Code]

                  (überflüssige) Div-Element

                  Matthias

                  --
                  Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
                2. Du willst nicht das (überflüssige) Div-Element mit der ID #menu_horizontal selektieren, wenn es das erste Kind von etwas ist - sondern ...?

                  Sorry das ich immer wieder Frage, aber ich kapier es nicht.
                  Warum ist das Div-Element überflüssig?
                  Und sondern kapier ich auch nicht?

                  Christian

                  1. Hi,

                    Du willst nicht das (überflüssige) Div-Element mit der ID #menu_horizontal selektieren, wenn es das erste Kind von etwas ist - sondern ...?

                    Sorry das ich immer wieder Frage, aber ich kapier es nicht.
                    Warum ist das Div-Element überflüssig?

                    Welche Funktion hat es deiner Meinung nach?

                    Und sondern kapier ich auch nicht?

                    Das ist eine an dich gestellte Frage, die du zu beantworten versuchen solltest, um zur Lösung zu gelangen.

                    Unter http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child gibt es ein weiteres Beispiel, an dem du die Funktionsweise von :first-child nachvollziehen kannst.

                    MfG ChrisB

                    --
                    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                  2. Om nah hoo pez nyeetz, Christian 1000!

                    Warum ist das Div-Element überflüssig?

                    1. Antwort, 1. Satz

                    Matthias

                    --
                    Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
                  3. @@Christian 1000:

                    nuqneH

                    Du willst nicht das (überflüssige) Div-Element mit der ID #menu_horizontal selektieren, wenn es das erste Kind von etwas ist - sondern ...?
                    Und sondern kapier ich auch nicht?

                    Sondern, wie du selbst im Thema schriebst: das „erste Feld“. Welche HTML-Elemente stehen denn für deine „Felder“?

                    Qapla'

                    --
                    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                    (Mark Twain)