zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Runde Ecken und Transparenz: ich beiss mir die Zähne aus

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.04.2007, 20:32
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
  #2 (permalink)  
Alt 30.04.2007, 23:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.10.2006
Ort: Extertal
Beiträge: 147
Lizzy befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Zeit ist das, was man an der Uhr abliest.
[Albert Einstein 1879 - 1955]
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.05.2007, 16:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 02.05.2007, 22:13
Konsument
neuer user
 
Registriert seit: 30.03.2007
Ort: Cloppenburg
Beiträge: 18
StuermerDE befindet sich auf einem aufstrebenden Ast
Standard

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 )
__________________
test...
Mit Zitat antworten
  #5 (permalink)  
Alt 13.05.2007, 19:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.10.2006
Beiträge: 55
Dwarf befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:49 Uhr.