nicht angemeldet
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Matthias Apsel
Hallo Leute,
ich habe eine Navigationsleiste erstellt und würde gern in den Submenüs noch Trennlinien haben.
Ich habe es schon mit folgendem ausprobiert:
CSS
~~~css
.trennlinie {
border-top: 1px solid black;
}
und dann in den body-teil so in die betroffenden Subnavigationen (li-Tags) eingefügt:
<li class="trennlinie">Beispiel</li>
Da war dann das Problem, dass ich nur jeweils den ersten il-Tag benutzen konnte, die restlichen li-Tags wurden zwar angezeigt, aber ich konnte nicht drauf klicken.
Sobald ich versucht habe auf einen untergelegenden li-Tag zu klicken, ging die Subnavigation zu.
Dann habe ich noch "border-top: 1px solid black;" direkt in meinem Navigationscode eingefügt.
Dann waren aber oberhalb der li-Tags überall Trennlinien.
Was ja auch so sein soll, aber dann ist zwischen dem ul-Tag und dem erstem li-Tag auch eine Linie.
Dort soll aber keine sein.
Hier ist mein CSS-Code:
~~~css
/* Navigationsleiste */
a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}
#nav {background:#31b6e7; height:28px; font:normal 15px/28px arial, verdana, sans-serif; width:900px; margin:0 auto; position:relative;}
#nav ul {margin:0; padding:0; list-style:none;}
#nav ul.menu {position:absolute; overflow:hidden;}
#nav .menu .level1-li {float:left; width:150px; margin-top:-300px;}
#nav .menu a {display:block; width:150px; text-decoration:none; text-align:center; color:#fff;}
#nav .menu a.level1-a {position:relative; float:left; margin-right:-149px; margin-top:300px;}
#nav .menu .sub {background:#0099cc; float:left; margin-top:-28px; padding-top:28px;}
#nav .menu .sub a {background:#f8f8f8; color:#000000; position:relative; margin-right:-1px;}
#nav .menu a:hover,
#nav .menu a:focus,
#nav .menu a:active {background:#7fcde9; margin-right:0;}
Und hier der HTML-Code:
~~~html
/* Tags */
<div id="nav">
<ul class="menu">
<li class="level1-li"><a class="level1-a" href="#url">Startseite</a></li>
<li class="level1-li"><a class="level1-a" href="#url">News</a>
<ul class="sub">
<li><a href="#url">Android</a></li>
<li><a href="#url">Apps</a></li>
<li><a href="#url">Spiele</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#">Apps</a>
<ul class="sub">
<li><a href="#url">Alle Apps</a></li>
<li><a href="#url">Spiele</a></li>
<li><a href="#url">Hintergründe</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#">Cheats/Hacks</a>
<ul class="sub">
<li><a href="#url">Apps</a></li>
<li><a href="#url">Tutorials</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#">Tutorials</a>
<ul class="sub">
<li><a href="#url">Cheats/Hacks</a></li>
<li><a href="#url">Andere Tutorials</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#url">Bilder</a></li>
</ul>
</div>
ich habe eine Navigationsleiste erstellt und würde gern in den Submenüs noch Trennlinien haben.
Meinst Du so?
Cheers,
Baba
ich habe eine Navigationsleiste erstellt und würde gern in den Submenüs noch Trennlinien haben.
Meinst Du so?
Cheers,
Baba
ja solche Trennlinien habe ich optisch gemeint. Aber ich kann in den Subnavigationen nichts auswählen.
Wenn ich z.B. mit der Maus auf News gehe, werden die Subnavigationen angezeigt, aber wenn man dann runter geht auf Android, schließt sich die Subnavigation.
Om nah hoo pez nyeetz, G_Note!
verzichte zunächst auf die Klassen, sie blähen dein Markup unnötig auf. Verwende zur Selektion dann Kombinatoren. Wenn du das hast, überlegst du dir, welche Listenelemente einen unteren oder oberen Border haben sollen, fügst aber keinesfalls zusätzliche Elemente nur aus Designgründen ein.
Schau erst mal, ob du auch ohne Klassen die bisherige Funktionalität hinbekommst. Das dauert zwar etwas länger, aber du hast mehr davon.
Matthias
@@G_Note:
nuqneH
<li class="trennlinie">Beispiel</li>
Präsentationsbezogene Klassen sind nie™ eine gute Idee.
Dann habe ich noch "border-top: 1px solid black;" direkt in meinem Navigationscode eingefügt.
Sollen wir jetzt raten, für welchen Selektor?
Was ja auch so sein soll, aber dann ist zwischen dem ul-Tag und dem erstem li-Tag auch eine Linie.
Dort soll aber keine sein.
Es gibt die Pseudoklasse [link:http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/first-child@title=:first-child]. Und es gibt die Pseudoklasse [link:http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/not@title=:not()].
a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}
'direction:ltr' ist vermutlich überflüssig, weil Default. (Es sei denn, du hast für ein Vorfahrenelement "rtl" gesetzt.)
'outline:0' ist grober Unfug: Das macht die Seite per Tastatur unbedienbar. Weg damit! (Du kannst es verwenden, wenn du eine andere Kennzeichnung von fokussierten Links vorsiehst.)
<div id="nav">
Warum kein nav-Element?
<ul class="menu">
Die Klasse "menu" ist überflüssig. Das Element lässt sich als Kind '#nav > ul' selektieren.
<li class="level1-li">
Die Klasse "level1-li" ist überflüssig. Das Element lässt sich als Kind '#nav > ul > li' selektieren.
<a class="level1-a" href="#url">Startseite</a>
Die Klasse "level1-a" ist überflüssig. Das Element lässt sich als Kind '#nav > ul > li > a' selektieren.
<ul class="sub">
Die Klasse "level1-a" ist überflüssig. Das Element lässt sich als Kind '#nav > ul > li > ul' selektieren. Oder wenn es keine weiteren Untermenüs gibt, als Nachfahre '#nav > ul ul'.
Qapla'
@@Gunnar Bittersmann:
nuqneH
<ul class="sub">Die Klasse "level1-a" ist überflüssig.
Wer einen C&P-Fehler findet, gibt ihn bitte beim Personal ab.
Qapla'
Ich wollte eigentlich nicht meinen Quellcode begutachten lasse :)
trotzdem danke.
aber wie ich jetzt eine Trennlinie mache weiß ich immer noch nicht.
@@G_Note:
nuqneH
Ich wollte eigentlich nicht meinen Quellcode begutachten lasse :)
Das gehört hier zum Service.
aber wie ich jetzt eine Trennlinie mache weiß ich immer noch nicht.
Bspw. mit border. Und wie du eine Trennlinie nicht machst (da, wo keine hin soll), hatte ich dir eben gesagt.
Qapla'
@@G_Note:
nuqneH
aber wie ich jetzt eine Trennlinie mache weiß ich immer noch nicht.
Bspw. mit border. Und wie du eine Trennlinie nicht machst (da, wo keine hin soll), hatte ich dir eben gesagt.
Qapla'
mit border hats nicht funktioniert.
Also muss ich die 2. Variante machen.
Allerdings weiß ich nicht wo ich das in meinem Quellcode angeben muss.
@@G_Note:
nuqneH
mit border hats nicht funktioniert.
Also muss ich die 2. Variante machen.
Was immer die 2. sein soll, du braucht beide.
Qapla'
ich hab das jetzt mal mit a:not probiert. Und ich wollte fragen ob der Quellcode so richtig ist?! ~~~css
a:not([border-top*="border."]) {border-top: 1px solid black;}
und ich weiß nicht was ich in den body Bereich einfügen muss damit einige Trennlinien nicht angezeigt werden. Währe nett wenn ihr mir da noch einmal helfen könntet.
Om nah hoo pez nyeetz, G_Note!
ich hab das jetzt mal mit
a:notprobiert. Und ich wollte fragen ob der Quellcode so richtig ist?! ~~~css
a:not([border-top*="border."]) {border-top: 1px solid black;}
nein, der Quellcode ist falsch. Ich habe dir bereits empfohlen, von Grund auf neu zu beginnen, damit du einen maximalen Wissenszuwachs hast, anstatt durch zusammengestückelte Code-Stückchen zufällig zu einem Ergebnis zu kommen.
Auf diesem Weg werden dich hier viele unterstützen.
Du könntest damit beginnen, dir den [Unterschied zwischen dem Namen eines Attributs und seinem Wert](http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html) klarzumachen.
Matthias
--
1/z ist kein Blatt Papier.
nein, der Quellcode ist falsch. Ich habe dir bereits empfohlen, von Grund auf neu zu beginnen, damit du einen maximalen Wissenszuwachs hast, anstatt durch zusammengestückelte Code-Stückchen zufällig zu einem Ergebnis zu kommen.
ich habe die Navigationsleiste jetzt komplett überarbeitet:) : http://tbprojects.bplaced.net/Navigation6.html
Auf diesem Weg werden dich hier viele unterstützen.
aber eins hab ich noch nicht hinbekommen.
wenn ich auf ein OberThema gehe (bsp: News)
wird der Hintergrund dunkelblau #09c.
Das ist ja auch richtig, aber wenn ich dann auf die Untertehmen gehen wird der Hintergrund wieder normal. Aber wie mache ich dass der Hintergrund für das bestimmte Thema bei der Auswahl der Unterthemen dunkelblau bleibt?
nein, der Quellcode ist falsch. Ich habe dir bereits empfohlen, von Grund auf neu zu beginnen, damit du einen maximalen Wissenszuwachs hast, anstatt durch zusammengestückelte Code-Stückchen zufällig zu einem Ergebnis zu kommen.
ich habe die Navigationsleiste jetzt komplett überarbeitet:) : http://tbprojects.bplaced.net/Navigation6.html
Auf diesem Weg werden dich hier viele unterstützen.
aber eins hab ich noch nicht hinbekommen.
wenn ich auf ein OberThema gehe (bsp: News)
wird der Hintergrund dunkelblau #09c.
Das ist ja auch richtig, aber wenn ich dann auf die Untertehmen gehen wird der Hintergrund wieder normal. Aber wie mache ich dass der Hintergrund für das bestimmte Thema bei der Auswahl der Unterthemen dunkelblau bleibt?
niemand der das weiß?
Om nah hoo pez nyeetz, G_Note!
in HTML<5 dürfen a-Elemente keine Überschriften enthalten, In HTML5 ist das zwar erlaubt, aber sinnvoll ist das in deinem Zusammenhang nicht.
niemand der das weiß?
Du hoverst die Überschriften, wenn du die Listenelemente hoverst, sollte das Problem nicht auftreten.
Matthias
Du hoverst die Überschriften, wenn du die Listenelemente hoverst, sollte das Problem nicht auftreten.
ich möchte ja dass beim hovern der listenelemente auch die überschrift gehovert wird.
Om nah hoo pez nyeetz, G_Note!
ich möchte ja dass beim hovern der listenelemente auch die überschrift gehovert wird.
<li><h1>Überschrift</h1>
<ul>
<li>
Das untergeordne li-Element ist Kind des übergeordneten li-Elements, aber kein Kind der Überschrift
Matthias
Om nah hoo pez nyeetz, G_Note!
ich möchte ja dass beim hovern der listenelemente auch die überschrift gehovert wird.
<li><h1>Überschrift</h1>
<ul>
<li>
> Das untergeordne li-Element ist Kind des übergeordneten li-Elements, aber kein Kind der Überschrift
>
>
> Matthias
ich versteje nicht ganz...das habe ich doch so
Om nah hoo pez nyeetz, G_Note!
ich versteje nicht ganz...das habe ich doch so
Ich hab dir bereits geschrieben, dass die Struktur nicht optimal ist. Und auch wie du das Problem lösen kannst - nämlich :hover für li.
BTW: Ich kann mich des Eindrucks nicht erwehren, dass du nicht so richtig bereit bist, mit den gegebenen Hinweisen zu arbeiten. Eine fertige Lösung gibt es hier nicht, zumal die Hinweise schon sehr nah an der fertigen Lösung sind.
Matthias
Om nah hoo pez nyeetz, G_Note!
ich versteje nicht ganz...das habe ich doch so
Ich hab dir bereits geschrieben, dass die Struktur nicht optimal ist. Und auch wie du das Problem lösen kannst - nämlich :hover für li.
okay ich habs jetzt verstanden und so gemacht...aber so wie es vorher war hat es mir besser gefallen:)
also vielen dank für deine/eure hilfreichen Tipps;)
jetzt muss ich nur noch die Webseiten füllen...
BTW: Ich kann mich des Eindrucks nicht erwehren, dass du nicht so richtig bereit bist, mit den gegebenen Hinweisen zu arbeiten. Eine fertige Lösung gibt es hier nicht, zumal die Hinweise schon sehr nah an der fertigen Lösung sind.
es liegt nicht daran, dass ich nicht will sondern ich kann nicht. es fällt mir schwer Sachen die ich nicht selbst erlerne zu verstehen.
Tach!
BTW: Ich kann mich des Eindrucks nicht erwehren, dass du nicht so richtig bereit bist, mit den gegebenen Hinweisen zu arbeiten. Eine fertige Lösung gibt es hier nicht, zumal die Hinweise schon sehr nah an der fertigen Lösung sind.
es liegt nicht daran, dass ich nicht will sondern ich kann nicht. es fällt mir schwer Sachen die ich nicht selbst erlerne zu verstehen.
In dem Fall ist es besser, wenn du die Hinweise nicht einfach ignorierst, sondern dir bewusst dieses Verständnisproblem eingestehst und das auch dem Antwortenden mitteilst, sonst kann man schlecht das Nicht-Verstehen-Wollen vom Nicht-Verstehen-Können unterscheiden. Niemand wird dich wegen Letzterem verurteilen. Du kannst dann aber mit weiteren Erläuterungen und Hilfe beim Verstehen rechnen.
dedlfix.
Ich wollte eigentlich nicht meinen Quellcode begutachten lasse :)
trotzdem danke.
aber wie ich jetzt eine Trennlinie mache weiß ich immer noch nicht.
Das ist normal bei Gunnar er klugscheisst und korrigiert Fehler anderer, sinnvoll die Fragestellung beantwortet wird aber nur selten.
Das ist normal bei Gunnar er klugscheisst und korrigiert Fehler anderer, sinnvoll die Fragestellung beantwortet wird aber nur selten.
Macht er doch aber hier.
Bei einem "funktioniert nicht" in die Glaskugel gucken und raten funktioniert auch nicht, da der Fehler überall sein könnte.
MfG
bubble