CSS-ID funktioniert nicht / Anfänger-Frage

Ich bin derzeit mit einem CSS-problem und ich hoffe mir kann jemand helfen, da ich bin ein sehr Anfänger.
Ich bin versucht, overlay und Bild über ein anderes Bild.

Wenn ich inline-code, es funktioniert gut, zum Beispiel:

http://imageshack.us/photo/my-images/440/screenshot7cx.jpg/

    <div class="one_half">
    <div id="square_icon" style="position: absolute; top: 12%; left: 36%;"><img src="img/square_icon.png" width="77" height="76" /></div>
    <img src="img/square.jpg" width="412" height="145" />
    </div>

Aber wenn ich versuche, einfügen in meine CSS-Datei direkt es nicht funktionieren.

http://imageshack.us/photo/my-images/577/screenshot8gvh.jpg/

    <style>
    #square_icon { position: absolute; top: 12%; left: 36%; };
    </style>

Warum es nicht funktioniert, wenn ich in meine CSS-Datei? Wieder bin ich traurig, ich bin sehr amateur, aber ich hoffe jemand kann mir helfen zu verstehen dieses Problem.

Danke Ihnen eine Menge,
Patrick

  • Die richtige form ist <style type="text/css"></style>
  • Auch ich denke, dass das Letzte Semikolon ist nicht erforderlich...
  • Die type Attribut ist nicht erforderlich, aber die <style> - tags sollten nicht in einem stylesheet.
  • Ich hoffe, dass Sie nicht haben <style> tags in Sie CSS-Datei an. Auch stellen Sie sicher, dass Sie es richtig (was Sie nicht zeigen).
  • Vielleicht finden Sie den CSS-validator nützlich für das Debuggen von Problemen wie diesem: jigsaw.w3.org/css-validator/#validate-by-input, auch die meisten Browser verfügen über eine Fehler-Konsole, die in der Regel sagt man, wenn Dinge falsch sind. In Chrome => Einstellungen -> developer tools -> Konsole...
  • das type-Attribut ist nicht erforderlich, wenn mit dem HTML5-doctype, wo es angenommen werden, text/css.
  • Sorry, ich bin auch in meine Wege mit HTML4.01 strict 🙂

InformationsquelleAutor Patrick Lanfranco | 2012-03-09
  1. 0

    wenn Sie möchten, um Stil der div-id, sollten Sie ihm eine ID:

    <div class="one_half">
    <div id="square_icon" style="position: absolute; top: 12%; left: 36%;"><img src="img/square_icon.png" width="77" height="76" /></div>
    <img src="img/square.jpg" width="412" height="145" />
</div>

    nicht die Klasse

    Den entsprechenden styles:

    <style>
    #square_icon { 
      position: absolute;
      top: 12%;
      left: 36%; 
    }//there is no ';' here
</style>

    Auch Sie einen Fehler gemacht, wie oben erwähnt.

    • "man sollte ihm eine ID [...] und nicht die Klasse" ich sehe keinen Unterschied zu den OP ' s HTML. Das div hat bereits eine ID. "oder ändern Sie den Selektor class-Selektor" Sie haben noch einen ID-Selektor... es ist unklar, was du sagen willst mit dieser Antwort. Dein code scheint nicht mit Ihren Worten übereinstimmen.
    • Dear all - ich danke Ihnen sehr für die hervorragende und schnelle Antworten. Und vielen Dank Jannis! }//es gibt keine '; hier <- dies löste das Problem auf der hand.
    InformationsquelleAutor Jannis M
  2. 2

    Brauchen Sie nicht <style> - tags in die CSS-Datei.

    Sollten Sie auch entfernen Sie das Semikolon (;) vom Ende der Klasse

    Entfernen Sie diese, und dies sollte funktionieren, solange die CSS ist mit der HTML-Datei korrekt angezeigt werden.

    <head>     
    <link rel="Stylesheet" href="/Style/stylesheet.css" type="text/css" />    
</head>

    Wenn ich falsch verstanden habe, und Ihre CSS-Stile sind eigentlich in Ihrem <head> tag wie:

    <head>
    <style>
        #square_icon { position: absolute; top: 12%; left: 36%; }
    </style>
</head>

    Dann versuchen Sie dies:

    <head>
    <style type="text/css">
        #square_icon { position: absolute; top: 12%; left: 36%; }
    </style>
</head>

    Bemerken, die ich Hinzugefügt habe type="text/css" zu Ihrem <style> tag.

    • -1 -funktionieren? Haben Sie sogar Blick auf diese und sehen, wie die beiden Fehler?
    • M: Sie scheinen zu missverstanden haben sowohl die Frage und diese Antwort.
    • Ich sah nicht die ; am Ende erste mal, cheers. Nicht würdig, ein downvote meiner Meinung nach, aber trotzdem danke
    InformationsquelleAutor Curt
Schreibe einen Kommentar