ajouter des bords et padding autour d'une image
bonjour,
j'ai quelques soucis avec les padding, border... le grand classique, quoi.
je souhaite un slideshow flash ou une image 720x480 centrée sur l'écran (donc des margin auto) avec, autour, un border, un espace blanc, un border.
720x480 ne peut être rétréci donc tout doit s'ajouter autour sur une page de 960px de large.
flashcontent contient le flash 720x480 et a un border de 10px (pour bien voir les écrasements sinon 1px) donc je pensais que le flascontent devait faire 740x500. Pas du tout !!! le border est donc externe au div ?
Autour de flascontent je mets frame.
si border flascontent est externe, il intervient dans frame.
donc frame doit valoir :
720 du slideshow+2x10 de border du flashcontent+2x10 de padding pour faire le bord blanc du cadre et un padding c'est interne donc je le compte+2x1 du border pour trancher avec le body là j'hésite de le compter si le border est externe=762
donc un frame de 762x522. Pas du tout, il doit faire 740x500 ???
merci pour les conseils
Marc
Code:
1
2
3
4
5
6
| <div id="gallery">
<div id="frame">
<div id="flashcontent">
<img src="slideshowpro/album1/images/mon_image_720x480.jpg" /> </div>
</div> <!-- /frame -->
</div> <!-- gallery --> |
Code:
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
|
#flashcontent {
background-color: #00ffff !important;
border: 10px solid #000000 !important;
height: 480px !important;
padding: 0.00 !important;
width: 720px !important;
color: inherit;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#frame {
width: 740px !important;
height: 500px !important;
background-color: #ffffff !important;
overflow: hidden !important;
padding: 10px !important;
border: 1px solid #7b7b72 !important;
color: inherit;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
} |
