Problème de <DIV>

Voila je suis occupé de créer le site pour un de mes potes, vous pouvez voir le résultat et le problème ici (seul la page "Présentation" et "Accueil" disponibles):

http://www.xxx.be/presentation.php

Grace à vos conseils j'ai pu m'en tirer plutot bien jusque maintenant mais voici un nouveau problème.
Pour le contenu je voudrais disposer deux <div> l'un a coté de l'autre, niveau marges horizontales cela ce passe bien mais le probleme se situe dans l'alignement verticale des <div>.
Le <div> de gauche se positione bien, malheureusment le <div> de droite est poussé à la fin du div gauche (alors qu'il devrait se trouver juste a cote et a même hauteur).

Pour être plus clair, le texte "bla bla bla" se trouvant dans la partie droite grisé devrait être alligné verticalement avec le contenu de gauche.

j'espere obtenir votre aide.

merci d'avance

unlimilove
Modifié par unlimilove (11 Aug 2007 - 19:46)

Bonjour,

Tes deux éléments (div#left et div#right) sont des éléments de type bloc, et donc après chacun de ces éléments il y a un retour à la ligne. Donc forcément, les deux blocs ne sont pas côte-à-côte.

Pour les placer côte-à-côte, il faut faire flotter l'un des deux blocs (le premier dans l'ordre du code HTML). Ici, ce sera div#left.

Tu as le code suivant :

div#left {
	margin-left:30px;
	margin-right:33px;
	width: 510px;
}

que tu pourrais remplacer par le suivant :

div#left {
	float: left;
	width: 510px;
	margin-left:30px;
	display: inline; /* Sans conséquences, sert uniquement à éviter le "Doubled Margin Bug" d'IE 6. */
}

Au passage, tu remarqueras que j'ai supprimée la marge de droite, inutile.

Une remarque en passant :

<img src="gfx/header.gif" border="0" height="136" width="790">

Version corrigée :

<img alt="Comptoir des producteurs" src="gfx/header.gif" border="0" height="136" width="790" />

Même marche à suivre pour l'image de bannière qui porte également un texte informatif.

Pour information, le texte alternatif de l'image est utilisé à chaque fois que l'on accède au contenu sur un mode textuel (petit exemple : les moteurs de recherche...), ou lorsque l'image n'est pas disponible ou désactivée pour une raison ou pour une autre.

J'ai correctement appliquer le code que tu m'as proposé et la lay-out se présentait on ne peut mieux...

mais maintenant apres avoir rajouter un tableau dans mon code html (servant à énumérer les infos sortant d'une db) j'obtiens des comportements étranges sous Firefox et IE.

Firefox:

voici les deux pages possant problème
http://www.xxx.be/gammeColl.php
http://www.xxx.be/gammeHore.php

ces pages sont divisées en 2 div (pour le contenu). Le premier à gauche pour le contenu principal et le second à droite (fond grisé) pour des infos complémentaires.

Depuis l'ajout du formulaire ou du tableau, le <div> de droite n'agit plus avec le comportement "display:inline". Vous pourrez constater que le texte "Bla bla bla" s'affiche au bas du <div> gauche alors qu'il devrait être à même auteur.



Internet Explorer sur la page:

http://www.xxx.be/gammeColl.php

depuis l'ajout du tableau ou du form, mon site n'est plus centré...



j'espere recevoir votre aide.

merci d'avance

unlimilove
Modifié par unlimilove (11 Aug 2007 - 19:46)

unlimilove a écrit :
mais maintenant apres avoir rajouter un tableau dans mon code html (servant à énumérer les infos sortant d'une db) j'obtiens des comportements étranges sous Firefox et IE.

Ça ne vient à priori pas du tableau, mais plutôt du fait que tu joues à l'apprenti sorcier en plaçant un display: table !important; sur div#container.

Ton code est le suivant :

div#container {
	background-color:#FFFFFF;
	background-image:url(../gfx/backContainer.gif);
	background-repeat:repeat-y;
	
	/*
	utiliser pour afficher le fond du <div>
	a insirer obligatoirement en fin de CSS
	URL:http://forum.alsacreations.com/topic-4-19426-1-Fond-qui-napparait-pas.html#copy
	*/
	width:100%;/* padding inadapté dans ce cas , s'ajouterait au 100% */
	display:table!important; /* les autres */
	/**display:inline-block; /* IE */
	/* padding inadapté dans ce cas , s'ajouterait au 100% */
}

Et il faudrait plutôt faire ceci :

div#container {
	background: white url(../gfx/backContainer.gif) repeat-y;
	width: 100%; /* confère le [i]layout[/i] au bloc et évite le dépassement des flottants dans IE5-6 */
	overflow: hidden; /* évite le dépassement des flottants dans IE7, Firefox, Opera, Safari... */
}

Le width: 100%; pourrait être rejeté dans une feuille de styles de correctifs pour IE5-6, appelée via un commentaire conditionnel (voir la FAQ sur les commentaires conditionnels). Mais bon, ici ça n'est pas indispensable.

Pour le problème avec Internet Explorer : est-ce qu'il persiste une fois que la correction indiquée ci-dessus est faite ?

Affirmatif, le problème dans IE persiste

parcontre sous firefox tout est nikel

merci j'vais pouvoir continuer

:)

unlimilove

unlimilove a écrit :
Affirmatif, le problème dans IE persiste

L'absence de Doctype sur http://www.comptoirdesproducteurs.be/gammeColl.php ne doit pas t'aider...

en effet...

en fait nous sommes deux à bosser sur le site:
un collègue pour le php/mysql et moi pour le graphisme et html/css.

je cherchais dans mon fichier correcte alors qu'il avait fait une mise-a-jour de la page et viré le Doctype par mégarde.

désolé pour le post inutile