• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Rahmen mit abgerundeten Ecken mit Hilfe von Grafiken

F

freakyBOi

Neues Mitglied
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:

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: 
<body>
<div class="website">
    
    <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>
</div>
</body>

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
 
Werbung:
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.
 
Werbung:
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 ;-)
 
Werbung:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben