Zur Navigation

nochmal: Bilder im div zentrieren

1 Micha

Hallo, schon vor zwei Monaten war dies mein Problem. Noch immer habe ich keine zufrieden stellende Lösung. Ich möchte nach wie vor ein Bild innerhalb eines quadratischen divs zentriert darstellen, möglichst nur, indem ich die HTML-Datei unangetastet lasse und dies nur über das CSS regele.
Einen Vorschlag von Jörg habe ich nochmal hier online gestellt.

Dummerweise funktioniert dieser Trick mit dem 1px-großen Leerzeichen nicht im IE. Das sagtest du, Jörg, damals schon. Leider hatte ich das verdrängt und jetzt stört mich sowas schon. Aber auch im Mozilla funktioniert die vertikale Zentrierung nicht korrekt. Der obere Balken erscheint kleiner als der untere.

Gibt es jetzt vielleicht noch neue, bessere Ideen als im Mai?

Danke für weitere Tipps!

Micha

20.07.2005 16:43

2 Micha

... und nun habe ich mal die Hintergrundgrafik-Methode getestet. Eigentlich gefällt mir diese Idee ja nicht so gut, aber wenn's wie gewünscht ginge, das wär doch was.

Ich schreibe also z.B. ins HTML:
<a href="#"><div class="bild" style="background:url(102-0261_img.jpg) center no-repeat; background-color:red;" title="Bild 3"></div></a>

Zugehöriges CSS:
    #vorschau .bild{
       width:120px;
       height:120px;
       background-color:blue;
       text-align:center;
       margin:auto; 
    }

Beispiel ist hier abgelegt.

Warum muss ich die Hintergrundfarbe (hier rot) ins HTML schreiben? Ich hätte gerne die CSS-Angabe (hier blau) stattdessen, aber ein Weglassen bewirkt nichts (bzw. kein blau). Auch die anderen inline-style-Angaben hätte ich dann gerne im CSS, zwecks Vereinfachung der HTML-Datei (und leichter Änderbarkeit).

(Wie) geht das alles?

Micha

20.07.2005 19:54

3 Jörg

Hallo Micha,

das Set background im HTML überschreibt wohl auch das Set background als ganzes im head bzw. in der CSS Datei. Wenn man trennt nach background-image, background-position und background-repeat, sollte es gehen:


    #vorschau .bild{
       width:120px;
       height:120px;
       background-color:blue;
       background-position:center center;
       background-repeat:no-repeat;
       text-align:center;
       margin:auto;
    }

und im HTML-Teil:


<td><a href="#"><div class="bild" style="background-image:url(102-0260_img.jpg);" title="Bild 1"></div></a><div class="gr">102-0260_img<br><span class="kl">Querformat mit etwas längerer Beschreibung, um zu überprüfen, ob das Ganze dann immer noch hübsch zentriert wird.</span></div></td>

zu welchem Zweck ich das transparent noch drin hatte, weiß ich auch nicht mehr :? es scheint aber auch ohne zu funktionieren :)

20.07.2005 20:37

4 chraebs (Gast)

Also wenn das bild nur horizontal zentriert werden muss, dannn gehts auch so (im html):
<div align="center">
<img src="Pics/R%20watch_12_580.jpg" alt="" align="middle">
</div>

also bei mir gings :) greez

18.08.2005 12:22

Beitrag schreiben (als Gast)





[BBCode-Hilfe]