Liebe Gambio-Freundinnen und -Freunde Ich versuche erste Schritte mit CSS und nahm mir dieses Mal den Footer-Header vor. Die Idee ist es, je nach Bildschirmgrösse etwas Werbung (4 Stichworte) auf einer Zeile grosser Bildschirm oder untereinander (Smartphone) zu machen. Soweit so gut, klappte auch wie gewünscht auf einer Probeseite (Content), aber nicht im Footer-Header. Der Footer scheint einerseits grundsätzlich alles ohne die Begrenzungen aus div "Inside" zu machen, anderseits wird das Logo teilweise oder immer nach links verschoben (nicht mehr sichtbar). Vielleicht habt Ihre mir einen Hinweis? Die Site ist (Link nur für registrierte Nutzer sichtbar.), der Code: Code: <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3" style=" padding: 1px; margin: 0px; "> <div class="row"> <div class="col-xs-1" style=" padding: 1px; margin: 0px; "> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style=" padding: 1px; margin: 0px; text-align: left; "> Kostenloser Versand </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style=" padding: 1px; margin: 0px; "> <div class="row"> <div class="col-xs-1" style=" padding: 1px; margin: 0px; "> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style=" padding: 1px; margin: 0px; "> 15 Tage Rückgaberecht </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style=" padding: 1px; margin: 0px; "> <div class="row"> <div class="col-xs-1" style=" padding: 1px; margin: 0px; "> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style=" padding: 1px; margin: 0px; "> gegen Rechnung </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style=" padding: 1px; margin: 0px; "> <div class="row"> <div class="col-xs-1" style=" padding: 1px; margin: 0px; "> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style=" padding: 1px; margin: 0px; "> Lieferung ca. in 1-2 Tagen </div> </div> </div> </div> Vielen Dank für Eure Ideen mit einem CSS-Starter. Viele Grüsse aus der Schweiz Fabian
Versuch mal folgendes: HTML: <div class="inside"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="row"> <div class="col-xs-1" style="padding: 1px; margin: 0px; "> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px; text-align: left;"> Kostenloser Versand </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="row"> <div class="col-xs-1" style="padding: 1px; margin: 0px;"> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px;"> 15 Tage Rückgaberecht </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="row"> <div class="col-xs-1" style="padding: 1px; margin: 0px;"> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px;"> gegen Rechnung </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="row"> <div class="col-xs-1" style="padding: 1px; margin: 0px;"> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px;"> Lieferung ca. in 1-2 Tagen </div> </div> </div> </div> </div> Du wirst vermutlich noch ein bisschen mit dem Abständen spielen müssen, aber das könnte schon halbwegs das sein was du brauchst
Hallo Torben Das nenn ich mal eine Insider-Antwort, gleich von höchster Stelle. Danke! Copy-Paste, und einen Schritt weiter, jedoch nicht am Ziel: Das hatte ich selbst mal, war aber irritiert, weil es das Icon (wie jetzt: (Link nur für registrierte Nutzer sichtbar.)) nach links zieht. Da liegt wohl mein Hauptproblem. Anbei ein Bild von dem Problem. welches mich heute schon länger beschäftigt... Vielen Dank für eine Idee und alsdann ein schönes Wochenende. Fabian
Aah ok, hab nen kleinen Fehler bei dir übersehen: Du machst in jeder deiner div.col-Elemente ein neues div.row auf. Das ist falsch und führt zu deinem angesprochenen Problem. <div class="row"> wird eigentlich nur dann benutzt, wenn man eine neue Reihe mit <div class="col-*-*">-Elementen erstellen will. Korrigiert müsste dein HTML also wie folgt aussehen: HTML: <div class="inside"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="col-xs-1" style="padding: 1px; margin: 0px; "> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px; text-align: left;"> Kostenloser Versand </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="col-xs-1" style="padding: 1px; margin: 0px;"> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px;"> 15 Tage Rückgaberecht </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="col-xs-1" style="padding: 1px; margin: 0px;"> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px;"> gegen Rechnung </div> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="padding: 1px; margin: 0px;"> <div class="col-xs-1" style="padding: 1px; margin: 0px;"> <img alt="Service: Kinderkleider Kindermode Babykleider kostenloser Versand, gegen Rechnung, schnelle rasche Lieferung 1-2 Tage" src="images/image/Favicon_Apple.png" style="width: 10px; height: 10px; margin: 0px;" /> </div> <div class="col-xs-11" style="padding: 1px; margin: 0px;"> Lieferung ca. in 1-2 Tagen </div> </div> </div> </div>
Hallo Torben Copy-Paste: Und es funktioniert. Das mit der Zusatz-Row habe ich irgend wo gelesen, dass man das müsste, aber so ist es mir auch recht. Vielen Dank und ein schönes Wochenende! Fabian