Banner verkleinert sich

Hallo Karsten,

Zitat von Kaufmann

wie vorgeschlagen, habe ich den Code ersetzt. Das Bild wandert dann allerdings wieder nach links.

Also bei mir wandert nichts nach links. Habs temporär überprüft.

In der template.css soll nur stehen:

.banneritem img {
width:100%; 
}

Nach dem Speichern, Caches sowie Browsercache löschen. Kann ja manchmal dauern.

Liebe Grüße

Christine

Zitat von Kaufmann

In der Zeile 48 habe ich folgenden Code gefunden. Weil dort Banner steht dachte ich es könnte die richtige Zeile sein. Nach Anpassung des Codes hatte sich aber nichts verändert.

ja, das ist die Zeile (34 in der originalen index.php), die wie angegeben testweise geändert werden sollte UND zusätzlich aus dem Code von #3

.banneritem { max-width: 1200px;

margin: 0 auto;

}

max-width: 1200px; deaktivieren.

Vielleicht hat christine2 eine bessere/einfachere Lösung.

Ich will auch mitspielen jeder hat irgendwo recht und vielleicht habe ich was überlesen, aber ich sehe da drei Probleme

1) Beim vergrößern/verkleinern per scrollrad soll das Bild oben die Breite von 100% beibehalten.

Das ist ein Problem, denn das image passt sich normalerweise dem umgebenden div an. In dem Fall wird das umgebende div aber klein, und dadurch dass es nach links floatet sieht es dann ziemlich schräg aus.

In der Demo des Template gibt es nur ein Banner, keine bannergroup und in dem Fall wurde m.E. das image direkt in die index.php eingetragen mit style="width:100%".

2) Bei Medienwechsel (responsive) soll sich das bild anpassen - das stimmt mit

.banneritem img { max-width: 100%; }

3) In den modulen soll das Bild jeweils 100% Breite haben. Dafür müssen alle inline codes in den einzelnen modulen raus und das hier ans Ende des Templates

.moduletable .custom img {width: 100%; max-width: 100%}

Zitat von firstlady

Ich will auch mitspielen

Ich auch!!!

Mein Senf dazu: Der "Banner" ist ein ganz normales Modul vom Typ "Eigenes Modul", in dem nur ein Bild eingefügt wurde. Damit das Bild die ganze Breite ausfüllt, hat es eine Breite von 1920 px. Dieses Modul ist auf Position "banner" veröffentlicht.

Die verschiedenen CSS-Einträge, die hier inzwischen vorgeschlagen wurden, sind zwar alle nicht falsch, könnten aber durch einen einzigen ersetzt werden:

img {
    max-width: 100%;
}

Was mich aber komplett irritiert, ist diese Zeile im index.php des Templates:

<?php if($menu=="menu-25" || $menu=="menu-15") { ?>

Hat allerdings ziemlich sicher keinen Einfluss auf den Banner.

Hallo anka

ich bin nicht so sicher mit dem min-width, ob das reicht. Es passt zwar überall, aber

er hat in seinen Modulen Bilder, die ziemlich klein sind. Wenn er sie auf modulgröße strecken will braucht er zumindest in den modulen auch width: 100%.

Bei dem Banner oben hat er hier im gegensatz zur demo (wo es einfach ein custom modul ist) ein banner-modul verwendet. Glaub ich.

Hallo Christiane

Mit dem width:100% kann man zwar die Bilder strecken, aber will er das überhaupt? Das wäre jedenfalls ein relativ ungewöhnliches Vorgehen. Vor allem, weil dadurch die Bilder sehr schnell mal total unscharf bzw. verpixelt werden.

Mit dem Banner hast du wohl recht. Mein Einwand bezog sich auch eher auf deine Vermutung "direkt in die index.php eingetragen"

Ja, das weiss ich natürlich nicht, ob die Bilder gestreckt werden sollen. So sieht es halt recht uneben aus.

Ich würde ja oben das banner div nicht nach links floaten lassen, dann wäre das Problem mit dem scrolling aus der welt.

Wenn ich den TE richtig verstanden habe, soll das Ergebnis so aussehen wie in #19

Ja, ganz recht, das ist Problem nr.1 - beim verkleinern per mausrad - und dafür muss man,wie du schreibst, width: 100%direkt dazugeben.

Ich finde auch keine andere Möglichkeit.

Man könnte jetzt auch sagen: Dieses Kleinscrollen ist eine eher ungewöhnliche Aktion, dafür könnte man auch das obere div und damit das Bled kleiner scrollen.

Würde es dann mittig sitzen statt links, wäre die Seite auch ok.

Genau. Und damit das Bannerbild immer mittig sitzt, könnte man der Klasse "banner" ein "text-align: center" verpassen. Oder das Bild direkt im Editor (inline) zentrieren. Es ist ja nicht so, dass inline-Formatierung absolut tabu wären, man sollte es damit nur nicht übertreiben. Und manchmal machen sie sogar Sinn, wenn es z.B. ein einziges Vorkommnis betrifft .

.banner {
text-align: center;
}