nicht angemeldet
AugeHallo
/* hier beginnt das für die Box relevante CSS */
div {
margin:0;
}
.ro {
background:url(roundedbox_ro.gif) top right no-repeat;
}
.lo {
background:url(roundedbox_lo.gif) top left no-repeat;
}
.ru {
background:url(roundedbox_ru.gif) bottom right no-repeat;
}
.lu {
background:url(roundedbox_lu.gif) bottom left no-repeat;
}
.inhalt {
margin:0;
padding:2.5em 2.5em 3.5em 2.5em;
}
.inhalt p {
margin:0;
padding:0;
}
-->
</style>Das wär dein Beispiel. Ich müsste das style zu Beginn und am Ende wegnehmen, wenn ich das in eine externe CSS schreiben will.
Soweit ich das verstanden habe, benötige ich vier Bildchen, die die neuen "Ecken" darstellen - und diese quasi rund machen.
- Frage: Muss das .gif sein oder kann es auch .jpg sein?
Alle graphischen Browser verstehen zumindest folgende Bitmapgrafikformate: *.jpg, *.gif und *.png. Du kannst dir eines davon aussuchen.
GIF kann nur bis zu 256 Farben (8 Bit) beinhalten, reicht für solche Anwendungen aber oft, auch mit 16 (4 Bit), 32, oder auch 64 Farben, aus. Gerade mit sehr niedriger Farbauflösung ist die Dateigröße auch entsprechend klein. Brauchst du die volle Farbauflösung von 16 Mio. Farben (24 Bit), ist JPG gefragt. Allerdings wird die Qualität mit zunehmender Kompression und damit abnehmender Dateigröße sichtbar schlechter.
PNG kann da die Alternative sein, obwohl sich die verlustfreie Kompression in einer größeren Dateigröße auswirkt. Das gilt ausdrücklich für 24 Bit Farbtiefe. Grafiken mit 4 Bit oder 8 Bit Farbtiefe haben -außer in Ausnahmefällen- sogar eine geringere Dateigröße als GIFs mit gleichem Inhalt.
- Frage: Wo muss ich die vier Bilder speichern? (dort wo die anderen .htm's sind also httpdocs auf dem Server)
Da sie auf dem (einem) Webserver erreichbar sein müssen, müssen sie auch auf einem gespeichert sein. Also: ja. Sie müssen natürlich nicht im gleichen Verzeichnis wie die HTML-Datei gespeichert sein.
Beispiel (Namen mit abschließendem Slash ("/") sind Verzeichnisnamen):
- html/
- index.html
- css/
- ecken.css
- grafik/
- lo.gif
- lu.gif
- ro.gif
- ru.gif
Auszug aus index.html:
<DOCTYPE ...>
<html>
<head>
<link rel="stylesheet" href="css/ecken.css" type="text/css" media="screen">
<!-- Die Datei ecken.css wird aus einem Unterverzeichnis heraus geladen. -->
</head>
<body>
<!-- der Inhalt -->
</body>
</html>
Auszug aus ecken.css:
.ro {
background:url(../grafik/ro.gif) top right no-repeat;
}
.lo {
background:url(../grafik/lo.gif) top left no-repeat;
}
Der Browser lädt die CSS-Datei, wie bereits gesagt, aus dem in der index.html angegebenen Unterverzeichnis. Er interpretiert die in der CSS-Datei gemachten Pfadangaben von der CSS-Datei ausgehend. Das heißt, von der CSS-Datei, die in einem Unterverzeichnis liegt, ausgehend geht es eine Verzeichnisebene hinauf ("../") ind dann in das dortige Unterverzeichnis "grafik/" um von dort die Dateien "ro.gif" und "lo.gif" zu laden.
- Frage: woher weiss die css, wo meine Tabelle anfängt btw. wo diese Bildchen zu platzieren sind. Ich sehe keine Positionsangaben.
Da (in dem Beispiel) ist keine Tabelle. ;-) Sei's drum.
Es werden mehrere <div>s ineinander geschachtelt. das Innere <div> (jenes der Klasse "inhalt"), das nicht nur dem Namen nach den eigentlichen Inhalt beherbergt, bekommt die großzügigen padding-Angaben mit, um die Ecken freizuhalten. Da es seine Größe nach dem Inhalt bemisst und außen die padding-Angaben hinzukommen, werden die anderen, umgebenden <div>s, die nur der Anzeige der Ecken dienen, entsprechend vergrößert.
Willst du z.B. dem Inhalt des Kastens 200 Pixel Breite zugestehen und die Ecken sind 40x40px groß (stehen soweit über den Inhalt hinaus), so wird dem <div class="inhalt"> folgendes mitgegeben: width:200px;, padding:40px;, der Kasten ist somit 40px+200px+40px=280px breit. Die Höhe würde sich, ohne weitere Vorgaben flexibel nach dem Inhalt richten.
Tschö, Auge
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.2
Marc
Gunnar Bittersmann