HTML5 / CSS3 - Praxistutorial 2 - Anpassungen IE 8 Teil 2
1. Die Abschnitte
- Überblick
- Das Problem und die Lösung
- Zwischenfazit
- Anpassungen IE 8 und 9
- Anpassungen IE 8 Teil 1
- Anpassungen IE 8 Teil 2
- Das Ausklappmenü Teil 1
- Das Ausklappmenü Teil 2
2. Und jetzt die beiden <:aside>
Oder genauer gesagt, die Mehrfachschatten. Da der IE 8 bekanntlich kein box-shadow
beherrscht, muss das auch wieder "nachgebaut" werden.
Leider stehen uns dafür zu wenige HTML-Elemente zur Verfügung, denn eigentlich benötigen wir zwei mehr. Da ich euch aber nur das Prinzip zeigen möchte,
reduzieren wir die Optik ein wenig.
Außerdem
... war die ganze Rechnerei mal wieder übel. Und da das nach einem harten Arbeitstag bei mir nicht mehr so richtig wuppt, habe ich einfach geschätzt. Mit dem Ergebnis, dass jetzt bei beiden Elementen 2 Pixel fehlen. Egal, Hauptsache es passt halbwegs.
3. Der erste Schritt
Zuerst kümmern wir uns um den ersten von insgesamt vier Rahmen, und zwar um den äußersten. Gut, es sollten sechs sein, aber lassen wir es.
aside {
border: 2px solid #e6e6e6;
position: relative;
margin: 0;
padding: 8px;
width: 190px;
}
Erläuterung
Das position: relative;
benötigen wir gleich für den eigentlichen Trick des Ganzen. Geduldet euch also ein wenig. Mit der margin
-
und padding
-Anweisung überschreiben wir die bisherigen Eigenschaften. Auch das werdet ihr erst später begreifen. Und das mit der
border
ist ja wohl klar.
4. Und jetzt der eigentliche Trick
Dazu arbeiten wir mit den beiden Pseudoelementen :before
und :after
.
aside:before {
border: 2px solid #dcdcdc;
content: '';
width: 202px;
height: 96%;
position: absolute;
left: 0;
top: 0;
}
aside:after {
border: 2px solid #d2d2d2;
content: '';
width: 198px;
height: 93%;
position: absolute;
left: 2px;
top: 2px;
}
Erläuterung
Die Sache mit dem position
solltet ihr ja schon kennen. Das ist dasselbe Prinzip wie bei der Navigation. Der Rest ist reine Rechnerei. DIe Breite
von <aside>
beträgt 206 Pixel (190 + padding
). Also werden 4 Pixel bei :before
und 8 bei :after
abgezogen.
Bei der Höhe muss man dann einfach so lange herumspielen, bis es passt. Allerdings irritieren die die beiden Angaben für left
und top
ein wenig.
Denkt aber mal nach. Das eigentliche <aside>
hat ja auch noch einen Rahmen von 2 Pixeln Dicke. Na, dämmert es?
5. Und der Rest
Da wir bis jetzt erst drei Rahmen haben, missbrauchen wir das <p>
für einen weiteren. Das mit den negativen Margins kennt ihr ja auch schon.
aside p {
border: 2px solid #c8c8c8;
margin: -4px -4px -5px -4px;
padding: 5px;
width: 184px;
}
Zu guter Letzt
... wird die Überschrift noch auf Linie gebracht und das rechte <p>
mittels Klassenzuweisung angepasst (die index.htm
nicht vergessen).
Et voilà, fertisch.
aside h3 {
margin: -10px -10px 0 -10px;
}
aside p.right {
color: #0ff;
background: #00f;
padding: 4px 5px 5px 5px;
border-top: 1px solid #c8c8c8;
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt