✔ verschachtelte Elemete

Status
Nicht offen für weitere Antworten.
Ich persönlich würde die einzelnen Bezeichner (.home, .verband) der Listenpunkte den Links als ihren ID-Bezeichner übergeben, da diese im Dokument wohl jeweils nur einmal vorkommen dürften, eine Klasse aber zur Gruppierung mehrerer Elemente eingesetzt wird, und desweiteren auch nur im u.g. Selektor die jeweilige Höhe der Links angeben, wenn sie sich von Link zu Link unterscheidet, und auf diese "Alibi-Höhe" im vorangegangen Selektor vollständig verzichten.

Im übrigen wird mit der line-height-Deklaration alleine in allen mir zur Verfügung stehenden Browser, das Hintergrundbild weiterhin nicht in seiner vollständigen Höhe angezeigt, sondern eben nur aus der vorangegangen Regel 10px hoch.

Code: 
<ul id="navcontainers">
   <li><a href="index.html" id="home" title="home"><span>home</span></a></li>
   <li><a href="verband.html" id="verband" title="verband"><span>Verband</span></a></li>
</ul>
Code: 
ul#navcontainers li a#home:link, ul#navcontainers li a#home:visited {
        width: 249px; /* Grafik-Breite */
        height:66px; /* Grafik-Höhe */
        line-height: 66px; /* Grafik-Höhe */
        background-image: url(img/home.jpg); /* Pfad zum Hintergrundbild */
        }
mfg Maik
 
Habe jetzt alles nach deinem Tutorial umgebaut und es funktioniert einwandfrei.

Werde jetzt nur, wie du in deinem letzten Post geschrieben hast die Klasse (class) mit ID-Bezeichner im HTML wie auch CSS austauschen.

Ich musste nur bei deinem Tutorial noch folgendes hinzufuegen:
HTML: 
/* Fixt den IE6-3px-Gap-Bug */
* html ul#nav1 li { 
	margin: -3px 0 0 0;
	}

weil sonst macht er unter jedem Menuepunkt einen Abstand. Wobei ich aber im
a
margin:0 0 0 0
habe

:))
 
hm....wenn ich die Klassen aendere dann wird der link nicht mehr angezeigt.

So hat er funktioniert mit class=""
HTML: 
ul#nav1 li.verband a:active, ul#nav1 li.verband a:link, ul#nav1 li.verband a:visited, ul#nav1 li.verband a#current {
	background-image: url(img/verband.jpg);
	height:36px;
	}

Mit id="" umgeschrieben:
HTML: 
ul#nav1 li a#home a:active, ul#nav1 li a#home a:link, ul#nav1 li a#home a:visited, ul#nav1 li a#home a#current {
	background-image:url(img/home.jpg);
	height:66px;
	line-height:66px;
	}

	}
 
Necro_nomicon hat gesagt.:
Ich musste nur bei deinem Tutorial noch folgendes hinzufuegen:
HTML: 
/* Fixt den IE6-3px-Gap-Bug */
* html ul#nav1 li { 
	margin: -3px 0 0 0;
	}

weil sonst macht er unter jedem Menuepunkt einen Abstand. Wobei ich aber im
a
margin:0 0 0 0
habe

:))
Zum Vergrößern anklicken....
Der erste margin-Wert steht für den oberen Außenabstand, der "IE6 Three Pixel Gap"-Bug taucht aber nur auf der horizontalen Achse, und das innerhalb einer Floatumgebung auf, von der ich aber aus deinem gezeigten CSS-Code nichts erkennen kann.

Da dieser Darstellungsfehler in allen bisherigen IE-Versionen auftritt, der von dir angewandte "Star-HTML-Hack" vom IE7 aber nur dann interpretiert wird, wenn ihm das HTML-Dokument im Quirksmodus übergeben wird, würde ich die CSS-Browserweiche mit Hilfe eines "Conditional Comments" im Anschluß an das "normale" Stylesheet setzen, der ausschliesslich vom IE (Win) gelesen und interpretiert wird, und darin diese Regel anwenden:

Code: 
<style type="text/css">
...
</style>
<!--[if lte IE 7]>
<style type="text/css">
ul#navcontainers li {
width:249px;
float:left;
}
</style>
<![endif]-->
bzw.

Code: 
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie_fix.css">
<![endif]-->
mfg Maik
 
Necro_nomicon hat gesagt.:
hm....wenn ich die Klassen aendere dann wird der link nicht mehr angezeigt.

So hat er funktioniert mit class=""
HTML: 
ul#nav1 li.verband a:active, ul#nav1 li.verband a:link, ul#nav1 li.verband a:visited, ul#nav1 li.verband a#current {
	background-image: url(img/verband.jpg);
	height:36px;
	}

Mit id="" umgeschrieben:
HTML: 
ul#nav1 li a#home a:active, ul#nav1 li a#home a:link, ul#nav1 li a#home a:visited, ul#nav1 li a#home a#current {
	background-image:url(img/home.jpg);
	height:66px;
	line-height:66px;
	}

	}
Zum Vergrößern anklicken....

Ich hab dir doch vor noch nicht mal einer Stunde in Post #11 gezeigt, wie der ID-Bezeichner und die Pseudoklasse zusammengeführt werden, außerdem wird in dieser Gruppierung die :active-Pseudoklasse nach der :visited-Pseudoklasse genannt - also:

Code: 
ul#nav1 li a#home:link, ul#nav1 li a#home:visited, ul#nav1 li a#home:active { }
Tja, und was hat es hiermit auf sich?

Code: 
ul#nav1 li a#home a#current
Ein Element kann/darf in seinem id-Attribut nur einen einzigen ID-Bezeichner besitzen.

Möglicherweise willst du ja darauf hinaus:

Code: 
ul#nav1 li#current a#home { }
mfg Maik
 
Ich habs jetzt ausprobiert, allerdings aendert das bei mir nichts, die Loesung, die ich davor hatte schon.

Deine Loesung:
im HTML
HTML: 
<link rel="stylesheet" type="text/css" href="ie_fix.css">
im CSS ie_fix.css
HTML: 
ul#navcontainers li {
width:249px;
float:left;
}


Meine alte Loesung:
HTML: 
* html ul#nav1 li { 
	margin: -3px 0 0 0;
 
Maik hat gesagt.:
Ich hab dir doch vor noch nicht mal einer Stunde in Post #11 gezeigt, wie der ID-Bezeichner und die Pseudoklasse zusammengeführt werden, außerdem wird in dieser Gruppierung die :active-Pseudoklasse nach der :visited-Pseudoklasse genannt - also:

Code: 
ul#nav1 li a#home:link, ul#nav1 li a#home:visited, ul#nav1 li a#home:active { }
Zum Vergrößern anklicken....



Ja, dort hab ich nachgesehn. Sorry, ich hab tausendmal druebergelesen, dass ich da noch ein "a:" drinnen habe.
 
Necro_nomicon hat gesagt.:
Ich habs jetzt ausprobiert, allerdings aendert das bei mir nichts, die Loesung, die ich davor hatte schon.

Deine Loesung:
im HTML
HTML: 
<link rel="stylesheet" type="text/css" href="ie_fix.css">
im CSS ie_fix.css
HTML: 
ul#navcontainers li {
width:249px;
float:left;
}


Meine alte Loesung:
HTML: 
* html ul#nav1 li { 
	margin: -3px 0 0 0;
Zum Vergrößern anklicken....

Das kann so auch nicht funktionieren :suspekt:

Stell mal deine Linsen auf "Extra-Zoom" und vergleich in den beiden Stylesheets die Selektoren, insbesondere die ID-Bezeichner des ul-Elements miteinander.

Ich bezog mich in meinem Beispiel auf deinen zunächst gezeigten CSS-Code, der bei mir noch immer mit dem ursprünglichen ID-Namen im HTML-Code der Testseite steht, den du aber zwischenzeitlich umgetauft hast.

mfg Maik
 
Maik hat gesagt.:
Das kann so auch nicht funktionieren :suspekt:

Stell mal deine Linsen auf "Extra-Zoom" und vergleich in den beiden Stylesheets die Selektoren, insbesondere die ID-Bezeichner des ul-Elements miteinander.

Ich bezog mich in meinem Beispiel auf deinen eingangs gezeigten CSS-Code, den ich bei mir noch immer mit dem ursprünglichen ID-Namen im HTML-Code der Testseite stehen habe, den du aber zwischenzeitlich umgetauft hast.

mfg Maik
Zum Vergrößern anklicken....


Damn, du hast absolut recht. Meine Linsen sind derzeit wirklich unbrauchbar.
Hab dich schon wieder unnoetig gequaelt :-(
Ist bereinigt und funkt genau so wie du es sagst. Warum das andere vorher auch funktioniert hat, obwohl es schluessig von der erklaert wurde, dass es unlogisch ist, kann ich nicht sagen...
So, genug, ich goenn meinen Linsen mal ein Pausen. Ist mehr als dringend noetig

Danke!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück