 CSS-Box - Text und Grafik
Inhaltsbox für Text und Image. Bei der Box wurde auf Tabellen völlig verzichtet. Die Box selbst und alle Elemente (Titel, Grafik und 2 Textblöcke) sind durch CSS-Angaben formatiert und positioniert.
|
|
'Personal-Container' Text und Grafik in identischen Boxen darstellen
Lesen sie zum Thema "Textspalten / Container mit CSS" auch die Seiten:
 Textboxen mit CSS 01
Container Text + Bild
Textboxen mit CSS 03
Diese CSS-formatierte Box kommt überall dort zum Einsatz, wo Text und Grafik in einem Container dargestellt werden, der in einer Web-Präsenz mehrmals eingesetzt und immer im identischen Look erscheinen soll:
Fußballmannschaft, Vereinsvorstand, Mitarbeiter, Teammitglieder, Personalvorstellung, Ersatzteilliste, Ü-Ei-Sammlung, Frühjahrsblumen ... . Anwendungsbereiche gibts überall.
Hier sehen sie ein Beispiel, wie es für die Steckbriefe von Mannschaftsspielern verwendet wird. Anpassungen für die eigentliche Box (Randfarbe, Containerbreite und Hintergrundbild mit farbigem Verlauf oben) können sie im CSS-Bereich für die ID 'Box1' einstellen. Der Titeltext und die 2 Textblöcke sind durch eigene Klassen unabhängig formatiert.
Die Boxen kann man abhängig von der Verwendung natürlich etwas dezenter gestalten.
Jupp Zupp (Mittelfeld)
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Hein Blöd (Torwart)
 Eintritt: 1983 (C-Jugend)
 Erfolge: Kreismeister 2008
 Position: Torwart
 Rückennummer: 18
 Email: heinbloed@abc.de
 Tel.: 01234-56789
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Mit CSS festgelegte Angaben für die Container:
Box: Gesamthöhe + Breite, Rand, Hintergrundbild, Margins
Foto: Rand, Margins, Ausrichtung
Text1: Font, Schrifthöhe, Schriftfarbe, Margins, Ausrichtung, Breite
Text1: Font, Schrifthöhe, Schriftfarbe, Margins, Ausrichtung, Breite
So sieht der HTML-Code im Body aus:
<!--Anfang Box 1 -->
<div class='Box1'>
<div class='Grafik'>
<img src="foto.jpg" width="100" height="120" border="0" alt=""><br>
</div>
<div class='Titel'>Name Vorname <span class="TitelKlein">(Mittelfeld)</span></div>
<div class='Text1'>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
<div class='Text1'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.<br><br>
</div>
</div>
<!--Ende Box 1 -->
übergroße Inhalte
Mit einer Notierung für das Verhalten bei übergroßen Inhalten legen sie fest, wie der Browser eine solche Situation handhaben soll. Wenn die vorgesehene Höhe / Größe nicht ausreicht, bleibt Ihnen nicht nur die beiden Optionen, den Inhalt lediglich abzuschneiden oder den übergroßen Inhalt anzeigen zu lassen. Beispiel:
#Box3 .Text1 {
margin-top:10px;
text-align: left;
font-size:12px;
font-family: Arial,Helvetica,sans-serif;
color: #000000;
width: 460px;
height:80px;
overflow-y: scroll;
}
Im Quelltext für die CSS-Notierungen der Unterklasse ' .Text2 ' sehen sie die Anweisung, eine vertikalen Scrollbar (in der y-Achse) zuzulassen.
Grundsätzlich sind diese Notierungen für 'overflow:' möglich:
visible
Der übergroße Inhalt wird angezeigt.
hidden
Der übergroße Inhalt wird abgeschnitten und nicht angezeigt.
scroll
Der übergroße Inhalt wird abgeschnitten. Das Element wird mit einer Scrollbar angezeigt.
auto
browserabhängig unterschiedlich.
Einige Versionen des IE vergrößern den mit 'overflow:visible' deklarierten Container bei Bedarf.
... und so sieht das Ergebnis aus:
Horst Schlämmer (Kanzlerkandidat)
Mit einer Erweiterung der CSS-Notierungen für Text1 oder Text2 können sie bei langen Inhalten auch eine Scrollbar anzeigen lassen (hier für Text2).
height:80px;
overflow-y: scroll;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Hintergrund-Grafiken zum Download 500 x 500 Pixel, ca. 12 kB
Klicken zur Darstellung im neuen Fenster, dann rechtsklicken und speichern.
    
Demo Box 04 (height:120px; width: 250px;)
Download HTML
Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae. Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae.
|
Download CSS
Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae. Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae.
|
Download JS
Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae. Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae.
|
Download PDF
Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae. Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae.
|
Viel Spaß bei der Umsetzung und beim Experimentieren
Lesen sie zum Thema "Textspalten / Container mit CSS" auch die Seiten:
Textboxen mit CSS 01
Container Text + Bild
Textboxen mit CSS 03
|
Home • CSS • Container Text + Bild
CSS + HTML-Notierung
