Hallo zusammen,

bin gerade dabei ein neues Layout zu gestalten. Dabei möchte ich die einzelnen Artikel in einer abgerundeten Box darstellen. Die Ecken abzurunden ist kein Problem, das habe ich so gelöst: (css)

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

.box1 {     display:block;     margin:0 6% 0 12%;/*oben, rechts, unten, links */       padding:0;/*oben, rechts, unten, links */     width:15%; }   /*Rahmen fuer die Boxen*/ .ol {background: url(Grafiken/rundungen/transparent/1-ol.png) 0 0 no-repeat;} .or {background: url(Grafiken/rundungen/transparent/1-or.png) 100% 0 no-repeat;} .ul {background: url(Grafiken/rundungen/transparent/1-ul.png) 0 100% no-repeat;} .ur {background: url(Grafiken/rundungen/transparent/1-ur.png) 100% 100% no-repeat;}

Dabei steht o für oben, u für unten, l für links und demzufolge r für rechts. Allerdings habe ich nun das Problem, dass jeweils zwischen den Ecken kein Rahmen ist. Es fehlt also obenMitte, untenMitte, mitteLinks und mitteRechts.

Ausehen tut es zurzeit so:

habe versucht das selbst hin zu bekommen, in dem ich die Mittleren und Seitlichen jeweils Horizontal bzw. vertikal wiederholen lasse. Leider hat das nicht so ganz geklappt, da sie sich über die Ecken legen.

Weiß leider zurzeit keine Lösung für das Problem - hat von euch jemand einen Rat? Hier noch der Quellcode:

CSS-Teil

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

.box1 {     display:block;     float:left;     margin:1em 5% 1em 5%;/*oben, rechts, unten, links */       padding:0;/*oben, rechts, unten, links */     overflow:hidden; }   .box2 {     display:block;     margin:0 5% 0 5%;/*oben, rechts, unten, links */       padding:0;/*oben, rechts, unten, links */     overflow:hidden; }   /*Rahmen fuer die Boxen*/ .ol {background: url(Grafiken/rundungen/transparent/1-ol.png) 0 0 no-repeat;} .om {background: url(Grafiken/rundungen/transparent/1-om.png) top repeat-x;} .or {background: url(Grafiken/rundungen/transparent/1-or.png) 100% 0 no-repeat;} .ml {background: url(Grafiken/rundungen/transparent/1-ml.png) left repeat-y; } .mr {background: url(Grafiken/rundungen/transparent/1-mr.png) right repeat-y;} .ul {background: url(Grafiken/rundungen/transparent/1-ul.png) 0 100% no-repeat;} .um {background: url(Grafiken/rundungen/transparent/1-um.png) bottom repeat-x;} .ur {background: url(Grafiken/rundungen/transparent/1-ur.png) 100% 100% no-repeat;}

HTML-Teil

Code :

1 2 3 4 5 6 7 8 9 10 11 12

<div id="menue"><div class="box1">     <div class="ol"><div class="or"><div class="om"><div class="ml"><div class="mr"><div class="ul"><div class="ur"><div class="um"><div class="inhalt">         <h1>Test</h1>         <p>Hier kann dann bald Inhalt stehen...</p>     </div></div></div></div></div></div></div></div></div> </div></div> <div class="box2">     <div class="ol"><div class="or"><div class="om"><div class="ml"><div class="mr"><div class="ul"><div class="ur"><div class="um"><div class="inhalt">         <h1>Test</h1>         <p>Hier kann dann bald Inhalt stehen...</p>     </div></div></div></div></div></div></div></div></div> </div>

Was dann so aussieht:


Da die Boxen unterschiedlich Breit und vorallem unterschiedlich hoch sind, möchte ich, dass sich die Hintergrundbilder anpassen, was die ecken zumindest schon einmal tun. Lediglich die Mittelteile passen noch nicht.

Da ich mit em Werten arbeite, kann ich zB keine feste Breite/Höhe vorgeben, weshalb es nicht klappt, dass ich ein Hintergrundbild über die ganze Breite/Höhe lege, da genau jene ja unterschiedlich ist.

Hoffe ihr könnt mir helfen.
Liebe Grüße
Muckel

Hallo,

deine Bilder für die Ecken sind offensichtlich zu klein. Sieh dir bitte mal das Tutorial "Runde und andere Ecken mit Sliding Doors" an. Dort werden auch 4 Bilder für die Ecken benutzt:

• Grafik_1 sorgt für die Ecke rechts oben und für die obere und rechte Kante.
• Grafik_2 sorgt für die Ecke links oben und für die linke Kante.
• Grafik_3 sorgt für die Ecke rechts unten und die untere Kante.
• Grafik_4 ist das kleinste Bild und sorgt nur für die Ecke links unten.

Du musst die Grafik 1, 2 und 3 größer machen als das Element, das damit umrahmt werden soll.
Das ist (fast) der ganze Trick.

Moin,

das klappt nicht wirklich. Denn die Breite und Höhe einer jeden Bos ändert sich von Auflösung zu Auflösung und die Höhe ist abhängig von der länge des Inhaltest. Es macht ja einen Unterschied, ob ich nur 100 Wörter Inhalt habe oder aber 100.000.

Oder sehe ich das falsch?

Gruß Muckel


## EDIT ##

Moin,

habe deinen Tipp nun ausprobiert. Habe in der Box nun "nur" noch vier weitere divs für jede Ecke. Die Grafiken habe ich verlängert, aber auch dabei gibt es Überschneidungen (bei der kleinen Box) und bei der größeren feht wieder ein Stück.

Zusehen ist das auf dem Bild


Für die Ecke oben links habe ich zum Beispiel diese Grafik genommen:

(und jeweils 90° gedreht für jede weitere Ecke)

Doch leider klappt dies auch nicht wirklich.

LG
Muckel

Hi,

hast du mal einen Link zu der Seite?

mfg Maik

Guten Abend,

ja ich habe es gerade hoch geladen.

LG
Muckel

An den bemängelten Bildgrößen hat sich aber nichts geändert.

Ansonsten benötigst du in dieser Form noch vier weitere DIVs mit den Grafiken: om, rm, um, lm - siehe zum Vergleich http://sperling.com/examples/box/.

mfg Maik

Hallo,

habe das jetzt mit dem Beispiel verglichen und nochmal hochgeladen. Problem bleibt aber gleich, denn mein Ansatz war der selbe.

Mit den Grafiken aus dem Beispiel klappt es allerdings. Zum vergleichen habe ich beides hochgeladen:

• Test 1
• Test 2

Sind meine Grafiken zu groß?

LG und vielen Dank
Muckel

Da du im ersten Fall mit transparenten PNGs arbeitest, empfehle ich dir http://www.paulhaxter.com/cssframe/.

Im zweiten Fall sind die GIFs tatsächlich zu groß bzw. müsste der Überstand der Seitenhintergrundfarbe angeglichen werden.

mfg Maik

Moin,

meine Grafiken kann ich ja ins gif ändern, das ist kein Problem. Im Grund geht es mir darum, dass ich eine "Umrundung" meiner Box bekomme.

Dann mach das mal, wenn du dem zuletzt empfohlenen Beispiel nicht folgen willst, das ebenfalls transparente PNGs verwendet, und eine entsprechende CSS-Formatierung benötigt, damit die Grafiken sich an den Ecken nicht überlappen, wie es bei dir im ersten Test der Fall ist.

mfg Maik

Moin,

ich dachte halt, dass das ändern in *.gif per stpelverarbeitung leichter wäre, aber leider ging dies auch nicht, wie man hier sehen kann.

In dem Beispiel haben die divs weder eine Klasse noch eine ID. Wie verhält sich das dann mit der xhtml und css validität?

Danke
Muckel

file:///home/muckel/Homepage/aktives/ambronen/index.htm ist im Netz nicht brauchbar

Ob die DIVs einen ID- oder Klassenbezeichner besitzen, ist für die Validität absolut nebensächlich.

Ich fasse nochmal zusammen, damit wir hier zu Potte kommen: Entweder studierst du für den ersten Probelauf bzgl. der transparenten PNGs den CSS-Code von http://www.paulhaxter.com/cssframe/, oder du schneidest im zweiten Testballon die GIFs so zu, dass sie außerhalb des horizontalen und vertikalen Rahmens keinen Überstand haben, und gleichst den derzeitigen weißen Hintergrund des äußeren Radius' der grauen Seitenhintergrundfarbe an, oder setzt dort eine transparente Farbe ein - fertitsch.

mfg Maik

Moin,

also ich habe mir jetzt das Beispiel von http://www.paulhaxter.com/cssframe/ genommen und haben ganz unten den html Teil der Seite eingebunden und auch den css Teil. Die einzige Änderung ist, dass ich meine png Grafiken genommen habe.

Doch die Situation ist die selbe. Grund Problem ist, wie ich das Überlagen der mittleren Grafiken zu den Ecken verhindern kann. Doch diese Frage ist hier leider noch nicht wirklich geklärt.

Gruß und Danke
Muckel

Naja, du hast nicht die Bilddimensionen beachtet, die bei dir bedeutend größer sind, als in dem Beispiel (dort sind sie durchweg 10*10px groß), und im CSS-Code berücksichtigt werden müssen. Mit einer "1:1"-Übernahme des CSS-Codes aus dem Beispiel ist es da nicht getan, sondern bedarf da schon der individuellen Anpassung.

mfg Maik