Frage von CleYT, 10

Was ist das jetzt die Geschichte mit den responsiven Bildern auf meiner HTML-Webseite?

Vor ein paar Tagen stand ich vor der großen Krise "Oh hilfe meine Webseite passt sich keinen Bildschirmen an" nun habe ich mich nochmal genauer damit beschäftigt, ich habe alles ausprobiert, direkt in dem Bild code mit class="img-responsive", mit CSS max-width, min-width, und so weiter, wenn ich aber als Beispiel position absolute oder relative gar nicht dazu schreibe wird mir das Bild auch mit einem ausreichenden z-index nicht angezeigt und das Test-Bild sag ich jetzt mal wurde nach wievor nicht kleiner beim Seite verkleinern, was grundsätzlich mein Ziel ist... also würde mich freuen wenn mir jemand einen css style schreiben könnte wie er ein Bild über andere Elemente legen würde, dieses zentrieren und responsive machen würde, ich brauche einen Lehrer, das Internet, sprich w3schools, gibt nicht mehr her, es wird alles was möglich ist gezeigt aber nicht wie in der richtigen Combi weil immer wenn ich alles was ich denke dass passt zusammen habe wird das Bild nicht angezeigt oder es bleibt links oben im Eck und will sich nicht der Bildgröße anpassen...

Lg, Cle, danke im Voraus

piratenschnack.com (bitte redet mich nicht wegen den meta tags im Body zu, die ersten 2 Monate hat ein Freund an der Seite mit gearbeitet, ich habe keine Ahnung von meta tags weil ich mich mit diesen noch nicht befasst habe, befassen habe können)

Antwort
von regex9, 10
  1. Du muss CSS Media Queries nutzen. Für absolut positionierte Elemente gilt die Einheit %.
  2. Statt mit img-Tags zu arbeiten, wäre es hier sinnvoller, Hintergrundbilder zu nutzen (background-image). Die Elemente, denen du diese Hintergrundbilder zuordnest, müssen eine Höhe und Breite besitzen, mit background-size kannst du das Bild im Container skalieren. Absolut positionierte Elemente brauchst du daraufhin wohl nicht mehr.

(...) bitte redet mich nicht wegen den meta tags im Body zu, die ersten 2 Monate hat ein Freund an der Seite mit gearbeitet, (...)

Das heißt also, dass du bereits weißt, dass die Tags im Body nicht hingehören, machst es aber trotzdem. Von fehlender Ahnung kann also nicht die Rede sein. Und deinen Freund solltest du nicht mehr an den Code heranlassen.

Kommentar von CleYT ,

Ja ich mache nur noch mit %, aber wie würdest du ein Bild stylen?   Mein Freund hat mich eh so zusagen vor 2 Monaten im Stich gelassen... davor haben wir 2 Monate zusammen geabeitet, warum ich weis das die meta tags nicht rein da dürfen? Wurde mir gesagt und kam mir schon vorher eigenartig vor aber ich weis nicht was ich raus nehemen darf und ich weis nicht ob dann was nicht mehr funktioniert, Ahnung habe ich von meta tags nicht gerade viel und das mit den media queries da habe ich auch noch nichts raus gefunden, meinst du wir könnten uns mal in Skype oder Facebook oder so unterhalten? Hab da so meine probleme und das ist meine erste Webseite...

Kommentar von regex9 ,

http://www.w3schools.com/css/css_background.asp

Alle Meta-Tags kommen in den head, ohne Ausnahme. Sie beschreiben das Dokument an sich bzw. geben generelle Informationen aus. Wenn der Browser einen Request ausführt und der Server darauf antwortet, indem er die Seite schickt, liest der Browser erst den Header des Dokumentes aus, danach den Body. Mittels des Headers kann er bestimmen, um was es in dem Dokument geht, welches Text-Encoding genutzt wird und wie der Titel des Dokuments lautet. Einige Suchmaschinen laufen nur über den Header um sich die relevanten Informationen zu ziehen. Informationen aus dem Header haben eine höhere Priorisierung als der Content selbst.

Nein, bitte stelle deine Fragen hier.

Kommentar von CleYT ,

Ok, cool, danke für die Info, dann werd ich die mal alle in den head verlegen die meta tags ^^aber sowas in der Art hab ich mir schon vorgestellt und das mit den backgrounds schau ich mir auch an, danke!!

Antwort
von threadi, 7

Mit dem Attribut srcset kannst Du definieren welches Bild bei welcher Auflösung angezeigt werden soll. Dadurch kannst Du responsive Bilder erreichen. Siehe:

http://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/picture

Der Hinweis aus einer anderen Antwort Hintergrundbilder zu verwenden, ist nicht immer ratsam. Man sollte bei der Ausgabe darauf achten in welchem inhaltlichen Zusammenhang die Bilder zum Text der Seite stehen. Sind es inhaltlich wichtige Bilder sollte man sie weiterhin als Bild und nicht als Hintergrundbild einfügen, da Hintergrundbilder semantisch gesehen keine Bedeutung haben.

Kommentar von regex9 ,
Kommentar von CleYT ,

Ich möchte das gerne mit CSS machen, self html ist nicht so schön in meinem Fall, kann ich alles umschreiben... außerdem ist es mir zu verwurschtelt

Kommentar von threadi ,

Es spielt keine Rolle wo du was lesen und lernen kannst. Du solltest dir anschauen wie man HTML-Elemente korrekt einsetzt. Auf per CSS gesetzte Hintergrundbilder zu setzen nur weil es einfacher zu sein scheint, macht deine Seite nicht unbedingt besser.

Antwort
von Malemeister, 6

Hallo,

ohne deine Website angeschaut zu haben bin ich mir 100% sicher das du CSS nicht verstanden hast. Lerne die Grundlagen von CSS, dann wird sich dein Problem ganz von selbst lösen!

Grüße

Kommentar von CleYT ,

Nutzlose Antwort, ich habe gefragt wie du es machen würdest, es funktioniert bei mir nicht, ich habe alles durch und ich verstehe css ich verstehe alles was es bedeuten soll, beispiel: width, maximal und minimal.. die weite wie breit das bild is etc. aber es funktioniert nicht! Ich kenne alle Sachen die man rein schreiben kann und was sie machen aber ich sehe keine Auswirkungen! Deshalb habe ich gefragt ob mir mal wer sagen kann wie er es machen würde! Um zu sehen ob ich wirklich einfach irgendwas falsch zusammen mixe!!!

Kommentar von Malemeister ,

Und wieder ein uneinsichtiger Genosse...

Wenn du CSS verstehst, dann hättest du dieses Problem nicht. Du weist vielleicht was width macht aber du weist nicht wann und in welchem zusammenhang. Width verhält sich nämlich sehr unterschiedlich und bei einigen Tags hat diese Angabe auch keine Wirkung.

Allein diese Aussage von dir bestärkt meine Vermutung das du dich mit CSS nicht auskennst bzw. dich damit nicht genug auseinander gesetzt hast.

Ich kann dir gerne einen entsprechenden Code fertig machen. Allerdings werde ich gewöhnlich für meine Arbeit bezahlt. Wenn du damit kein Problem hast, darfst du mich gerne Privat kontaktieren.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten