Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Liens contextuels :

Forum Alsacréations : CSS et Standards Web · CSS et mise en forme · [Résolu]Alignements de div
Rechercher dans le sujet :
Auteur
RoD69
# 07 May 2008 - 12:00:34
Citer
12 Posts
 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)
^
emino
# 07 May 2008 - 12:13:29
Citer
12 Posts
 Voila 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>


http://www.dreamedia.fr msn 
^
mecho
# 07 May 2008 - 12:20:42
Citer
90 Posts
 Bonjour,

Tu peux regarder du côté des colonnes factices.
^
Florent V.
# 07 May 2008 - 12:37:47
Citer
On va manger des chips.
Modérateur
11423 Posts
 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.
Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
RoD69
# 07 May 2008 - 12:50:50
Citer
12 Posts
 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 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)
^
RoD69
# 07 May 2008 - 12:57:49
Citer
12 Posts
 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 lol

Merki qd meme cligne

^
Florent V.
# 07 May 2008 - 13:50:45
Citer
On va manger des chips.
Modérateur
11423 Posts
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é. 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)
Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
RoD69
# 07 May 2008 - 16:56:33
Citer
12 Posts
 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>


^
Florent V.
# 07 May 2008 - 20:32:35
Citer
On va manger des chips.
Modérateur
11423 Posts
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. 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. 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)
Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
RoD69
# 09 May 2008 - 12:33:24
Citer
12 Posts
 Ok, donc en fait obligé de faire des div imbriqués alors, j'aime pas c'est mais soit.

Merci, sujet clos.
^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.8 beta © dew
Contacter l'administrateur - 13.7 ms - Charte