Ik wil een schaduw om een box hebben zoals ik die in Photoshop heb gemaakt. Voorheen deed ik dit met tables waarbij de plaatjes in de cellen om de middelste cel heen stonden.
Een beetje een smerige methode, dus ik ben even aan het kijken hoe ik dit met behulp van CSS voor elkaar kan krijgen. Aangezien ik ronde hoeken wil, en links en rechts ook een schaduw, gebruik ik een hoop geneste layers, als volgt:
Niet erg leuk zoals je ziet. Van al die geneste layers krijg je hoofdpijn, vooral als ik meerdere van deze boxes wil zetten in de pagina...
Nou kon ik ook:
1) Met een vaste breedte de gehele box als achtergrond instellen, wat te veel beperkingen heeft voor wat ik wil doen, of
2) Sliding doors methode gebruiken zoals beschreven op ALA
De methode die ik nu gebruik werkt in IE 6 pc, maar in Mozilla en Opera op de pc zie ik alleen maar een border bovenaan en de witte achtergrond van de box... Nou snap ik alleen niet waarom Mozilla en Opera beiden mijn CSS achtergrondjes niet pakken...
Ik vroeg me af of er sowieso nog slimmere methoden zijn om dit te doen.
Zie de pagina met CSS hier...
Een beetje een smerige methode, dus ik ben even aan het kijken hoe ik dit met behulp van CSS voor elkaar kan krijgen. Aangezien ik ronde hoeken wil, en links en rechts ook een schaduw, gebruik ik een hoop geneste layers, als volgt:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <div class="box"> <div class="top-stretch"> <div class="btm-stretch"> <div class="mid-left"> <div class="mid-right"> <div class="top-left"> <div class="top-right"> <div class="btm-left"> <div class="btm-right"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum auctor, turpis ut sollicitudin consectetuer, libero tortor dignissim justo, sit amet volutpat sem erat eu nulla. Suspendisse iaculis bibendum magna. Nunc suscipit. Fusce porta orci ac est. Donec tincidunt ullamcorper dolor. Mauris bibendum, odio et feugiat adipiscing, magna est scelerisque nulla, sed posuere dolor metus id odio. Mauris mattis dui. Aliquam ac enim. Nam nec tortor vel diam placerat malesuada. Morbi orci. Donec risus. Nulla facilisi. Nunc et dolor.</p> <p>Nunc condimentum eleifend eros. Ut volutpat. Cras tempor, mi eget feugiat tincidunt, ipsum justo aliquam ante, sit amet vestibulum leo tellus eget orci. Phasellus auctor, nisl posuere molestie nonummy, dolor sapien mollis sapien, vitae tristique odio massa quis tellus. Aenean vel erat. Phasellus sem arcu, accumsan in, pharetra id, gravida ac, erat. Curabitur ultricies pede eu nibh. Phasellus in nunc. Suspendisse potenti. Vivamus vitae nibh. Nam lobortis vulputate diam. Duis eu nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus iaculis augue. Maecenas ligula enim, tempor in, lobortis et, rutrum in, justo. Aliquam bibendum nunc ut mauris. Vestibulum eleifend pretium dolor. Aliquam odio nibh, malesuada at, tincidunt eu, scelerisque vel, wisi. In feugiat congue diam. Aliquam erat volutpat.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> |
Niet erg leuk zoals je ziet. Van al die geneste layers krijg je hoofdpijn, vooral als ik meerdere van deze boxes wil zetten in de pagina...
Nou kon ik ook:
1) Met een vaste breedte de gehele box als achtergrond instellen, wat te veel beperkingen heeft voor wat ik wil doen, of
2) Sliding doors methode gebruiken zoals beschreven op ALA
De methode die ik nu gebruik werkt in IE 6 pc, maar in Mozilla en Opera op de pc zie ik alleen maar een border bovenaan en de witte achtergrond van de box... Nou snap ik alleen niet waarom Mozilla en Opera beiden mijn CSS achtergrondjes niet pakken...
Ik vroeg me af of er sowieso nog slimmere methoden zijn om dit te doen.
Zie de pagina met CSS hier...
[ Voor 7% gewijzigd door Verwijderd op 04-02-2004 12:34 ]
:strip_exif()/u/25820/raptorsafari.gif?f=community)
