Antworten auf deine Fragen:
Neues Thema erstellen

CSS Problem mit zentrierung

T

Tortoga

Guest

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

Noch nicht viel geschrieben

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
 

patrick_l

Hat es drauf

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.

HTML:
<!--| 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.

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

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
T

Tortoga

Guest

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

patrick_l

Hat es drauf

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben