PHP Tutorials, PHP lernen, PHP Forum, PHP Community and more ... MyWebsolution.de!

Sidebar

Home News Tutorials Workshops Tipps Artikel Gästebuch Sitemap Pascal Landau

Suche

Members

Forum Login Registrierung

Statistik

Statistikbereich
Jetzt3
Heute109
Gestern261
Gesamt2389829

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

Amazon: HTML von Kopf bis Fu�
Breadcrumb:
Tipps » Rahmenanzeige
Seite : 1 Bewerten
Article Wizard - deutscher Article SpinnerDass 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:

Rahmenanzeige in verschiedenen Browsern

(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

»» Zurück zum Menu

Suchmaschinenoptimierung

Suchmaschinenoptimierung (SEO - Search Engine Optimization)

Ranking

Tutorials (13)

8.6
8.4
8

Workshops (3)

8.8
8.7
7.6

Tipps (12)

7.2
6.7
6.5

Artikel (32)

8.4
8
7.2

RSS Feeds

Full Feed Tutorials Workshops Tipps Artikel

Twitter

Follow me on Twitter

Partner & Links


Valid HTML 4.01 Transitional
Valid CSS
nach oben

Diese Seiten unterstützen MyWebsolution:
 
© MyWebsolution.de
2006-2024