28221 sujets

CSS et mise en forme, CSS3

Partage d'un <div>

Salut !

Voilà, actuellement, j'affiche une vignette photo avec ses informations comme ça:


<div class="vignettes">
<a href="photo.jpg" target="_blank"><img src="photo.jpg" border="0"></a>
<br> 
<br> 
    <center>
       [ <a href=album.php?action=supprimer&id=6>SUPPRIMER</a> ] 
    </center> 
    <br> 
&nbsp;<b>Status:</b> <font color='red'>En attente</font><br> 
&nbsp;<b>Vu:</b> 0 fois<br> 
  </div>


avec le style suivant:


.vignettes {
  border: 1px dotted #000;
  margin: 10px;
  float: left;
  text-align: left;
  font-size:11px;
  height:220px;
}


Seulement la hauteur de la photo affichée peut varier. Comme plusieurs vignettes sont affichées l'un à coté de l'autre, ça crée un decalage pas joili.

je voudrais donc simplement séparer le <div> en deux pour y afficher d'une part la photo et en dessous (mais toujours dans le même div), dans la deuxième moitié les infos..

Mais je ne vois pas comment faire... deux <div> ??

Merci pour votre aide !
Administrateur
Salut, ce qu'il te faut est typiquement l'utilisation de la propriété clear

En passant, et si tu en as envie, il y a pas mal de choses à revoir au niveau du code en lui-même (notamment les &nbsp;, les répétitions inutiles des <br> et l'emploi de balises obsolètes comme <center>) Smiley cligne
hum.. je crains m'être mal expliqué...

je vais continuer mes investigations et je vous tiens au courant Smiley cligne
oggy a écrit :
hum.. je crains m'être mal expliqué...

Mal exprimé peut-être, mais pour ce qui est du code proposé, il y a quelques petites choses à revoir:
-pourquoi border="o"
-pourquoi <br><br>
-pourquoi <center></center>
-pourquoi ces deux espaces insécables
-pourquoi <font etc.>

Je noterai bien aussi l'absence de "alt" pour les images. Smiley cligne
Heu... En fait de choses à revoir, ce code ne comporte que deux erreurs en HTML transitional:
- l'absence d'attribut alt sur l'image
- l'absence de guillemets pour l'url comportant un ? et un & (en l'absence de ces caractères, l'absence de guillemets serait valide).

Le reste ne concerne que HTML strict, et encore (<br><br>)

Devant ce type de code, faut-il:
- promouvoir exclusivement (X)HTML strict sans autre forme d'explication ?
- ou plutôt, expliquer à son auteur qu'il doit faire un choix entre strict et transitionnel, et , dans ce cadre, des choix de "patique" en matière d'éléments de présentation et de syntaxe ?
Igor a écrit :

-pourquoi border="o"


>>> ben vu que c'est un lien , pour ne pas qu'il y ai de contour ...


a écrit :

-pourquoi <br><br>


>>> pour faire deux saut de lignes...

a écrit :

-pourquoi <center></center>


>>> pour centrer le texte...

a écrit :

-pourquoi <font etc.>


>>> pour appliquer une couleur à cette portion de texte...
Modifié le 03 Jan 2005 - 07:06
Administrateur
En fait, les questions de Igor étaient pleines de sous-entendu et supposaient que tu séparais le contenu de la forme comme cela est conseillé :

oggy a écrit :

>>> ben vu que c'est un lien , pour ne pas qu'il y ai de contour ...

Pour tout ce qui concerne la mise en forme (ici, les bordures), les CSS sont préférables

oggy a écrit :

-pourquoi <br><br>
>>> pour faire deux saut de lignes...

Les espaces (mise en forme) sont du domaine des CSS

oggy a écrit :

-pourquoi <center></center>
>>> pour centrer le texte...

Les alignements (mise en forme) sont du domaine des CSS

a écrit :

-pourquoi <font etc.>
>>> pour appliquer une couleur à cette portion de texte...

Les couleurs (mise en forme) sont du domaine des CSS

--> Bref : tout ceci laisse supposer que tu développes un document conforme aux recommandations actuelles.

Mais comme le souligne Laurent Denis, rien ne t'y oblige : tu peux très bien te contenter de faire du HTML Transitionnel (qui est aussi une norme).
Par contre, vu les objectifs annoncés de ce forum, nous te conseillerons continuellement d'utiliser le principe de la séparation entre le fond (HTML) et la forme (CSS) qui n'a que des avantages.

Pour en revenir à ta question de départ, la solution est :
- soit d'appliquer un clear à l'une de tes images pour qu'elle passe à la ligne
- soit d'ajouter une barre de séparation (<hr />) munie d'un clear.

Tiens-nous au courant Smiley cligne
Sujet clos
Aller à