Link soll im div vertical zentriert sein

[Andy Nail]

Hallo zusammen,

in einem div wird ein Lin erstellt und soll vertikal zentriert werden, doch will ich das nicht hinbekommen:

#TestArea {
  z-Index: 1; display: table-cell; text-align: center;
  position: absolute; valign: middle; padding-top: 50%;
  height: 100%; width: 466px; left:0; top:0;
  background-color: #fff; visibility: hidden;
}

<div id="TestArea">
<div style="position:absolute; right:20px; top:20px"><a href="#" onclick="javascript:document.getElementById('TestArea').style.visibility ='hidden'; top.document.getElementById('LinkDaten').style.display = 'none'; document.LinkDaten.Beenden.onclick = null; document.LinkDaten.Speichern.onclick = null">Schließen</a></div>
<a id="TestLink" target="_blank"></a>
</div>

Und damals waren das ein div im div und eine genaue Größenangabe, womit das funktioniert hatte. Doch sobald ich auch hier die 100% eintrug verschwand auch hier die Fähigkeit es zentrieren zu können. Also wie zentriere ich bitte den Link jetzt vertikal? Auch ohne javascript Rechnerrei mit einer margin Eigenschaft von -??? dann zu setzen?

Danke für Eure Hilfe und Verschläge.

Gruß Andreas

[MrMurphy1]

Hallo

Ohne JavaScript mit CSS-Flexbox.

Gruss

MrMurphy

[Der Martin]

Hallo,

in einem div wird ein Lin erstellt und soll vertikal zentriert werden, doch will ich das nicht hinbekommen:

ich nehme mal an, "ein Lin" sollte eigentlich ein Link sein.

#TestArea {
  z-Index: 1; display: table-cell; text-align: center;
  position: absolute; valign: middle; padding-top: 50%;
  height: 100%; width: 466px; left:0; top:0;
  background-color: #fff; visibility: hidden;
}

Es gibt keine CSS-Eigenschaft valign. Meintest du vielleicht vertical-align?

<div id="TestArea">
<div style="position:absolute; right:20px; top:20px"><a href="#" onclick="javascript:document.getElementById('TestArea').style.visibility ='hidden'; top.document.getElementById('LinkDaten').style.display = 'none'; document.LinkDaten.Beenden.onclick = null; document.LinkDaten.Speichern.onclick = null">Schließen</a></div>
<a id="TestLink" target="_blank"></a>
</div>

Da ist kein Link. Da ist ein vergewaltigtes a-Element, das eigentlich ein <button> sein will. Nein, nicht Jenson Button.

Und damals waren das ein div im div und eine genaue Größenangabe, womit das funktioniert hatte. Doch sobald ich auch hier die 100% eintrug verschwand auch hier die Fähigkeit es zentrieren zu können.

Vermutlich, weil dir nicht klar war, worauf sich die 100% beziehen.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

ich nehme mal an, "ein Lin" sollte eigentlich ein Link sein.

Nein, ein Button.

Da ist kein Link. Da ist ein vergewaltigtes a-Element, das eigentlich ein <button> sein will.

Siehste! ;-)

Und ich habe wenig Lust, denselben Leuten immer wieder dasselbe zu sagen.

LLAP 🖖

[Andy Nail]

Jo Hallo zusammen,

ich entschied mich halt mal für einen Link. Und das der nicht ausgerichtet wird, steht er da oben und funktioniert auch einwandfrei in einem div das geöffnet und doch auch abgeschlossen wird. und gleichch darunter steht der Link der per javascript erstellt wird und auch einwandfrei funktioniert.

Dann halt mal ok, ssorry ffürr r den link da drin. Aber er ändert ja nix am Thema.

Also weeiter Danke und

Gruß Andreas

[Gunnar Bittersmann]

@@Andy Nail

ich entschied mich halt mal für einen Link.

Und das, obwohl dir schon gesagt wurde, dass das falsch ist‽

Dann halt mal ok, ssorry ffürr r den link da drin. Aber er ändert ja nix am Thema.

Es könnte aber was daran ändern, ob man Lust hat, dir zu antworten, oder ob man davon ausgehen müsste, dass Hinweise doch nicht ernstgenommen werden.

LLAP 🖖

[Andy Nail]

Jo Ok Hallo

dann habb iiiiiiiiiiich diese Zeilen zu zeigen:

<div id="TestArea">
<div style="position:absolute; right:35px; top:10px; width:10px; height:10px"><input type="button" onclick="document.getElementById('TestArea').style.visibility ='hidden'; top.document.getElementById('LinkDaten').style.display = 'none'; document.LinkDaten.Beenden.onclick = null; document.LinkDaten.Speichern.onclick = null" value="X"/></div>
<a id="TestLink" target="_blank"></a>
</div>

Und ist das damit dann von meiner Seite her in Ordnung? Doch was ändert das am Thema? Wie anders bekomme ich den "Button" denn sonst in das Eck oben hin und den Link vertikal zentrier`t?

Ich bevorzugte halt einen Link, aber jetzt mach ichs halt mal doch so. Doch was ändert das am Thema? Gerne hätte ich dazu von Euch Hilfe, worüber ich mich sehr freuen würde.

Also schonmal Danke mit Gruß Andreas

[Gunnar Bittersmann]

@@Andy Nail

dann habb iiiiiiiiiiich diese Zeilen zu zeigen:

Deine Tastatur prellt?

<div id="TestArea">
<div style="position:absolute; right:35px; top:10px; width:10px; height:10px"><input type="button" onclick="document.getElementById('TestArea').style.visibility ='hidden'; top.document.getElementById('LinkDaten').style.display = 'none'; document.LinkDaten.Beenden.onclick = null; document.LinkDaten.Speichern.onclick = null" value="X"/></div>
<a id="TestLink" target="_blank"></a>
</div>

Und ist das damit dann von meiner Seite her in Ordnung?

Der Button hat keine Beschriftung. Bei <input type="button"> wäre das ein value-Attribut. Allerdings gibt es für Buttons in HTML aber einen speziellen Elementtypen: button, den du statt input verwenden solltest. Ein Vorteil ist, dass die Buttonbeschriftung dann im Elementinhalt steht, nicht in einem Attribut.

Dass Styleangaben ins Stylesheet gehören und nicht inline in style-Attribute gepfercht werden sollten, hat dir auch noch niemand gesagt?

Und dass Eventhandler im JavaScript registriert werden sollten und nicht inline on on…-Attributen auch nicht?

So machst du den Quelltext unübersichtlich. Für dich eine Fehlerquelle und für potentielle Helfer eine Schwierigkeit, da durchzusteigen.

Ich bevorzugte halt einen Link, aber jetzt mach ichs halt mal doch so.

Das wirst du hoffentlich auch in Zukunft so tun. Denn was du bevorzugst, ist irrelevent. Relevant ist, was die Nutzer der von dir erstellten Seiten bevorzugen. Und besonders Nutzern, die auf technische Hilfsmittel wie Screenreader angewiesen sind, ist es nicht egal, ob du einen Button mit a oder button (input) umsetzt. Im einen Fall wird vorgelesen, dass es sich um einen Link handelt, im anderen Fall, dass es ein Button ist.

(Und für diese Nutzer ist es auch unabdingbar, dass ein Button eine Beschriftung hat.)

Die Wahl des richtigen HTML-Elements ist also von entscheidender Bedeutung und nicht deinen persönlichen Vorlieben überlassen. Du kannst allerdings Buttons mit CSS so gestalten, dass sie keinen Rahmen und keine Hintergrundfarbe haben.

Gerne hätte ich dazu von Euch Hilfe, worüber ich mich sehr freuen würde.

Gerne. Wo kann man sich denn dein Problem online ansehen?

LLAP 🖖

[marctrix]

Hej Andy,

ich entschied mich halt mal für einen Link. Und das der nicht ausgerichtet wird, steht er da oben und funktioniert auch einwandfrei in einem div das geöffnet und doch auch abgeschlossen wird. und gleichch darunter steht der Link der per javascript erstellt wird und auch einwandfrei funktioniert.

Dann halt mal ok, ssorry ffürr r den link da drin. Aber er ändert ja nix am Thema.

Was ist denn das Thema? - Wie man vertikal zentriert (mit flexbox) wurde ja bereits gesagt.

Was du zentrierst ist tatsächlich egal. Funktioniert mit allen Elementen. Daher wäre es sinnvoll, Code zu zeigen, der das eigentliche Problem beschreibt - du hast sehr viel Code, der mit dem, wodrauf Du eine Antwort haben möchtest, nichts zu tun hat.

Also weeiter Danke und

So sieht Dein Problem aus. Das bar soll vertikal zentriert werden.

<foo>
  <bar></bar>
</foo>

So könnte Deine Lösung aussehen:

foo {
  display: flex;
  align-items: center;
}

Man muss nur richtig fragen, wenn man eine bestimmte Antwort will ;-)

Warum sollen sich zehn Leute Mühe geben, durch Deinen Code zu steigen, wenn du keinen Bock hast, das eigentliche Problem zu zeigen?

Gibt da eigentlich keinen Grund für. Dir wurde mehrfach gesagt, "zeig uns dein Problem (ohne den überflüssigen Müll). - Du hast es nur nicht gehört ;-)

Ich habe ein online-Beispiel für dich: http://codepen.io/haunschild/pen/WGWbbG

Ich habe ein genz kurze Lektüre für dich: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ich habe ein Spielchen für dich: http://flexboxfroggy.com/

Viel Spaß!

Marc

[Andy Nail]

Jo servus Marc

und vielen Dank. Funkttioniert einwandfrei. Ich atte aber bereits Code gezeigt, der mein Problem darstellt und konnte mit dem ganuen Flexboxx halt nix anfangen, genauso wie das was Du mir noch gezeigt hattest. Und so entschied ich mich halt einfach mal das diplay:flex in mein css für ein div einzusetzen:

#TestArea {
  z-Index: 1; display: flex; align-items:center;
  position: absolute; height: 100%; width: 414px; 
  left:200px; top:0; background-color: #fff; 
  visibility: hidden;
}
#TestLink { font-family: 'Times New Roman'; font-size:18pt; color:#000; text-decoration: none; padding:10px; width:374px; white-space:nowrap; line-height:30px; outline:none; text-align:center; margin-left:10px; margin-bottom:55px}

<div id="TestArea">
<div style="position:absolute; right:30px; top:15px; width:20px; height:20px; z-index:2" id="CloseArea"><input type="button" onclick="document.getElementById('TestArea').style.visibility ='hidden'; top.document.getElementById('LinkDaten').style.display = 'none'; document.LinkDaten.Beenden.onclick = null; document.LinkDaten.Speichern.onclick = null" value="X" title="Link Test beenden"/></div>
<a id="TestLink" target="_blank"></a>
</div>

Und sieht s aus als würde es einwandfrei funktionieren. Auch mit dem Abstand nach unten. Denn ich schaffe es einfach nicht das Testfeld aauf die rrichtige Größe anzupassen. Aber sieht ja gut aus.

Also nochmals vielen Dank dafür!

Gruß Andreas