nicht angemeldet
Mein Button wird nicht mittig angezeigt
Gunnar Bittersmann
Matthias Apsel
Rolf BHallo,
ich wollte das in einem fiddle darstellen, aber dort ist das Ergebnis anders als bei mir im HTML-Editor, daher kann ich hier leider niur mit dem Quelltext dienen jund hoffe, das hilft auch.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<style type="text/css">
.wrap {
text-align: center;
}
.n_l {
border-right: 1px solid #000000;
padding:10px;
text-align:left;
width:47%;
float:left; }
.n_r {
padding:10px;
text-align:left;
width:47%;
float:right;
height:100px;
overflow-y:auto; }
</style>
</HEAD>
<BODY>
<div class='wrap'>
<FORM>
<div class='n_l'>
Links
</div>
<div class='n_r'>
Rechts
</div>
<INPUT TYPE=SUBMIT ID='sende_button' VALUE="Senden!">
</form>
</div>
</BODY>
</HTML>
Ich hätte den button mittig unterhalb der beiden DIVs erwartet, aber er ist mittig unterhalb des linksn Divs.
Kann mir einer erklären, warum das so ist ujnd wie ich es ändern muß?
VG, Ron
akzeptierte Antworten
Mein Button wird nicht mittig angezeigt
Matthias Scharwies
Bewertung: +1, 1 Stimme
-
Servus!
Hallo,
ich wollte das in einem fiddle darstellen, aber dort ist das Ergebnis anders als bei mir im HTML-Editor, daher kann ich hier leider niur mit dem Quelltext dienen jund hoffe, das hilft auch.
Das Ergebnis im fiddle ist das richtige. Ein HTML-Editor zeigt in seiner Vorschau nur eine Vorschau. Deshalb muss immer in einem Fiddle und/oder in verschiedenen Browsern getestet werden.
Ich hätte den button mittig unterhalb der beiden DIVs erwartet, aber er ist mittig unterhalb des linksn Divs.
Bei mir FF55 auf einem Monitor mit 2560px Breite hast du 2 Blöcke mit je 47% Breite (plus je 2x10px padding) und dazwischen Deinen Button.
Kann mir einer erklären, warum das so ist ujnd wie ich es ändern muß?
Die beiden divs sollen wohl die gesamte Breite einnehmen. Dies würde ich mit 50% breiten Boxen erriechen. Dafür müssen die paddings aber zur Breite zugezählt werden, was man mit box-sizing erreicht:
html { box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; } .n_l { border-right: 1px solid #000000; padding:10px; width: 50%; float:left; background: red; } .n_r { padding:10px; width: 50%; background: green; }So haben die beiden divs je 50% Breite.
Dein
div class="wrap"hat nur das form-Element als zentriertes Kindelement. Du könntest den button mitbutton { margin: 0 auto }zentrieren.
BTW: Dein HTML-Markup sieht etwas alt aus:
- HTML-Elemente werden mittlerweile klein geschrieben
- Verwende das HTML5-Grundgerüst
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0;" /> <title>Test</title> ...- statt
input type="button"verwendet man im allgemeinen das button-Element - Du könntest anstelle von float Flexbox oder das Grid layout verwenden.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
@@Matthias Scharwies
- HTML-Elemente werden mittlerweile klein geschrieben
Nein. HTML ist case-insensitiv wie eh und je.[1]
Die Kleinschreibung ist good practice – wie eh und je.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
Wenn man es nicht als XHTML ausliefern möchte. Aber wer möchte das schon? ↩︎
-
Servus!
@@Matthias Scharwies
- HTML-Elemente werden mittlerweile klein geschrieben
Nein. HTML ist case-insensitiv wie eh und je.[1]
Doch. Auch wenn's nur eine Konvention und kein Gesetz ist!
Die Kleinschreibung ist good practice – wie eh und je.
LLAP 🖖
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
Wenn man es nicht als XHTML ausliefern möchte. Aber wer möchte das schon? ↩︎
-
@@Matthias Scharwies
- HTML-Elemente werden mittlerweile klein geschrieben
Nein. HTML ist case-insensitiv wie eh und je.
Doch. Auch wenn's nur eine Konvention und kein Gesetz ist!
Oh! Dann stört aber das „mittlerweile“, weil die Konvention schon ewig besteht und nicht erst seit HTML5.
„HTML-Elemente werden klein geschrieben“ hört sich aber auch nicht richtig an, weil nach Gesetz, nicht nach Konvention.
Eine brauchbare Formulierung könnte sein: „HTML-Elemente sollten klein geschrieben werden.“
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar Bittersmann,
Eine brauchbare Formulierung könnte sein: „HTML-Elemente sollten klein geschrieben werden.“
Elemente? 😜
Bis demnächst
Matthias--
Rosen sind rot.
-
Servus!
Ich kann nur raten, was Du im Endeffekt machen willst. Hier ist ein Beispiel eines Formulars mit zentriertem Absende-Button.
Ich habe anstelle von float das neue Grid layout verwendet.
Mein HTML:
<form> <fieldset class='n_l'> Links </fieldset> <fieldset class='n_r'> Rechts </fieldset> <button type="submit" id="sende_button">Senden!</button> </form>Anstelle der divs passen in einem Formular wohl eher fieldset-Elemente, evtl. eines für Login und eins für persönliche Daten.
Das CSS:
form { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "left right" "button button"; } .n_l { grid-area: left; border-right: 1px solid #000000; padding:10px; background: red; } .n_r { grid-area: right; padding:10px; background: green; } button { grid-area: button; width: 10em; justify-self: center; }Das form-Element enthält display:grid und eine grid-template-area. Die fieldsets teilen sich auch 2 gleichbreite spalten auf.
Der Button verteilt sich über beide Spalten, ist aber nur 10em breit und wird mit justify-self zentriert.
Herzliche Grüße
Matthias Scharwies
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
Hallo Matthias Scharwies,
Die beiden divs sollen wohl die gesamte Breite einnehmen. Dies würde ich mit 50% breiten Boxen erriechen.
Da hat wohl jemand den richtigen Riecher gehabt. 😂
Bis demnächst
Matthias--
Rosen sind rot. -
Hallo Matthias,
das Ergebnis im Fiddle ist bei mir so wie vom OP beschrieben: Der Button ist unter dem linken Float zentriert (Chrome und FF). Naja, fast zentriert.
Grund ist die Höhenvorgabe für das rechte Float, weil der Browser der Meinung ist, dass er den vom Float überdeckten Bereich des Wrappers nicht zum Zentrieren verwenden sollte. Bei Dir flutscht es dann dazwischen, weil auf deinem Monsterbildschirm 6% reichen, um einen button hineinzuquetschen. Ich hab's bei mir mit 40% simulieren können 😉
@Ron - sowas visualisiert sich in Fiddles immer sehr schön, wenn man den einzelnen Boxen markante Hintergrundfarben gibt. Dann wäre Dir vermutlich auch aufgefallen, dass eine Zentrierung des button im wrap sehr unschön gewesen wäre (weil er sich mit dem rechten Float um den Platz gestritten hätte).
Rolf
--
sumpsi - posui - clusi