Ergebnis 1 bis 5 von 5

Thema: CSS Buttons Zentrieren

  1. #1
    Contao-Nutzer
    Registriert seit
    04.05.2015.
    Beiträge
    150

    Standard CSS Buttons Zentrieren

    hi Leute,

    haber hier:
    http://www.delco.de/contao/index.php/delwa-hi.html

    mehrere CSS Buttons unter dem Block in der Mitte. Diese Fangen nun aber ganz links an. Wie schaffe ich es, dass diese zentriert unter dem Block sind?

    Gut wäre auch, wenn die Lösung unabhängig von der Anzahl der Buttons wäre, da diverse Unterseiten die selben Buttons verwenden, abzüglich dem Button für die jeweilige Unterseite. D.h. wenn ich den Buttons, z.B. bei 4 Buttons, einfach sage "width: 25%" klappt das zwar auf der Seite mit den 4 Buttons, aber auf den Unterseiten mit nur 3 Buttons dann halt wieder nicht, weil ich dort 33% nehmen müsste.

    Gibt es ne andere Möglichkeit die Buttons als "Block" zu zentrieren?

    mfg

    edit:
    das ist der code der sich um das Grunddesign der Buttons kümmert:
    Code:
    .button {
    	text-decoration: none;
    	text-align: center;
    	color: #fff;
    	font-weight: bold;
    	padding: 12px 20px;
    	margin-top: 0px;
    	font-size: 16px;
    	border-radius: 10px;
    	background-color: #666666;	
    	box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    	position: relative;
    	border-bottom: 1px solid rgba(255,255,255,0.2);
    		display: inline-block;
    	font-family: Arial, Helvetica, sans;
    	text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    	margin-left: auto;
    	margin-right: auto;
    	
    }
    .blue {
    	background: #006699;
    	box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    Habs zumindest für jede Seite individuell gelöst. Hab einfach die Buttons in einen div-container gesteckt und dann <div align="center"> verwendet. Das klappt super, auch wenn mir lieber wäre, wenn ich das in der design.css für alle Seiten die diese Buttons verwenden machen könnte.

    Jemand ne Idee?
    Geändert von Wrathberry (07.07.2015 um 10:55 Uhr)

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.078
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Dem übergeordneten div ein text-align: center; verpassen. Das sollte es schon gewesen sein.

  3. #3
    Contao-Nutzer
    Registriert seit
    04.05.2015.
    Beiträge
    150

    Standard

    Zitat Zitat von tab Beitrag anzeigen
    Dem übergeordneten div ein text-align: center; verpassen. Das sollte es schon gewesen sein.
    Hey, erstmal danke. Darauf bin ich gerade auch gekommen. Habe das nun aber in dem jeweiligen Artikel gemacht. Also einfach die "links" zu den Buttons in den von dir erwähnten div-container gepackt.
    Kann ich das auch in der .css Datei machen? So dass die Buttons egal wo sie eingesetzt sind, immer zentriert sind, ohne dass ich das manuell in jedem Artikel machen muss?

  4. #4
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.078
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hmm, wenn du damit meinst, du gibst einem Link die Klasse "button" und dann ist eine beliebige Gruppe von solchen Buttons automatisch zentriert, das wird wohl per CSS nicht gehen. Kann mich aber natürlich auch irren. Jedenfalls nicht mit der text-align Methode, weil das ja dem Parent zugewiesen werden muss und es einen "Parent-Selector" in CSS (noch?) nicht gibt. Mit Javascript bzw jQuery wird das recht einfach gehen, hätte aber prinzipiell auch seine Nachteile, weil im Parent vieleicht manchmal noch andere inline-Elemente drin stehen (Text, Bilder, ...) die nicht zentriert werden sollen. Da würde ich mir eher ein dediziertes <div class="button_container"> um die Buttons bauen, das immer nur die Buttons enthält, und diesem dann per Klasse das text-align: center; geben.

  5. #5
    Contao-Nutzer
    Registriert seit
    04.05.2015.
    Beiträge
    150

    Standard

    Zitat Zitat von tab Beitrag anzeigen
    Da würde ich mir eher ein dediziertes <div class="button_container"> um die Buttons bauen, das immer nur die Buttons enthält, und diesem dann per Klasse das text-align: center; geben.
    Das hört sich so an, als ob es genau das macht, was ich suche .

    Werde es probieren und berichten.


    edit: Nur bringt es im Prinzip keine Erleichterung oder? Weil ich dann ja dennoch in jedem Artikel die div-Klasse angeben müsste. Da kann ich auch einfach den align-center div in jeden Artikel packen.

    Scheint, als gäbe es keine einfachere Lösung D.h. ich komme nicht drum rum, in jeden Artikel wo die Buttons sind zu gehen und da mit <div> zu arbeiten.
    Geändert von Wrathberry (07.07.2015 um 11:24 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •