Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 2 - Anpassungen IE 8 Teil 2

1. Die Abschnitte

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 {
  border2px solid #e6e6e6; 
  positionrelative;
  margin0;
  padding8px;
  width190px;
}

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 {
  border2px solid #dcdcdc;  
  content'';  
  width202px;  
  height96%;  
  positionabsolute;  
  left0; 
  top0; 
}

aside:after {
  border2px solid #d2d2d2;  
  content'';  
  width198px;  
  height93%;  
  positionabsolute;  
  left2px; 
  top2px;  
}

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 {
  border2px solid #c8c8c8; 
  margin: -4px -4px -5px -4px;
  padding5px;
  width184px; 
}

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;
  padding4px 5px 5px 5px;
  border-top1px solid #c8c8c8;
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt