[HTML, CSS] Teaser

[Sam Fisher]

Hallo !

Ich habe, wie so oft, mal wieder ein Problem und brauche eure Hilfe. Es geht um sogenannte Teaser-Boxen.

Auf http://barrierefrei.e-workers.de/worksho...s/tips.php gibt es relativ weit unten den Unterpunkt Teaser. Davon war ich sehr begeistert. Der Quellcode ist dieser hier:

PHP-Code:

<h3>Teaser</h3>
<p>Klar abgegrenzte Kästchen (sog. "Teaser") sind ein beliebtes Element für Navigations-Elemente oder auch für kleine Werbeblöcke.</p>
    <div class="ws-teaser">
<h4>&Uuml;berschrift</h4>
<p>Wie beil&auml;ufig, beim Umbl&auml;ttern der Buchseiten, habe ich Dein B ber&uuml;hrt.<br />
Man hatte Dich mir als Type geschildert, der man in allen Bibliotheken begegnet: Sehr belesen doch eher unscheinbar, von etwas altmodelnder Art.</p>
    </div>


/* Teaserbox */
.ws-teaser {
position: relative;/*fuer IE*/
width: 200px;
background-color: #e7d5b5;
border: solid 1px  #304e6a;
}
#wrapper .tip .ws-teaser h4 {
position: relative;/*fuer IE*/
margin: 0;
padding: 3px 0 3px 5px;
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
background-color: #304e6a;
color: #e0e0e0;
}
.ws-teaser p {
font-family: Arial, sans-serif;
font-size: 95%;
color: #000;
margin: 0;
padding: 10px;
line-height: 150%;
} 


Jedoch wird das bei mir sowohl im Firefox als auch im Internet Explodierer falsch dargestellt. Siehe Anhang:    

Da ich den Code Eins zu Eins übernommen habe, weiß nicht nicht, wo der Fehler stecken könnte.


Könnt ihr mir helfen?

Gruß

Sam

PS: Der Fehler ist irgendwo bei der Überschrift, da diese ja nicht farbig hinterlegt wird, noch die Schriftfarbe sich ändern lässt.

[e-phy]

So, habs mir noch mal angeschaut. Es fehlt genau ein Komma!

Schau dir mal die Zeile mit dem Inhalt an und ergänz dann das Komma!

#wrapper .tip, .ws-teaser h4 {

[Sam Fisher]

e-phy schrieb:So, habs mir noch mal angeschaut. Es fehlt genau ein Komma!

Schau dir mal die Zeile mit dem Inhalt an und ergänz dann das Komma!

#wrapper .tip, .ws-teaser h4 {

Hallo !

Vielen Dank, das war wirklich der Fehler. Eigentlich hätte ic hda auch selber draufkommen müssen, aber naja, ihr habt da wohl mehr übung als ich.

Jetzt für alle noch mal der richtige Code.


Vielen Dank

Sam

PHP-Code:

<h3>Teaser</h3>
<p>Klar abgegrenzte Kästchen (sog. "Teaser") sind ein beliebtes Element für Navigations-Elemente oder auch für kleine Werbeblöcke.</p>
    <div class="ws-teaser">
<h4>&Uuml;berschrift</h4>
<p>Wie beil&auml;ufig, beim Umbl&auml;ttern der Buchseiten, habe ich Dein B ber&uuml;hrt.<br />
Man hatte Dich mir als Type geschildert, der man in allen Bibliotheken begegnet: Sehr belesen doch eher unscheinbar, von etwas altmodelnder Art.</p>
    </div>


/* Teaserbox */
.ws-teaser {
position: relative;/*fuer IE*/
width: 200px;
background-color: #e7d5b5;
border: solid 1px  #304e6a;
}
#wrapper .tip, .ws-teaser h4 { {
position: relative;/*fuer IE*/
margin: 0;
padding: 3px 0 3px 5px;
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
background-color: #304e6a;
color: #e0e0e0;
}
.ws-teaser p {
font-family: Arial, sans-serif;
font-size: 95%;
color: #000;
margin: 0;
padding: 10px;
line-height: 150%;
} 


[e-phy]

Du könntest ja mal eine Mail schreiben, und den Fehler weitergeben. Ist ja für weitere Leute vielleicht dann besser ersichtlich

[S.o.T.]

Wollt ihr nicht noch mehr Fragen zu HTML, CSS oder JavaScript stellen? Dann kann ich endlich mal wieder jemandem helfen! Ich freue mich ja schon riesig, dass sich ein paar Leute gefunden haben, die ihre Seiten selber coden (oder es zumindest probieren ;-). PS: Sam Fisher, wie lautet denn die URI/URL deiner Seite?