Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
css verschiedene Bilderbreiten immer gleicher Abstand
Hallo Forum,
Folgendes Problem:
ich möchte zwischen drei verschieden grossen Bildern jeweils den gleichen Abstand haben. ABER: Der Code sollte auch für Bilder mit anderen Breiten passen (Dann wird bei identischer Gesamtbreite der Abstand zwischen den Bildern entsprechend grösser oder kleiner)!
Bisher habe ich (ganz simpel) das:
Nun das Problem:
da in diesem Fall das Bild3 deutlich breiter ist als Bild1 wird der Abstand zwischen Bild2 und Bild3 grösser als zwischen Bild1 und Bild2. Aber das will ich eben gerne ausschliessen.
Eigentlich gute Idee aber dann habe ich rechts und links der drei Bilder einen "Flatterrand" (sorry hatte in meinem posting vergessen zu erwähnen das die äussere linke Kante und die äussere rechte Kante der Bilderreihe unverändet bleiben muss. Es sollen lediglich die beiden Abstände zwischen den Bildern (bei verschiedenen Bilddern) variieren...
hallo kaifreund
....gib alles in feste breiten an das ganze layout und zentrierst das bild, so hast gar keinen flatternden rand.....meinte müsste schon gehen, probiers mal.....
...und muss es eine tabelle sein? kannst du nicht alles in <div>-container verpacken?----> schnellere ladezeiten, vorallem bi bilder eine gute argumentation <div>'s zu verwenden
unten malerei wählen, dann oben links "in sich hineinhorchend"
--> der abstand zwischen den bildern ist nicht gleich...
Achtung: ich will eben *nicht* die Bilder/Tables/divs in fester Breite angeben da die Bilder immer verschiedene Breiten haben...
Also bei dem angegebenen Link sind die Abstände zwischen den Bildern bei mir (Camino 0.7) absolut gleich. Lediglich das erste steht ein bisschen höher.
@ lengsel.
hmmm.
Alle mir bekannten Browser ab 5.5 auf MAC als auch PC + Firefox 1 und Safari 1.2 zeigen dort einen Unterschied. Nimm mal in der Navigation "durch das Leben inspiriert" da habe ich dir eine Border gesetzt und damit ist es besser zu sehen?!
in meinen browsern (camino, explorer für mac, firefox, sAFARI, alles aktuelle versionen) ist der abstand regelmässig!
übrigens: schöne fröhliche bilder hast du da
edit: finde schade, dass man nur mit eingeschaltetem java navigieren kann ......
was mir auch noch aufgefallen ist, man kommt gar nicht an die navi hin, wenn man (mit meiner auflösung 1024y768) nicht das ganze fenster auf volle grösse skaliert.--> safari macht das so, der netscape zb nicht...
dann mache das bild eben " künstlich" grösser, indem du jeweils die bildgrösse berechnest und das was beim kleineren fehlt weist du die differenz als margin-left -bottom etc... zu (vom bild zum zellenrand)
Ich versuche mal unabhängig davon das Problem etwas zu abstrahieren, manchmal hilft das.
Du hast ein Browserfenster, bzw. einen Hauptframe mit einer Breite X, die sich je nachdem wie gross der Besucher sein Fenster aufzieht ändert. So oder so entspricht X 100%.
Da drin finden sich jetzt Bilder die zusammengerechnet eine Breite von Y haben. Im Extremfall (die breitesten Bilder zusammengenommen) nehmen die ?? % der Breite von X ein. Zwischen den Bildern sollen sich gleich breite Abstände befinden, die zusammen die Breite Z haben.
X-Y=Z, also würde ich mal versuchen dem mittleren Bild einen margin-left und margin-rightwert von 1/2 Z zuzuweisen.
Bin mir nicht sicher ob ich es jetzt nicht verkompliziert habe...
@mac-anfänger
navi javascript: ja ist schade aber nen richtig guten css hoover effekt der den effekt auch nach klick des links noch ensprechend geändert anzeigt kenne ich leider nicht. kannst du exakt den effekt den ich da brauche mit css/html bauen? wenn ja -wie?!
künstlich grösser machen: nee eben nicht! dann muss ich für jede reihe entsprechende werte ausrechnen, das finde ich unelegant. geht das nicht anders war die frage!
bilder: tja fröhlich aber nicht die meinen ;-)
@lengsel
jaja das stimmt schon. und wie geht das per css "dynamisch" - weil ich eben nicht (s.o.) für jede bildreihe z neu ausrechnen will.
ich habe die reihe aktualisiert und vielleicht ist es nun ein wenig besser zu erkennen: alles was ich eigentlich brauche ist das das linke und das rechte bild sich mit der tabellenbreite die sie sich "erzeugen" (da ja keine breite angegeben ist) auf die eigene bildbreite beschränken. das mittler bild ist center und damit wären die abstände rechts und links immer identisch egal wie breit bild1 und bild3 sind.
aber es ist anders da die tabelle den drei bildern anteilig an ihrer breite zellen aufmacht und wenn die breite von bild1 und bild3 verschieden ist....
allet klar?
@mac-anfänger
navi javascript: ja ist schade aber nen richtig guten css hoover effekt der den effekt auch nach klick des links noch ensprechend geändert anzeigt kenne ich leider nicht. kannst du exakt den effekt den ich da brauche mit css/html bauen? wenn ja -wie?!
leider kann ich dir für den rest keine weiteren tipps mehr geben....
ich dachte du hast schon eine lösung...
ich vermute aber dass es nicht anders geht, habe keine idee, werde sie dir aber bekannt geben, wenn ich eine lösung träume, und das ist kein witz, oft habe ich nachts so wie eingebungen (--> in den träumen) wenn ich nach lösungen suche!
wenn du eine "elegante" lösunggefunden hast, lass mich diese wissen und poste sie
davon machen kann?