28221 sujets

CSS et mise en forme, CSS3

Un truc super simple ... mais ..

Salut, je continue a faire mon site avec CSS et sans tableau,
j'ai reussi a faire pas mal de truc sympas en utilisant les class.

Par contre la je but sur un truc tout simple .. je veux faire un cadre autour d'une image de 100x100

voici mon CSS :
dl, dt, dd {
margin: 0;
padding: 0;
}

dl {
}

.dl_photo {
background: url(images/css_photo_bas.gif) bottom left no-repeat;
padding-bottom: 0px;
}

dt {
line-height: 0;
text-align: left;
}

.dt_photo {
height: 1px;
background: url(images/css_photo_haut.gif) top left no-repeat;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}

dd {
}

.dd_photo {
padding: 0 0px;
text-align: justify;
background: url(images/css_photo_milieu.gif) top left repeat-y;
}

et mon code :

echo "<dl class='dl_photo'>";
echo "<dt class='dt_photo'></dt>";
echo "<dd class='dd_photo'><img src='toto.jpg' border='0'></dd>";
echo "</dl>";


Je n'arrive pas a juste faire un cadre qui entour bien la photo, sois je n'ai rien (cas du code ci dessus) soit jai des grosses marges autour de la photo ...

Merci d'avance pour le coup de main.
en fait la je voulais juste faure un cadre, mais le but aprés de de faire quelquechose de + graphique autour des thumbs, donc je m'appui sur le tuto de creation des cadres avec bord arrondi en CSS.

ce n'est pas la bonne methode ?.
plc2k a écrit :

Je n'arrive pas a juste faire un cadre qui entour bien la photo, sois je n'ai rien (cas du code ci dessus) soit jai des grosses marges autour de la photo ...


J''ai eu un peu du mal à saisir, mais si je comprends bien, l'idée là serait d'avoir la dl qui met le bas du cadre, la dt le haut et la dd le milieu. C'est bien ca?

Si oui, ton code me semble plutôt correcte, du moins au niveau du CSS, mais:
- Avec un height de 1px et rien comme contenu, est-ce que t'as dt ne fait pas simplement un opx de haut? Pourquoi ne pas lui spécifier la hauteur exacte de l'image css_photo_haut.gif?
- de même, la liste dl aura comme hauteur dt + dd ni plus, ni moins là. pour moi il faudrait lui ajouter un padding-bottom de la hauteur de css_photo_bas.gif sinon c'est normal que tu ne vois pas cette partie du bord: elle est en quelquesoirte sous le fond de la dd.
- ta dd devrait afficher qqch en fond. Mais un padding de 0, forcement, elle va faire la taille de son contenu: 100px*100px qui va cacher son fond. Essaye peut-être, de nouveau, en ajoutant le padding corespondant à droite et à gcauhe.

Enfin, si tu es certains que tes images feront toutes 100*100 pixels: il y'a probablement une methode plus simple:

Si il s'agit d'une thumbnail de plusieurs images avec un cadre au bord arrondis qui fait un total de 120*120 pixles on pourrait imaginer qqch comme:

HTML
<ul class="photos">
  <li><img src="img01" alt="alt_text01" width="100px" height="100px"></img></li>
  <li><img src="img01" alt="alt_text01" width="100px" height="100px"></img></li>
  <li><img src="img01" alt="alt_text01" width="100px" height="100px"></img></li>
</ul>


CSS
UL.photos {
   margin: 0;
   padding 0;
}

UL.photos LI {
  margin: 5px;
  padding: 10px;
  background-image: url(fond_photos.gif);
  float: left; 
}


Avec l'image fond_photos etant l'image de 120*120px du cadre et de ses bords (un carré aux bords arrondis, pas exemple).

D'accord, ca fait une image un peu plus gorsse que les autres mais tu y gagnes probablement vu que: a) tu utilise une image au lieu de trois b) le centre de l'image (la partie de 100*100 qui sera cachée par l'image) peut être d'une seule couleur, ce qui signifie que le gros du gif est une zone unicolore convenablement compressée.

-edit-
Le float: left permet bien sur aux images de s'afficher l'une à coté de l'autre dans la mesure ou il y'a la plce en largeur pour.
-/edit-

Evidement, cette solution ne marche que si toutes tes images font bien 100*100.

Je serais tenté de spécifier la hauteur et la largeur de UL.photos LI mais vu que IE foire les élèments en taille absolue (vous savez, le fameux box-model) c'ets plus simple de gerer les navigateur géré ca je crois. Vu que le LI contient une image de 100*100, il evrait s'adpater et faire bien 100*100 plus le padding (10px de chaque cotés).
Modifié le 05 Nov 2004 - 17:22
oui tu as raison ! je pense que mettre une image 120*120 est une bonne idée pour ce que je veux faire, mon probleme viens je pense du fait que le cadre que je veux faire ne fat que 1 pixel de hauteur, jai essayer avec des nue bordure plus importante et cela marche.

Merci pour l'astuce, je vais tester ça.
Sujet clos
Aller à