nicht angemeldet
Matthias Scharwies
MudGuard
Gunnar Bittersmann
marctrix
Rolf b
MudGuard
Hi,
ich habe folgendes Problem:
Ich wuerde gerne 2 Buttons, die ich vorher auf einem Stylesheet definiert habe, zentrieren; also in der Mitte der Seite und am besten dazwischen noch einen kleinen Abstand einbauen. Wenn Y die Mitte der Seite ist, dann soll X den Button darstellen:
X Y X
Mein Problem ist, dass ich die Buttons nicht zentriert bekomme innerhalb des Divelementes. Die "kleben" immer links oben. Ich habe das div mit text-align:center; definiert, aber das hat auch nicht geholfen auch die Buttons mit text-align:center; hilft auch nicht.
Wer kann mir da weiterhelfen?
Den Abstand zwischen 2 Buttons werde ich mit Margin festlegen oder?
Servus!
Ich wuerde gerne 2 Buttons, die ich vorher auf einem Stylesheet definiert habe, zentrieren; also in der Mitte der Seite und am besten dazwischen noch einen kleinen Abstand einbauen.
ok,
Mein Problem ist, dass ich die Buttons nicht zentriert bekomme innerhalb des Divelementes. Die "kleben" immer links oben. Ich habe das div mit
text-align:center;definiert,
Ein Button ist ja auch kein Text oder?
Tutorial in CSS/Anwendung und Praxis:
Den Abstand zwischen 2 Buttons werde ich mit Margin festlegen oder?
Genau! Da du zwei Buttons nebeneinander haben möchtest, würde ich hier mit margin oder flexbox arbeiten.(Eine Umsetzung mit flexbox findest du im 1. Kapitel des oben genannten Tutorials.)
Herzliche Grüße
Matthias Scharwies
Danke fuer die schnelle Antwort, jedoch harpert es bei mir an der Umsetzung.
#button{
position: absolute;
top: 50%;
left: 50%;
width: 30em;
height: 20em;
margin-left: -15em;
margin-top: -10em;
}
Das habe ich einfach mal aus dem Tutorial via Copy&Pasta eingefuegt, aber meine Buttons kleben imemr noch links oben in der Ecke.
.button {
background-color: /* Grey */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
opacity:0.5;
margin: 4px 2px;
padding: 15px 32px;
Das ist mein Button
<div id="nav2"><br>
<div clas="button"><button class="button">Poems</button></div>
<div clas="button"><button class="button">Books</button></div>
</div>
Und hier versuche ich den vorher definierten Button und die vorher definierte Position zusammen zu packen, nur klappt es leider nicht.
Hallo
Mit deinen aus dem Zusammenhang gerissenen Quellcodeschnipseln können wir wenig anfangen um dir zu helfen. Besser wäre ein Link zu der Seite.
Ist das
div clas=
zum Beispiel ein Übertragungsfehler oder steht das wirklich so im Quelltext?
Zudem scheint es dass du das button-Element falsch verwendest.
Auf
position: absolute;
solltest du so weit wie möglich verzichten. Zum Zentrieren ist Flexbox am Besten geeignet. Deshalb hat Matthias Scharweis es dir besonders ans Herz gelegt.
Du solltest auch auf unnötige div-Elemente verzichten.
Gruss
MrMurphy
div clas war falsch uebertragen, da steht natuerlich auch div class.
Ich habe bis jetzt noch keine Seite, fange ja gerade erst mit html/css an und versuche meine Ideen umzusetzen (learning by doing).
Auch mit Flexbox aendert sich nichts.
Was ist an meinem Buttonelement falsch?
Hallo
Auch mit Flexbox aendert sich nichts.
Offensichtlich bindest du Flexbox falsch ein. Ohne Link zu der Seite können wir deinen Fehler leider nicht erkennen.
Gruss
MrMurphy
Ich habe meinen ersten fehler gefunden, hatte div class anstelle von div id. Habe die Flexbox jetzt eingebunden.
Jetzt sind die Buttons horizontal zentriert, aber noch nicht veritkal.
Hat jmd. vllt. eine Idee woran dies liegen koennte, ohne meine Seite zu sehen...?
Hallo
Hat jmd. vllt. eine Idee woran dies liegen koennte, ohne meine Seite zu sehen...?
Nö. Bleibt nur raten. Wobei Raten keinen Spaß macht und erfahrungsgemäß schnell zum Einstellen der Hilfsbereitschaft führt.
aber noch nicht veritkal
Der Klassiker bei solchen Problemen ist, dass das oder die umgebenden Elemente selbst überhaupt keine Höhe mit dem notwendigen Leerraum haben, den sie für die Zentrierung weiter geben können.
Gruss
MrMurphy
Hi,
Ich habe meinen ersten fehler gefunden, hatte div class anstelle von div id. Habe die Flexbox jetzt eingebunden.
Jetzt sind die Buttons horizontal zentriert, aber noch nicht veritkal.
Hat jmd. vllt. eine Idee woran dies liegen koennte, ohne meine Seite zu sehen...?
Gib dem div mal eine Hintergrundfarbe - damit Du siehst, ob das überhaupt so groß ist, wie Du meinst, daß es sein soll …
cu,
Andreas a/k/a MudGuard
@@Mephisto
Hat jmd. vllt. eine Idee woran dies liegen koennte, ohne meine Seite zu sehen...?
Nein.
Sollte das gerade eine Einladung zum Kaffee zu dir nach Hause sein?
Wenn nein: Es gibt Plattformen wie CodePen oder Dabblet, auf denen du dein Problem für alle sichtbar darstellen kannst.
LLAP 🖖
Hej Mephisto,
Ich habe meinen ersten fehler gefunden, hatte div class anstelle von div id. Habe die Flexbox jetzt eingebunden.
Jetzt sind die Buttons horizontal zentriert, aber noch nicht veritkal.
Hat jmd. vllt. eine Idee woran dies liegen koennte, ohne meine Seite zu sehen...?
Abgesehen von dem Wiki-Artikel, der den Vorteil hat, auf deutsch geschrieben zu sein, mag ich noch die folgende Seite, die Flexbox-Eigenschaften mit Bildern erklärt. Vielleicht hilft dir das ja weiter?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Sonst wie gesagt einfach einen Codepen bereit stellen (oder was es da sonst noch alles so gibt)…
Marc
Oder hier gucken...
Rolf
Hi,
Ein Button ist ja auch kein Text oder?
Nein, aber ein inline-Element (solange man das nicht explizit ändert)
- text-align kontrolliert die Ausrichtung von Text und inline-Elementen wie Bildern (img)
Genau deswegen sollte text-align im übergeordneten block-Element (hier: das div) auch Auswirkung auf die Buttons haben.
Allerdings nur in horizontaler Richtung. Für die vertikale Ausrichtung braucht es vertical-align im übergeordneten Element. Das wirkt aber bei display: block; nicht - aber das könnte man ja auf display: table-cell; ändern. Wobei das eher veraltet ist - das war damals eine Notlösung, weil es flexbox noch nicht gab.
cu,
Andreas a/k/a MudGuard
Das Problem bei mir ist aber, dass sich die Buttons aber auch nicht horizontal verschieben...