Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion

Hinweis: Die Website Homepage-FAQs.de befindet sich seit 2012 im Archivmodus, d.h. sie wird nicht mehr aktualisiert.
FAQS zu HP&Co.
Grafiken / Button / Bilder / Fotos / Design - keine Abstände zwischen den Grafiken

A) Bilder vertikal übereinander anordnen ohne Abstand

Hierbei werden die IMG-Tags der Bilder, die übereinander angeordnet werden sollen, z.B. mit class="vertikal" versehen und für diese Klasse wird display:block definiert

1) CSS-Angabe

a) Im Headbereich

<style type="text/css">
.vertikal { display:block}
</style>

b) oder besser in der externen CSS-Datei

.vertikal { display:block}

2) IMG-Tags im Bodybereich

<img class="vertikal" alt="" src="button-home.gif" style="width: 88px; height: 31px;">
<img class="vertikal" alt="" src="button-fotos.gif" style="width: 88px; height: 31px;">
<img class="vertikal" alt="" src="button-ueber-mich.gif" style="width: 88px; height: 31px;">
<img class="vertikal" alt="" src="button-impressum.gif" style="width: 88px; height: 31px;">


B) Bilder horizontal nebeneinander anordnen

Hier genügt es einfach die IMG-Tags ohne Leerzeichen und ohne Zeilenumbruch aneinander zu reihen, evtl. Punkt C) anschauen

<img class="vertikal" alt="" src="button-home.gif" style="width: 88px; height: 31px;"><img class="vertikal" alt="" src="button-fotos.gif" style="width: 88px; height: 31px;"><img class="vertikal" alt="" src="button-ueber-mich.gif" style="width: 88px; height: 31px;"><img class="vertikal" alt="" src="button-impressum.gif" style="width: 88px; height: 31px;">

C) CSS-Reset - ungewollte Linien im Design verhindern

Das Problem sind dabei meist die Browservorgaben für margin (Außenrand/Abstand) und padding (Innenabstand) bei der Anzeige der Elemente.

Die Lösung ist das Setzen der Browservorgaben auf Null, siehe


Anmerkung: Beitrag komplett überarbeitet.

Anleitung (C) 2006, 2011 Daniel Wurst - http://www.homepage-faqs.de