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

Butten mit Link valide machen

S

SourceCode

Guest
Buttons mit Link valide machen

Hallo Forum,

ich komme einfach nicht mehr weiter. Ich habe ein Menü mit Buttons in denen ein Link enthalten ist.

Der Validator zeigt mir immer Fehler an: :evil:

Line 8, Column 37: The element button must not appear as a descendant of the a element.
<a href="index.html"><button><b>Startseite</b></button></a>
Zum Vergrößern anklicken....

Das bedeutet das ein A-Attribut nicht nach einem Button-Attribut kommen darf. Anders herum klappt es aber auch nicht.

Das ist meine HTML-Datei. Habe jetzt extra ne Beispieldatei für Euch gemacht.
Wenn ihr sie selbst validieren wollt dann könnt ihr euch ja grade ne *.html erstellen und hier hochladen:
The W3C Markup Validation Service

HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Testdatei</title>
    </head>
    <body>
        <p>
        <a href="index.html"><button><b>Startseite</b></button></a>
        <a href="artikel.html"><button><b>Artikel</b></button></a>
        <a href="tipps.html"><button><b>Tipps</b></button></a>
        <a href="downloads.html"><button><b>Tools</b></button></a>
        <a href="dokus.html"><button><b>Dokus</b></button></a>
        <a href="history.html"><button><b>History</b></button></a>
        <a href="movies.html"><button><b>Filme</b></button></a>
        </p>
    </body>
</html>

Also jetzt zur meiner Frage:

Wie kann ich so ein Button-Menü machen ohne das der Validator Fehler anzeigt?

Schon mal Danke im Vorraus.

Gruß SourceCode :)
 
Zuletzt bearbeitet von einem Moderator:
Das geht nicht. <button>-Elemente gehören zu Formularen. Wenn Du einen Link haben willst der wie ein Button aussieht kannst Du dies z.B. per CSS erreichen. Alternativ kannst Du auch ein <button>-Element missbrauchen und den Klick per JavaScript verarbeiten, nur eben ohne einen Link darum zu legen.
 
Nimm statt der Buttons halt Grafiken oder besser Listelemente <li><a ></a></li> und formatiere die wie einen button. Wenn du keine Klappmenüs willst kannst über CSS auch die <a>-Elemente wie einen button formatieren. Die Idee von threadi geht halt nicht, wenn die Benutzer Javascript deaktiviert haben, sonst wäre das einfache onclick="javascript:window.location='http://...';" beim button auch recht einfach.
 
Danke Euch Zwei für die Antworten. Sorry das ich erst jetzt antworte. Dachte mein Beitrag wäre immer noch nicht freigeschaltet.

Ich habe in der Zwischenzeit schon was gefunden. Und zwar kann ich den Link so machen, dann ist er valide:
HTML: 
<button class="menubutton" name="Startseite" type="button" onclick="document.location='index.html'">Startseite</button>

Mit der Klasse "Menubutton" kann ich dann die Styles per CSS bearbeiten.

Habe jetzt gelernt das eine A-Attribute nicht nach einem Button und umgekehrt stehen darf.

Danke für Eure Hilfe :)

MFG SourceCode
 
Zuletzt bearbeitet von einem Moderator:
Das ist aber kein Link, sondern ein Javascript. Wenn jemand Javascript deaktiviert hat, guckt er dumm aus der Wäsche und kommt nicht weiter. Ich hab das fett auf meiner Seite stehen und blende es auch rot ein, dass meine Mühle-Seite nicht gut benutzt werden kann, wenn Javascript deaktiviert ist. Man kann es also durchaus so machen, muss sich aber über die Konsequenzen im Klaren sein.
 
NetAktiv schrieb:
Das ist aber kein Link, sondern ein Javascript. Wenn jemand Javascript deaktiviert hat, guckt er dumm aus der Wäsche und kommt nicht weiter. Ich hab das fett auf meiner Seite stehen und blende es auch rot ein, dass meine Mühle-Seite nicht gut benutzt werden kann, wenn Javascript deaktiviert ist. Man kann es also durchaus so machen, muss sich aber über die Konsequenzen im Klaren sein.
Zum Vergrößern anklicken....

Bist du Dir sicher? Habe JavaScript grade deaktiviert aber es geht trotzdem. !?

MFG SourceCode

EDIT// Sorry hatte nicht das komplette JavaScript deaktiviert. Also es geht nicht. Aber wer hat schon kein Java aktiviert.
 
Zuletzt bearbeitet von einem Moderator:
onclick="document.location='index.html'
onclick ist ein event und document.location = 'xxx'; ist eine Javascript Zuweisung. Ersetze es doch mal durch

Code: 
onclick="alert('hallo');document.location = 'index.html';"
das ist 100% Javascript :-) Hast du Javascript überall deaktiviert, nicht dass es zonenweise noch irgendwie aktiv ist.
 
NetAktiv schrieb:
onclick="document.location='index.html'
onclick ist ein event und document.location = 'xxx'; ist eine Javascript Zuweisung. Ersetze es doch mal durch

Code: 
onclick="alert('hallo');document.location = 'index.html';"
das ist 100% Javascript :-) Hast du Javascript überall deaktiviert, nicht dass es zonenweise noch irgendwie aktiv ist.
Zum Vergrößern anklicken....

Jo, habs gesehen aber es muss doch ne Möglichkeit geben einen stinknormalen Button ohne JavaScript als Hyperlink zu verwenden. Ich verstehe das nicht. Gibts da nichts, was auch ohne JS läuft ?

MFG SourceCode
 
Zuletzt bearbeitet von einem Moderator:
Für Safari/Chrome/Firefox könntest du mit
Code: 
a.button
{
  -moz-appearance: button;
  -webkit-appearance: button;
  padding: 1px 6px;
  color: black;
  text-decoration: none;
}
die Links mit der Klasse "button" wie ein button aussehen lassen. Aber halt auch nur diese 3 .


Eine andere (allerdings semantisch nicht korrekte) Variante wäre es über den <form>-Tag zu lösen
HTML: 
<form method="post" action="index.php">
 <input type="submit" value="Klick" />
</form>

(ist beides nicht das gelbe vom Ei)


oder schau mal hier vorbei: 4 Lösungen für CSS-Buttons | tagdocs.de
 
alogheo schrieb:
Für Safari/Chrome/Firefox könntest du mit
Code: 
a.button
{
  -moz-appearance: button;
  -webkit-appearance: button;
  padding: 1px 6px;
  color: black;
  text-decoration: none;
}
die Links mit der Klasse "button" wie ein button aussehen lassen. Aber halt auch nur diese 3 .


Eine andere (allerdings semantisch nicht korrekte) Variante wäre es über den <form>-Tag zu lösen
HTML: 
<form method="post" action="http://www.html.de/forum.php">
 <input type="submit" value="Klick" />
</form>

(ist beides nicht das gelbe vom Ei)


oder schau mal hier vorbei: 4 Lösungen für CSS-Buttons | tagdocs.de
Zum Vergrößern anklicken....

Danke Dir, das werde ich morgen mal versuchen.

Hab noch ne Frage:
Habe eben gelesen dass es am W3C-Validator liegt, weil der noch kein CSS 3 kann und das Element Border-Radius somit nicht als CSS-Standard angesehen wird.

Wann kommt den CSS 3 raus? Weiß das einer?

Danke, SourceCode.
 
Zuletzt bearbeitet von einem Moderator:
SourceCode schrieb:
Jo, habs gesehen aber es muss doch ne Möglichkeit geben einen stinknormalen Button ohne JavaScript als Hyperlink zu verwenden. Ich verstehe das nicht. Gibts da nichts, was auch ohne JS läuft ?
Zum Vergrößern anklicken....

Ja. Mit einem Formular. Alternativ: Links nutzen (was ich empfehlen würde). Der Nachteil von Formular-Buttons ist auch, dass Suchmaschinen nicht über diesen hinweg kommen. Dahinter liegende Seiten wären nicht für die erreichbar, was wiederum die Indizierung deiner Seite bei Suchmaschinen beeinträchtigen könnte.

SourceCode schrieb:
Hab noch ne Frage:
Habe eben gelesen dass es am W3C-Validator liegt, weil der noch kein CSS 3 kann und das Element Border-Radius somit nicht als CSS-Standard angesehen wird.

Wann kommt den CSS 3 raus? Weiß das einer?
Zum Vergrößern anklicken....

Es ist keine Frage des "rauskommens" sondern zum Einen von der Freigabe von CSS3 als Standard. Es ist bisher aber nur ein Entwurf (seit bald 10 Jahren imho). Und zum Anderen von der Unterstützung der Browser der in CSS3 enthaltenen Eigenschaften. Die meisten modernen Browser unterstützen bereits viele der in CSS3 enthaltenen Eigenschaften. border-radius gehört auch dazu. Wenn Du solche Eigenschaften verwendest darfst Du heutzutage nicht davon ausgehen, dass irgendein Validator das als korrekt anerkannt, kannst aber gleichzeitig davon ausgehen, dass viele Browser es unterstützen.
 
Okay. Also Links nutzen bedeutet also ganz normale Links oder wie?

Aber das sieht halt nicht so gut aus. Dann wäre da noch die Alternative mit den Grafiken...

Mh. Ich werde dann in den nächsten Tagen mal ein bisschen ausprobieren und dann melde ich mich nochmal.

Danke.
 
Zuletzt bearbeitet von einem Moderator:
Ja, mit Links sind Links gemeint.

Links können dank CSS auch als Button dargestellt werden, sogar so wie Du es gerne hättest. Nachteil bei einem nicht per CSS gestalteten <button>-Button wäre, dass dieser unter jeder Oberfläche anders aussieht. Ein XP mit XP-Style stellt solche Buttons anderes dar als ein Vista mit Vista-Style. Für KDE hat auch jede Linux-Distribution ihren eigenen Button-Style, ist alles dem Nutzer des Systems überlassen. Wenn Du auf deiner Webseite einen einheitlichen Stil verwenden willst, gib ihn also selbst per CSS an (z.B. mit Hintergrundbildern).
 
threadi schrieb:
Ja, mit Links sind Links gemeint.

Links können dank CSS auch als Button dargestellt werden, sogar so wie Du es gerne hättest. Nachteil bei einem nicht per CSS gestalteten <button>-Button wäre, dass dieser unter jeder Oberfläche anders aussieht. Ein XP mit XP-Style stellt solche Buttons anderes dar als ein Vista mit Vista-Style. Für KDE hat auch jede Linux-Distribution ihren eigenen Button-Style, ist alles dem Nutzer des Systems überlassen. Wenn Du auf deiner Webseite einen einheitlichen Stil verwenden willst, gib ihn also selbst per CSS an (z.B. mit Hintergrundbildern).
Zum Vergrößern anklicken....

Also wie jetzt? Geht das doch mit CSS :shock:

Es muss nur ein stinknormaler Link-Button sein!

Kannst du mir ein Beispiel zeigen wie ich es machen kann?

Gruß SourceCode
 
Zuletzt bearbeitet von einem Moderator:
Was Du mit CSS gestalten kannst, wurde dir hier und hier schon gesagt.

Vermische nicht immer den Begriff "Link" und "Button". Ein Link ist ein Link, ein Button ein Button. Beides zusammen gibt es nicht.

Wenn Du einen Button dafür missbrauchen willst, als Link zu aggieren, dann nutze ein Formular um das Linkziel anzugeben.

Wenn Du einen Link dafür missbrauchen willst, wie ein Button auszusehen, verwende CSS um ihn entsprechend zu gestalten.
 
threadi schrieb:
Was Du mit CSS gestalten kannst, wurde dir hier und hier schon gesagt.

Vermische nicht immer den Begriff "Link" und "Button". Ein Link ist ein Link, ein Button ein Button. Beides zusammen gibt es nicht.

Wenn Du einen Button dafür missbrauchen willst, als Link zu aggieren, dann nutze ein Formular um das Linkziel anzugeben.

Wenn Du einen Link dafür missbrauchen willst, wie ein Button auszusehen, verwende CSS um ihn entsprechend zu gestalten.
Zum Vergrößern anklicken....

Ja, das mit der Form funktioniert bei mir nicht.

Ist jetzt egal, ich lass jetzt einfach alles so wie es vorher war (also mit dem Formular) und gut ist. ;)
Dann hab ich halt nur noch das Problem mit den Suchmaschinen aber dann melde ich halt jede Seite einzeln an. :)

Valide ist das ganze ja

MFG SourceCode
 
Zuletzt bearbeitet von einem Moderator:
Jede Seite anzumelden wird nichts bringen. Google wie auch andere Suchmaschinen nehmen nur Seiten in den Index auf den sie selbst auch erreichen und erreichen dürfen. Seiten hinter Formularfeldern sind nicht erreichbar, selbst wenn man sie anmeldet. Die Suchmaschinen finden ja keine Links auf sie.
 
threadi schrieb:
Jede Seite anzumelden wird nichts bringen. Google wie auch andere Suchmaschinen nehmen nur Seiten in den Index auf den sie selbst auch erreichen und erreichen dürfen. Seiten hinter Formularfeldern sind nicht erreichbar, selbst wenn man sie anmeldet. Die Suchmaschinen finden ja keine Links auf sie.
Zum Vergrößern anklicken....

Mh.. So ein Mist. :twisted:

Ich glaube ich werde mir dann die Mühe machen und Grafiken für das Menü erstellen.

(Kann ich eigentlich einen Text auf die Grafiken schreiben, sodass nicht für jedes neue Unterverzeichniss ne neue Grafik erstellen muss? )

MFG
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben