18100 sujets

Questions générales et questions de débutants

[clos] Aligner plusieurs éléments dans un div

Bonjour,

J'ai dans ma page web 2 images juxtaposées suivi d'un texte, comprenant, un titre, un sous-titre, un paragraphe.
Je voudrais aligner les 2 images avec l'ensemble du texte ? Comment faire ?

[i]HTML[/b]

<div id="contenu">
<div class="voyage">
			<img src="img/voyage.jpg" width="132" height="101" />
			<img src="img/points_real.gif" class="pointille"/>
			<h2>Guide Voyage</h2>
			<h3>Int&eacute;gration et D&eacute;veloppement</h3>
			<p>D&eacute;coupage des images et Int&eacute;gration HTML, Analyse de la base de donn&eacute;e initiale, d&eacute;veloppement PHP/MySql et Javascript.</p>
			
		</div>
</div>


[i]CSS[/b]

#contenu h2 {
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #0E58BE;
	text-align:left;
	margin: 0 0 0 20px;
}
#contenu h3 {
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color:#000000;
	margin: 0 0 0 0;
}
#contenu img {
	clear: right;
	float: left;
	margin-left: 20px;
}
#contenu p {
	font-size: 12px;
	font-weight: bold;
	color:#666666;
	margin: 0;
}
.pointille {
	padding-top: 31px;
	margin-right: 20px;		
}
.belair {
	width: 620px;
	margin: 0 0 20px 0;					
}
#contenu ul {
	list-style-type: none;
	margin: 0 0 0 22px;
	padding: 0;	
}


J'ai essayé plusieurs trucs, pour finalement essayer de décaler un peut le titre <h2>, mais pas moyen d'appliquer une marge au seul élément <h2> à chaque fois la marge est prise par l'ensemble du <div> voyage. Si je mets le titre <h2> en dessous du paragraphe <p>, il n'y a pas de pb ? A quoi est-ce du.

Merci pour la réponse au pb 1 si vous l'avez, pour la dernière partie du post, j'aimerais bien comprendre...
Modifié par EricLB (02 Nov 2005 - 21:08)
Salut
Bon si j'ai bien compris ce que tu recherches, tu souhaites aligner 2 images+ 1 texte.

Tes 2 images sont sur la même ligne ou bien l'une en dessous de l'autre ?

Si tel est le cas, il faut simplement placer un display: bloc au 2 images, mettre ton texte dans une balise type bloc paragraphe <p></p>
Ce qui faut faire attention c'est la hauteur de ton texte par rapport à la hauteur de tes 2 images.
tu attribues un float: right à ton text sur les 2 images et normalement tu devrais voir tous tes blocs aligner ...

dis moi si l'idée est là ou pas du tout Smiley bawling
j'aligne 2 images (ou plus) suivies d'un texte qui se compose :
d'un titre <h2>, un sous-titre <h3> et d'un paragraphe <p>.

je voudrais aligner les deux images avec l'ensemble du texte (<h2>, <h3> et <p>).

j'ai attribué un float:left + un margin-left de 20px à la balise image, de sorte que les images viennent se placer les unes à côté des autres :


#contenu img {
	float: left;
	margin: 0 0 0 20px;
	padding-bottom: 15px;	
}


Est ce que je dois mettre l'ensemble des parties du texte dans un nouveau div (si on peut éviter d'alourdir le code, c'est mieux) ou y a-t-il une autre solution.

Quand je mets display:block à la balise <IMG /> IE me fait une première marge de 40px au lieu de 20px, pourquoi ?

Voici le code CSS modifié (le code HTML plus haut est toujours le même)


#contenu {
	clear: right;
	float: left;
	width: 465px;	
}
#contenu h2 {
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #0E58BE;
	text-align:left;
	margin: 0 0 0 20px;
	padding-top: 10px;
}
#contenu h3 {
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color:#000000;
	margin: 0 0 0 0;
}
#contenu img {
	float: left;
	margin: 0 0 0 20px;
	padding-bottom: 15px;	
}
#contenu p {
	font-size: 12px;
	font-weight: bold;
	color:#666666;
	margin: 0 0 0 10px;
}
#contenu img.pointille {
	padding: 0 20px 0 0;		
}
.voyage {
	clear:both;
	width: 620px;
	margin: 0;						
}


Ah oui pour finir le padding-bottom: 15px de la balise IMG n'est pas prise en compte par IE 5.0 et 5.5, une explication ?
A mon avis si tu veux que ça marche sous IE 5.0, 5.5 et 6 et les Mozilla et consorts tu vas avoir du boulot... mais tu fais ce que tu veux. Smiley lol
Je comprends pas trop ce genre de réponse !!!

Tu as déjà bossé sur des sites pro ? Parce que tu n'as pas le choix. Quand tu travailles sur des sites qui font des millions de visites, si 5% utilisent des vieux navigateurs, ce n'est pas négligeable...

Et puis le fait que ça passe sur Mozilla et consort, qui contrairement à IE repectent (mieux) les standards c'est une garantie que le code est correct et qu'il va pas tomber en ruine à la prochaine mise à jour de navigateurs !

Tu bosses comment exactement ?
Exactement ? Pour IE 6 (5.5 si demandé) et Mozilla... mais je ne bosse pas pour des sites qui font des millions de connexions, là est la différence... Smiley lol

PS : j'espère que tu vérifies pour Netscape 3 aussi... des fois que ça soit 2% des connexions.
Modifié par momo-fr (07 Sep 2005 - 11:46)
Salut!

Excuse-moi, je suis peut-être naïf ou alors je ne comprend pas bien la question, mais si on met l'attribut : align=left dans une balise img, est-ce que ca ne permet pas d'aligner le texte sur la droite ?

RedOx
Du coup c'est moi qui ne comprend pas ta réponse ???

Une balise IMG n'accepte pas ce genre d'attribut. L'idée est de faire la mise en page en CSS avec une structure XHTML sans attribut (idéalement).

Peux-tu préciser ?

J.
C'est quelque chose que j'ai vu sur ce site :
http://www.allhtml.com

Ce sont les attributs de la balise <img>

align Définit l'alignement de l'objet
valeur: absbottom aligne le bas de l'objet avec le bas de la ligne courante
valeur: absmiddle aligne le milieu de l'objet avec le milieu de la ligne courante
valeur: baseline aligne le bas de l'objet avec le bas de la ligne courante
valeur: bottom alignement vertical par défaut
valeur: center alignement horizontal sur la page
valeur: left alignement de l'objet à gauche de la page.
valeur: middle aligne la base du texte avec le milieu de l'image.
valeur: right alignement de l'objet à droite de la page
valeur: top aligne le haut de l'image avec le haut de l'objet en haut de la ligne.

Donc, d'après ce qui est indiqué, si tu tapes quelque chose du style :
<img src="ton_image.gif" align="left">

, le texte que tu taperas par la suite se mettra à la droite de l'image.
Modifié par RedOx (07 Sep 2005 - 18:16)
a écrit :
PS : j'espère que tu vérifies pour Netscape 3 aussi... des fois que ça soit 2% des connexions.


Désolé j'ai pas connu (bon je fais du web que depuis 2001... Smiley langue )

Mais on me demande encore que ce soit compatible avec au moins IE 5.0 même si c'est plus courant qu'on me demande de me limiter à IE 5.5.

Jusqu'à 2003, il était inimaginable que les sites ne passent pas dans netscape 4.7 - Le navigateur culte (oubliées les mises en page CSS, par ici les tableaux imbriqués et autres bidouilles pour déjouer la vigilance du navigateur) - en Effet Netscape 6.0 n'a pas été très bien accueilli et d' Irreductibles Gaulois du web ne voulait pas se laisser envahir par le tout puissant Microsoft, il n'y avait pas énormément de solutions de rechange...

Heureusement tout ça est fini ! On a du choix maintenant et moi qui était Pro-IE (en tant que concepteur) je dois avouer que je préfère largement Opéra et Mozilla maintenant - Allez rétablissons un juste équilibre des choses - Sus à Microsoft ! Halte au monopole !!!
Tous ensembles tous ensembles !
Bon je vois qu'on est plutôt d'accord...

Pour ton souci tu as essayé ça pour voir ?
 .pointille {
	padding-top: 31px;
	margin-right: 20px;
	margin-bottom: 50px;
 }

Je ne sais pas si ça répond au problème mais le texte est chassé sous ton visuel "pointillé".
Tout ça passe par du PHP ? Les visuels sont calibrés au même format ?
Salut à tous,

J'ai du mal à comprendre la demande initiale, mais sauf erreur de ma part, la réponse est en fait assez simple :

- les balises <img> sont par nature alignées (en-ligne)
- les balises <h2>,<h3>,etc..de même que <p> sont par nature l'une en dessous de l'autre (blocs).

Pourquoi utilises-tu des balises blocs si tout doit être aligné ? Utilises plutôt des balises <span> pour des textes (en mettant un style différent à chaque partie), c'est une balise en-ligne elle aussi. Evidemment, à l'inverse, si sémantiquement tu estimes que les balises h2,h3 et p sont justifiées, rien ne t'empêche de les mettre en "display:inline" pour avoir le même effet.


Mais bon, je suis peut-être à côté de la plaque... Smiley smile
Modifié par Nilpohc (10 Sep 2005 - 21:46)
Merci pour ta réponse, mais mon problème n'est pas que ces éléments soient alignés horizontalement seulement (ça ils le sont) mais que les éléments img, h2, h3 et p soient alignés verticalement au milieu les uns par rapport aux autres (l'équivalent de valign="middle" en html).

Et comme tu le souligne, je souhaite utiliser les balises h2, h3 et p qui ont un sens alors que span n'en aurait pas.

L'exercice consiste à pouvoir faire cette mise en page sans surcharger le code html et repartir dans les <div> et autre <span> imbriqués...
Bonjour,
En ce cas, reprends la proposition de Nilpohc en l'inversant, càd en mettant tes images en blocs.. non ?
Bonjour,
quelque chose comme ça, style:
#contenu {width:auto !important; width:800px; min-width:800px;margin:2px;}
#contenu .voyageimg {float:left;width:450px;margin:2px;}
#contenu .voyagetxt {margin:2px 2px 2px 460px;}
html:
<div id="contenu">
<div class="voyageimg">
<img src="img/voyage.jpg" width="132" height="101" />
<img src="img/points_real.gif" class="pointille"/></div>
<div class="voyagetxt">
<h2>Guide Voyage</h2>
<h3>Intégration et Développement</h3>
<p>Découpage des images et Intégration HTML, Analyse de la base de donnée initiale, développement PHP/MySql et Javascript.</p>
</div>
</div>
Sujet clos
Aller à