Hallo,

ich habe versucht meine eigene Seite weitgehend flexibel zu gestalten und genau das bereitet mir jetzt an einer Stelle Probleme. In meinem Portfolio hab ich eine Mini-Slideshow eingebaut und bei den Abmaßen der (gefloateten) Slideshow liegt das Problem. Relative Höhenangaben beziehen sich ja immer auf die Höhe des Elternelementes, aber wenn dieses und auch alle übergeordneten ebenfalls relative Höhen haben, dann sieht es schlecht aus.
Die folgenden Bilder zeigen vielleicht am Besten wo mein Problem liegt:

Slideshow und dazugehöriger Text auf 15" Display:


Slideshow und dazugehöriger Text auf 20" Display:


Ab einer bestimmten Bildschirmgröße rutscht der Text unter die Slideshow (d.h. eigentlich rutscht er nicht unter die Slideshow sondern nur unter die einzelnen Bilder).
Warum das passiert ist mir klar - das div welches die Slideshow enthält hat eine feste Höhe, die Bilder in der Slideshow dagegen sind flexibel - ich weiß bloß nicht wie ich es lösen kann.
Was habe ich schon probiert?
1. Dem div der Slideshow (.portImg) keine Höhe zu geben -> macht alles noch schlimmer, dann rutscht der Text generell bis unter die Controls der Slideshow.
2. Dem div der Slideshow eine eine größere Höhe als jetzt geben -> dann entsteht aber unter den Bildern auf kleineren Displays ein sehr dicker Rand (was jetzt beim Verkleinern des Viewports oder kleineren Displays auch schon passiert, aber dann wäre es bei allem was kleiner 20" ist die Regel)
3. Statt der Slideshow das div mit dem Text(.portText) floaten plus ihm eine Breite zuteilen -> das macht die Sache für die Slideshow zwar besser (eigentlich perfekt), aber dafür sieht es jetzt mit dem Text blöd aus. Gerade für etwas längere Texte ist so ein mittig reingequetschter Text nicht wirklich toll.

Hat jemand eine Idee für mich, wie sich das Problem lösen läßt?
Der Link zum Problemkind: Bauch & Baby Store | Advanced Simple

Hi,

div.portImg hat zuwenig margin-bottom.

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Du müsstest das Seitenverhältnis der Bilder für das Element .portImg nachbilden.
Das geht z.B. mit einem prozentualen unteren Padding statt der festen Höhe (33% müssten in etwa hinkommen).

edit: Klaus, schau doch nochmal genau hin. Das Problem ist, dass die abs. pos. Bilder ab einer gewissen Größe (die letztlich abhängig ist von der Viewportbreite) über die vorgesehene Höhe von 260px hinausragen -- bzw. unterhalb einer gewissen Größe eine graue Lücke entsteht.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Ha, das gibt's doch nicht.
Wieso komm' ich nicht darauf?
@fricca: Du bist eindeutig die Beste (womit ich aber niemand sonst hier benachteiligen will ). Inzwischen schulde ich Dir schon mindestens ein paar Kaffee (oder was auch immer Du bevorzugst).
Danke!
Damit ist der letzte größere Wermutstropfen nach der Umgestaltung beseitigt.

*g*
Rotwein? Du bist mir nur leider entschieden zu weit weg ...

Hast du auch in den IEs getestet?

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

ja du hast recht.
Deine Lösung ist besser.

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

@fricca: Du sollst ja auch nicht zum Abholen zwangsweise vorbeikommen . Aber wer weiß wo man sich mal über den Weg läuft ... dann darfst Du Dir "'ne Kiste" Rotwein wünschen ...
Ich mußte noch etwas nachjustieren. Mein liebes jquery.cycle-Plugin ist leider so nett dem ul-Element Höhe und Breite per Inline-Style zu verpassen, wenn das umgebende Element da nix festes hat. Da mußte ich etwas mit !important tricksen, um meine relativen Angaben durchzudrücken.
Die IEs scheinen soweit mitzuspielen. Der IE8 hampelt etwas mit der Bildergröße herum ... er macht die Bilder immer erst riesengroß und paßt sie erst dann an.
IE7 sah für mich gut aus und IE6 macht es für seine Verhältnisse auch recht gut.

Ich weiß nicht, irgendwie sieht es in meinem IE8 seltsam aus.
Brauchst du denn den border und die margin-Schieberei bei img überhaupt noch?
edit: Achso, der Rahmen ist ja beim "Sliden" sichtbar. Dann schon.
Versuch mal bitte display:block für die img-Elemente.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

ähem......, von welcher Site redet ihr da?
An der verlinkten Site ist doch noch gar nichts geändert worden.

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Ich sehe bei .portImg statt einer festen Höhe ein unteres Padding von 33%. Cache?

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken