zwei Elemente (Links) auf einer Zeile horizontal gleich platzieren

[bari]

Guten Tag,

ich möchte einen Link für "nach oben" bei mir "top" in einer Linie wie ein links daneben stehender Text (in diesem Fall ebenfalls ein Link) platzieren. Das gelingt mir aber nicht. Der top-Link steht tiefer. Er sollte nicht nur rechtsbündig (was ich hingekriegt habe) sondern auch mittig des ihn umgebenden roten Rahmens stehen. Doch er steht zu tief. Hat jemand das Adlerauge, zu sehen wo ich das falsch geschrieben habe, resp. wo ich was anders definieren muss?

Hier unten auf der Seite ist die rot umrandete Zeile mit dem top-Link rechts.

Und hier der Code für den Link auf der gleichen Zeile mittig, der i.O. ist

.link-unten { 
 margin: 50px 0 10px;
 padding: 5px;
 font: normal .9em helvetica,arial,sans-serif;
 text-align: center; 
 letter-spacing: .2em; 
 border-radius: 3px;
 border: 1px solid red; 
 } 
.link-unten a:link,.link-unten a:visited  {
 text-decoration: none; 
 padding: .1em .3em; 
 color: yellow; 
 } 
.link-unten a:focus,.link-unten a:hover  { 
 background-color: skyblue; 
 color: red;
 } 

Und hier der Code für den "top"-Link, der nicht richtig mittig zu stehen kommt:

a[href="#"]:link, a[href="#"]:visited , a[href="#"]:focus, a[href="#"]:hover {
 float: right;
 padding: 3px 0px 3px 5px;
 letter-spacing: .2em;
 text-decoration: none;
 color: yellow;
 }
a[href="#"]:focus, a[href="#"]:hover {
 border: 1px solid red;
 border-radius: 3px;
 color: red; 
 } 

Besten Dank im Voraus,
bari.

[Matthias Apsel]

Hallo bari,

du hast dem betreffenden Element einen oberen und unteren Innenabstand (padding) gegeben.

Bis demnächst
Matthias

[bari]

du hast dem betreffenden Element einen oberen und unteren Innenabstand (padding) gegeben.

Bis demnächst
Matthias

Hallo Matthias, danke für den Hinweis. Das habe ich nun geändert. Es scheint i.O. zu sein.

Nun stört mich noch das Verschieben des linken (grossen) Links, wenn ich auf den rechts liegenden top-Link gehe (hover + focus). Ich habe border-collapse: collapse dort geschrieben. Ich habe es auf beiden div's gesetzt. Geht diese Funktion hier nicht?

Grundsätzlich: muss man diese Funktion auf beiden sich angrenzenden Elementen (bei mir 2 div) eingeben, oder geht das sowieso nur bei Tabellen?

Gruss, bari

[Matthias Apsel]

Hallo bari,

border-collapse geht nur für Tabellen, ggf. noch für Elemente, die mit display: table-cell zu einem Tabellenelement gemacht wurden (letzteres ungetestet)

Für die Lösung des Problems schlage ich vor, den beiden Links einen Rahmen in der Hintergrundfarbe zu geben.

.link-unten a {
    border: 1px solid #309;
    // ...
}

wobei ‚link-unten‘ kein besonders glücklicher Klassenbezeichner ist. Vielleicht ‚kontakt‘?

Bis demnächst
Matthias

[bari]

border-collapse geht nur für Tabellen, ggf. noch für Elemente, die mit display: table-cell zu einem Tabellenelement gemacht wurden (letzteres ungetestet)

Für die Lösung des Problems schlage ich vor, den beiden Links einen Rahmen in der Hintergrundfarbe zu geben.

.link-unten a {
    border: 1px solid #309;
    // ...
}

wobei ‚link-unten‘ kein besonders glücklicher Klassenbezeichner ist. Vielleicht ‚kontakt‘?

Hallo Matthias, Recht herzlichen Dank, dass du dich in meine Formatierung einstudiert hast. Diesen Klassenbezeichner habe ich geändert in kontakt.

hat geklappt (überraschenderweise schon vorher als ich es erwartet hätte) ! Du hast mich auf die Spur gebracht mit dem Rahmenproblem. Der "top"-Link hatte einen Rahmen (den ich nun weggelassen habe, letztlich habe ich auch den äusseren roten Rahmen um das gesamte div weggelassen), der Link zu Kontaktformular hingegen nicht. Der Rahmen brauchte Platz, den er sich beim links liegenden Element geholt hat (ich ging wohl davon aus, diesen Platz hole er sich gegen innen seines Elements). Wenn beide einen Rahmen gehabt hätten, hätte ich den Verschiebungseffekt mit ...collapse vielleicht aufheben können (?). Ich probierte schon etwas mit border-collapse: collapse, doch wohl nicht bis zu Ende.

[Matthias Apsel]

Hallo bari,

Wenn beide einen Rahmen gehabt hätten, hätte ich den Verschiebungseffekt mit ...collapse vielleicht aufheben können (?).

Nein, wenn beide immer einen Rahmen haben und nicht nur beim hovern, gibt es keinen Verschiebungseffekt.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

border-collapse geht nur für Tabellen, ggf. noch für Elemente, die mit display: table-cell zu einem Tabellenelement gemacht wurden (letzteres ungetestet)

Ja, geht – wie es auch sollte. Aber man kann ja nie wissen.

LLAP 🖖