Elegante CSS Deklaration

1 Der Gast

Moin,

ja...ich schon wieder ;-)

bin eifrig am weiterbasteln, was ich mir vorstelle klappt auch ganz gut, nur habe ich das gefühl, dass meine CSS Deklaration unnötig aufgebläht wird. Ich schätze ich hab das Prinzip der Vererbung und Deklaration bei CSS noch nicht wirklich verstanden, denn ich bin mir sicher, dass man folgendes mit Sicherheit elegnater definieren könnte, ich komme aber nicht drauf.

http://zwog.mine.nu/ie6.htm

Nun geht es mit um den Hovereffekt im ersten Kasten oben. So wie das jetzt funktioniert ist das schön, doch ich müsste für jedes Kästchen extra folgendes deklarieren, da sich die Farben unterscheiden:

/* Der relevante Teil -- nur um den Hovereffekt im Kasten zu erzeugen */
#logo1 {
float: left;
height: 88px;
width: 88px;
background-color: #9b8f88;
margin-right: 15px;
}
.button {
text-align: center;
font-size: 10px;
letter-spacing: 1px;
width: 88px;
height: 88px;
display:block;
/*border: 1px solid #9b8f88;*/
border: none;
}
.button p {
margin-top: 55px;
}
.button a {
color:#9b8f88;
text-align: center;
font-size: 10px;
letter-spacing: 1px;
width: 86px;
height: 86px;
display:block;
border: 1px solid #9b8f88;
/*border: none;*/
}
.button a:link {
color:#9b8f88;
}
.button a:hover {
color:white;
text-decoration: none;
}
/* Der relevante Teil -- hier endet das CSS, ist aber nur für das erste logo gültig, da sich die anderen kästchen in der farbe unterscheiden! */

Nun die Frage der Fragen an die Könner, wie mache ich eine schlanke und elegante Deklaration, so dass ich es vermeide den obigen CSS Code vervierfachen muss (für jedes Kästchen einmal)?
Bin für jeden Gedankenanstoss dankbar!
Gruss

2 Jörg Kruse

Für die Eigenschaften, die sich wiederholen, nutzt du nur die Klasse "button", für individuelle Eigenschaften, in diesem Fall die Farben, zusätzlich die IDs der Elternelemente "logo1", "logo2" etc. Nur für die letzteren musst du viermal definieren:

#logo1 {
float: left;
height: 88px;
width: 88px;
background-color: #9b8f88;
margin-right: 15px;
}
.button {
text-align: center;
font-size: 10px;
letter-spacing: 1px;
width: 88px;
height: 88px;
display:block;
/*border: 1px solid #9b8f88;*/
border: none;
}
.button p {
margin-top: 55px;
}
.button a {
text-align: center;
font-size: 10px;
letter-spacing: 1px;
width: 86px;
height: 86px;
display:block;
border: 1px solid #9b8f88;
/*border: none;*/
}
.button a:hover {
text-decoration: none;
}
#logo1 .button a {
color:#9b8f88;
}
#logo1 .button a:link {
color:#9b8f88;
}
#logo1 .button a:hover {
color:white;
}

3 Der Gast

Extraklasse! So ähnlich hatte ich mir das gedacht, bin nur dummerweise nicht drauf gekommen! :-)

Leider habe ich jetzt eine Folgeproblem. Eigentlich muss der jeweils ganze Kasten mit dem Link unterlegt sein, nicht nur der <p>. Ich dachte das hätte ich mit display:block für .button erreicht, doch da hab ich mich geirrt....

hmm... *grübel

/edit

Noch schlimmer, der IE6 buggt mal wieder mächtig rum. Sobald ich den Hover Effekt in weitere Kästchen einbaue wird er immer nur beim ersten Kästchen richtig getriggert. *fluch

/edit2

Das display:block macht genau was ich will, nur nicht im ie6, bzw. auch dort, aber nur beim ersten Kasten. Bei den weiteren wird das a:hover nur direkt auf dem <p> getriggert.
Langsam fange ich an den ie6 und seine Entwickler zu verfluchen!
Ist jemandem dieser spezifische Bug bekannt?

4 Jörg Kruse

Kannst du die veränderte Datei hochladen, oder den genauen Code angeben? Wenn ich die Hovereffekte in die ersten beiden Kästen einbaue, funktionieren sie in beiden Fällen im IE 6, auch in voller Breite und Höhe des Kastens

5 Der Gast

Also, ich bin jetzt rechlich verwirrt. Ich habe das ganze nochmals überflogen und angepasst. Jetzt funktioniert es wunderbar im IE, dafür aber nichtmehr in Safari & Firefox. Komplett umgekehrter Effekt. Der Hover wird im IE immer durch die div ausgelöst, in Sfari & Firefox nur durch den <p> ...
Dummerweise kann ich gerade nicht sagen was ich im Quelltext entscheidend geändert habe, Sicherheitskopie zum vergleichen habe ich dummerweise auch nicht mehr.
Man sollte zwischendurch mal ne Pause einlegen...

http://zwog.mine.nu/ie6.htm

6 Der Gast

Hah! Der relevante Teil ist die border bei .button a!

/edit
Also sobald ich z.b. unter

#logo2 .button a {
color:#372011;
border: 1px solid #372011;
}

die Border notiere verhalten sich Safari & Firefox wie gewünscht, aber der IE6 nicht. Wenn ich die Border Angabe rauslasse verhält sich der IE6 wie gewünscht aber die anderen Browser falsch. Jeweils ist entweder die div der Link oder nur der <p>...
/edit2
Der IE verhält sich nur beim ersten Kasten richtig, wie schon zu beginn beobachtet!

7 Jörg Kruse

Die Konstruktion eines Absatzes (p) innerhalb eines LInks (a), d.h. eines Block-Elemtes innerhalb eines Inline-Elementes, ist in HTML nicht zulässig - aber das beschriebene Problem wird dadurch wohl nicht verursacht. Opera, Firefox und nach deiner Aussage auch Safari zeigen wohl keinen Hover-Effekt im oberen Bereich, weil dort ja nur ein Außenrand ist, also eigentlich nichts. DAs könnte man beheben, indem man statt dem Außenrand ein zweites, leeres Element eingefügt, für valides HTML das Inline Element span:

<div id="logo1">
   <div class="button">
       <a href="#" title="&Auml;sthetik">
            <span class="oben">&nbsp;</span>
            <span class="unten">&Auml;STHETIK</span>
       </a>
   </div>
</div>

und im CSS Teil:

.button span.oben {
display:block;
line-height: 55px;
}
.button span.unten {
display:block;
line-height: 33px;
}

nach meinem TEst zeigen Opera, Fierfox und IE 6 Hoverffekte korrekt an für mehrere Kästen

PS: alt="Ästhetik" habe ich auf title="Ästhetik" korrigiert, da das alt-Attribut keine Verwendung in Links findet

nach oben

Elegante CSS Deklaration

Beitrag schreiben (als Gast)