✔ Lücke zwischen Bild und Text

[paraphan]

Hallo,

ich würde gerne einen Textbereich erstellen, der oben und unten abgrundete Ecke hat. Hab jetzt mal das Groblayout der Seite gemacht, aber leider ist zwischen der oberen Rundung und dem Text noch ein Abstand, den ich nicht wegkriege...

Hier kann man es ansehen:
http://www.reanimation.cc/forum/cc_layout.html

Kann mir jemand weiterhelfen?

 

[Maik]

Hi,

verwende mal das folgende Stylesheet:

div#navigation {
float:left;
width:420px;
background:url(http://www.reanimation.cc/forum/bilder/cc_background.gif) no-repeat 10px 0;
}
div#navigation p {
background:white;
margin-top:8px;
}

und entferne das Grafik-Element aus dem DIV #navigation.

 

[paraphan]

Vielen Dank für die schnelle Hilfe!

Kannst du mir vielleicht sagen wie ich dann ans untere Ende des Textes auch noch eine Rundung anfügen kann?

 

[Maik]

Hierfür bindest du ein weiteres DIV-Element ein, das die entsprechende Hintergrundgrafik besitzt:

div#navigation div.navigation_bottom {
width:420px;
height:8px;
background:url(bilder/cc_background_bottom.gif) 10px 0 no-repeat; 
overflow:hidden;
}

<div id="navigation">
    <p>2) Navigation here. long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long fillerasdasdasdasdasds </p>
    <div class="navigation_bottom"></div>
</div>

Alternativ zu den verwendeten Grafiken kannst du dir ja auch mal Stu Nicholls' Snazzy Borders anschauen.

 

[paraphan]

Vielen Dank, du hast mir sehr weitergeholfen!