Decalage sous IE [résolu]

Bonjour,

Nouveau dans le monde de la creation de site css, xhtml et php, je commence tout juste à visualiser et à comprendre la structure de ce nouveau (pour moi) mode de conception.

Je suis sur un projet que j'ai, bien évidement, vérifié que dans Firefox et, bien évidement, IE me pose des problèmes.

Mon menu de "gauche" se déplace dans mon div "centre" sous ce dernier.
D'après ce que j'ai lu sur ce forum cela doit être le "fameux" double décalage ou double marge. J'avoue ne pas comprendre comment résoudre cela, même si je suis sûr que je suis passé devant la solution... (utiliser la fonction display : inline? float-left? )

Si à tout hasard quelqu'un à le temps de jeter un oeil sur mont html :
http://www.flemflemflem.com/4/
et mon css:
http://www.flemflemflem.com/4/css



j'imagine que ce code dois parêtre aberrant pour la plupart d'entre-vous mais, au risque de me répéter, j'en suis au niveau zéro (0.5) de connaissance dans ces domaines de programmation.
Modifié par kutone (20 Mar 2006 - 13:05)

la propriété display sur un id (#gauche) c'est pas extraordinaire.

Effectivement tu as la bonne piste avec le float left.

Simplement ton #gauche tu le places en float: left. Tu enlèves alors le position absolute et le display inline et le tour est joué.

Nota tu met le conteneur en absolute et le menu en absolute. FF prend comme referentiel la fenetre du navigateur et ie prend comme referentiel le bloc referent (ici conteneur). D'ou le placement completement different. Il doit bien exister un hack mais le float left correspond mieux a ce que tu veux.

Jette un coup d'oeil a l'occasion au tuto sur les positionnements de ce site.

Je n'ai pas IE pour faire des tests donc je ne pourrai pas répondre à ce problème, mais quelques remarques sur ton CSS :

body {
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

Tu as deux jeux d'instructions ici, le deuxième (font-family + font-size) venant annuler le premier (propriété générique font).
Pour ma part je te conseillerais de choisir une de ces deux lignes :

font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
font: 0.85em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;

Cf le sujet suivant : http://forum.alsacreations.com/topic-4-11363-1-Quelles-familles-de-polices-utilisezvous-.html
Et la page de test que voilà : http://web.covertprestige.info/test/00-comparaison-de-fontes-pour-le-web.html

#conteneur {
	position: absolute;
	width: 750px;
	left: 50%; margin-left: -375px;
	top: 100px;
}

Cette technique pour le centrage horizontal est dangereuse dans la mesure où IE Mac (pas encore tout à fait mort...) ne comprend pas les marges négatives. Le bloc aura donc son bord gauche à 50% de la page, et risque fort de dépasser en largeur. Pas super niveau lisibilité.
Je conseille la méthode suivante :

body {text-align: center;}
#conteneur {
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

Les histoires d'alignement du texte servent à obtenir le bon comportement dans Internet Explorer (tous les autres navigateurs récents ont correctement implémenté les marges calculées automatiquement...).

#gauche {	
	position: absolute;
	display; inline
	margin-left: 0px;
	width: 150px;
	top: 104px;
	height: 450px;	
}

Attention, tu as une erreur de syntaxe ici (au niveau du display: inline;... qui d'ailleurs ne doit pas servir à grand chose, on pourrait sans doute le virer.
Tu aurais pu également placer ton blog de gauche en positionnement flotté. je te renvoie aux tutoriels d'Alsacréations pour les questions liées au positionnement des blocs.

Merci beaucoup de votre réactivité,
jai donc modifié:

<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {

font: 0.8em "Trebuchet MS", helvetica, sans-serif ;

font-size: 0.8em;
margin: 0;
padding: 0;
}


p {margin: 0 0 10px 0;}

body {text-align: center;}

#conteneur {

	position: relative;

	width: 750px;

	margin-top: 100px;

	margin-left: auto;

	margin-right: auto;

	text-align: left;

	top: 100px;

}

}
#gauche {
	
	position: float:left
	margin-left: 0px;
	width: 150px;
	top: 104px;
	height: 450px;
	
}

#gauche li {


}
#gauche a {

margin-left: 0px;
font-size: 1.2em ;
margin: 0 2px;
color: #E6D799;
text-decoration: none;
}
#gauche a:hover {


color: #FFFFFF;
text-decoration: none;
}



#header {
height: 104px;
background-color: #000000;
background: url('images/top.gif') no-repeat right top;
}


#centre {
	
	margin-left: 150px;
	height: 450px;
	background-color:#9999CC;
	
}

#centre h1
{
			padding-left: 25px ;
			line-height: 25px ;
			font-size: 1.4em ;
			color: #E6D799 ;
			
		}



#pied {

text-align: right ;
height: 15px;
background-color: #000000;
font-size: 0.8em ;
color: #E6D799 ;
}
#pied a {

margin: 0 2px;
color: #E6D799;
text-decoration: none;
}
#pied a:hover {
color: #FFFFFF;
text-decoration: none;
}




</style>

Jai choisi un jeu de polices, modifié #gauche pour mon probleme de decalage et respécifié #conteneur sans marges négatives.

jai en fait fais un mix entre mon ancien code et celui proposé

body {text-align: center;}

#conteneur {

	position: relative;

	width: 750px;

	margin-top: 100px;

	margin-left: auto;

	margin-right: auto;

	text-align: left;

	top: 100px;

}

le résultat
avec son css

Ma div #centre se décale maintenant en dessous de la hauteur de #gauche (450px)

je vais faire des recherches et si vous avez encore des idées elles sont le bienvenues. Merci!
Modifié par kutone (19 Feb 2006 - 20:51)

Génial!

Tout semble rentré dans l'ordre, merci à tous.
Une question au passage, puis-je descendre le contenu du menu gauche sans utiliser

  <div id="gauche">
  <ul>

	<li></li>
	<li></li>
	<li><a href="index.php?page=accueil">Accueil</a></li>
	<li><a href="index.php?page=artistes">Artistes</a></li>
	<li><a href="index.php?page=records">Records</a></li>
	<li><a href="index.php?page=news">News-Live</a></li>
	<li><a href="index.php?page=links">Links</a></li>
  </ul>
  </div>

merci
Modifié par kutone (19 Feb 2006 - 21:09)

Jai parlé un peu vite, maintenant c'est sous FF que le bloc centre déblque. Il s'affiche en dessous du menu.

http://www.flemflemflem.com/4/

en fait je suis un peu perdu, dois-je utiliser la propriété float :right pour le #centre?

merci
Modifié par kutone (19 Feb 2006 - 21:55)

kutone a écrit :
Génial!

Tout semble rentré dans l'ordre, merci à tous.
Une question au passage, puis-je descendre le contenu du menu gauche sans utiliser

  <div id="gauche">
  <ul>

	<li></li>
	<li></li>
	<li><a href="index.php?page=accueil">Accueil</a></li>
	<li><a href="index.php?page=artistes">Artistes</a></li>
	<li><a href="index.php?page=records">Records</a></li>
	<li><a href="index.php?page=news">News-Live</a></li>
	<li><a href="index.php?page=links">Links</a></li>
  </ul>
  </div>

merci

Tu peux même simplifier ton code :

<ul id="gauche">
	<li><a href="index.php?page=accueil">Accueil</a></li>
	<li><a href="index.php?page=artistes">Artistes</a></li>
	<li><a href="index.php?page=records">Records</a></li>
	<li><a href="index.php?page=news">News-Live</a></li>
	<li><a href="index.php?page=links">Links</a></li>
</ul>

ul#gauche {margin-top: 50px;}

Et hop, ça descend de 50 pixels.
Si par contre tu voulais faire descendre les liens, mais sans faire descendre tout le bloc... :

ul#gauche {padding-top: 50px;}

Ou encore, en appliquant un style spécifique au premier élément de ta liste (li).

Le but est d'éviter au possible de mettre des éléments vides pour la mise en forme.

ok merci beaucoup mais jai besoin d'une petite précision,

ul#gauche {padding-top: 50px;}

se place dans le

<ul id="gauche">

	<li><a href="index.php?page=accueil">Accueil</a></li>

	<li><a href="index.php?page=artistes">Artistes</a></li>

	<li><a href="index.php?page=records">Records</a></li>

	<li><a href="index.php?page=news">News-Live</a></li>

	<li><a href="index.php?page=links">Links</a></li>

</ul>

ou à la suite dans le code
merci

Kutone, tu es sûr d'avoir fait un ou deux tutoriaux CSS avant de poser ce genre de questions ?

ul#gauche {padding-top: 50px;}

Se placera dans une feuille de style CSS externe, ou alors dans une feuille de style CSS interne.

Le petit cours qui va bien (rédigé par votre serviteur, donc c'est sans doute un peu du bricolage...) :
http://web.covertprestige.info/cours-htlm/style-css/inserer-des-css-dans-un-document.html

désolé d'echainer les questions mais mon site "s'étend" sous explorer mais pas sous FF

la page en question

j'édite ce post en rapport à votre reflexion.
Il est vrai que je jongle en ce moment entre bricolage de code de différents tutoriaux et questions attives sur ce forum, je vais calmer le jeu et essayer de trouver les réponses par moi-même. Merci pour tout, salutations
Modifié par kutone (20 Feb 2006 - 01:53)

kutone a écrit :
Il est vrai que je jongle en ce moment entre bricolage de code de différents tutoriaux et questions attives sur ce forum, je vais calmer le jeu et essayer de trouver les réponses par moi-même.

Je précise juste que ce n'était pas un reproche. Mais renforcer l'enthousiasme par un apprentissage méthodique, ça peut aider parfois.

Pour cette histoire de page qui ne s'étire pas, je pense que ça peut être lié à ce problème :
1/ Commence par corriger les erreurs de syntaxe qui traînent, comme par exemple :

#centre {	
	padding-top: 10px ;
	float: right: top;
	margin-left: 130px;

(il te faut probablement un float: right;)

Attention en CSS à bien respecter la syntaxe des sélecteurs, à bien refermer les accolades ouvertes, et à bien respecter la syntaxe nom_de_propriété: valeur(s); (ne pas oublier les deux-points et surtout le point-virgule final) pour les propriétés CSS.

2/ Une fois que ça sera corrigé, tu observeras sûrement un phénomène étrange : tous tes éléments flottés dépasseront de leur bloc conteneur. C'est un comportement normal, standard (que l'on obtient donc avec Firefox, Safari, Opera, Konqueror... mais pas Internet Explorer), mais problématique. Toutes les infos nécessaires ici :
Éléments flottants qui dépassent de l'élément parent
Modifié par mpop (21 Feb 2006 - 19:30)

En fait non, j'ai trouvé le vrai problème :

#centre {
	height: 450px;
}

Tu donnes une hauteur fixe à ton bloc, de 450px. Du coup, les navigateurs qui respectent à peu près correctement les spécifications CSS affichent un bloc de 450px de hauteur, dont le contenu vient dépasser. Sauf si on applique un overflow: hidden; (le contenu qui dépasse est caché) ou un overflow: auto; (si le contenu dépasse le bloc, le bloc est doté d'une ou plusieurs barre(s) de défilement).

Pour spécifier une hauteur minimale, la propriété CSS qui va bien est : min-height.
Elle n'est pas comprise par IE, qui lui interprète height comme si c'était min-height. Le principe est donc d'avoir un min-height à 450px pour tous les navigateurs, et un height à 450px spécifiquement pour IE. On pourra par exemple utiliser un commentaire conditionnel pour spécifier une feuille de style qui ne sera vue que par IE. Ou alors on utilisera un hack CSS.

Yep, bien vu!

merci beaucoup, je commencais à désespérer avec les différentes techniques
de

http://web.covertprestige.info/test/03-elements-flottes-et-element-parent.html
même si je vais sûrment avoir à faire à elles dans un futur proche.

Sinon pour

#centre {
	
	padding-top: 10px ;
	float: right: top;
	margin-left: 130px;
	background-color: #000000;
	width: 620;
	top: 104px;
	min-height: 450px;
	font-size: 0.8em ;
	color: #E6D799;
	background: url('images/bottom.gif') no-repeat right bottom;
}

bizarrement quand j'enlève le top qui semble une faute de syntaxe et bien tout se décale comme tu l'avais prévus. Par contre si je le laisse, le site à l'aspect souhaité. Peut-être les navigateurs ignorent cette ligne vu qu'elle est fausse et l'alignement par default fonctionne correctement?
Je spécule biensûr...

et pour le min.height ca marche impect, et avec:

#centre {
	
	padding-top: 10px ;
	float: right: top;
	margin-left: 130px;
	background-color: #000000;
	width: 620;
	top: 104px;
	min-height: 450px;
	font-size: 0.8em ;
	color: #E6D799;
	background: url('images/bottom.gif') no-repeat right bottom;
}

IE l'interpète comme la valeur height et s'allonge quand même sur
ma page en question

et FF fait de même en s'adaptant au contenu, merci!

EDIT

j'ai de-nouveau parlé un peu vite, IE adapte bien la page en question mais gâche toutes les autres...

Demain je me lève, donc dodo, à plus et encore merci.
Modifié par kutone (20 Feb 2006 - 02:48)

Tu as de gros probleme de syntaxe xhtml

par exemple

float: right top;

est une commade invalide.

Comme noté plus haut tu as une feuille de style externe mais aussi une feuille de style interne (dans le header entre style et /style) ; il faut choisir !!

Concernant le header il semble que ce header ne soit qu'un image donc l'image va être le seul élément de cette div ; il ne faut donc pas mettre l'image en background mais en tant qu'élément du header.

<div id"header>
<img src=mon image />
</div>

Attention aussi, si ut met dans une propriété de div à la fois la propriété backgroud-color et background-image cela crée des conflits et le navigateur ne va pas faire ce que tu veux.

ok, j'ai supprimé le float qui servait à rien et supprimé les style du document index.php

par contre je ne sais pas comment appliquer une couleur de fond pour mon document index.php sans que celui-ci crée une balise <style>

<head>
<title>Largeur fixe 750, header/menu haut/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" media="screen" href="style.css">


<style type="text/css">
<!--


body {
	background-color: #000000;
}
-->
</style></head>

<body>

j'ai essayé avec ca dans mon .css

<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {

background-color: #000000;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
font-size: 0.8em;
margin: 0;
padding: 0;
}

mais je dois me tromper quelque part, ca ressemble à ceci

EDIT
en fait après lecture de http://web.covertprestige.info/cours-htlm/style-css/inserer-des-css-dans-un-document.html
un stlye dans le index.php et un style externe semble valide du point de vu du code. Par contre j'aimerai quand même savoir comment spécifier la valeur du background dans mon style externe.
merci
Modifié par kutone (20 Feb 2006 - 12:55)

Au sujet des feuilles de styles internes (entre les balises <style>) et externes (fichier en .css) :
Tout dépend du champ d'application désiré. Si tu veux un style qui s'appliquera à une seule page de ton site, tu utiliseras une feuille de style interne. Si tu veux un style qui puisse être réutilisé pour toutes les pages du site, plutôt une feuille de style externe.

Les deux types de feuilles de style fonctionnent de la même manière (au niveau de la syntaxe, des sélecteurs, etc.)

Au fait, tu donnes déjà la taille de police en utilisant la propriété font. La propriété font-size est donc inutile (mais ne devrait pas causer de problèmes).

merci pour les infos,
de mon côté ca se précise, après une brève lecture de cette partie de la FAQ et de ce post, en rapport avec ton conseil sur les commentaires relatifs, le
site charge soit style.css, soit style_ie.css. Et ca à l'air de marcher pas mal, merci encore à tous , mention spéciale pour mpop'

tiens, je remarque un espace entre le centre et le pied sur certaine page...
Si qqun à une idée, sinon je m'y mets de mon côté de toute façon je vous tiens au courant.

Après quelques tests je me rends compte que si un image figure dans la page appelée au centre, le #pied remonte jusqu'au bas de #centre.
Modifié par kutone (20 Feb 2006 - 19:54)

la marche à suivre est la suivante :
appliquer l'attribut float:left; à ta div #gauche qui englobe ton menu puis lui appliquer l'attribut display: inline; (compatibilité ie v6.x)
puis les blocs de ta page je te conseille de les aligner par rapport à ce bloc menu en utilisant l'attribut float: left; une nouvelle fois et te débrouiller avec les marge : margin: 15px 20px 80px 50px; etc...
Ce problème ne sera plus présent sur la version 7 de IE
Une astuce encore : pour tester la compatibilité avec le moteur de rendu gecko télécharger le navigateur K-Meleon.
Voilà @+
Modifié par Tidus (25 Feb 2006 - 14:23)