Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 30.04.2007, 20:32
Dwarf Dwarf ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.10.2006
Beiträge: 55
Dwarf befindet sich auf einem aufstrebenden Ast
Standard Runde Ecken und Transparenz: ich beiss mir die Zähne aus

Hallo Forum,



ich versuche gerade ein Layout umzusetzen in dem Boxen mit Rändern vorgesehen sind. Wie setzt man solche Layouts um?




Mir ergeben sich dabei folgende Probleme:

Die Ränder müssten ohne vorgegebene größe funktionieren. Sich also an den Inhalt anpassen. Dies bräuchte ich auch damit ich dem inneren Content einen Hintegrund verpassen kann um den Verlauf zu erzeugen.
Ich hab schon eine Variante die fast geht, hierbei müsste ich aber den äußeren Rand der Ecken mit Farbe füllen damit sie die geraden Ränder abdecken, die dann über 100% Höhe bzw. Breite verlaufen. Ich muss den äußeren Bereich der Ecken aber ebenfalls transparent haben damit das Ganze auf Hintergrund funktioiert der nicht einfarbig ist.

Das ist mein Ansatz:

das CSS
PHP-Code:
#content{
    
position:relative;
    
margin:0 auto;
    
width:680px;
    
background:#202020;
    
padding:20px;
}
/* --- BORDER --- */
.ol{
    
position:absolute;
    
top:0;
    
left:0;
    
height:22px;
    
width:22px;
    
background:url(img/corner_ol.gifno-repeat;
}
.
o{
    
position:absolute;
    
top:0;
    
left:0;
    
height:5px;
    
width:100%;
    
background:url(img/border_o.gifrepeat-x;
}
.or{
    
position:absolute;
    
top:0;
    
right:0;
    
height:22px;
    
width:22px;
    
background:url(img/corner_or.gifno-repeat;
}
.
r{
    
position:absolute;
    
top:0;
    
right:0;
    
height:100%;
    
width:13px;
    
background:url(img/border_r.gifrepeat-y;
}
.
ur{
    
position:absolute;
    
bottom:0;
    
right:0;
    
height:22px;
    
width:22px;
    
background:url(img/corner_ur.gifno-repeat;
}
.
u{
    
position:absolute;
    
bottom:0;
    
left:0;
    
height:8px;
    
width:100%;
    
background:url(img/border_u.gifrepeat-x;
}
.
ul{
    
position:absolute;
    
bottom:0;
    
left:0;
    
height:22px;
    
width:22px;
    
background:url(img/corner_ul.gifno-repeat;
}
.
l{
    
position:absolute;
    
top:0;
    
left:0;
    
height:100%;
    
width:14px;
    
background:url(img/border_l.gifrepeat-y;


und die HTML
PHP-Code:
<!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" />
<
title>Hamburg Hardstyle</title>
<
link href="hhs.css" rel="stylesheet" type="text/css" />
</
head>

<
body>
    <
div id="content">    
        
Hier steht der Content Lalala <br /><br /> Bla bla <br /><br /><p>JUCHUUUU!!!</p>
        <
div class="o"></div>
        <
div class="u"></div>
        <
div class="l"></div>
        <
div class="r"></div>
        <
div class="ol"></div>
        <
div class="or"></div>        
        <
div class="ul"></div>
        <
div class="ur"></div>            
    </
div>
</
body>
</
html


Es gibt doch bestimmt elegantere Wege oder? Zumindest einen der gut funktioniert? Besonders wichtig wäre mir die Transparenz zur inneren Box und zum Hintergrund. Muss also alles schön variabel bleiben.


Vielleicht kann mir da ja jemand weiterhelfen. Wäre super!




Gruß,
Sascha
Mit Zitat antworten
Sponsored Links