Comment mettre 2 div cote a cote de dimension identique non définis

Bonjour,

En lisant l'Exellent livre CSS2 j'ai réussi à mettre mes infos de la page http://aquasafaribora.com/francais/indexfr.php?page=presentation
mais (il y a toujours un mais ) l'image et le texte n'ont pas la meme hauteur.
Est il possible de définir la div contenant l'image de la même hauteur que la div du texte (j'ai essayé height: auto et 100% mais ..) je croyais qu'un div de hauteur 100% prenait 100% de la hauteur de la div la contenant ...
Pour le moment j'utilise un tableau....

en mise en page css j'ai essayé float left et float right pour les dive image et texte..
Si quelqu'un ou quelqu'une a la solution.

le site est basé sur l'exemple 11 des mises en page css du site
Modifié par onibaba (15 Sep 2006 - 09:46)

Bonjour,

Je n'ai pas bien compris, pouquoi tu veux que tes 2 div aient la même hauteur?
Si c'est pour éviter que tes div s'imbriquent, il faut utiliser la propriété float et entre chaque paire image-texte utiliser un clear du style :

        <img src="images.jpg" style="float: left" alt="" title="" /> 
 <p>Texte.</p>

 <hr style="clear: left""></hr>

Le style bien sûr à placer dans un css externe...

Par contre tu devrais éliminer le double scroll vertical sur ton site, c'est un peu dérangeant.

Bon courage.

<edit> Par contre je veux bien te monter ton site tout entier, tout neuf contre l'hebergement, mais ça sera sur place car il faut que je "m'imprégne" du sujet et ça me prendre au moins 6 mois !!! , je ne sais pas pourquoi mais je ne pense pas que je sois le seul à te le proposer </edit>
Modifié par ghost (15 Sep 2006 - 12:25)

Bonjour Ghost

Je souhaitais mes div de la meme taille pour avoir l'image alignée verticalement (j'ai triché en ajoutant des p et espace pour centrer l'image )

Quand au double scroll je n'arrive pas à régler le probléme, en 1280X1024 je ne l'ai pas et quand je passe en 1024x768 soit je n'ai pas le scoll et j'ai mon mini menu (accessibilité, plan du site ) qui se met sur le pied de page.........
J'aimerai bien avoir seulement la partie principale qui scroll et l'entete et pied de page toujours au meme endroit quelque soit la résolution.. pour le moment je ne trouve pas de solution...

Re,

Le problème du centrage vertical d'un texte de plusieurs lignes sur une image n'est pas simple !! Ou on utilise un tableau, ou on procéde au coup par coup avec un float et des margin-top sur le texte et le style dans le code html du type

 <p style="margin-top: xxpx">texte</p>

. j'ai vu aussi un script php faisant ça mais c'est une vrai usine à gaz et ça ne marche pas tout le temps.
Pour ton scroll, il y a des solutions, je vais regarder mes archives ...

Si je peux me permettre, le résultat étant le même, à ta place j'éliminerais le scroll sur ton bloc principal ce qui du point de vue ergonomie de navigation ne change rien mais t'évirerait au moins des problèmes inutiles.
Modifié par ghost (15 Sep 2006 - 13:51)

En l'occurence ici, il y a plus simple : cette image n'apporte a priori rien au contenu, elle peut donc être retirée du HTML et appliquée en arrière-plan. Le code suivant (HTML d'abord et CSS ensuite)

<div class="blockgauche"><p> </p><img src="../IMAGES/ab1.jpg" alt=""></div>
<div class="blockdroite">		
	       <p class="bloctexte">Aqua safari est ouvert toute l'année du lundi au samedi (le dimanche sur réservation uniquement).		  </p>
	       <p class="bloctexte">Aqua Safari  vient vous chercher gratuitement quelque soit votre lieu d'hébergement en bateau où en  voiture.
		   (Cf : <a href="indexfr.php?page=ile" title="Vers la page carte de l'ile" tabindex="32" class="textecentre">Situation du centre</a>). </p>
	       <p class="bloctexte">Anne & Michel Condesse plongent depuis plus 
		   de 30 ans et dirigent le centre depuis 1995.</p>
	       <p class="bloctexte">Avec leur équipe ils se feront un 
		   plaisir de vous faire partager leur passion du monde sous-marin	</p>

</div>

.blockgauche{float:left; width:330px;   }
.blockdroite{float: left; width:330px; }

peut être transformé en :

<div class="presentation">		
	       <p class="bloctexte">Aqua safari est ouvert toute l'année du lundi au samedi (le dimanche sur réservation uniquement).		  </p>
	       <p class="bloctexte">Aqua Safari  vient vous chercher gratuitement quelque soit votre lieu d'hébergement en bateau où en  voiture.
		   (Cf : <a href="indexfr.php?page=ile" title="Vers la page carte de l'ile" tabindex="32" class="textecentre">Situation du centre</a>). </p>
	       <p class="bloctexte">Anne & Michel Condesse plongent depuis plus 
		   de 30 ans et dirigent le centre depuis 1995.</p>
	       <p class="bloctexte">Avec leur équipe ils se feront un 
		   plaisir de vous faire partager leur passion du monde sous-marin	</p>

</div>

.presentation {background:url(IMAGES/ab1.jpg) no-repeat 0 50%;}
.presentation p {margin-left:330px;}

Ainsi, on a du HTML plus clair et concis, et l'image sera bien centrée verticalement (si c'est bien cela que tu souhaites !)...
Modifié par golog (15 Sep 2006 - 13:47)

@golog

Je ne vois pas où est le centrage vertical systématique du texte sur l'image dans ton code ...
Et il me semble que les images "sont" du contenu et au niveau accessibilité et reférencement Oups !

Par contre en ce qui me concerne, les textes étant souvent plus longs que les photos, je n'utiliserais pas de centrage mais une mise en page plus compacte avec le texte englobant les images sans clear ... Mais ce ne sont que mes goûts ...

ghost,

L'image en question n'apporte ici pas grand chose au contenu : c'est une image plutôt décorative. Sinon, d'après ce que j'ai compris, onibaba veut que son image soit centrée verticalement par rapport à son contenu texte, ce qui est fait en mettant l'image en background et son centre à 50% du haut du div (qui contient tout le texte).

Excuse, j'ai zappé un bout de ton code !!
Oui c'est une solution à condition d'avoir des images de tailles identiques sinon gare au minimum à des pseudo marges aléatoires ou au pire à des images tronquées ou passant sous le texte...
Modifié par ghost (15 Sep 2006 - 14:32)

Effectivement, pour plus de simplicité il vaut mieux avoir des images de la même largeur, et éviter qu'elles aient une grande hauteur...

Bonjour à tout les deux et aux autres aussi et merci de m'aider

j'avais bien pensé à mettre mes images en background mais le fait d'avoir trois images dans la page obligerais à définir un style pour chaque blocs non ????
De plus comme mon texte n'à pas la même taille que l'image (elle ont toutes la même taille), l'image en background est coupé en fonction de la hauteur du texte (pas de minheight)

a écrit :
Par contre en ce qui me concerne, les textes étant souvent plus longs que les photos, je n'utiliserais pas de centrage mais une mise en page plus compacte avec le texte englobant les images sans clear ... Mais ce ne sont que mes goûts ...

La personne responsable de cette activité désire que les pages soient aérées avec juste les infos dans une sorte de frame avec scroll (sont ancien site etait mis en page avec des frames et ne veut pas changer de style...)

Tu peux définir un style de base avec une classe (notamment pour le style des paragraphes internes, ce qui t'éviterait de répéter la classe "bloctexte" sur chacun d'ailleurs), et un ID spécifique pour chaque partie. Tu aurais par exemple dans ton HTML :

<div id="organisation" class="presentation">
<p>...</p>
<p>...</p>
etc
</div>

<div id="situation" class="presentation">
<p>...</p>
<p>...</p>
etc
</div>

<div id="equipement" class="presentation">
<p>...</p>
<p>...</p>
etc
</div>

et dans ta CSS :

.presentation p {margin... text-indent... etc.}
#organisation {padding-left:330px; background:url(organisation.jpg) no-repeat 0 50%;}
#situation {padding-right:330px; background:url(situation.jpg) no-repeat 100% 50%;}
#equipement {padding-left:330px; background:url(equipement.jpg) no-repeat 0 50%;}

Mais effectivement, si ton texte est plus court que ton image, celle-ci sera coupée, mais tous tes textes sont ici plus longs, donc a priori pas de problème. Si toutefois tu veux être sûr de ton coup, tu peux effectivement ajouter un min-height pour tous les navigateurs qui le comprennent (Firefox, Opera, Safari, IE7) et un height pour IE5 et 6 (qui est interprêté comme un min-height) avec un filtre comme * html.

Pour en revenir au problème initial, il n'y a pas actuellement de solution simple pour faire 2 colonnes avec contenus centrés verticalement. Il est bien possible de faire quelque chose avec un "display:table-cell;" couplé à un "vertical-align:middle;" mais les navigateurs ne sont pas tous au point là-dessus !
Modifié par golog (15 Sep 2006 - 20:35)

Merci encore

C'est vraiment ce qui est domage tout est possible mais chaque navigateur voulant être 'LE NAVIGATEUR'.....

Et la formation n'est pas facile... à titre d'exemple , j'ai un formulaire qui était dans un tableau, je prend mon livre pour le refaire correctement avec que du css pour arriver à la fin ou l'exemple remet tout dans un tableau (plus simple d'accord mais bon)

Je garde toutes tes infos et vais m'y atteler pour bien comprendre tout cela.

Si à tout hazard tu as une solution pour mon probléme de double barre de scroll sans changer la présentation du site ...

Bonjour,

Pour le scroll et garder ton type de présentation, il te reste à réduire la taille de ta hauteur de page de manière à ne plus avoir de scroll sur le html ...