obere linke- und untere linke Ecke werden nicht angezeigt

GN · #1 (**permalink**) 18.05.2010, 19:11

Hallo,

ich möchte einen Rahmen um DIVs haben.
Leider zeigt er die obere linke- und die untere linke Ecke nicht an???
Ron´s Page

Code:

.innerBox {
	padding-top: 9px;
}

.innerBoxHeader {
	background: #fff url(../img/corner_tr.gif)  100% 0 no-repeat;
	height: 6px;
	overflow: hidden;
}

.innerBoxContent {
	background: #fff;
	font-size: 12px;
	line-height: 15px;
	border-left: 1px solid #dadada;
	border-right: 1px solid #dadada;
	padding: 0 6px;
}

.innerBoxFooter {
	background: #fff url(../img/corner_br.gif)  100% 0 no-repeat;
	height: 6px;
	overflow: hidden;
}

HTML-Code:

        <div class="innerBox">
          <div class="innerBoxHeader">
            <img src="img/corner_tl.gif" width="6" height="6" alt="" />
          </div>

          <div class="innerBoxContent">
            <p>Navigation</p>
          </div>
          <div class="innerBoxFooter">
            <img src="img/corner_bl.gif" width="6" height="6" alt="" />
          </div>
        </div>

Gruß, GN

hubspe · #2 (**permalink**) 19.05.2010, 11:29

Hi,

deine Art runde Ecken zu bauen ist imho etwas suboptimal.
Schau mal hier, da sind auch noch zwei Links zu noch einfacheren Runde-Ecken-Tuts.

GN · #3 (**permalink**) 19.05.2010, 12:04

Hi hubspe,

ja die Art mit runden Ecken kenne ich.
Wollte es aber mal wie auf London, United Kingdom - Weather Forecasts and Maps at CNN.com probieren.

Finde ich persönlich halt auch besser!
Ist halt bloß, dass links die Ecken nicht sind wo sie sein sollen.......

VG, GN

hubspe · #4 (**permalink**) 19.05.2010, 12:12

Zitat:

Zitat von GN

Wollte es aber mal wie auf London, United Kingdom - Weather Forecasts and Maps at CNN.com probieren.

Finde ich persönlich halt auch besser!
Ist halt bloß, dass links die Ecken nicht sind wo sie sein sollen.......

diese Methode grenzt für mich an grobem Unfug, um es mal drastisch auszudrücken.

Es werden zu viele Elemente benötigt. Schmuckgrafiken haben im Markup nichts zu suchen, sondern gehören als HG-Grafik ins CSS.
Im Grunde ist das die Umsetzung einer ganz alten Tabellendenke.

GN · #5 (**permalink**) 19.05.2010, 12:19

Zitat:

Zitat von hubspe

diese Methode grenzt für mich an grobem Unfug, um es mal drastisch auszudrücken.

okay, ist halt deine Meinung.... aber die Ecken habe ich leider immer noch nicht da, wo sie hin sollen...

fricca · #6 (**permalink**) 19.05.2010, 12:24

Du siehst die img-Elemente nicht, weil sie durch overflow:hidden weggeschnitten werden. Sie sitzen auf der Grundlínie eines gedachten Textes: DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen
Der Doctype macht den Unterschied aus, der die Bilder auf deiner Vorbildseite sichtbar macht.

Außerdem sehe ich noch "Collapsing Margins".

Sonderlich empfehlenswert finde ich die Methode auch nicht. Solche Bildchen haben im Markup nichts verloren.
edit: Außerdem hast du doch Boxen mit fester Breite. Da ist dieses Ecken-Gestückel gänzlich überflüssig.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
header bleibt nicht fixiert / untere Rahmenlinie wird im IE nicht angezeigt	boerdi	CSS	2	01.09.2008 14:34