Thema Responsive

Moin André,

dein #div header-inner ist 1080 px breit aber dein Bild ist 1240 px breit:

/images/slideshow/banner.jpg

Ich würde es mal runterskalieren auf 1080 px.

Hallo,

ist dann glaub ich, trotzdem nicht responsive. Würd es so probieren:

img {
max-width:100%;
height:auto;
}

Liebe Grüße, Christine

Ich versuche es nochmal:

das Headerbild ist immer noch 1240 px breit.

Im Hintergrund liegt noch ein /images/bg_hp.jpg

Dieses Bild ist 1680 px breit

Der Tipp von Christine ist schon richtige Basis für alle responsiven Seiten. Hatte ich auch erfolgreich mit dem Firebug ausprobiert...

(solange width und height nicht als Inline-CSS-Styles, sondern als Attribute width="..." height="..." des img-Tag gesetzt werden, funktioniert das meist schon mal ganz gut, weil CSS diese Attribute überschreibt.)

Zum Testen setzt noch je ein important

img {
max-width:100% !important;
height:auto !important;
}

@Elwood hat nat. ebenfalls Recht, dass man Bilder prinzipiell vor dem Upload so Pi mal Daumen auf maximal benötigte Breite hindingst.

Nachtrag: Und für die Hilfe-phase am besten das JCH-Plugin deaktivieren, damit man sieht, welche CSS-Datei geeignet ist usw.

...bin schon wieder weg...

Hallo Re:Later,

Zitat von Re:Later

Der Tipp von Christine ist schon richtige Basis für alle responsiven Seiten. Hatte ich auch erfolgreich mit dem Firebug ausprobiert...

(solange width und height nicht als Inline-CSS-Styles, sondern als Attribute width="..." height="..." des img-Tag gesetzt werden, funktioniert das meist schon mal ganz gut, weil CSS diese Attribute überschreibt.)

Zum Testen setzt noch je ein important

img {
max-width:100% !important;
height:auto !important;
}

Alles anzeigen

Ja, so sollte es auch funktionieren. Wieder was gelernt!

Deaktiviere doch bitte das JCH-Plugin, wie schon Re:Later sagte, damit man sich etwas besser orientieren kann. Lösche ausserdem auch mal den Joomla-Cache.

Der Tipp mit Max-width = 100%; ist richtig wenn das Bild immer größer oder mindestens ebenso groß ist wie die Fläche.
Das Bild wird dann nicht größer als 100% des div.

Was ist aber, wenn es kleiner ist als die Fläche? Es gibt ja auch richtig große Bildschirme. Dann dann muss es gestreckt werden.
Ich würde es so schreiben: und keinesfalls echte pixel-werte angeben).

<img src="..banner.jpg" alt="..." style="width: 100%;  height: auto;" />

(und habe inlinestyle (pfui) weil diese css .. )

Ok, dann versuch mal das auf zeile 83 - wo du schon richtig angefangen hast:

img {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    margin-top: 3em;  
}

Diese sequenz img { .. } gilt jetzt für alle images auf deiner Seite.

Da musst du dich ein bisschen mit css beschäftigen. Die Eigensachten vererben sich da.
Wenn diese Anweisung nur für ein bestimmtes image gelten soll, msst du das entweder mit einer Klasse oder über die Klasse der umschliessenden divs genauer bezeichnen.

Du kannst das also so schreiben:
.banner-inner img { .... }
Dann gilt es nur für dieses eine image

Oder du gibst dem image direkt eine Klasse:

<img class="img-banner" src="..banner.jpg" alt="..." />

img {
   width: 100%;
   height: auto:
}
img.img-banner {
             margin-top: 2em;
}

Ich kann das hier nicht so kurz erklären, leider. Vor allem um diese Zeit.

Tschuldigung, Christiane, muss dir leider widersprechen...

Den korrekten Code hat eigentlich schon Christine ganz am Anfang geliefert :

img {max-width: 100%;    height: auto;}

@obiwan7
Warum es beim ersten Mal bei dir nicht funktioniert hat, kann ich dir nicht sagen. Aber wenn du JCH aktiviert hast, könnte es durchaus sein, dass Aenderungen am CSS nicht sofort sichtbar werden. Deswegen haben wir dich schon mehrfach gebeten, das Plugin mal zu deaktivieren, bis alles gelöst ist.

EDIT
Ups, da war Christiane etwas schneller als ich . Mein Widerspruch bezog sich auf folgenden Code:

img {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    margin-top: 3em;  
}