 CSS-Box - Text und Image
 08.05.2006 Höhenangabe für FF absolut festgelegt
Inhaltsbox für Text und Image. Hier wurde auf Tabellen zur Formatierung verzichtet. Alle Elemente sind durch CSS-Angaben festgegt.
Fußballmanschaft, Vereinsvorstand, Mitarbeiter, Teammitglieder, Personalvorstellung, Ersatzteilliste, Ü-Ei-Sammlung, Frühjahrsblumen ...
Anwendungsbereiche gibts überall. Hier sehen sie ein Beispiel mit eingebundenem Hintergundbild. (Downloads unten). Anpassungen für Randfarbe, Containerbreite und Hintergrundbild nehmen sie im CSS-Bereich vor.
Name Vorname
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.
 Mit CSS festgelegte Angaben
... für die 4 <DIV>-Container:
sBorder: Gesamthöhe / -breite, Randbreite / -farbe, Hintergrundbild, Margins
sFoto: Höhe, Breite, Margins, Ausrichtung
sName: Schriftfont, Schrifthöhe, Schriftfarbe, Margins, Ausrichtung
sText: Schriftfont, Schrifthöhe, Schriftfarbe, Margins, Ausrichtung
So sieht der HTML-Code im Body aus:
<!--Anfang Visitenkarte 2 -->
<div class='sBorder2'>
<div class='sFoto'>
<img src="foto.jpg" width="100" height="130" border="1" alt=""><br>
</div>
<div class='sName'>Name Vorname</div>
<div class='sText1'>
<br>
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.
<br><br>
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 Visitenkarte 2 -->
... und so das Ergebnis:
Name Vorname
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.
Hintergrund-Images zum Download 500 x 500 Pixel, ca. 12 kB
klicken zur Darstellung im neuen Fenster / speichern
    
 Tabellenrand mit HTML
Viel Spaß bei der Umsetzung
|
|
|
HOME
CSS + HTML-Notierung 
ZURÜCK 
