Hey, gibt es eine elegantere Lösung als: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <img alt="" src="images/Platzhalter.jpg" style="float: right; width: 290px; height: 193px;" /><br /> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero<br /> eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <img alt="" src="images/Platzhalter.jpg" style="float: right; width: 290px; height: 193px;" /><br /> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero<br /> eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, Um folgendes zu erreichen:
Texte und Bilder immer in DIV Container setzen und per CSS platzieren. Oder Old-School - mittels Tabelle (Responsive aber schwerer)
So Richtig? <div class="Arbeitsschritt1"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <img alt="" src="images/Platzhalter.jpg" style="float: right; width: 290px; height: 193px;" /><br /> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero<br /> eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br /> </div> <div class="Arbeitsschritt2"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <img alt="" src="images/Platzhalter.jpg" style="float: right; width: 290px; height: 193px;" /><br /> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero<br /> eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br /> </div> <div class="Arbeitsschritt3"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <img alt="" src="images/Platzhalter.jpg" style="float: right; width: 290px; height: 193px;" /><br /> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero<br /> eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br /> </div> CSS div. Arbeitsschritt3 { padding-bottom: 180px; } div. Arbeitsschritt2 { padding-bottom: 180px; } div. Arbeitsschritt1 { padding-bottom: 180px; }
Bischen mehr infos solltest den DIVs schon geben als nur nen Abstand nach unten (Link nur für registrierte Nutzer sichtbar.)
Hmm, wenn ich float benutze verhauts alles. Habe es mal hier probiert : (Link nur für registrierte Nutzer sichtbar.)
Hier, für Boxen platzieren Grundkurse: (Link nur für registrierte Nutzer sichtbar.) Oder bleibst bei einer table du brauchst im Grunde nur das Bild in einen DIV setzen und den rechts ausrichten wo das Bild sein soll. Das sollte meist schon reichen.
Was ist dann der Unterschied wenn ich das Bild noch mal extra packe zu der style Option wie es jetzt ist?
Wohl weil man DIVs mehr infos geben kann oder so - Habs auch nur so gelernt wenn man Bild irgendwo platzieren will im text das man nen DIV rumbaut.
Sieht es so ok aus? <div class="Arbeitsschritt3"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <br /> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero<br /> eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, </p> <p> </p> <div class="Arbeitsschritt3bild"> <img src="(Link nur für registrierte Nutzer sichtbar.)" /> </div> </div> CSS div.Arbeitsschritt3 p { float:left; } div.Arbeitsschritt3bild { padding-bottom: 180px; float:right; } div.Arbeitsschritt3 { padding-bottom: 180px; }
Wenn Bild uns Text verbunden sein sollen, kannst Du es auch so versuchen: HTML: <div class="row"> <div class="col-xs-12 col-sm-8 col-md-9"> <div><strong><span style="font-family:verdana,geneva,sans-serif; color: rgb(0, 0, 0); font-size: 18px;">Deine_Überschrift</span></strong></div> <p><span style="font-size:14px; font-family: verdana,geneva,sans-serif;">Hier kommt Dein Text rein</span></p> </div> <div class="col-xs-12 col-sm-4 col-md-3"><img alt="Foto-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /></div> </div> Die Spalten-Größe musst du eventuell noch anpassen.
Hey, ich habe das Problem, dass bei meiner Version die Bilder immer an einer anderen Position sind. Abhängig davon wie lang der Text ist. Und bei der Version von barbara habe ich keinen Abstand nach unten, weiß auch nicht wie ich den dort einfügen kann. Edit: ich hab jetzt einfach nochmal den ganzen code von barbara in einen extra div gepackt. Funktioniert auch aber ob es die beste Variante ist kann ich nicht sagen.
abstand kann man mit margin und padding werten bekommen. mit position absolut, usw. kann man bestimmen wo die bilder ausgerichtet werden.
Ich habe noch mal etwas gestöbert. Basiert Gambio auf Bootstrap? Bin erst Gestern durch den Code von barbara drauf gestoßen.