Html, Button mit href?
Hallo, wenn ich eine Button mit einem Youtube Link erstelle, wird der link auf geöffnet, wenn ich neben den Button klicke. Wie kann ich die href wirklich nur auf den Button legen, so dass der Link nur geöffnet wird, wenn ich auch nur auf den Button drücke? Bisher habe ich das so gemacht:
<a class="hyperlink" href="https://Youtube.com" target="_blank">
<button class="Button_Youtube"> Test Knopf </button> </a>
Dann ist wird der Link aber viel zu groß, so dass ich auch, wenn ich ich über/neben/unter den Button drücke geöffnet wird.
Edit: Ich glaube es lag an der margin, dass der Link so groß war, aber wie soll ich den Button sonst auf meiner Seite verschieben?
3 Antworten
Um den Button auf der Seite zu verschieben könntest du um den <a> und den <button> tag noch ein <div> tag mit einer Klasse/Id machen. So kannst du beide zusammen verschieben.
- Bitte keinen Button im <a>-Tag. Verwende den a-Tag als Button und style ihn einfach dementsprechend.
- Dann geht dein Problem auch weg. a-Tag ist wohl breiter als dein button.
Zuerst einmal geht es darum, dass du versuchst, ein Interaktionselement (button) in einem anderen Interaktionselement (a) zu schachteln. Das ist grundsätzlich invalider Code.
Hinsichtlich der Frage, ob Button oder Link, solltest du berücksichtigen, dass beide Elemente für verschiedene Anwendungsfälle konzipiert sind.
- Ein Link verweist explizit auf ein Ziel. Für Nutzer ist diese Funktionalität auch klarer erkennbar (bspw. wird die Zieladresse von mehreren Browsern links unten angezeigt, wenn man die Maus über den Link bewegt).
- Ein Button führt eine Aktion aus.
Ist es nicht aus Verkäufersicht attraktiver, den potentiellen Käufer dazu zu bewegen den Button zu drücken?
Welchen Vorteil siehst du da für einen Verkäufer?
In deinem Fall geht es darum, auf eine Seite - also ein Ziel zu verlinken. Daher ist das a-Element auch die geeignetste Wahl. Ein button-Element liefert dir keinerlei Vorteil. Nur ein anderes Aussehen und eine umständlichere Implementation, um auf die Zieladresse weiterzuleiten.
Aber mal allgemein, wie bewege ich Elemente auf meiner Seite?
Abstände kannst du mit margin und padding erzeugen. Um Layouts anzulegen, können eine Flexbox oder ein Grid noch nützlich sein.
Sobald ich Margin benutze, wird (auch bei inline-block Elements) die gesamte Margin Fläche unbrauchbar (...)
Mit margin setzt du einen Außenabstand für das Element. Es ist gewollt, dass dieser Abstand nicht überschnitten wird.
Wie kann ich dinge z.B. übereinander Legen?
Ein Weg ist eine absolute Positionierung, die sich an einem anderen relativ postionierten Element orientiert.
Beispiel:
<div style="container">
<div class="box-1">Some box</div>
<div class="box-2">Other box</div>
</div>
CSS:
.container { position: relative }
.box-1 {
background: red;
height: 50px
}
.box-2 {
background: lime;
height: 50px;
left: 10px;
position: absolute;
top: 10px
}
Dann gibt es noch sowas wie Vertical Align, aber auch das Funktioniert nicht immer bei mir. (...)
Das vertical-align-Property kann nur in bestimmten Fällen angewandt werden. Genaueres kannst du auf MDN nachlesen.
Wird für dieses Problem dann eigentlich das <div> Element verwendet?
Das div-Element ist ein Containerelement ohne semantische Bedeutung. Ziel sollte es sein, stets möglichst passende Elemente zu verwenden, die deinen Webseiteninhalt ausdrucksstark beschreiben können. Lies auf MDN die Artikel zu Elementen wie article, figure, footer header, main, nav, p und section.
Weil damit kann man ja Dinge in dem Container auf eine bestimmte Länge bringen (...)
Container-Elemente wie div sind in der Regel Blockelemente. Das heißt, sie nehmen in der Regel die volle Breite ihres Elternelements an.
Mit CSS kannst du aber auch andere Elemente zu Blockelementen machen.
Beispiel:
<i style="display:block">Some text</i>
Ich denke, es wäre generell vorteilhaft, wenn du dich noch einmal auf Seiten wie MDN, SelfHTML oder MediaEvent zu HTML allgemein beliest.
<a class="Button_Youtube" href="https://Youtube.com" target="_blank">Test-Knopf</a>
Das sollte dein Problem lösen, ggf. noch die Klasse "Button_Youtube" im css anpassen.
Danke, hab ich mittlerweile schon auf einigen Seiten gelesen, aber warum eigentlich nicht? Buttons sind doch eher verlockend als Links oder nicht? Ist es nicht aus Verkäufersicht attraktiver, den potentiellen Käufer dazu zu bewegen den Button zu drücken? Ich finde ein Button sieht deutlich interessanter aus, als ein Simpler Link. (Animation, Schatten, etc.) Wobei mir klar ist, dass man auch einen Link ungefähr so Stylen kann.
Aber mal allgemein, wie bewege ich Elemente auf meiner Seite? Sobald ich Margin benutze, wird (auch bei inline-block Elements) die gesamte Margin Fläche unbrauchbar, also z.B. Margin-top: 200px, dabei kann ich keine anderen Dinge auf diese 200 Pixel legen. Wie kann ich dinge z.B. übereinander Legen? Es gibt doch diese Position Relative, nützt die was? Dann gibt es noch sowas wie Vertical Align, aber auch das Funktioniert nicht immer bei mir. Wird für dieses Problem dann eigentlich das <div> Element verwendet? Weil damit kann man ja Dinge in dem Container auf eine bestimmte Länge bringen, so dass sie den Platz nicht mehr verbrauchen. Oder wofür braucht man <Div> sonst? Weil natürlich kann ich damit alle Elemente in einem Div gleichzeitig mit CSS bearbeiten, in dem ich dem DIV eine Klasse gebe, und dann mit CSS alle Elemente in diesem Div bearbeiten. Aber das kann ich ja auch einzeln machen, in dem ich den einzelnen Elementen selbst eine Klasse gebe, und diese dann mit .Name1, Name2, Name3 usw. {} bearbeiten. Ist <Div> nur eine Zeitersparnis?