D
Dkl764
Hallo Community,
ich habe versucht ohne Grafiken eine abgerundete Box zu schaffen, ging nicht so recht.
Habe dann eine gefunden. Scheint bei fast allen Browsern richtig anzuzeigen.
Wenn ich Sie alleine in eine leere HTML-Datei schiebe funktioniert Sie einwandfrei.
Aber wenn ich sie in meine Seite einbaue, egal ob mitte, als erstes oder am Ende, immer sind da diese Abstände zwischen dem oberen, mittleren und unterem Teil.
Inhalt der Box ist egal, immer das gleiche Ergebnis.
Hier sieht man es: http://duellking.du.funpic.de/mobile/downloadpage.php
Code (komplett; funktioniert in leerer HTML-Datei):
ich habe versucht ohne Grafiken eine abgerundete Box zu schaffen, ging nicht so recht.
Habe dann eine gefunden. Scheint bei fast allen Browsern richtig anzuzeigen.
Wenn ich Sie alleine in eine leere HTML-Datei schiebe funktioniert Sie einwandfrei.
Aber wenn ich sie in meine Seite einbaue, egal ob mitte, als erstes oder am Ende, immer sind da diese Abstände zwischen dem oberen, mittleren und unterem Teil.
Inhalt der Box ist egal, immer das gleiche Ergebnis.
Hier sieht man es: http://duellking.du.funpic.de/mobile/downloadpage.php
Code (komplett; funktioniert in leerer HTML-Datei):
Code:
<html>
<head>
<style type="text/css">
.xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;}
.xsnazzy h1 {font-size:2.5em; color:#fc0;}
.xsnazzy h2 {font-size:2em; color:#234; border:0;}
.xsnazzy p {padding-bottom:0.5em; color:#eee;}
.xsnazzy h2 {padding-top:0.5em; padding-left:10px;}
.xsnazzy {background: transparent; margin:1em;}
.xsnazzy em {display:block; width:0; height:0; color:#d8d8ee; overflow:hidden; border-top:12px solid #fff; border-left:12px dotted transparent; border-right:12px dotted transparent; margin-left:50px;}
/* hack for IE5.5 */
* html .xsnazzy em {width:24px; height:12px; w\idth:0; hei\ght:0;}
.xsnazzy span {display:block; width:0; height:0; color:#fff; overflow:hidden; border-top:10px solid #7d8cab; border-left:10px dotted transparent; border-right:10px dotted transparent; margin-left:52px; margin-top:-15px;}
* html .xsnazzy span {width:20px; height:10px; w\idth:0; hei\ght:0;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 8px; background:#fff;}
.xb2 {margin:0 6px; background:#fff;}
.xb3 {margin:0 4px; background:#fff;}
.xb4 {margin:0 3px; background:#7d8cab; border-width:0 5px;}
.xb5 {margin:0 2px; background:#7d8cab; border-width:0 4px;}
.xb6 {margin:0 2px; background:#7d8cab; border-width:0 3px;}
.xb7 {margin:0 1px; background:#7d8cab; border-width:0 3px; height:2px;}
.xboxcontent {display:block; background:#7d8cab; border:3px solid #fff; border-width:0 3px;}
</style>
</head>
<body>
<div class="xsnazzy">
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent"><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</p></div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</body>
</html>
Fehlermeldungen birgen ein hohes Potential für Fehldarstellungen in den unterschiedlichen Browsertypen - siehe hierzu das Ergebnis 
