div hat falsche Breite im Firefox und Chrome

schurik2050 · 2 Juli 2013

Hallo,

Ich beschäftige mich seit ca. 2 Stunden mit HTML5 und CSS3. Also ein blutiger anfänger.
ich habe ein DIV erstellt und die Breite auf 300px eingestellt. Diesen Div habe ich als Link genommen.
Leider erstreckt sich das div trotzdem über die gesamte Seite. Dies geschieht nur im Firefox und Chrome. Im IE10 wird alles richtig angezeigt.

Was mache ich falsch?

Hier meine css Datei:

Code:

.nav-link {
    width: 300px;
    height: 100px;
    background: red;
    font-family: Arial;
    
    margin-top: 15px;
    
    }

Und hier die html Datei:

HTML:

<!DOCTYPE html>

<html lang="de">
<head>
    <meta charset="utf-8" />
    <title>Herzlich Willkommen auf meiner Seite</title>
    
    <link rel="stylesheet" href="main2.css">
</head>
<body>

    <a href="./link1.html"><div class="nav-link">link1</div></a>
    <a href="./link2.html"><div class="nav-link">link2</div></a>
    <a href="./link3.html"><div class="nav-link">link3</div></a>

</html>

Danke schonmal!

Trüffelkrieger · 2 Juli 2013

Ich glaube, du kannst keine Block-Elemente (div) in ein inline-Element schachteln (a). Gib den Links in CSS mal die Eigenschaft:

Code:

a{
display:block;
}

Vielleicht hilft das. Und dann ist dein Code fehlerhaft (?). Ich meine, dass man in HTML5 auch Tags ungeschlossen lassen kann ... Aber dann müsstest du das auch einheitlich machen, denke ich (Der body-Tag ist nicht geschlossen).

div hat falsche Breite im Firefox und Chrome

schurik2050

Neues Mitglied

Trüffelkrieger

Mitglied

Neueste Beiträge