Runde Ecken und Transparenz: ich beiss mir die Zähne aus

Dwarf · #1 (**permalink**) 30.04.2007, 20:32

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.gif) no-repeat;

}

.o{

    position:absolute;

    top:0;

    left:0;

    height:5px;

    width:100%;

    background:url(img/border_o.gif) repeat-x;

}

.or{

    position:absolute;

    top:0;

    right:0;

    height:22px;

    width:22px;

    background:url(img/corner_or.gif) no-repeat;

}

.r{

    position:absolute;

    top:0;

    right:0;

    height:100%;

    width:13px;

    background:url(img/border_r.gif) repeat-y;

}

.ur{

    position:absolute;

    bottom:0;

    right:0;

    height:22px;

    width:22px;

    background:url(img/corner_ur.gif) no-repeat;

}

.u{

    position:absolute;

    bottom:0;

    left:0;

    height:8px;

    width:100%;

    background:url(img/border_u.gif) repeat-x;

}

.ul{

    position:absolute;

    bottom:0;

    left:0;

    height:22px;

    width:22px;

    background:url(img/corner_ul.gif) no-repeat;

}

.l{

    position:absolute;

    top:0;

    left:0;

    height:100%;

    width:14px;

    background:url(img/border_l.gif) repeat-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

Lizzy · #2 (**permalink**) 30.04.2007, 23:37

Hallo Sasha,

unabhängig von Deiner Frage solltest Du für Dein Menü eine Liste (ul) verwenden. Solch ein Layout setzt man beispielsweise um, indem man dem Elternelement die linke Ecke zuweist und einem Kinderelement die rechte Ecke - padding:0. Die Mitte könnte dann quasi expandieren und die Breite bliebe variabel.

RoToRa · #3 (**permalink**) 01.05.2007, 16:48

Es gibt viele Lösungen für runde Ecken. Hier ist eine Liste von verschiedene Möglichkeiten:

CSS Rounded Corners 'Roundup' | Smiley Cat Web Design

Robin

StuermerDE · #4 (**permalink**) 02.05.2007, 22:13

habe früher mal ein workshop dazu geschrieben. piranho - web development community

ich sehe gerade, dass der xhtml-quellentext ziemlich schrott ist (kommt daher, weil ich das tutorial aus dem quellentext kopiert habe

)

Dwarf · #5 (**permalink**) 13.05.2007, 19:10

Vielen Dank für eure Tips. Hab mich jetzt dieser Methode bedient, die das Umsetzt was ich brauche:

Transparent custom corners and borders, version 2
Damit klappt das nun ganz gut, Danke

Eine Frage noch: ich versteh nicht ganz genau was das JavaScript hier genau tut. Ist das wirklich nötig? Oder würde es evtl. irgendwie auch ohne gehen? Wäre natürlich schöner, aber nicht zwingend notwendig.

Gruß,
Dwarf

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
runde ecken	thom75	CSS	3	23.01.2007 11:22
Runde Ecken! Problem bei der Darstellung	SKVler	CSS	3	20.09.2006 14:50
Runde Ecken, abstand zum Rand	denny	CSS	0	04.06.2004 19:53
Runde Box (bzw. runde Ecken)	l2107	CSS	3	08.02.2004 04:19