 Absatz CSS-formatiert (Grafik als Eyecatcher)
Sie verwenden auf Iher Startseite die Technik, zu bestimmten Artikeln einleitende Informationen als kurzen Überblick anzuzeigen. Dazu wird informativer Text mit passenden Eyecatchern (Blickfang) in einzelnen Absätzen angezeigt.
|
|
CSS-formatierte Artikel mit Eyecatcher als Überblick der Themen
Passende Grafiken mit den Abmessungen 170 x 128 Pixel stelle ich Ihnen in meiner MINI-IMAGE-BOX zur Verfügung. Wählen Sie dort den Menüpunkt 'Clips - Fotos'.
 zu meiner Webseite MINI-IMAGE-BOX - 7000 kostenlose Minigrafiken für Webmaster 
Schulferien
Darf man in den Schulferien in einer 30er-Zone schneller als 30 km pro Stunde fahren? Nein! Da es eine offizielle Zusatztafel "nur an Schultagen" nicht gibt, hat unser Bauhof natürlich entsprechende Mehrarbeit die Verkehrszeichen abzudecken. Das handhabt nicht jede Stadt so. Daher ein Danke an den Außendienst und die Steuerung der Arbeiten in der Ratsstube. weiterlesen ...
Die Vorbereitungen laufen
Saisoneröffnung der Selfkantbahn am Ostersonntag 12.04. und Ostermontag 13.04.2009. Mehrere Loks gleichzeitig in Betrieb, Sonderfahrplan, Vorstellung fertig restaurierter Museumsfahrzeuge, Modellbahnanlagen.
Am vergangenen Wochenende konnte ich mich selbst überzeugen. Der Kessel dampft! weiterlesen ...
Die Breite ist hier nicht festgelegt und wird als Absatz (p) über die gesamte Breite angezeigt. Sie Können die Breite auch festlegen [z.B. mit width: 600px;] .
Alle Elemente der einzelnen Artikel (Grafik, Text, Link) stehen jedesmal innerhalb eines Absatzes <p>. Dem Absatz wurde eine CSS-Klasse zugeordnet, für die entsprechende Formatierungen festgelegt sind.
- Absatz: Innenabstand (Padding), Rand unten, Hintergrundfarbe, Textformatierung
- Grafik: links ausgerichtet, Rand 6 Pixel weiß, Abstand nach rechts 15 Pixel
- Fettschrift: Type, Farbe, Textgröße
- Verweise: Farbe, Textgröße, kein Unterstrich
<p class="info">
<img src="grafik.jpg" width="150" height="113" border="0" alt="Bahn">
<b>Die Vorbereitungen laufen</b><br>
Saisoneröffnung der Selfkantbahn am Ostersonntag 12.04. und Ostermontag ...
<a href="selfkantbahn.htm">weiterlesen ...</a>
</p>
Die CSS-Anweisungen
Notieren Sie entweder im HEAD-Bereich ihrer Datei oder in der externen CSS-Datei diese Anweisungen:
<style type="text/css">
<!--
/* allgemeine Angaben für den Absatz*/
p.info{
height:160px;
/* width: 600px; */
padding:8px 8px 8px 8px;
border-bottom: 1px solid #A1B9C5;
line-height:130%;
font-family:Verdana,Arial,sans-serif;
color:#4F4F4F;
font-size:11px;
background-color:#F6F6FF;
}
/* Grafik im Absatz*/
p.info img{
float: left;
padding: 1px;
display:inline;
margin: 0px 15px 5px 0px;
background: #FFFFFF;
border: 6px solid #A1B9C5;
}
/* Fettschrift im Absatz*/
p.info b{
margin-bottom: 7px;
color:#4970A9;
font-size:11px;
}
/* Links im Absatz*/
p.info a{
line-height:130%;
font-family:Verdana,Arial,sans-serif;
color:#4970A9;
font-size:11px;
text-transform:none;
}
p.info a:visited{
line-height:130%;
font-family:Verdana,Arial,sans-serif;
color:#4970A9;
font-size:11px;
text-transform:none;
}
p.info a:hover{
line-height:130%;
font-family:Verdana,Arial,sans-serif;
color:#FF0000;
font-size:11px;
text-transform:none;
}
-->
</style>
Passende Grafiken mit den Abmessungen 170 x 128 Pixel stelle ich ihnen in meiner MINI-IMAGE-BOX zur Verfügung. Wählen Sie dort den Menüpunkt 'Clips - Fotos'.
zu meiner Webseite MINI-IMAGE-BOX - 7000 kostenlose Minigrafiken für Webmaster
|
Home • CSS • Absatz mit Eyecatcher