Tabellenbild: 1 2 3 4 5 6

von: Werner Zenk

Beispiel 1:

	Lorem ipsum dolor
	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. Duis autem vel eum ...

Benötigte Bilder:

Hintergrundfarbe: #F2F2F2

Quelltext:

<table border=0 align=center cellpadding=0 cellspacing=0 width=300>
<tr style="background-image: url(s_oben_mitte.gif); background-repeat: repeat-x">
<td><img src="s_links_oben.gif" width=11 height=27></td>
<td valign=bottom><div style="background-image: url(s_bg_header.gif); height: 22px; 
 line-height: 21px;"><b>Lorem ipsum dolor</b></div></td>
<td><img src="s_rechts_oben.gif"></td>
</tr>
<tr>
<td style="background-image: url(s_links_mitte.gif)"></td>
<td style="background-color: #F2F2F2;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  ...
</td>
<td style="background-image: url(s_rechts_mitte.gif)"></td>
</tr>
<tr>
<td><img src="s_unten_links.gif"></td>
<td style="background-image: url(s_unten_mitte.gif)"></td>
<td><img src="s_unten_rechts.gif"></td>
</tr>
</table>

Beispiel 2:

	Lorem ipsum dolor
	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. Duis autem vel eum ...

Benötigte Bilder:

Hintergrundfarbe: #F2F2F2

Quelltext:

<table border=0 align=center cellpadding=0 cellspacing=0 width=300>
<tr style="background-image: url(s_oben_mitte.gif); background-repeat: repeat-x">
<td><img src="s2_oben_links.gif" width=11 height=27></td>
<td valign=bottom><div style="background-image: url(s2_oben_bg.gif); height: 22px; 
 line-height: 21px; color: #FFFFFF;"><b>Lorem ipsum dolor</b></div></td>
<td><img src="s2_oben_rechts.gif"></td>
</tr>
<tr>
<td style="background-image: url(s_links_mitte.gif)"></td>
<td style="background-color: #F2F2F2;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ...
</td>
<td style="background-image: url(s_rechts_mitte.gif)"></td>
</tr>
<tr>
<td><img src="s_unten_links.gif"></td>
<td style="background-image: url(s_unten_mitte.gif)"></td>
<td><img src="s_unten_rechts.gif"></td>
</tr>
</table>

Tipp Runde-Box Generator - Dieser Generator erstellt aus Grafiken und CSS eine Runde-Box.

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Markus: Ich würde gerne das Beispiel für meine Seite verwenden. Leider wird das Layout im Firefox nicht richtig angezeigt. Die erste Zeile wird immer zu hoch angezeigt. Im IE ist alles OK... Bitte um Rat! VG Markus Das Phantom: wie soll man die bilder auf einem externen Server lagern, also das kann ich ja, aber wenn ich die url von dem bild dort einfüge wird es nicht angezeigt! und die url stimmt! Torsten W: das rote gefällt mir sehr gut ! das werde ich verwenden ! Krümelmonster: Hallo Markus, versuchs doch mal mit CSS... Die Bilder hast du ja... Gruß & happy krümeln Krümelmonster
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Kompaktes Design

Tabellenbild 2

Symbolische Links - Kennzeichnen Sie Links mit Symbolen. Die Besucher erkennen sofort, was Ihnen beim anklicken des jeweiligen Links erwartet.

Tabellenbild 4

Bildformate Ladezeiten

Transparentes Textfeld - Transparente Textfelder, Buttons und Eingabefelder.

Die Kriterien für Benutzerfreundlicheit

Die Typografie: Einheit oder Vielfalt?

Verschiedene Zielgruppen

Tabellenbild 6

Weicher Farbübergang in Containern

Gratis-Webfonts von Google - Webfonts mit Textschatten. Mit den Google Web Fonts haben Sie die Möglichkeit eine ganze Reihe von Schriften auf Ihrer Webseite zu nutzen, ohne dass Sie diese auf den Server hochladen müssen.

Eingabe von mehreren Leerzeichen

Der lange Weg zum guten Webdesigner …mehr