Kannst du eine CSS <header> - element in einen link?

Ich habe eine Website, die hat eine <header> welche gestaltet ist, so dass die header-Grafik ist die background-image. Ich würde gerne die header link auf die Startseite.

Gibt es einen eleganten Weg, dies zu tun, die mir erlauben wird, halten Sie es als einen header mit einem background-image?

CSS:

#header {
  background-image: url('../images/header.jpg');
  height: 144px;
  display: block;
}
InformationsquelleAutor Matt Brand | 2013-03-13
  1. 6

    Hintergrund Bilder sind nicht LinkBar. Die "richtige" Art und Weise, darüber zu gehen, wäre dies ein <a> element, das die entsprechenden href, und setzen Sie die background-image zu. Verwenden Sie CSS, um die <a> tak die Platz brauchen.

    • Ok, habe es. Danke!!!
    • Denken Sie auch daran anwenden display:block; der Anker-tag, so dass es zu einem block-level-element anstelle von inline (so, dass es dauert, bis der Raum die eingestellte Breite/Höhe).
    • Wenn diese Lösung für Sie gearbeitet, bitte markieren Sie es als die akzeptierte Lösung, indem Sie auf das Häkchen neben der Option die Antwort.
    InformationsquelleAutor Nick Andriopoulos
  2. 1

    Ihre Frage bezieht sich auf <header> element, aber der CSS-code verwendet einen class-Selektor #header. Technisch könnten Sie <header class=header>, aber das wäre eher sinnlos, und #header deutet darauf hin, dass der tatsächliche Aufschlag hat <div class=header>.

    Sowohl eine <header> element und ein <div> element kann innerhalb eines <a> element, so weit wie aktuelle browser-Verhalten betrachtet wird. HTML-Spezifikationen traditionell verboten solche Konstrukte, aber HTML5 CR ermöglicht jede "flow-content" innerhalb <a>.

    Wenn der header wirklich nur ein Bild (als Hintergrundbild), dann würde es zu sein scheinen natürlicher zu bedienen, nur ein a element, und legen Sie das Hintergrundbild direkt auf Sie. Allerdings verringert sich dadurch die Erreichbarkeit, weil es keine Möglichkeit gibt, geben Sie alternativen text für ein Bild im hintergrund, also für Screenreader und Browser mit dem laden der Bilder deaktiviert ist, wäre ein link ohne Inhalt, kein link-text. Deshalb, wenn der header sollte ein link sein, ist es besser, verwenden Sie ein content-Bild, z.B.

    <header>
<a href="./"><img src=hdr.png alt="ACME Company" border=0></a>
</header>

    (Allerdings ein content-Bild Kräfte der minimalen Seitenbreite auf die Breite des Bildes. Dies ist nicht immer wünschenswert, aber das ist eine andere Geschichte und andere Frage.)

    InformationsquelleAutor Jukka K. Korpela
  3. 0

    Anker sind jetzt block-Elemente in HTML5, so dass Sie wickeln kann block-Elemente wie h1, p und div. Sie sind jedoch nicht gedacht, um wrap header, article, nav, section etc.

    Könntest du JavaScript verwenden, weisen Sie ein onClick event zu den header-element, wenn Sie nicht haben Zugriff auf die markup oder CSS, aber natürlich benötigt JavaScript um zu funktionieren.

    Stattdessen werden Sie brauchen, wickeln Sie die Inhalte der header mit einem a und weisen Sie ihm einen href zu Ihrer homepage. Sie können dann den style der link (stellen Sie sicher, dass Sie es zu display: block) mit einem hintergrund-Bild und andere CSS.

    • "Sie sind jedoch nicht gedacht, um wrap-header, article, nav, section, etc." - Zitat benötigt.
    • Es gibt keinen Grund, warum es konnte nicht wickeln, aber ich habe noch zu erfüllen, Entwickler, die...
    InformationsquelleAutor Karl Tynan
  4. 0

    Mache ich es wie dieser bei Einsatz einer separaten style-sheet.

    Original-css-header-tag

        <div id="header">

    </div>

    Hinzugefügt span zu machen, header einen link

        <span><a href="http://www.yourwebsitename.com/">
    <div id="header">

    </div></a></span>
    InformationsquelleAutor Mike B.
Schreibe einen Kommentar