Kategorie: CSS

Mit CSS formatierte Links werden nicht richtig dargestellt

admin Schreibe einen Kommentar

Wenn man per CSS Links formatiert, tut man dies im Allgemeinen so:

a:link { //Definition hier }
a:visited { //Definition hier }
a:hover { //Definition hier }
a:active { //Definition hier }

Diese Definition formatiert allgemein die Links der Webseite. Wenn man diese Klassen aber in der falschen Reihenfolge darstellt, kann es vorkommen, dass sich die Klassen falsch überlagen und es zu Darstellungsfehlern kommt. Wichtig also: auf die Reihenfolge achten!



							

					

	






	

				
							
		

			


				
png-Filter und Joomla


								

					   admin				Schreibe einen Kommentar
				
				
				

							


						


				
Da ich gerade selbst an diesem Problem fast verzweifelt bin, möchte ich dies nun hier mal aufklären.


Um im IE6 transparente png darzustellen, verwendete ich z.B. bei einem Hintergrundbild folgende CSS-Anweisung


 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='bg.png');


Alles funktionierte prächtig, bis ich das ganze als Template für eine Joomla 1.5 Installation verwendete.

Sämtliche pngs wurden nicht mehr angezeigt und ich fand und fand keine Lösung.


Letztendlich brachte mich dann eine Webseite auf den trichter, dass es wohl an den SEO URLs liegen könnte.

Ein Test, bei welchem ich diese abschaltete brachte zwar nix, die angebotene Lösung probierte ich trotzdem.

Wichtig ist dabei, den kompletten Bildpfad anzugeben, da der Filter diese sonst offensichtlich nicht findet:


 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://www.meinedomain.de/images/bg.png');


Das half….


							

					

	






	

				
							
		

			


				
Div Box mittig ausrichten / zentrieren


								

					   admin				1 Kommentar
				
				
				

							


						


				
Um eine Div Box horizontal mittig auszurichten, setzt man margin:auto. Dies funktioniert allerdings nur dann, wenn das umgebende Element also z.B.  eine Breite von 100% besitzt. Zentriert wird immer releativ zum umgebenden Element.

Damit alles korrekt funktioniert ist auch ein korrekter Doctype wichtig, z.B.




Das Beispiel mal insgesamt:









Mittig







							

					

	






	

				
							
		

			


				
CSS Menü mit Hintergrundbild


								

					   admin				Schreibe einen Kommentar
				
				
				

							


						


				
Ein Mouseover -Meü mit wechselndem Hintergrundbild muss mitnichten per Javascript erstellt werden. Besser und sauberer geht’s mit CSS:


<style type=“text/css“>

.linkKlasse a {

background-image:url(‚bg.gif‘);

}


.linkKlasse a:hover {

background-image:url(‚bgOver.gif‘);

}


</style>




<div class=“linkKlasse“>

<a href=“datei.html“>Link</a>

</div>


Meisten müssen noch Anpassungen in Höhe und Breite der Links gemacht werden, aber das sind dann ja nur noch Kleinigkeiten.


							

					

	










	

				
							
		

			


				
CSS – Einheiten für Werte angeben


								

					   admin				Schreibe einen Kommentar
				
				
				

							


						


				
Damit es bei der Darstellung von inneren und äußeren Abständen (padding und margin) nicht zu Fehlern kommt, ist es wichtig den Werten für den Abstand eine Einheit mitzugeben, wie z.B.:


margin: 100px; (falsch wäre margin:100;)


Lediglich bei Null-Abständen kann man die Einheiten weglassen:


margin: 0; 


wäre also korrekt.


							

					

	






	

				
							
		

			


				
Abstand zwischen DIVs im Internet Explorer


								

					   admin				Schreibe einen Kommentar
				
				
				

							


						


				
Wenn man zwei Divs untereinander anordnen möchte, ohne einen Zwischenraum / Abstand zu haben, kommt es im IE oft vor, dass zwischen den Divs doch ein Abstand angezeigt wird. Dies passiert dann, wenn man im Stylesheet keine Höhe angibt.

Man vermeidet also den Abstand zwischen den Divs im Internet Explorer, wenn man jedem der beiden Divs eine feste Höhe gibt.


							

					

	








	

				
							
		

			


				
Scrollbalken einfärben IE


								

					   admin				Schreibe einen Kommentar
				
				
				

							


						


				
Scrollbalken mit CSS-Bordmitteln einzufärben, ist nur für den Internet Explorer möglich. Leider kann man sagen, anderen ist selbst die IE-Scrollbalken-Einfärbemöglichkeit zuviel.


So gehts, wenn man den IE Scrollbalken färben möchte:


html {

scrollbar-3dlight-color:  #FAEBBE;

scrollbar-darkshadow-color:  #c11e1e;

scrollbar-highlight-color:  #FAEBBE;

scrollbar-shadow-color:   #B4BECD;

scrollbar-arrow-color:   #000000;

scrollbar-base-color:   #c11e1e;

scrollbar-face-color:   #FAEBBE;

scrollbar-track-color:   #FAEBBE;

}