Der fette Mo: Runde Ecken

Beitrag lesen

SELF-Forum

Runde Ecken

Der fette Mo
– Informationen zu den Bewertungsregeln

Guten Tag allerseits,

Bei der Lösung in dem SelfHTML-Artikel sind die Bilddateien doch recht groß...
Außerdem muss die Grafikdatei immer größer werden, je länger der Text in der Box wird (sonst ist irgendwann ein weißer Streifen zu sehen).

Habe deswegen eine eigene Lösung entworfen:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<link rel="stylesheet" href="home.css" media="screen" />  
<title>Runde Ecken Demo</title>  
</head>  
<body>  
<div class="container">  
  
<div class="o"><div class="lo">&nbsp;</div><div class="mo">&nbsp;</div><div class="ro">&nbsp;</div></div>  
  
<div class="content">  
<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 exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>  
<p>&nbsp;</p>  
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li  
sam vocabularium. Li lingues differe solmen in li grammatica, li  
pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&Dagger; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>  
</div>  
  
<div class="u"><div class="lu">&nbsp;</div><div class="mu">&nbsp;</div><div class="ru">&nbsp;</div></div>  
  
</div>  
</body>  
</html>

Stylesheet dazu:

  
body{font-family:Arial, Helvetica, sans-serif;background-color:#900;}  
.container{position:relative;width:800px;margin:40px auto auto;}  
.content{background-color:#FF9;border-left:1px solid;border-right:1px solid;margin:0;padding:2em 2em 3em;}  
.content p{margin:0;padding:0;}  
.mo,.mu{position:absolute;left:10px;height:10px;width:780px;background-color:#FF9;}  
.mu{border-bottom:1px solid;}  
.mo{border-top:1px solid;}  
.ro{position:absolute;top:0;right:0;width:10px;background:url(images/corners/ro.gif) top right no-repeat;}  
.lo{position:absolute;top:0;left:0;width:10px;background:url(images/corners/lo.gif) top left no-repeat;}  
.ru{position:absolute;bottom:0;right:0;width:10px;background:url(images/corners/ru.gif) bottom right no-repeat;}  
.lu{position:absolute;bottom:0;left:0;width:10px;background:url(images/corners/lu.gif) bottom left no-repeat;}  
.o,.u{height:10px;width:800px;}

Hier müssen die Bilder nur 10x10px groß sein!

Online unter http://www.diplomtrottel.de/home.html.

Gruß,
Der fette Mo

--
Menschen haben keine Probleme, sie schaffen sie sich selbst.
Beitrag melden
–
Informationen zu den Bewertungsregeln