Anpassung MSIE & Mozilla

[Christian Walgenbach]

Hallo,

ich habe eine Bildergalerie erstellt mit Divs. Leider sieht das Layout mit MSIE & Mozilla unterschiedlich aus. Wo kann ich noch daran feilen?

div.gallery {
 width:230px;
 float: left;
 margin:10px;
 height:150px;}

<div class='gallery'><a href='index.php?mainmenue=UnserAngebot&amp;menue=Heilpraktiker&amp;id=1&amp;display=1'><img src='thumbnail_bilder/2.jpg' alt='1'></a></div>

http://www.lfzm.de/unserangebot/heilpraktiker/notfall-lehrgang/gallery/index.php?mainmenue=UnserAngebot&menue=Heilpraktiker

by Christian

[Vinzenz]

Hallo Christian,

ich habe eine Bildergalerie erstellt mit Divs. Leider sieht das Layout mit MSIE & Mozilla unterschiedlich aus.

Das kann ich nicht nachvollziehen (IE 6 und Mozilla Firefox 0.8 unter Windows XP)

Wo kann ich noch daran feilen?

Welche Unterschiede siehst Du?
Wie sollte es Deiner Meinung nach aussehen?

Freundliche Grüsse,

Vinzenz

[DocBrain]

Moin,

Sieht doch bei IE 6 und Modzilla gleich aus?? Nur bei Opera sieht man keine Bilder. :)

[Detlef G.]

Hallo Christian

<div class='gallery'><a href='index.php?mainmenue=UnserAngebot&amp;menue=Heilpraktiker&amp;id=1&amp;display=1'><img src='thumbnail_bilder/2.jpg' alt='1'></a></div>

http://www.lfzm.de/unserangebot/heilpraktiker/notfall-lehrgang/gallery/index.php?mainmenue=UnserAngebot&menue=Heilpraktiker

Auf der Seite sind die Bilder in einer Tabelle

<table cellpadding =10 align=center border=0>

<tr>
<td> <a href='index.php?mainmenue=UnserAngebot&amp;menue=Heilpraktiker&amp;id=0&amp;display=1'><img src='thumbnail_bilder/1.jpg' width=100% alt='0'></a>
</td>
....

Welchen Sinn hat alt='0'?

Auf Wiederlesen
Detlef

[Christian Walgenbach]

Hi,

Auf der Seite sind die Bilder in einer Tabelle

<table cellpadding =10 align=center border=0>

sorry. hatte es vergessen hochzuladen. Schau mal unter
http://www.lfzm.de/test/unserangebot/heilpraktiker/notfall-lehrgang/gallery/index.php?mainmenue=UnserAngebot&menue=Heilpraktiker

by Christian

[Ingo Turski]

Hi,

das Problem sind die verschiedenen Höhen der Bilder. Hier müßtest Du individuelle Anpassungen z.B. des margins vornehmen oder zusätzliche Elemente verwenden. Sieh Dir doch mal http://www.td-rot-weiss-duesseldorf.de/sportbereich/std-paare.html an.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Christian

Deine Divs, die jeweils ein Bild enthalten

div.gallery {
 width:230px;
 float: left;
 margin:10px;
 height:150px;}

Es ist kein overflow angegeben, damit macht Mozilla diese genau 150px hoch (+ Margin), egal, ob das Bild reinpasst oder nicht. Der IE dagegen streckt das Div, bis das Bild hineinpasst.
Die Bilder haben verschiedene Höhen, bis 244px.

Entweder du gibst overflow:hidden; an, dann werden zu große Bilder beschnitten, oder du gibst als height die Höhe des größten Bildes an, dann sollte die Anordnung ähnlich der Tabellenversion werden. Dabei könntest du das Div dann weglassen und margin und float direkt den img zuordnen.

(Das <center> bringt nichts.)

Auf Wiederlesen
Detlef

[Christian Walgenbach]

Hallo,

Die Bilder haben verschiedene Höhen, bis 244px.

Entweder du gibst overflow:hidden; an, dann werden zu große Bilder beschnitten, oder du gibst als height die Höhe des größten Bildes an, dann sollte die Anordnung ähnlich der Tabellenversion werden.

habe jetzt mal versucht. es so zu realisieren.

Dabei könntest du das Div dann weglassen und margin und float direkt den img zuordnen.

das verstehe ich nicht ganz. Wie soll ich das realisieren?

(Das <center> bringt nichts.)

welches center meinst du?

Vielen Dank für die Hilfe. Kann ich es evtl. noch besser machen?

by Christian

[Detlef G.]

Hallo Christian

das verstehe ich nicht ganz. Wie soll ich das realisieren?

Sorry, bei dieser Variante natürlich dem a.

z.B. so:
<div class='gallery'>
<h2>Bildergalerie</h2>
<a ref='index.php?mainmenue=UnserAngebot&amp;menue=Heilpraktiker&amp;id=0&amp;display=1'><img src='thumbnail_bilder/1.jpg' alt='0'></a>
<a href='index.php?mainmenue=UnserAngebot&amp;menue=Heilpraktiker&amp;id=1&amp;display=1'><img src='thumbnail_bilder/2.jpg' alt='1'></a>
...
<a href='index.php?mainmenue=UnserAngebot&amp;menue=Heilpraktiker&amp;id=13&amp;display=1'><img src='thumbnail_bilder/95.jpg' alt='13'></a>
</div>

und im css

statt des <center>:

/*Bildergalerie*/
div.gallery h2{
 text-align:center;
}

oder gleich für alle Seiten:

#inhalt h2 {
 text-align:center;
}

für die Bilder:

div.gallery a {
 display:block;
 float: left;
 padding:0;
 margin:15px 0 15px 40px;
 height:244px;
}

Mir persönlich würde es allerdings so noch besser gefallen:

div.gallery img {
 float:left;
 margin:15px 0 15px 50px;
}

Wobei dann allerdings die Bilder, die nur um wenige px abweichende Höhen haben auf eine identische Höhe gebracht werden sollten.

Dann wirkt es nicht so streng und löchrig sondern eher locker.

Vielen Dank für die Hilfe.

Das hört man gerne.:)

Kann ich es evtl. noch besser machen?

Bestimmt würde sich noch etwas finden, aber man kann ja nicht alles auf einmal.

Wenn ich das mit den Anfängen vergleiche, freue ich mich, dass du nicht aufgegeben hast.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Christian

Nachtrag

Ich habe vielleicht viel zu kompliziert gedacht.

Teste mal folgendes:
Also wie bereits geschrieben, die gesamten Bilder in _ein_ <div class="gallery"> einschließen, dafür natürlich die vielen einzelnen herausnehmen.
Dann im css:

/*Bildergalerie*/
div.gallery{
 text-align:center;
}
div.gallery img {
 vertical-align:middle;
 margin:15px 20px 15px 20px;
}

Dabei könntest du dann, weil nur einmal vorhanden statt class="gallery" und div.gallery ... auch id="gallery" und #gallery ... verwenden.
Statt vertical-align:middle kannst du auch ...:top oder ...:bottom probieren, je nachdem, wie es dir am besten gefällt.

Auf Wiederlesen
Detlef