Debutant positionnement

Bonsoir,
Quand internet s'est democratisé, plein de sites persos ont vu le jour. Ayant tous des sujets aussi divers que les testes en labos sur les potirons ou encore la passion dévorante que chacun de nous a pour les capsules de biere.
Pour m'occuper j'ai décidé de faire le mien avec des css parce que ça avait l'air rigolo. N'y connaissant rien j'ai decidé de faire un site avec :
une banniere un pied et une section centrale :

<div id="conteneur">
   <div id="ban">
     <img src="image/getfirefox.png">
     <p>yo les keums! ça roxor ou bien ?</p>
   </div>
   <div id="main">

   </div>
   <div id="pied">
   </div>
</div>

Vu que j'suis un homme de goût j'ai decidé de mettre un max de couleurs moches et a haute teneur en crise d'epilepsie. Et pour la banniere mettre le logo a gauche et le texte a droite. le texte etant centré plus ou moins.

Bref c'est genial, novateur et tout en css :

img {
border-width: 0px;
}

div {
background-color: rgb(255, 255, 255);
}

#ban p{
float: right;
line-height: 50px;
}

#ban img{
float: left;
}

Le probleme c'est que niveau rendu c'est loin d'etre la fete. Sous ie6 j'ai plus ou moins le resultat voulu. Le div a pris la hauteur de mon image, et mon texte est "centré". Sous firefox c'est l'inverse, le div a pris la hauteur de mon texte (en comptant les line_height) donc mon image depasse. Et sous ie5, il a choisit la solution intermediaire, il ne gere rien du tout.

Ce site est pour moi un pretexte pour apprendre a utiliser les css, et accessoirement en rire. Donc si on peut m'expliquer le pourquoi du comment, m'aiguiller sur une solution multibrowser. Ou me presenter de meilleurs solutions de mise en page je prends.

Malgres l'impression que cela donne je n'y connais rien en placement (oui je plaisante encore, je sais tres bien que je ne donne pas l'impression de m'y connaitre mais c'est le genre de phrase qui plait aux filles) donc si vous connaissez d'autres doc sur ces principes....
bonne soirée et merci d'avance.
Modifié par Herr Youplalipop (25 Jun 2006 - 11:19)

Pour faire une solution multi-navigateurs, il vaut mieux procéder ainsi :
– coder en suivant un maximum les standards du web (spécifications CSS 2, XHTML 1.0, tout ça), ce qui permettra d'avoir le même rendu ou presque dans Firefox, Konqueror, Safari ou Opera ;
– apprendre peu à peu à connaître les principaux manquements d'Internet Explorer 6 (quelles propriétées marchent, lesquelles marchent un peu mais bizarrement ou bien sont complètement buguées, lesquelles ne sont même pas implémentées…), et apprendre à les éviter en amont plutôt que de passer son temps à les corriger.

Il y a des petits trucs à ne pas manquer :
– se renseigner sur le box-model standard (cf un article sur openweb.eu.org… je te laisse faire une recherche sur le site en question) ;
– super important : choisir une déclaration de type de document (doctype) qui va bien pour tes pages ;
– demander sur Alsacréations pour le reste.

À propos de ton problème d'image qui sort du bloc, il ne s'agirait pas d'une image flottante, par hasard ? Si c'est le cas, c'est normal que ça dépasse, et le non-dépassement dans IE est en fait un bug (dingue, non ?).
Petit document qui va bien :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html


PS : avant de te faire tirer les oreilles par un modérateur, je te suggère d'éditer ton premier message pour baliser ton code avec les balises BBcode [ code][/ code] qui vont bien (sans les espaces).
Modifié par mpop (25 Jun 2006 - 02:22)

Merci pour ta réponse et les documents, cela doit effectivement m'aider pour mon probleme de positionnement (j'essaie de les comprendre actuellement).

Pour mon image c'est effectivement une image flottante et le document sur openweb souligne bien le probleme et les solutions concernant ce principe.

J'ai, sinon, une autre question. J'aimerai que mon travail s'adapte a toutes les resolutions en respectant a chaque fois les mêmes ordres de grandeur. Mais j'ignore a quel concept cela correspond en css et donc ou chercher.

Merci d'avance

Je viens de consulter le forum css et mise en page Les posts it contiennent des documents tres interessants pour des debutants tel que moi. Je vais donc lire et arreter de poster.

Désolé pour ceux qui ont du etre enervé en lisant des questions qui ont deja du etre formulé avant.

Herr Youplalipop a écrit :
Désolé pour ceux qui ont du etre enervé en lisant des questions qui ont deja du etre formulé avant.

Oh, on a l'habitude, hein ! C'est même plutôt la norme (moi-même je suis pas très doué pour consulter les documentations et autres FAQ… au passage, la FAQ du forum répondra à pas mal de tes questions je pense). Je dirais même qu'un forumeur qui dit de lui-même « Je vais chercher tout seul comme un grand, vu que l'info a l'air d'être là », on aurait tendance à brûler de l'encens devant un autel à sa gloire.

Si quelque chose ne passe pas, ou que « l'info est sans doute là mais c'es bête, j'arrive pas à mettre le doigt dessus », hésite pas à demander.

la faq est super oui