Howto: runde Ecken mit CSS und Bildern

[DFYX]

Whiz-zarD hat vorhin im IRC einen Entwurf für ein Design mit halbtransparenten Boxen mit abgerundeten Ecken gepostet und wollte wissen, ob das so umsetzbar ist. Ich hab das mal zum Anlass genommen, einen kurzen Artikel zu schreiben, wie man das realisieren kann. Leider mit Tabellen.

Wäre nett, wenn ihr euch das anschauen und ggf. Verbesserungsvorschläge vorbringen könntet. Oder einfach allgemein Lob und Kritik.

[Crash-Override]

Es geht auch mit divs, allerdings nur nach dem Classes-Ansatz mit mehreren Klassen fuer jede Ecke.

[kris]

Awesome!

Hatte das früher immer etwas komplizierter gelöst.
TY!

[Kate]

Yay, danach hab ich immer gestrebt, es selbst aber nur unschön hinbekommen. Danke! :3

[Drakes]

Das ist aber nur von der Breite her "flüssig".
Die bessere Variante sieht so aus (mit ein paar Tricks, damits auch in allen Browsern passt):

HTML-Code:

<div class="style1">
   <div class="headLeft">
      <div class="headRight">
         <div class="headMiddle">
            <img src="spacer.gif" class="spacer" alt="" />
         </div>
      </div>
   </div>
   <div class="bodyLeft">
      <div class="bodyRight">
         <div class="bodyMiddle">
            Content
         </div>
      </div>
   </div>
   <div class="baseLeft">
      <div class="baseRight">
         <div class="baseMiddle">
            <img src="spacer.gif" class="spacer" alt="" />
         </div>
      </div>
   </div>
</div>

Css Beispiel:

Code:

.style1 .headLeft {
	background: url('top_left.gif') top left no-repeat;
	padding-left: 9px;
	}
.style1 .headRight {
	background: url('top_right.gif') top right no-repeat;
	padding-right: 9px;
	}
.style1 .headMiddle {
	background: url('top_mid.gif') top repeat-x;
	}
.style1 .headMiddle .spacer {
	height: 23px;
	}
	
.style1 .bodyLeft {
	padding-left: 1px;
	background: url('center_left.gif') top left repeat-y;
	}
.style1 .bodyRight {
	padding-right: 1px;
	background: url('center_right.gif') top right repeat-y;
	}
.style1 .bodyMiddle {
	overflow: auto;
	background: transparent;
	}
	
.style1 .baseLeft {
	background: url('bottom_left.gif') top left no-repeat;
	padding-left: 9px;
	}
.style1 .baseRight {
	background: url('bottom_right.gif') top right no-repeat;
	padding-right: 9px;
	}
.style1 .baseMiddle {
	background: url('bottom_mid.gif') top repeat-x;
	}
.style1 .baseMiddle .spacer {
	height: 19px;
	}

Wobei das <img> eigentlich nicht nötig ist und man könnte die Höhe direkt headMiddle etc. zuweisen, jedoch falls man dann die Box über DOM erzeugt breiten sich die mittlerene Teile im IE nicht mehr aus.

BTW. sieht man das ganze bei meinem neuen Projekt in Aktion.

[Whiz-zarD]

BTW. sieht man das ganze bei meinem neuen Projekt in Aktion.

...

schön, dass man nichts sieht :P

[Drakes]

schön, dass man nichts sieht :P

...

Das mit dem Werbung wegklicken und dann reloaden giltet immernoch. (blöder Server)

[Xardas der Dunkle]

Das mit dem Werbung wegklicken und dann reloaden giltet immernoch. (blöder Server)

...

Vernünftige Leute haben, Adblock Plus installiert .

Trotzdem sieht man nur ein nicht funktionierendes Loginformular .

[Whiz-zarD]

Vernünftige Leute haben, Adblock Plus installiert .

...

Vernünftige Leute benutzen keine Datenschleuder

Das mit dem Werbung wegklicken und dann reloaden giltet immernoch. (blöder Server)

...

klappt nicht (benutze Opera)

[Desmulator]

Vernünftige Leute benutzen keine Datenschleuder

...

Vernünftige Leute nutzen nicht den Opfabrowser.

[Crash-Override]

Vernünftige Leute nutzen nicht den Opfabrowser.

...

Lol soll das Opfer heissen? Opera? Ich wuerd ma sagen der Webspace ist einfach mal ziemlich behindert. Oder aber das Skript das bedingt durch Werbung nicht mehr funktioniert.

[Drakes]

Vernünftige Leute benutzen keine Datenschleuder



klappt nicht (benutze Opera)

...

Bei mir klappts, und ich teste mit IE 7, Firefox, Safari und Opera.

[Whiz-zarD]

es muss auch einen gesagt werden, dass man für den scheiss Webspace auch cookies benötigt -.-
Die hab ich grundsätzlich deaktiviert.