CSS wird nicht angewendet - css, html

Ich versuche, einen Codeabschnitt mit einem Div-Tag zum Öffnen und Schließen zu blockieren:

<div id="header">
<a href="www.hugowolfdesigns.tumblr.com">
<img src="/images/http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
</a>
</div>

Aber wenn ich versuche, css mit #header zu programmieren, wird es keiner der Regeln folgen? Ich bin neu in HTML und CSS, bitte entschuldige meine Ignoranz.

EDIT: Hier ist das erforderliche CSS benötigt, um mir zu helfen. Tut mir leid, dass ich es vergessen habe, ich bin wieder neu hier.

.header{
width:300px;
height:300px;
display:block;
margin: auto;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;}

Der letzte Teil wurde von einer Hilfswebseite kopiert, da er ein- und ausblendet, wenn die Maus darüber schwebt. Jedes Mal, wenn ich versuche, das "." Mit einem "#" vernachlässigt es völlig die Regeln.

Antworten:

3 für die Antwort № 1

Das CSS in der Antwort ist für die Klasse Header und nicht für die Ich würde Header: .header {. In der CSS . bezieht sich auf eine Klasse und ein # zu einer ID. Das CSS wird derzeit auf das Bild angewendet: http://jsfiddle.net/BjgvY/


1 für die Antwort № 2

Keine Ahnung, was dein CSS ist, weil du es nicht aufgenommen hast, aber ich vermute, dass du dich auf die Tatsache beziehst, dass du so etwas machst:

#header {
height:50px;
}

Und nichts passiert. Dies liegt daran, dass #header standardmäßig einen Überlaufwert von "visible" hat und da das Bild viel größer ist, wird es überlaufen und so viel Platz wie nötig einnehmen.

Wenn Sie das nicht möchten, müssen Sie den Überlauf auf einen anderen Wert ändern, zum Beispiel:

#header {
height:50px;
overflow: hidden;
}

Versteckt jeden Inhalt, der über die 50px-Höhe der Kopfzeile hinausgeht.

Wenn Sie versuchen, die Größe des Bildes zu ändern,Legen Sie die Höhe / Breite Attribute auf dem Bild, nicht die Kopfzeile. Oder vorzugsweise Verknüpfung zu einem passenderen Bild; Es gibt keinen Punkt, der ein ~ 1000x800 Bild lädt, wenn Sie es nur auf etwas wie 200x160 skalieren.

Es ist auch wahrscheinlich eine schlechte Idee, eine ID und eine Klasse mit dem gleichen Namen zu haben. Nur aus Gründen der Klarheit, wenn Sie versuchen, das Bild mit der Klasse "header" zu bekommen, um ein CSS-Styling zu folgen, möchten Sie das verwenden

.header {
}

Selektor, und nicht

#header {
}

Wenn Sie Ihr CSS posten, könnte ich Ihnen eine eher ansprechbare Antwort geben, als nur eine Aufnahme im Dunkeln, basierend auf dem, was Sie möglicherweise falsch machen.

Bearbeiten:

Es scheint, als hätten Sie Schwierigkeiten mit CSS-Selektoren,

#header {
}

bezieht sich auf alle Elemente, die ein haben ICH WÜRDE Header, wie z

<div id="header"></div>

während der CSS-Selektor

.header {
}

bezieht sich auf Elemente mit a KLASSE Header, wie z

<div class="header"></div>

Also zurück zu deinem Code

<div id="header">
<a href="www.hugowolfdesigns.tumblr.com">
<img src="/images/http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
</a>
</div>

#header { // these styles will apply to your div with ID header
}

.header { // these styles will apply to your image with the class header
}

Es mag wie ein Ärgernis erscheinen, aber wenn Sie neu in CSS sind, würde ich Ihnen wärmstens empfehlen, sich über Selektoren zu informieren. Da sie ziemlich wichtig sind, irgendetwas in CSS zu tun.

Hier ist die Dokumentation

Kapitel 5.8.3 spricht über Klassenselektoren

In Kapitel 5.9 wird über ID-Selektoren gesprochen

(Off topic)

Ihr Link ist falsch und sollte entweder sein

 <a href="http://www.hugowolfdesigns.tumblr.com">

wenn es auf eine andere Website zeigt oder es einfach sein kann

 <a href="/">

wenn es auf die Homepage der gleichen Website zeigt


Verwandte Fragen
Speisekarte