XHTML und CSS Tipps (Webdesign Tipps)
Auf dieser Seite finden Sie einige Problemlösungen und Tipps die für das ein oder andere Webdesign mit "XHTML und CSS" hilfreich sein kann. Sie werden sicherlich einige der hier aufgeführten Tipps auch woanders im Internet finden. Da wir aber selbst immer wieder suchen müssen, wenn uns die ein oder andere Problemlösung nicht mehr einfällt, haben wir sie hier aufgelistet.
IE6 und min-height
Der Internet Explorer 6 unterstüzt das CSS Attribut "min-height" nicht. Eine Lösung um auch mit anderen Browser kompatibel zu sein ist:
CSS Klasse content als Beispiel:
min-height: 350px;
height: auto !important;
height: 350px;
}
Durch die Angabe von "!important" verwenden moderne Browser (die auch "min-height" anwenden können) "height: auto" für die Höhe. Der IE6 greift nur auf "height: 350px" zurück und zeigt somit auch das richige Ergebnis.
height: 100%
Die CSS Angabe "height: 100%" kann immer nur dann funktionieren, wenn das umschließende Element (z.B. <div style='height: 600px;'>...</div>) eine bekannt Höhe hat. Andernfalls kann die Höhe von 100% nicht kalkuliert werden und "height: 100%" wird immer wie "height: auto" angezeigt.
Absolute Positionierung bei zentrierter Webseite
Möchte man ein Seitenlayout umsetzen, das es erfordert verschiedene Regionen beliebig zu platzieren - z.B. für ein verteiltes Menü - dann ist die absolute Positionierung (position: absolute;) die richtige Wahl.
Ein Problem bereitet hier nur, dass diese Positionierung immer den Ursprung des Browserfensters als Referenz verwendet. Hat man nun ein den Inhalt umgebendes DIV verwendet um die Seite mittig zu zentrieren (margin-left:auto; margin-right: auto;) so lassen sich die Elemente normalerweise nicht mehr genau positionieren, da man ja die Abstände zum Fensterrand nicht kennt.
Abhilfe schafft da ein kleiner Trick: Einfach das zentrierte DIV (z.B. centered genannt) eine relativ Positionierung verpassen. Dadurch bezieht sich die absolute Positionierung im inneren DIV auf die Position des centered DIVs.
CSS Beispiel:
width:100%;
}
.centered{
width:900px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.Button{
position:absolute;
left:100px;
top:12px;
}
