Howto: runde Ecken mit CSS und Bildern

[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.