Rahmen mit abgerundeten Ecken mit Hilfe von Grafiken

Hallo zusammen,

ich würde gerne einen Rahmen mit abgerundeten Ecken um meinen Content haben.

Soweit habe ichs auch schon hinbekommen:
Floor LegendZ - die Breakdancecrew im Kraichgau

Wie man jedoch erkennen kann ist leider ein Abstand zwischen dem Kopf- und Fuss-Element und dem Inhalt.

Hier mein Css-Code:

* {
    margin:0px;
    padding:0px;
}

.website {
    background-color:#03F;
    width:710px;
    position:relative;
    
    margin-left:auto;
    margin-right:auto;
}

.menu {
    background-color:#F00;
    width:100px;
    position:absolute;
    top:200px;
    left:0px;
    
}

.websiteWithoutMenu {
    width:600px;
    position:absolute;
    right:0px;
    top:0px;
}

.content {
    background-image:url(images/layoutelements/borderCENTER.jpg);
    background-repeat:repeat-y;
    padding:10px;
    min-height:550px;    
}

und hier noch der relevante HTML-Code:

[HTML]

<nav class="menu">
    <p>Menu</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</nav>
 
<div class="websiteWithoutMenu">
   
  <header>
        <img src="resources/images/layoutelements/floorlegendzheader.jpg" width="600" height="193" alt="floorlegendzheader" />
        
        <img src="resources/images/layoutelements/borderTOP.jpg" width="600" height="10" alt="floorlegendzheader" />
            
    </header>

    <div class="content">
        <p>content....</p>
     </div>

    <footer>
        <img src="resources/images/layoutelements/borderBOTTOM.jpg" width="600" height="10" alt="floorlegendzheader" />
    </footer>    
</div>

[/HTML]

Es wäre super, wenn jemand eine Idee hat an was das liegen könnte.

Am padding liegts übrigens nicht, das habe ich bereits getestet…

Beste Grüße

Der p-tag steht ja für einen Absatz. Bei einem Absatz ist ja logischerweise immer ein Umbruch ( bzw. 2 Zeilenumbrüche ). Gib deinem p einfach ein margin-top:- ~ 5-10px; und deinem footer ebenfalls.

Ich habs gerade getestet und leider ohne Erfolg. Die Verwendung von margin-top führt nur dazu, dass der Abstand größer wird und wenn ich Text ohne

-Tag in den Content-Bereich schreibe ändert sich auch nichts…
Hier der Beweis :slight_smile:
Floor LegendZ - die Breakdancecrew im Kraichgau

Als Lösung ist das wohl nicht das Richtige, aber mit XHTML-Doctype ist das Problem nicht existent.
Ich bin mit HTML 5 leider noch nicht all zu vertraut und kann dir deshalb keine Erklärung dafür liefern, aber möglicherweise reicht dir ja der Denkansatz.

Der Abstand wird vom img-Element erzeugt. Das liegt glaube ich daran, dass ein img-Element „inline“ ist und deshalb Zeilenhöhe und -ausrichtung mit einkalkuliert.

Daher hilft: header img { display: block; }

Es ist aber semantisch korrekter, solche Verzierungsgrafiken als Hintergrundbilder (background-image) zu setzen (oder mit den neuen Rahmenfähigkeiten von CSS3 zu erzeugen).

Wow perfekt, jetzt sieht es endlich ganau so aus, wie ich es mir vorgestellt hatte!

Vielen, vielen Dank mermshaus und auch danke an die anderen User, die versucht haben mir weiterzuhelfen :wink:

Wofür Bilder?

Nimm lieber border-radius. Da mitlerweile alle Browser CSS3 unterstützen sollte es keine Probleme geben :slight_smile:

Abgerundete Ecken mit CSS

dernimmt6 hat Recht. und ist am einfachsten.

Leider funktioniert es doch nicht so perfekt. Es sind immernoch kleine Lücken da. Außerdem sind img Elemente nicht zum Layouten da.
Wenn du auf Grafiken nicht vertichten kannst oder willst, dann sieh mal hier [B]Skalierbare Info-Boxen mit abgerundeten Ecken[/B]

border-radius geht im IE übrigens erst ab Version 9.

Mit der Datei PIE.htc kann man auch dem IE6 bis 8 die runden Ecken beibringen.