Antworten zum Thema „CSS Problem mit zentrierung“

[Tortoga]

Hallo liebe Community,

Ich sitze hier grade vor meinem neuen Hunde Onlineshop Layout und komm nicht weiter, hab ne Vorlage die berarbeiten will, finde aber kein Lösung.

Und zwar im Footer von ist eine Footerbar über 100% breite diese möchte ich mittig wie die Contentbox, ich finde aber nicht den richtigen DIV, habe schon alle .Footerbar etc. mit margin: 0 auto; versucht zu zentrieren jedoch ohne Erfolg.

Vielleicht stehe ich auch auf dem schlauch.

Wäre um jede Hilfe dankbar das hin zu bekommen, wäre mir auch eine kleine Spende über Paypal oder Bitcoins wert.

Danke

 

[Daniel Koch]

Du musst Dir mal die verwendeten Bootstrap-Klassen ansehen.Wenn ich das richtig sehe, hat .col-md-12 eine Breite von 100 Prozent.

Viele Grüße

 

[dn3d_fanboy]

Du musst Dir mal die verwendeten Bootstrap-Klassen ansehen.Wenn ich das richtig sehe, hat .col-md-12 eine Breite von 100 Prozent.

Viele Grüße

Du musst aber aufpassen, die Klasse hat auch ein float:left. Das dann auch bitte ändern.

 

[patrick_l]

Erste Anlaufstelle sollte immer die Framework eigene Dokumentation sein. Dort werden alle verwendeten bzw. möglichen Klassen erläutert. Ebenso anhand von Beispielen vorgestellt. Wem es schwer fällt die englisch sprachige Dokumentation von Bootstrap zu
verstehen, kann sich auch beim deutschen "Ableger" umsehen.

getbootstrap.com (english) / holdirbootstrap.de (deutsch)

Nun zurück zum mittig Ausrichten (zentrieren) deiner Inhalte. Erstelle innerhalb des Footers eine Division mit der Klasse "container". Damit wird schon mal der Inhalt zentriert. Du solltest dir trotz alle dem die anderen Bootstrap Klassen genauer anschauen. Vor allem was die einzelnen Elemente und dessen Eigenschaften (padding, margin etc.) angeht.

<!--| HTML5 Markup |-->
<footer id="footer">
   <div class="container">
     <!-- content here! -->
   </div>
</footer>

Möchtest du die von Bootstrap definierten Eigenschaften eines Elements verändern, einfach die jeweilige Klasse in deinem Stylesheet notieren und mit neuen Werten überschreiben. Um bei der hier genannten Division zu bleiben. Mit der Klasse "container" selektieren und z.B. eine andere maximale Breite definieren.

/* --| Global |---- */
.container {max-width:960px;}

Liebe Grüße, Patrick

 

[Tortoga]

Das habe ich jetzt soweit hinbekommen, jedoch hats jetzt die h3 schrift nacht unten verschoben -.-

 

[patrick_l]

Das habe ich jetzt soweit hinbekommen, jedoch hats jetzt die h3 schrift nacht unten verschoben

Ganz einfach, weil von Bootstrap aus dem h3 ebenso ein margin und padding gegeben wird. Daher entweder die Überschrift richtig verschachteln oder in deinem CSS selektieren und mit neuen Werten überschreiben.

Liebe Grüße, Patrick