✔ verschachtelte Elemete

[Necro_nomicon]

Hallo!

Wenn ich in einer Liste folgenden Code habe

<ul>
<li class="home" title="home"><a href="index.html"><span>home</span></a></li></ul>

und ich moechte nun, dass der Text im span nicht angezeigt wird, wie muss ich das im CSS verschachteln.

li  ... a span {
	display:none;
	}

Weil das "span" liegt ja im "a" und dieses liegt im "li"
sag ich li * a span, dann werden mir die ganzen links nicht mehr angezeigt

 

[Maik]

Hi,

die CSS-Regel ist ohne die drei Punkte zwischen dem li- und a-Element genau richtig für dein Vorhaben, und hab sie dir doch erst gestern (ohne das li-Element wegen einem anderen Kontext) empfohlen. Oder hab ich hier jetzt etwas mißverstanden?

Genauso würde es grundsätzlich in deinem Listenmenü auch so funktionieren:

a span { display:none }

Diese Regel findet aber nun im HTML-Dokument auch mit den Links eine Übereinstimmung, die nicht in einem Listenelement eingebettet sind.

mfg Maik

 

[Necro_nomicon]

hi
Darum geht es ja, dass der link in einem Listenelement steht. Sonst ist es "a span" das ist schon klar.


Die drei Punkte stehen fuer Fragezeichen, die aber wenn man auf "code" ist nicht genommen werden.

Allerdings li a span hat zur Folge, dass zwar alles im span weg ist, aber der Link quasi kein Link mehr ist. Deswegen hab ich ja gedacht, vielleicht gibt es etwas, dass man noch dazwischen setzen kann.

 

[Maik]

Hi,

diese Technik (des blinden Textes) ergibt nur dann einen Sinn, und lässt den Link auch nicht vollständig verschwinden, wenn er folgende CSS-Formatierung erfährt:

a {
display:block; /* Block-Level-Charakteristika */
width:100px; /* Hintergrundbildbreite */
height:25px; /*Hintergrundbildhöhe */
background:url(pfad/zur/grafik.png); /* Hintergrundbild anstelle des Linktextes */
}

Siehe hierzu auch mein CSS-Tutorial CSS-Rollover.

Wird der Text innerhalb des Links ausgeblendet und fehlt eine entsprechende CSS-Regel, die dem Inline-Element "Block-Level-Charakteristika" und eine gewisse Dimension verleiht, fällt es in sich zusammen, und ist im Dokument nicht mehr sicht-/greifbar.

mfg Maik

 

[Necro_nomicon]

Danke!

Schau ich mir sofort an.

+++edit+++
Habs jetzt so probiert und es funktioniert trotzdem nicht.
Ich habe ausserdem nicht nur ein Bild, sondern jedes li hat ein anderes.

Entweder der Link wird angezeigt inkl. Text oder der Text ist weg und damit auch der link.

 

[joschi70]

Hi,

bin jetzt nicht so der CSS Experte, aber könnte man das mit CSS2 nicht so machen?

li>a>span
	{display:none;}

Gruß
joschi

 

[Maik]

Hi,

neben dem eingangs gezeigten "Selektor für Nachfahren" könnte man hier genauso den "Kind-Selektor" anwenden - von dem ich, aus der Vergangenheit noch irgendwie gewohnt, Abstand halte, da die älteren IEs (bis einschliesslich IE6) ihn nicht interpretieren.

mfg Maik

 

[Necro_nomicon]

Hier mal der editierte code:
HTML

<ul id="navcontainers">
   <li class="home" title="home"><a href="index.html"><span>home</span></a></li>
   <li class="verband" title="Verband"><a href="verband.html"><span>Verband</span></a></li> </ul>

CSS

/* li */a span {
	display:none;
	} 


ul#navcontainers {
	list-style-type: none; /* bullets weg */
	padding: 0px;
	margin:0px;
	width: 249px;
	}	
ul#navcontainers li {
	margin:0 0 0 0; 
	} 
* html ul#navcontainers li { /* Fixt den IE6-3px-Gap-Bug */
	margin: -3px 0 0 0;
	}
ul#navcontainers a {
	text-decoration:none;
	width:249px;
	padding:0px;
	text-align: center;
	display: block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */
	margin: 0 0 0 0;
	font: bold .8em verdana, sans-serif;
	color: #000;
	}
li.home, li.verband  {
	background-repeat:no-repeat;
	padding: 0px;
	margin:0px;
	}
li.home 	{
	background-image:url(img/home.jpg);
	height:66px;
	line-height:66px;
	}
li.verband {
	background-image: url(img/verband.jpg);
	height:36px;
	}
#navcontainers li.home a:hover {
	background-image:url(img/home_a.jpg);
	height:66px;
	}
#navcontainers li.verband a:hover {
	background-image: url(img/verband_a.jpg);
	height:36px;
	}

 

[Maik]

Dass der Link bei dir nicht greifbar / anklickbar ist, und ebenso der Grafiktausch beim Überfahren der Links nicht funktioniert, liegt schlichtweg an der fehlenden Höhenangabe im Selektor ul#navcontainers a.

Üblicherweise wird das Hintergrundbild im Link, und nicht im li-Element eingesetzt, und damit es nicht als inhaltsleeres Element im Markup daherkommt, wird in ihm ein "blinder Text" eingefügt.

Schau dir bitte nochmal meinen vorhin gezeigten Regelfall für die Linkformatierung, sowie die angehängten Beispiele in meinem Tutorial etwas genauer an.

mfg Maik

 

[Necro_nomicon]

Aber das Problem mit der Hoehenangabe ist, dass das ganze ja 505px ist, aber jeder Bild hat eine unterschiedliche Hoehe.

Wenn ich jetzt bei der Hoehe nur 10px eingebe, dann wird es interessanterweise richtig angezeigt, allerdings muss man dann den Punkt beim drueberfahren vom Link auch wieder genau erwischen. Aber das mit dem Text nicht einblenden funktioniert somit!
Danke!

Und wenn ich es richtig verstanden habe, dann aendere ich die einzelnen links wie folgt ab:

ul#navcontainers a {
	text-decoration:none;
	width:249px;
	padding:0px;
	text-align: center;
	display: block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */
	margin: 0 0 0 0;
	font: bold .8em verdana, sans-serif;
	color: #000;
	height:10px; /* ganze Groesse ist 505 jedes Bild hat andere Groesse */
	}
ul#navcontainer li.home a:link, ul#navcontainer li.home a:visited {
	width: 249px; /* Grafik-Breite */
	line-height: 66px; /* Grafik-Höhe */
	background-image: url(img/home.jpg); /* Pfad zum Hintergrundbild */
	}

Üblicherweise wird das Hintergrundbild im Link, und nicht im li-Element eingesetzt, und damit es nicht als inhaltsleeres Element im Markup daherkommt, wird in ihm ein "blinder Text" eingefügt.

Ah *Knopf aufgeh*. Dann stricke ich lieber mal alles um, dass es nicht auf li geht, sondern eben auf das a.
Sag dem ganzen, dass es sich nur auf das a im #navcontainer bezieht und definiere die Groesse fuer jedes Bild/Link.