• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Postion:absolute; bei responsiven Designs?

Tabula_Rasa

Mitglied
Hallo,

ich hab einen riesen Sprung in Richtung Ziel hingelegt (mir Eurer Hilfe, dafür danke ich Euch sehr). Nun habe ich ein Problem. Ich möchte zwischen den Contents "Last Released" und "Best Of The Week" 3 Bilder nebeneinander haben(hier um zu veranschaulichen, wo ich die Bilder haben möchte: http://boratb.bplaced.net/index23.html (Seite erstellt von MrMurphy). Das eine Bild positioniere ich mit margin: auto mittig und die anderen Bilder mit position:absolute und mit top, left und right neben das Bild in der Mitte. Das Problem ist, dass bei abnehmender Breite die Bilder nicht mehr da stehen, wo sie sollten. Nur das Bild in der Mitte bleibt an seiner Stelle. Wie bekomme ich die 2 anderen Bilder bei abnehmender Breite weiterhin neben das in der Mitte stehende Bild zu bekommen? postion:absolute ist ja eigentlich nicht wirklich geeignet dafür, aber da die Bilder sich gegenseitig blocken, musste position:absolute benutzen.

Für jeden Tipp bin ich dankbar!
 
Werbung:
Hallo

Keine Ahnung warum du meinst "position: absolute;" benutzen zu müssen. Wenn die drei Bilder / Videos nebeneinander stehen bleiben sollen brauchst du doch dem umgebenden Container nur ein passendes min-width mit auf den Weg zu geben.

Gruss

MrMurphy
 
Hallo MrMurphy,

ich bin nicht lange dabei und meine Art zu lernen ist "learning-by-doing". Ich bin nicht der Typ, der alles theoretisch lernt und dann anwendet, sondern ich hab ein Problem und dazu such ich dann die Lösung und wenn ich wieder das gleiche Problem haben sollte, habe ich ja die Lösung noch im Hinterkopf. Aus diesem Grund habe ich auch einfache Lösungen für bestimmte Probleme nicht. Jetzt war ich auf der Suche nach der Lösung und habe sie gefunden und verstanden. Ist zwar nicht die beste Weise zu lernen, aber so macht's mir mehr Spaß :D.

Danke für Deine Hilfe. Ich habe das Problem gelöst ;)

Dazu hätte ich aber noch eine Frage: Da ich nicht möchte, dass man zu Seite scrollen kann wegen den Bildern: Muss ich für jede Breite die Breite der Bilder so anpassen, dass wirklich nur 100% der Breite des Geräts ausgenutzt wird, damit man also nicht weiter seitlich scrollen kann, oder ist da ein einfacherer Weg, dieses Problem zu lösen?
 
Zuletzt bearbeitet:
Werbung:
Da ich nicht weiß, wie das hier gehandhabt wird:
Wenn mir eine neue Frage einfällt passend zum Thema, soll ich die Bearbeiten-Funktion verwenden oder sie als neuen Beitrag posten`?
 
Alles klar :). Ich kopiere es einfach von oben und füge es ein.

Dazu hätte ich aber noch eine Frage: Da ich nicht möchte, dass man zu Seite scrollen kann wegen den Bildern: Muss ich für jede Breite die Breite der Bilder so anpassen, dass wirklich nur 100% der Breite des Geräts ausgenutzt wird, damit man also nicht weiter seitlich scrollen kann, oder ist da ein einfacherer Weg, dieses Problem zu lösen?
 
Werbung:
Hallo

Du machst die Bilder zu Block-Elementen und gibst ihnen eine maximale Breite von 100%.

Diese Vorgaben haben sich für die meisten Webseiten bewährt und können demnach meist grundsätzlich getätigt werden.

Gruss

MrMurphy
 
Code:
<div class="container">
     <img src="Bild.png" width="300px" height="300px">
     <img src="Bild2.png" width="300px" height="300px">
     <img src="Bild3.png" width="300px" height="300px">
    </div>

Code:
.container{
   min-width:920px;
   display: flex;
   flex-wrap: wrap;
  }

Code:
   img {
         display: block;
         max-width: 100%;
      }

So klappt das. Das Problem (oben beschrieben) tritt bei abnehmender Breite auf. Ich möchte ja die Bilder weiterhin aneinander gereiht haben... Was muss ich ändern, dass bei abnehmender Breite die Bilder kleiner werden? Da die Bilder nicht kleiner werden musste ich .container eine Min-Breite von 920px verpassen, dass die Bilder auch wirklich in einer Reihe bleiben
 
Darüber hatten wir doch schon mal gesprochen. Setze das Gridlayout eines CSS Frameworks wie Bootstrap ein. So etwas von Hand nachzubauen und für alle Browser anzupassen, vervielfacht den Arbeitsaufwand.
 
Werbung:
Darüber hatten wir doch schon mal gesprochen. Setze das Gridlayout eines CSS Frameworks wie Bootstrap ein. So etwas von Hand nachzubauen und für alle Browser anzupassen, vervielfacht den Arbeitsaufwand.

Darunter verstehe ich leider nichts gerade. Hättest Du ein Beispiel, in welchem das hinbekommen wurde? Vielleicht verstehe ich das dann ja :confused:
 
Werbung:
Hallo

Ich denke unter einer jeweils bestimmten Fensterbreite werden die Bilder zu klein und sollten deshalb dann nebeneinander stehen. Ich habe mal ein Beispiel erstellt:

http://boratb.bplaced.net/index29.html

Gruss

MrMurphy

Vielen Dank! Ich fuchs mich da mal rein!
Komplexe Probleme muss man soweit herunterbrechen, bis sie verständlich werden.

Lege den Projekt fürs Erste beiseite und schau dir hier die Starter-Templates an.
https://v4-alpha.getbootstrap.com

Wenn du das verstanden hast, kannst du die Kenntnisse anschließend auf deine Seite anwenden.

Alles klar! Dankeschön!
 
Zurück
Oben