Ausrichtung für runde Ecken

[Sven Rautenberg]

Moin!

ich meinte, ich hätte alles richtig gemacht, richtiger DOCTYPE (stict)  schön alles mit css, um die runden Ecken reinzubekommen, bis ich das mit dem IE öffnete:

Wenn ich mir mal den Quelltext angucke, stellt sich mir sofort die Frage: Warum denn bloß so kompliziert? Vier absolut positionierte DIVs mit IMG für die vier Ecken, dann noch eines für den großen Logokasten - und das Logo als IMG außerhalb von allem.

Sofern du nicht irgendwelche Sonderwünsche in diesem Header zu realisieren hast, sondern einfach nur einen von links bis rechts gehenden Header haben willst, empfehle ich dir:

  
<div id="header"><img src="logo-mit-zwei-ecken-links" alt="Firmenname" width height></div>  

Und das CSS dazu:

  
#header {  
  background-image:url("zwei-ecken-rechts");  
  background-repeat:no-repeat;  
  background-position:top right;  
  background-color:#C80751;  
  width:100%  
  height:126px;  
}  

Dein Firmenlogo kriegt die komplette Höhe von 126 Pixeln, und am linken Rand die zwei runden Ecken oben und unten. Das Hintergrundbild im #header besteht ausschließlich aus den zwei Hintergrundecken, ist aber nur so breit, wie die Rundung es erfordert. Und schon hast du ein in der Breite wunderbar flexibles Element mit runden Ecken.

- Sven Rautenberg