Ich scheitere gerade an der Umsetzung, wie ich Fließtext um ein Bild herumlaufen lassen kann. Im Anhang ist zu sehen, wie es eigentlich aussehen soll, mit manuellen Enter wirds mobil aber nichts. Da gibts doch sicher auch ein div-Dingens für?
Danke, aber geht das nicht auch ohne Style-Sheet? Kann ich das float nicht direkt in html eintragen? (Ich bin nicht sehr begabt, was diese Dinge angeht )
Das ist nicht so schwer, hast Du denn schon eine "Baustelle eröffnet", wenn ja, dann gib mal einen Link.
Ich bin noch offline. BIslang steht in meinem Content "Über uns" nur mein Text. Sonst nix . Bild muss noch irgendwie dazu.
Okay, so ungefähr sollte der Code im Content-Manger dann aussehen: HTML: <img alt="Text für das Bild" class="img-float-right" src="Dein Link zum Bild" /> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> Die Texte "lorem ipsum..." ersetzt Du natürlich durch Deinen Text. Dann noch im eigenen CSS folgendes eintragen: Code: .img-float-right { float: right; } Das sollte es eigentlich gewesen sein.
Achtung, in dem HTML-Code hatte ich noch etwas vergessen, bitte tausche : HTML: <img alt="Text für das Bild" class="img-float-right" src="Dein Link zum Bild" /> gegen HTML: <img alt="Text für das Bild" class="img-responsive img-float-right" src="Dein Link zum Bild" /> sonst hast Du Schwierigkeiten wegen den kleineren Bildschirmen.
Die hab ich gerade wieder . Ich hab mich jetzt mal durch die Anleitungen im Netz gewühlt, aber irgendwie funktioniert nichts richtig. Ich möchte meinen Index optisch etwas umbauen, so wie im Screenshot (ja, ich bastel erstmal in Office, um zu sehen, was mir gefallen könnte) Die Bilder sollen nicht über 6 Spalten gehen, sondern lediglich von Spalte 2-6 / 7-11 (so in etwa). Der Text daneben soll bündig (Screenshot 116) oder etwas überlappend (Screenshot 117) auf das Bild laufen und gaaanz wichtig: mobil direkt unterhalb des Bildes hängen. Meine momentane Bastelei führt mich immer dazu, dass ich das Bild über 6 Spalten habe und den Text auf die andern 6 Spalten verteilt. Mobil sieht das natürlich bescheiden aus, weil der Text viel zu weit vom Bild nach unten weg rutscht. Lieg ich da mit Float falsch? Wie kann ich das Bild an der Mitte ausrichten? Ist der Text "reiner Text" oder ein Bild? PS: Die Grundidee dazu hab ich von www.westwing.de
Also, bei Westwing.de ist der Bildschirm in zwei Hälften zu je 50% aufgeteilt und dann wurde mir Float und Margin die Positionierung vorgenommen. Wenn ich das richtig gesehen habe, dann wurden verschiedene Werte für die verschiedenen Bildschrimauflösungen (Dekstop, Tablet, Smartphone) verwendet. Das Ganze ist keine Zauberei, aber auch nicht ganz einfach mit den verschiedenen Positionen. Die Text sind übrigens "echte" Texte und keine Bilder. Die sind auch in einem Container (div) verschachtelt und sind dann mit einem negativen margin (-100px) in den ersten Bereich rein geschoben worden.
Hallo Sabine, Da Du Dich ja doch mehr damit beschäftigst, schau Dir einmal die Anleitung für Bootstrap an. Da wird viel erklärt, über Gridspalten und wie man die verschachteln kann etc. (Link nur für registrierte Nutzer sichtbar.)
Nicht einfach für wen? Jemanden, der sich damit auskennt, oder für Laien wie mich? Ich hoffe jetzt einfach mal, du meinst nicht die Profis, dann hab ich noch Hoffnung für mich Danke für diesen Denkanstoß, das bringt mich doch einiges weiter!! Ja, ich kann es überhaupt nicht leiden, wenn ich mit etwas arbeiten muss, wovon ich nichts verstehe. Es kostet mich zwar meinen letzten Nerv und etliche Stunden Schlaf, aber ich will es selbst hinbekommen. Und mit Element untersuchen komm ich bislang gar nicht weiter. Das ist in etwa, wie chinesiche Zeichen kopieren und kucken, was passiert.
@barbara wäre ich damit auf dem Holzweg? (Beginn des Fotos bei Spalte 2 über 5 Spalten, beginn des Textes bei Spalte 7 über 5 Spalten) Mobil Bild über gesamte Breite, Text darunter über gesamte Breite) Code: <div class="row"> <div class="col-md-5 col-md-offset-1">.col-xs-12</div> <div class="col-md-5">.col-xs-12</div> </div>
Wenn ".col-sx-12" das ist, was als Text erscheinen soll, ja. Sonst wäre es eher HTML: <div class="row"> <div class=" col-xs-12 col-md-5 col-md-offset-1">der Pfad zu Deinem bild</div> <div class="col-xs-12 col-md-5">hier steht Dein Text</div> </div> Das hast Du eine im Smartphone das Bild / den Text über die ganze Breite und sonst eine Gridspalte leer, das Bild, den Text