Centrer verticalement un DIV image par rapport à un DIV texte

Après lecture de la FAQ, j'ai pondu un code (pas terrible) qui après moultes réglages me fait dire qu'on doit pouvoir faire plus simple.

Voilà ce que j'aimerais faire en gros :

http://photoxbc2.free.fr/pbe/cadre1.jpg

En clair, j'aimerais faire un paragraphe de texte et mettre, à coté de manière verticalement centrée, une miniature.

Pour cela, j'ai le code suivant :

<div class="tot">

		<div class="zact">
			<p><h3>&nbsp;&nbsp;&nbsp;Sortie à la matinée</h3>Ceci est un essai pour vérifier le placement de la vignette.</p>
		</div>

		<div class="zactd">
			<div class="vig"><div class="mini" ID="mini1"><a href="Copie de Schav_mar_001.jpg" target=new_window></a></div></div>
		</div>

	</div>

+

/* Miniatures de la page activité */

  .mini {
  	}
  	
  #mini1 a {
	background: url("Schav_mar_001.jpg");
	width : 160px;
	height: 120px;
	display: block;
	}
	
  #mini1 a:hover {
	background: url("clic.png");
	width: 160px;
	height: 120px;
	display: block;
	}
	
  .vig {
    float: right;
    margin-top: 240px;
    _margin-top: 170px;
    margin-right: 10px;
    _margin-right: 7px;
    border: 1px dashed black;
    }
    
  .zact {
    width: 759px;
    _width: 743px;
    margin-left: 5px;
    height: 600px;
    text-align: justify;
    border: 0px solid black;
    _height: 460px;
    }
    
  .zactd {
    width: 181px;
    _width: 191px;
    float: right;
    border: 0px solid red;
    min-height : 600px;
	height: auto;
	_height: 460px;
    }
    
  .tot {
    margin-left: 5px;
    margin-right: 0;
	min-height : 500px;
	height: auto;
	border: 0px solid green;
	_height: 400px;
	}

Au final, cela fonctionne sous FF/IE (merci les _) mais c'est peu ergonomique : je dois donner la hauteur en pixel de mes divs mais cette hauteur devrait pouvoir varier automatiquement en fonction du contenu (texte) qui va y figurer).

Pour voir mon mauvais code en action, c'est par là : http://photoxbc2.free.fr/xbc/act.htm

En plus, je viens de voir que cela ne donne pas la même chose une fois que c'est en ligne

Si vous pouvez m'éclairer sur comment faire "plus correctement", je serais très content Merci d'avance.
Modifié par Ludo67 (09 Aug 2006 - 23:31)

Hello,

J'ai un soucis de compréhension par rapport à ta formulation : qu'appelles-tu un "div image" ?
Jusqu'à nouvel ordre, une image est balisée par <img> et non <div>.

Tu parles peut-être d'un bloc (div) avec une image en arrière-plan ?
Modifié par Raphael (10 Aug 2006 - 09:16)

Hello

Je parlais bien d'un bloc DIV contenant (entre autre) une balise <IMG> et un lien : c'est une miniature réactive (quand on passe dessus son aspect change, en fait c'est carément l'image qui change).

Schématiquement :

<DIV Texte> de x lignes de hauteur (la hauteur pouvant varier d'un paragraphe à l'autre) avec en face (à gauche ou à droite mais en face) de manière verticalement centrée cette miniature réactive contenu dans un DIV dans mon code actuel.

Actuellement, j'ai cela :
http://photoxbc2.free.fr/pbe/cadre2.jpg

Mais les cadres imbriqués ne s'adaptent pas. Puis cela me semble compliqué et comme je suis un éternel débutant, je me dis que j'ai peut-être bricolé un truc pas correct du tout.

Ce que je souhaite faire avoir au final, c'est la possibilité sur la même page de mettre plusieurs fois un texte et une image en face (verticalement centrée).

Le cadre vert à droite, qui contient l'image réactive, c'est ce code :

<div class="zactd">

  <div class="vig"><div class="mini" ID="mini1">
<a href="Copie de Schav_mar_001.jpg" target=new_window></a>
</div></div>

</div>

L'élément min1 a bien une image en background et ce background change quand on survole la zone avec la souris. Maintenant, si pour faire plus propre faut virer carément cette affaire d'image réactive et ne mettre qu'une simple vignette, je suis partant aussi...

Merci pour ton attention
Modifié par Ludo67 (10 Aug 2006 - 11:17)

bonjour

je crois avoir justement un problème similaire, et malgré la lecture de la faq et d'une partie des post sur le sujet, je ne progresse pas beaucoup :|

voici l'url de la page :
http://www.gle-ssii.fr/rea-reseaux-vdi.php

j'aimerai trouver une solution pour que le texte soit centré verticalement par apport a l'image située a sa gauche...

conercant l'organisation : l'image est encapsulée dans un lien, le texte est sous la forme d'une table de 2 colonnes (désolé

je suis justement en train d'essayer les différentes méthodes proposées sur le net... cette organisation change pour la première image (ou plutot : la seconde, aprés la bannière "en construction")
Modifié par Oo stephan oO (10 Aug 2006 - 11:53)

Ce qu'on cherche à faire me semble en effet similaire. Le code que j'utilise fonctionne sans franchement être pratique à l'usage en raison de taille fixe en pixel.

Par ailleurs, j'ai du faire une feuille de style différente en fonction du naviguateur (IE/FF). Ainsi, j'arrive à disposer à peu près correctement mes éléments.

Mais je ne pense pas que ce soit exactement cela la bonne méthode d'où mon sujet.

Je viens de faire un essai avec un tableau : http://photoxbc2.free.fr/pbe/tab.htm

	<style type="text/css">
	.txtimg {
	width: 100%;
	margin-bottom: 2em;
	border: 1 solid black;
	}
	
	.celtxt {
	text-align: justify;
	}
	
	.celimg {
	vertical-align: middle;
	align: center;
	}	
	</style>
	
</head>

<body>

<h1>La poule</h1>
<table>
<tr><td>


<table class="txtimg">
    <tr>
      <td class="celimg"><img src="Schav_mar_001.jpg"></td>
      <td class="celtxt">Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment !Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment !Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment !</td>
    </tr>
</table>

<table class="txtimg">
    <tr>
      <td class="celimg"><img src="Schav_mar_001.jpg"></td>
      <td class="celtxt">Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment !Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment !Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment ! Ceci est un essai pour vérifier le placement de la vignette qui a été longue à mettre en place et qui va probablement me faire chier pendant un bon long moment !</td>
    </tr>
</table>

Le résultat me semble visuellement assez bon mais est-ce 'correct' ?

J'aurais bientôt fait le tour de toutes les conneries qu'on peut faire pour arriver à centrer mon barda

Pour voir les techniques mises en oeuvres : http://photoxbc2.free.fr/xbc/act.htm

La dernière en date est la suivante :

.grise {
width:200px;
float:left;
padding:10px;
height:410px;
vertical-align: middle;
display: table-cell;
border: 1px solid yellow;
}

.blue {
widht:750px;
margin-left:0;
padding:10px;
height:410px;
font-family: comic sans ms;
font-size: 12pt;
letter-spacing: 1pt;
color: red;
text-align: justify;
border: 1px solid red;
}

.contenu {
width:160px;
height: 120px;
border: 0px solid green;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

<div class="grise">
<div class="contenu"><a href="#" onmouseover="bouton1.src = 'clic.png';" onmouseout="bouton1.src = 'Schav_mar_001.jpg';"><img src="Schav_mar_001.jpg" border=0 width="160" height="120" name=bouton1></a></div>
</div>

<div class="blue">
Ceci est un essai pour vérifier le...
</div>

Mais bien entendu, pas moyen de centrer cette image dans le DIV 'grise'. Bref, on est plus très loin de ce que j'avais fait au début... sauf que là, cela fonctionne pas

Alors, finalement, que faire ? CSS ? Comment ? Tableau ? C'est autorisé dans ce cas ?

Bonsoir,

Si cet effet de centrage est si important et qu'il doit figurer sur tous les navigateurs, y compris Internet Explorer, dans ce cas utilise un tableau à deux cellules.

Sinon c'est possible, hors Internet Explorer, en utilsant display:table-cell + vertical-align:middle et d'obtenir un résultat correct dans IE, mais sans ce centrage (à moins éventuellement d'utiliser « display:inline » en quirks mode, mais bon...)

Merci pour le message

Le centrage vertical est assez important. Autrement, l'horizontal c'est moins important : je peux m'en passer en alignant cela à l'opposé du texte. Par contre, oui, j'aimerais bien que cela fonctionne sous IE en raisons du public visé et des personnes qui vont devoir apprécier le site si je le termine un jour.

Par contre, je prévois de faire deux feuilles de style : une pour IE et une pour les naviguateurs type FF. Bon ca change pas le problème, c'est vrai.

Mais est ce que le résultat obtenu par ma première méthode pourrait convenir ?
Il a l'avantage d'être sans tableau, de fonctionner avec deux feuilles de styles en fonction du naviguateur et on peut y voir l'image aligné sur le texte. Par contre, le postionnement va merder si on a une résolution < à 1024x768.

Le code HTML utilisé :

	
<div class="tot">

  <div class="zact">
    <p><h3>&nbsp;&nbsp;&nbsp;Sortie à la matinée</h3>Ceci est un essai
pour vérifier le placement de la vignette...</p>
  </div>

  <div class="zactd">
    <div class="vig"><a href="#" onmouseover="bouton.src = 'clic.png';
" onmouseout="bouton.src = 'Schav_mar_001.jpg';">
<img src="Schav_mar_001.jpg" border=0 width="160" height="120"
name=bouton></a>
    </div>
  </div>

</div>

+ CSS suivant :

.vig {
    float: right;
    margin-top: 177px;
    margin-right: 10px;
    border: 1px dashed black;
    }
    
.zact {
    width: 759px;
    margin-left: 5px;
    height: 465px;
    text-align: justify;
    border: 0px solid black;
    }
    
.zactd {
    background: red;
    width: 181px;
    float: right;
    border: 0px solid red;
    height: 475px;
    }
    
 .tot {
    margin-left: 5px;
    margin-right: 0;
    min-height : 465px;
    height: auto;
    border: 0px solid green;
    }

Cela m'a d'abord semblé très compliqué pour un petit rien mais après avoir testé les autres méthodes, c'est encore ce qui semble le plus efficace avec l'inconvénient d'être rigide (mais le reste n'est pas nettement plus fluide).
Modifié par Ludo67 (10 Aug 2006 - 19:04)

Salut.

Tu triches, dans cet exemple, tu as fixé la hauteur du conteneur. Si les hauteurs sont fixes, alors oui, on peut centrer l'image verticalement !

Il suffit de positionner l'image en "float: right;" et de lui donner une marge en haut de (495/2 - 120/2 ~) 187px

Mais évidemment, si le texte est trop long, il va déborder du cadre prévu, et s'il est trop court il y aura un espace vide.

PS : le code html que tu as fourni n'est certainement pas valide

Warum ? Porque ? C'est trop injuste

Oui, je triches c'est bien ce que je dis depuis le début du sujet et c'est bien pour cela que je cherchais une alternative. Il faudra que je fixe la taille des cadres contenant le texte et l'image en fonction du texte avant de pouvoir aligner quoi que ce soit.

Mais comme il n'y a rien à faire pour que ces boites déterminent leurs hauteurs automatiquement en fonction du texte fourni (sous FF ET IE) alors que puis-je faire d'autre ?

Puis avec ce code, je vais devoir faire une class par paragraphe dans ma feuille de style (ID plutot même) puisqu'il est fort probable que la hauteur de chaque paragraphe sera différente (unique).

EDIT : J'ai passé le code au validateur, j'ai pigé les erreurs, je vais modifier cela.
Modifié par Ludo67 (10 Aug 2006 - 19:28)

Ludo67 a écrit :
Mais est ce que le résultat obtenu par ma première méthode pourrait convenir ?

Non. En l'état il suffit par exemple que je change la taille du texte et ça ne va plus . Utilise plutôt un simple tableau.
Modifié par Alan (10 Aug 2006 - 19:28)

Merci : je vais me lancer dans les tableaux finalement. C'est un site qui ne devrait pas subir de mise à jour avant longtemps donc tant pis si je perds un peu en ergonomie.

Merci pour le conseil et le soutient.

Voilà le résultat provisoire : http://photoxbc2.free.fr/xbc/act.htm
Modifié par Ludo67 (10 Aug 2006 - 22:59)