CSS Newsteaser
Sicherlich sind die Newsteaser (oder auch: Newsflash, Popup-Effekt) von Web.de und gmx.net bekannt. Es werden drei News gefeatured, von denen jeweils eine Nachricht bei einem Mouseover ein größeres Bild bekommt und der Text erweitert wird. Da die genannten Seiten jedoch JavaScript für den Newsteaser verwenden, funktioniert der Effekt nicht mehr, sobald man JavaScript deaktiviert hat. Meine Version dieses Newsteasers funktioniert ohne JavaScript. Der XHTML Code und das CSS sind natürlich valide.
XHTML Markup
Da der XHTML Code valide sein soll, und der Newsteaser von möglichst vielen Browser korrekt angezeigt werden soll, bedarf es einiger kleinerer Hacks. Leider kennt z.B. der IE6 nicht die Pseudeklasse “hover” bei anderen Elementen als dem “A-Element”. Fangen wir nun mit dem XHTML Code an:
<div id="teasergruppe"> <div class="teaser"> <!--[if lte IE 6]> <a href="http://www.web-spirit.de" class="teaserlink"> <![endif]--> <div class="klein"> <img src="news_small.jpg" alt="News" /> <span>Hier steht der kurze angeteaserte Text, der die Aufmerksamkeit des Users gewinnen soll. Prägnante Schlüsselwörter und ein gut gewältes Bild wecken das Interesse des Users.</span> </div> <div class="gross"> <img src="news_big.jpg" alt="News" /> <h1> <!--[if lte IE 6]><p class='hide' title='<![endif]--> <a href="http://www.web-spirit.de"> <!--[if lte IE 6]>'></p><![endif]--> Titel der Nachricht <!--[if lte IE 6]><p class='hide' title='<![endif]--> </a> <!--[if lte IE 6]>'></p><![endif]--> </h1> <span>Nun kann dem User eine andere Version der Nachricht angeboten werden, die weiterführende Informationen enthält. Diese Nachricht kann komplett anders sein als die kurze Nachricht oder die kurze Version aufgreifen und fortsetzen.</span> </div> <!--[if lte IE 6]> </a> <![endif]--> </div> <div class="teaser"> <!--[if lte IE 6]> <a href="http://www.web-spirit.de" class="teaserlink"> <![endif]--> <div class="klein"> <img src="news2_small.jpg" alt="News" /> <span>Hier steht der kurze angeteaserte Text, der die Aufmerksamkeit des Users gewinnen soll. Prägnante Schlüsselwörter und ein gut gewältes Bild wecken das Interesse des Users.</span> </div> <div class="gross"> <img src="news2_big.jpg" alt="News" /> <h1> <!--[if lte IE 6]><p class='hide' title='<![endif]--> <a href="http://www.web-spirit.de"> <!--[if lte IE 6]>'></p><![endif]--> Titel der Nachricht <!--[if lte IE 6]><p class='hide' title='<![endif]--> </a> <!--[if lte IE 6]>'></p><![endif]--> </h1> <span>Nun kann dem User eine andere Version der Nachricht angeboten werden, die weiterführende Informationen enthält. Diese Nachricht kann komplett anders sein als die kurze Nachricht oder die kurze Version aufgreifen und fortsetzen.</span> </div> <!--[if lte IE 6]> </a> <![endif]--> </div> <div class="teaser"> <!--[if lte IE 6]> <a href="http://www.web-spirit.de" class="teaserlink"> <![endif]--> <div class="klein"> <img src="news3_small.jpg" alt="News" /> <span>Hier steht der kurze angeteaserte Text, der die Aufmerksamkeit des Users gewinnen soll. Prägnante Schlüsselwörter und ein gut gewältes Bild wecken das Interesse des Users.</span> </div> <div class="gross"> <img src="news3_big.jpg" alt="News" /> <h1> <!--[if lte IE 6]><p class='hide' title='<![endif]--> <a href="http://www.web-spirit.de"> <!--[if lte IE 6]>'></p><![endif]--> Titel der Nachricht <!--[if lte IE 6]><p class='hide' title='<![endif]--> </a> <!--[if lte IE 6]>'></p><![endif]--> </h1> <span>Nun kann dem User eine andere Version der Nachricht angeboten werden, die weiterführende Informationen enthält. Diese Nachricht kann komplett anders sein als die kurze Nachricht oder die kurze Version aufgreifen und fortsetzen.</span> </div> <!--[if lte IE 6]> </a> <![endif]--> </div> </div>
Ich hoffe, dass der Code nicht abgeschreckt hat. Leider kam ich um die kleinen IE Hacks nicht herum. Es hätte alles so schön einfach und übersichtlich aussehen können, wenn der IE6 CSS ordentlich darstellen würde.
CSS
Nichtsdestotrotz folgt nun das CSS, das auf den ersten Blick auch ein wenig komplex scheint:
div#teasergruppe{
border:1px solid #808080;
height:200px;
padding:0 15px 15px 15px;
width:500px;
}
div.teaser{
clear:left;
width:500px;
}
div.klein img, div.gross img{
float:left;
padding-right:7px;
border:0;
}
/*** IE6 und niedriger ***/
a.teaserlink{
padding-left:1px;
display:block;
height:30px;
padding-top:15px;
text-decoration:none;
}
a.teaserlink:hover{
color: #303030;
padding-left:0px;
}
a.teaserlink div.klein{
display: block;
color:#303030;
}
a.teaserlink div.gross{
display:none;
}
a.teaserlink:hover div.gross{
display:block;
color:#303030;
padding-left:1px;
}
a.teaserlink:hover div.klein{
display:none;
}
a.teaserlink div.gross h1{
font-size:15px;
font-weight:bold;
padding:0 0 1px 0;
margin:0px;
}
a.teaserlink div.gross, a.teaserlink div.klein{
font-family:Tahoma,Verdana,sans-serif;
font-size:11px;
line-height:17px;
}
a.teaserlink div.klein img{
margin-top:3px;
}
a.teaserlink div.gross p.hide{
display:none;
}
/*** moderne browser ***/
html>body div.teaser{
padding-left:1px;
display:block;
padding-top:15px;
text-decoration:none;
}
html>body div.teaser:hover{
color: #303030;
padding-left:0px;
}
html>body div.teaser div.klein{
display:block;
color:#303030;
}
html>body div.teaser div.gross{
display:none;
}
html>body div.teaser:hover div.gross{
display:block;
color:#303030;
padding-left:1px;
}
html>body div.teaser:hover div.klein{
display:none;
}
html>body div.teaser div.gross h1{
font-size:15px;
font-weight:bold;
padding:0 0 1px 0;
margin:0px;
}
html>body div.teaser div.gross, html>body div.teaser div.klein{
font-family:Tahoma,Verdana,sans-serif;
font-size:11px;
line-height:17px;
}
html>body div.teaser div.klein img{
margin-top:3px;
}
Die Verwendung von “html>body” verhindert, dass der IE6 und niedriger die angegebenen Deklarationen verarbeitet. Diese werden durch “html>body” nur von modernen Browsern, wie Mozilla Firefox 2.x oder dem IE7 verarbeitet.
Wahl geeigneter Bilder
Gönnen wir uns nun nach dem langen Code ein wenig Abwechslung. Die Bilder, die verwendet werden, sollten folgende Maße haben:
- kleines Bild: 51px x 30px
- großes Bild: 150px x 85px
Wenn andere Maße verwendet werden, muss das CSS editiert werden. Ich habe folgende Bilder für den Newsteaser verwendet:
Weitere Links im Teaser
In modernen Browsern können gerne weitere Links im Teasertext verwendet werden. Im IE6 und älter können leider keine zusätzlichen Links im Text enthalten sein, da sonst der Teaser “zerschossen” wird. Deshalb müssen alle verwendeten Links durch einen Hack sozusagen auskommentiert werden (wie oben im XHTML Code zu sehen).
Newsteaser Demo
Natürlich könnte man jetzt mit Hilfe von JavaScript eine News von Anfang an groß darstellen. Ich wollte mich aber hier auf XHTML und CSS beschränken.
Falls es zu Schwierigkeiten bei der Umsetzung kommt, kann man mich gerne über das Kontaktformular anschreiben. Ich helfe gerne.
Wer sich für die JavaScript Variante interessiert, findet im SELFHTML Forum einen interessanten Thread zum Thema.
Weitere Tutorial-Artikel
- AdBlocker erkennen und Fallback nutzen
- Wetter auf eigener Website mit Google Weather API
- HTML Formulare effektiv gestalten
- RSS Feed auslesen mit PHP
- CSS Tagcloud (Schlagwortwolke)
- PHP und MySQL Tagcloud (Schlagwortwolke)
- CSS Pagination (Seitennummerierung)
- CSS Navigation mit Liste
- CSS Bildwechsel
Sebastian Gollus
Ich bin seit 2007 selbständiger und freiberuflicher Web-Developer. Auch bin ich studierter Medienwissenschaftler mit Abschluss an der Uni Duisburg-Essen in „Angew. Kognitions- und Medienwissenschaften”. Neben Deutsch spreche ich auch Englisch und Niederländisch.
Kontakt zu mir gerne auch über Google+ und twitter.
Die neuesten Artikel
-
AdBlocker erkennen und Fallback nutzen Ein AdBlocker schmälert deine Werbeeinnahmen oder zerstört dein Website-Layout? Insbesondere der erste Punkt war in den...
-
3 SEO-Tipps + 32 Seiten PDF-Anleitung von Google – Website optimieren Für alle Webmaster hat Google einen SEO-Spickzettel erstellt. Mit diesen einfachen SEO-Tipps soll Google Website-Inhalte besser...
-
YouTube Video optimieren – Top 47 Rankingfaktoren für SEO Die Suchmaschinenoptimierung spielt beim Online Marketing eine wichtige Rolle. Aber nicht nur Websites lassen sich optimieren,...
work for IE 7?