28172 sujets

CSS et mise en forme, CSS3

[Résolu]Alignements de div

Bonjour,

Voila, j'ai une question assez simple, mais je ne sais pas si c'est possible de le faire en css.

J'ai deux div, et la hauteur de celles-ci varient en fonction du texte.

Cependant, j'aimerai que les deux hauteurs soient égales ! ( même si une des div a plus de texte que l'autre )

Exemple : http://siteproto.free.fr/test/divalign/
Explications: les blocs rouges et bleus devraient être aligné en bas.

Comment faire ? Suis je obligé de faire cela en tableau ?
Modifié par RoD69 (09 May 2008 - 12:33)
Voila Smiley smile

Si tu comprend pas , redemande , mais je t'ai mis les commentaire 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Document sans nom</title>
  <style type="text/css">
  <!--
  .bloc {
    width :200px; /* Largeur */
	height:200px; /* hauteur */
    margin:20px; /* marge extérieur de 20px ( haut gauche bas droite ) */
	padding:20px; /* marge interieur pour mettre en forme le texte */
    float:left; /* bloc flottant à gauche */
  }
  
  #bleu {
  	background-color:#0099FF; /* couleur du fond */
  }
  
  #rouge {
  	background-color:#CC3300; /* couleur du fond */
  }
  -->
  </style>
</head>
  <body>
    <div>

    	<div id="rouge" class="bloc">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel ipsum? Morbi massa. Mauris non nibh?</p>
    	</div>
    	<div id="bleu" class="bloc">
        <p>Lorem ipsum dolor sit amet</p>
    	</div>
    </div>
  </body>

</html>
Bonjour,

emino, ta solution est mauvaise car elle fige la hauteur des blocs, ce qui peut poser problème si le contenu est plus haut que prévu, si l'utilisateur agrandit la taille du texte, etc. On peut utiliser une solution proche mais plus souple: la propriété CSS min-height. Concrètement, si on pense que les blocs ne dépasseront pas 200px de haut (ou alors que ponctuellement ou si l'utilisateur agrandit la taille du texte), on peut utiliser min-height: 200px pour les deux blocs.

Pour des solutions un peu plus efficaces mais aussi un peu plus lourdes, il y a:
- utiliser un tableau de deux cellules;
- utiliser deux blocs en display: table-cell (mais pas compatible IE 6-7);
- utiliser la technique des colonnes factices.

Bref, pas de solution idéale, et il faut piocher dans les suggestions ci-dessus en choisissant celle qui semble la plus adaptée à la situation.
merci pour vos réponses

Oui, je savais que fixer une height ne serait pas bon pour plusieurs raisons, je ne dois pas avoir de hauteur minimale, et si la longueur du texte dépasse la hauteur prévue au début, on se retrouve avec le même problème.

Pour le tableau, c'est ce que je fais habituellement, mais j'aurais bien aimé trouvé une solution css Smiley langue

Je vais faire un petit tour sur votre truc des colonnes factices pour comprendre ce que c'est.
Modifié par RoD69 (07 May 2008 - 12:51)
wow, dites moi si j'ai bien compris.

Les colonnes factices, ce n'est autre que de mettre en background pour faire croire que la colonne grandit, mais en réalité on garde un bloc petit ?
Ce qui s'avère d'ailleurs impossible dans mon cas d'utilisation, vu que il y a un ornement spécifique en fin de bloc.

Mouarf, je crois que je vais continuer a faire des tables Smiley lol

Merki qd meme Smiley cligne
RoD69 a écrit :
Les colonnes factices, ce n'est autre que de mettre en background pour faire croire que la colonne grandit, mais en réalité on garde un bloc petit ?

Oui. Ça s'appelle du trompe-l'oeil, et pour de la présentation c'est particulièrement adapté. Smiley lol

RoD69 a écrit :
Ce qui s'avère d'ailleurs impossible dans mon cas d'utilisation, vu que il y a un ornement spécifique en fin de bloc.

Ça n'empêche rien. Homme de peu de foi...
(Il est indispensable, pour faire des intégrations HTML/CSS correctes, de savoir manier le positionnement des images de fond. Donc si tu ne connais pas sur le bout des doigts toutes les propriétés CSS background-..., tu sais quelle lacune il te faut combler d'urgence.)
Modifié par Florent V. (07 May 2008 - 13:51)
Il n'est possible d'avoir qu'un seul background par block, je pense que tu es d'accord avec ca ? si je me trompe et que c'est possible, ca serait super pratique!

Et donc, dis moi comment je pourrais faire le code suivant, sans faire de tableau : ( sans bien sur empiler les block pour avoir un background dans chaque, car au final je ne trouve pas ca plus beau que faire avec des table )

HTML : 


        <table cellpadding="0" cellspacing="0" class="teaser">
          <tbody>
          
            <tr>
              <td class="topLeftCorner"><div>&nbsp;</div></td>
              <td style="width:100%">&nbsp;</td>
              <td class="topRightCorner"><div>&nbsp;</div></td>
            </tr>
            
            <tr>
              <td colspan="3" class="content">
                <h1>VBkavkavkav</h1>
                <img src="images/pic_teaser.gif" />             
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce lobortis, ligula in placerat fermentum, eros leo condimentum augue, eu consectetuer ante massa a tortor. Sed risus orci, consectetuer at, imperdiet non, ultrices sed, lorem. In hac habitasse platea dictumst. Nullam mattis. Cras eget enim.</p>
                <a href="#">> Additional link</a>
              </td>
            </tr>
            
            <tr>
              <td class="bottomLeftCorner">&nbsp;</td>
              <td>&nbsp;</td>
              <td class="bottomRightCorner">&nbsp;</td>   
            </tr>
            
          </tbody>
        </table>
RoD69 a écrit :
Il n'est possible d'avoir qu'un seul background par block, je pense que tu es d'accord avec ca ?

C'est tout à fait exact. Mais les background multiples ne sont pas l'unique solution que l'on a.
(De plus, il suffit d'avoir deux blocs imbriqués pour avoir deux background. Smiley cligne )

RoD69 a écrit :
sans bien sur empiler les block pour avoir un background dans chaque, car au final je ne trouve pas ca plus beau que faire avec des table

Mauvais postulat de base. Il ne s'agit pas d'avoir un «beau» code, mais d'avoir un code léger, aussi lisible que possible, facile à maintenir, et facile à modeler en CSS.
L'inconvénient des tableaux dans ce cadre c'est qu'ils sont 1) relativement lourds, 2) moyennement lisibles et 3) «figent» la mise en page (difficile d'afficher deux cellules de tableau qui se suivent l'une en dessous de l'autre suite à un changement graphique... même si certains navigateurs le font plutôt correctement).
L'inconvénient des blocs imbriqués, c'est que 1) c'est relativement lourd et 2) ça rend le code un peu moins lisible. Par contre ça ne fige pas la mise en page.
Avantage aux DIV imbriqués, à structure de lourdeur équivalente et robustesse équivalente, donc.

Ceci dit, utiliser un tableau est une bonne solution dans un certain nombre de cas.

RoD69 a écrit :
Et donc, dis moi comment je pourrais faire le code suivant, sans faire de tableau

Heu... non.

On ne transforme pas le code d'un tableau en une série de DIV et autres SPAN avec styles CSS associés. On part d'un design à intégrer, pas d'un code dont il faudrait fournir un équivalent. Smiley cligne

Donc si tu as une image du design à intégrer (ou de la partie qui nous concerne), je veux bien te donner quelques indications.
Modifié par Florent V. (07 May 2008 - 20:34)
Ok, donc en fait obligé de faire des div imbriqués alors, j'aime pas c'est mais soit.

Merci, sujet clos.
Sujet clos
Aller à