Rahmenanzeige
Autor
Flitze
Klicks 15773
Bewertungen 10
Rating 5.2
Stand 03.08.2010
Keywords:
Rahmenproblem, Rahmen Überlappung, Rahmen wird unterschiedlich angezeigt, Rahmenseite zu lange, Border, Rahmendarstellung im Browser, Rahmenfarben sind unterschiedlich weit, Rahmen zu kurz, Rahmen zu lang
Klicks 15773
Bewertungen 10
Rating 5.2
Stand 03.08.2010
Keywords:
Rahmenproblem, Rahmen Überlappung, Rahmen wird unterschiedlich angezeigt, Rahmenseite zu lange, Border, Rahmendarstellung im Browser, Rahmenfarben sind unterschiedlich weit, Rahmen zu kurz, Rahmen zu lang
Breadcrumb:
Tipps » Rahmenanzeige
Dass die verschiedenen Browserfamilien mit der Zeit eine recht individuelle Darstellung der Rahmen von Elementen entwickelt haben, ist kein Geheimnis mehr. Dies wird dann zum Problem, wenn man keinen uniformen Rahmen mehr erstellt, sondern für die einzelnen Seiten z.B. andere Farben definiert.
Siehe dazu auch Stu Nicholls | Border Colors
Ein kleines Beispiel zur Verdeutlichung
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.rahmen
{
width:100px;
height:10px;
line-height:10px;
border:solid 1px #000000;
border-left-width: 5px;
border-left-color:#ff0000;
}
</style>
</head>
<body>
<div class="rahmen"></div>
</body>
</html>Beispiel anzeigen
Je nach dem, welchen Browser ihr verwendet sieht das Ergebnis nun unterschiedlich aus:
(Zur vergrößerten Darstellung bitte auf das Bild klicken)
In der Vergrößerung des Rahmens kann man das Problem recht gut erkennen. Um dennoch in jedem Browser die gleiche Anzeige zu erreichen, kann man zu einem kleinen Trick greifen, der wie folgt aussieht
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.rahmen
{
width:105px;
border:solid 1px #000000;
border-left-width: 0px;
}
.rahmen_innen
{
line-height:10px;
display:block;
height:10px;
border:solid 5px #ff0000;
border-width:0px 0px 0px 5px;
}
</style>
</head>
<body>
<div class="rahmen"><span class="rahmen_innen"></span></div>
</body>
</html>Beispiel anzeigen
Es wird ein Element im Element erstellt. Das umschließende <div> erhält nur noch oben, rechts und unten einen Rahmen. Allerdings muss die Größe auf 105 px gesetzt werden, da die 5 px des linken Rahmens wegfallen.
Das <span> bekommt das Attribut display:block, damit ein eigener Absatz erzeugt wird und sich das Element über die ganze Breite des <div> erstreckt. Auch die Höhe wird im <span> festgelegt, da sich das äußere Element anpasst. line-height muss übrigens für den Internet Explorer festgelegt werden, da dieser Probleme damit hat eine kleinere Höhe als 15 px anzuzeigen.
Letztendlich bekommt das <span> nun noch den linken Rahmen, der sich mit dem Rahmen des äußeren Elementes zum "Gesamtrahmen" ergänzt.
Bewerten
Suchmaschinenoptimierung (SEO - Search Engine Optimization)
