Kategorie: HTML

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!



							

					

	






	

				
							
		

			


				
Bild von Text umfließen lassen


								

					   admin				Schreibe einen Kommentar
				
				
				

							


						


				
Um zum Beispiel in einem Div eine Bild rechts von Text umfließen zu lassen, setzt man das Bild einfach nach links. Ein:


<img src="bild.jpg" align="left">



sorgt dafür, dass der Text rechts am Bild vorbeiläuft.  Soll der Text links vorbeilaufen setzt man


<img src="bild.jpg" align="right">



Natürlich funktioniert das nur, wenn das Bild den Div in der Breite nicht vollständig ausfüllt.

Den Abstand des Textes kann man mit margin Werten einstellen.


							

					

	






	

				
							
		

			


				
Mehrere Stylesheets nutzen / wechseln


								

					   admin				Schreibe einen Kommentar
				
				
				

							


						


				
Um mehrere externe Stylesheets zu benutzen, bin man zuerst die verschiedenen CSS-Dateien im -Bereich der Seite ein:


<link rel="stylesheet" type="text/css" href="style/ff.css" title="small" />
<link rel="alternate stylesheet" type="text/css" href="style/big.css" title="big" />



Nun bindet man folgendes Javascript in die Seite ein.


function set_active_sheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function get_active_sheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function get_preferred_sheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function create_cookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function read_cookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = read_cookie("style");
  var title = cookie ? cookie : get_preferred_sheet();
  set_active_sheet(title);
}

window.onunload = function(e) {
  var title = get_active_sheet();
  create_cookie("style", title, 365);
}

var cookie = read_cookie("style");
var title = cookie ? cookie : get_preferred_sheet();
set_active_sheet(title);



Als nächstes muss man noch Links definieren, die den Swicht des Stylesheets auslösen:


Schriftgröße rauf
Schriftgröße runter



							

					

	












	

				
							
		

			


				
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.