• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Button href/hyperlink öffnet nicht

L

lazeho

Neues Mitglied
Ich habe in meinem Projekt folgendes problem,ich habe 2 knöpfe erstellt.Diese sollen mit einem href beim clicken eine datei öffnen.
Ich weiß nicht woran dies liegen könnte,ich bedanke mich bereits im Voraus für die Hilfe.
Info: Die zu öffnende Datei liegt im gleichen Verzeichniss deswegen kein Pfad beim Link.

HTML code:
<body>
<div>
<button class="button1"><a1 href="support.messages.php" style="text-decoration: none;">Learn More</a1></button>
<button class="button2"><a1 href="support.faq.php" style="text-decoration: none;">Learn More</a1></button>
</div>
</body>

CSS code:
.button1 {
background-color: #2e3d4f;
border: 2px solid #f3c217;
color: #f3c217;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 500px;
width: 150px;
margin-left: 650px;
margin-top: 600px;
}
.button1:hover {
background-color: #f3c217;
border: 2px solid #f3c217;
color: #2e3d4f;
}
.button2 {
background-color: #2e3d4f;
border: 2px solid #f3c217;
color: #f3c217;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 500px;
width: 150px;
margin-left: 450px;
margin-top: 600px;
}
.button2:hover {
background-color: #f3c217;
border: 2px solid #f3c217;
color: #2e3d4f;
}
a1:hover {
color: #2e3d4f;
}
 
Zuletzt bearbeitet:
Du musst den Link aus dem Button rausnehmen oder einen
*** Link entfernt, weil nicht mehr erreichbar ***
oder einen Button der mit Javascript einen Link öffnet
*** Link entfernt, weil nicht mehr erreichbar ***
 
Zuletzt bearbeitet:
lazeho schrieb:
.button1 {
background-color: #2e3d4f;
border: 2px solid #f3c217;
color: #f3c217;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 500px;
width: 150px;
margin-left: 650px;
margin-top: 600px;
}
.button1:hover {
background-color: #f3c217;
border: 2px solid #f3c217;
color: #2e3d4f;
}
.button2 {
background-color: #2e3d4f;
border: 2px solid #f3c217;
color: #f3c217;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 500px;
width: 150px;
margin-left: 450px;
margin-top: 600px;
}
.button2:hover {
background-color: #f3c217;
border: 2px solid #f3c217;
color: #2e3d4f;
}
Zum Vergrößern anklicken....
Ouch :D da hat jemand aber noch viel zu lernen.
Schau dir bitte unbedingt mal die CSS Grundlagen an. Den Code kriegst du auf 1/5 reduziert.
CSS: 
.button2 {
...
display: inline-block;
...
margin-left: 450px;
margin-top: 600px;
}

.button1 {
...
display: inline-block;
...
margin-left: 650px;
margin-top: 600px;
}
und das hier sieht mir aus, wie ein verzweifelter Versuch, die Buttons richtig nebeneinander zu setzen.
Dann kannst du dir direkt auch nochmal Flexboxen anschauen.
Mit Flexboxen lassen sich zum Teil ganze Seitenlayouts erstellen.
Wenn du die beherrscht, bist du einen riesen Schritt weitergekommen.
Aber auch dafür brauchst du die CSS-Grundlagen, also bitte auch nicht außer Acht lassen.
 
Aaron3219 schrieb:
Ouch :D da hat jemand aber noch viel zu lernen.
Schau dir bitte unbedingt mal die CSS Grundlagen an. Den Code kriegst du auf 1/5 reduziert.
.
Zum Vergrößern anklicken....
das Stimmt ,wenn nicht sogar mehr
Code: 
<html><head>
<style>
.button{
background-color: #2e3d4f;
border: 2px solid #f3c217;
color: #f3c217;
padding: 20px;
text-align: center;
text-decoration: none;
display:block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 100px;
width: 150px;
}
.button:hover {
background-color: #f3c217;
border: 2px solid #f3c217;
color: #2e3d4f;
}
div{
  width:100%;
  display:flex;
}

</style>
</head>
<body>
<div>
<a class="button button1" href="support.messages.php">Learn More</a>
 <a class="button button2"  href="support.faq.php">Learn More</a>
</div>
</body>
</html>
Vieleicht bekommt den ja einer noch kürzer.
Aber so könnte es aussehen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben