Menü, Listenformatieren, erstes Feld andere Farbe als der Rest
Christian 1000
- css
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>
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
Leider muss ich gestehen, das ich mit den Cild Funktionen überhaupt nicht zurecht komme und es auch nicht funktioniert. In keinster weise!
Christan
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
Ich bin genausoweit wie am Anfang, bei meinem ersten Posting. (LEIDER)
Christian
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
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>
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
Om nah hoo pez nyeetz, ChrisB!
Du willst nicht das
[möglicherweise | nach derzeitigem Code]
(überflüssige) Div-Element
Matthias
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
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
Om nah hoo pez nyeetz, Christian 1000!
Warum ist das Div-Element überflüssig?
Matthias
@@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'