Bonjour,
 
J'ai un petit problème pour mettre un site en page avec des <div>. J'utilse le XHTML 1.1 strict. Non gm_superstar, ce n'est pas le même site que la dernière fois, cette fois, c'est pour mon boulot.
 
code xhtml:

 
J'ai 2 problèmes:
1/ je voudrais que le logo, le texte "E-Direct" et le formulaire de recherche soit sur la même ligne et centrer verticalement.
2/ Il faudrait que les 3 div rightcontent, content et leftcontent soit côte à côte au lieu d'un au dessous des autres.
 
Je me demandais aussi si il était possible de mettre une marge entre le bord d'un div et son contenu. Car pour le faire, j'ai du passer par un autre div et appliquer les margin à ce deuxième div.
 
code css:

 
Le tout est visionnable à l'adresse http://guillaume.lesur.free.fr/openit/template.html (je n'ai pas uploader les images). Le tout doit ressembler à peu près à ça: http://www.openit.be/asp/ à part que j'aimerais que ça tienne sur toutes la largeur d'une page et adaptable selon la résolution.
 
Merci pour votre aide.

Merde, je l'avais oublier le padding.

Bon on va corriger pas à pas le CSS :
 

 
Les 3 colonnes c'est inspiré de http://www.glish.com/css/7.asp
 
Voili, voilou

Ah et bien sûr dans le CSS il faut virer le <div id="inheader">

gm putain t malade, t'as vraiment rien de mieux à foutre que macher le boulot aux gars ? Surtout que bon, comme disait un célèbre gars, vaut mieux apprendre à qqn à pecher que lui filer du poisson tout cuit...

Bah j'avais 10 minutes à perdre avant de partir du boulot... Cela dit je ne sais pas si ça marche j'ai fait ça à l'aveugle
J'ai pas fait tout le boulot, il reste des erreurs de validation et d'autres nettoyages à faire. Les conseils donnés ici seront un point de départ pour lui
 
Allez, c'est ma semaine de bonté.

Y a qu'une lettre de différence entre "trop bon" et...
 
 

 
 
Merciiiiiiiiiiiiiii          
 
(ca fait un mois que je casse la tête a chercher comment reussir ca)

Merci    gm_superstar    (tiens il convient bien le superstar). Grace a tous les commentaires, j'espère comprendre encore un peu plus.
 
Au fait, tu ne connaitrais pas un site où on expliquerait le xhtml en profondeur, cad, qui expliquerait pour la mise en page, les éléments de types blocs, les éléments de types en-ligne, ... (avec si possible des exemples)? Parce que j'ai déjà été voir sur le w3school, mais je trouve que cela manque car le principe, je l'ai compris, mais la mise en application n'est pas toujours évidente.
 
Indiana: ca serait pour un autre projet, ça ne me dérangerais pas de patauger et de chercher un bon coup, mais malheureusement (ou heureusement   ) c'est pour mon travail et mon patron risque de ne pas apprécier le fait que je cherche pendant 1 mois   .
 
Pancopha: je me disais aussi que je devais pas être le seul à chercher .

Bah il y'a beaucoup de liens dans la FAQ...

oui, mais généralement je les trouve pas assé complexe. Bah, je ferais le mien quand j'aurrais bien compris (dans 1 an     ).
 
Au fait, il serait possible de mettre la FAQ comme post-it, parce que tout à l'heure je ne l'ai pas trouvé et ca serait plus pratique de l'avoir comme 1er message en permanence.

Bah non parce que c'est pas la seule FAQ du forum Progra (y'a aussi  Java, PHP, XML...). Par contre en haut à droite tu as un lien "Liens & sujets utiles" qui regroupe tous les topics intéressants

mici

Et bien non, je viens de passer la matiné et le début de l'après-midi à essayer de régler le problème d'alignement et ce n'est toujours pas bon. Je ne comprends pas trop, j'ai suivi le truc sur glish et rien.
 
J'ai un comportement différent selon les navigateurs:
- Mozilla et Netscape: le div de gauche mord sur celle du centre. Ou je devrais plutôt dire que le centre n'est pas bien placé car les deux colonnes ont la bonne dimensions. (http://www.iis.hrnet.fr/pluton/mozilla.jpg)
- IE6: Il m'aligne le div de gauche et celui du centre sur la même position (http://www.iis.hrnet.fr/pluton/ie6.jpg)
- IE5: apparement il ne prend pas en compte les div généraux (http://www.iis.hrnet.fr/pluton/ie5.jpg)
- Opera: toujours un problème avec la colonne de gauche et aussi avec le formulaire de recherche.
 
Le design est dispo à l'adresse: http://www.iis.hrnet.fr/pluton/template.html
 
et le css: http://www.iis.hrnet.fr/pluton/template.css
 

Bon il faut remettre width: 100%; à ton div#maincontent. Vu qu'il est en positionnement relatif, IE bugge s'il n'y a pas de largeur déclarée...
 
Pour le problème de chevauchement c'est sans doute parce que tu as ajouté une bordure à tes DIV, il font donc que tu ajustes les marges du DIV central.
 
Pour IE 5 il faudra peut-être appliquer le hack suivant : http://www.tantek.com/CSS/Examples/boxmodelhack.html

Oki merci.
 
Pour les marges du centre, il fallait que je compte le padding que j'avais ajouté de chaque côté (+ les bords).
 
Pour IE5, j'ai changé le code en:
 

 
Pour être sur d'avoir bien compris:
IE5, ne va interprété que:

tandis que les autres navigateurs compatible CSS2 vont interprétés l'entièreté du code. Et donc ne prendre en compte que les deuxièmes valeurs. C'est bien ça?
 
Par contre pour Opera, c pas encore ça   .
 
(j'y arriverais, j'y arriverais, j'y arriverais, ...
jes les aurais tous     )

Non tu n'as pas compris, le hack pour IE 5 agit sur la largeur (et uniquement elle). Donc il ne doit concerner que tes colonnes de gauche et de droite pour lesquelles tu as spécifié une largeur. Ta colonne centrale n'a pas de largeur explicite donc elle n'est pas concernée.

ah bon, pourtant ma solution fonctionne et sur glish, c'est comme ça qu'ils ont fait.
 

 
La, j'ai du mal à suivre alors  

Ah oui effectivement, j'ai pas pris le temps de lire attentivement. Effectivement ça revient au même et c'est mieux d'ailleurs car ça évite d'appliquer la hack pour 2 colonnes.
Désolé c'est la fin de la semaine  
 
Par contre tu devrais ajouter la deuxième partie du hack pour Opera  5 :
 
html>body div#centercontent {
...
}

Je vais craquer, je le sens   .
 
J'ai réussi à contourner le problème de l'header en mettant tous les éléments en position: absolute et en supprimant le padding pour le <div id="header"> (IE 5 est vraiment une grosse merde).
 
Par contre dans Opera, je m'en sors pas. J'essaye avec Opera 6.05 fr, mais les positions sont zarbi. Pour mon formulaire, il n'a pas l'air de prendre en compte le champ right: 20px. Et le div gauche est collé à mon menu alors que j'ai définit un écart de 6px en dessous du menu.
 
Screenshot: http://www.iis.hrnet.fr/pluton/opera.jpg
 
Quelqu'un a-t-il une idée???
 
Merci.

Tu devrais faire tes screenshots en PNG, c'est mieux

d'un autre côté faire un site qui passe bien partout c'est pas gagné. Si déjà c'est bon sur IE et mozilla/netscape bin laisse tomber non ?

Chuis de genre perfectionniste. Puis ca dépend surtout de mon patron , je lui en toucherais deux mots. Mais si c'était possible, j'aimerais que ca tourne sur Opera. Note que je n'ai pas tester sous Mac, ni sous Linux.

 
Tu es sûr que tu ne veux pas que je bannisse ce pseudo-ci ?

 
pas besoin de motif

Bon ben sinon pour Opéra, tu mets le logo et le texte dans 1 DIV et le formulaire tu le mets en flottant à droite.

 
Juste pour savoir ça existe le xhtml 1.1 strict ?
Parce que moi j'ai entendu parler du xhtml 1.0 strict et du xhtml 1.1 ?
Alors c'est quoi la différence entre le xhtml 1.1 et le xhtml 1.1 strict ??
 

 
Parceque le transitionnal sert pour la phase de transition (comme son nom l'indique). Pour le xhtml 1.1, on considère que la transition est terminée et il ne reste donc plus que le strict.

Donc xhtml 1.1 = xhtml 1.1 strict ??

oui

Bon, mon patron est d'accord pour laisser tomber Opera   .
 
Merci pour votre aide  

 
Pas compris???
 
Faudrait peut-être commencer par avoir des navigateurs W3C Compliant tel que Mozilla.
 
Quand je vois le merdier qu'il faut pour faire un site compatible avec la plupart des navigateurs (anciens surtout), j'ai presque envie d'arreter le développement web et me redirigier vers les applications stand alone ou en réseau.

Non non, je dois pas descendre en deca de IE5 et NS6. d'après ces stats, les autres navigateurs sont que très peu utilisé pour visiter son site.

J'ai encore un petit problème.
 
Dans le div de droite, j'ai mis plusieurs div imbriqués.
 

 
Pour qu'ils s'alignent correctment dans IE, j'ai fixé le width à 150px pour basketdiv et mailinglistdiv (qui me servent en plus à mettre un bord gris autour de l'ensemble). Malheureusement, avec Mozilla (et donc NS), au lieu de garder l'alignement qu'il devrait avoir, les div sont repoussé vers la droite (de 4 pixels).
 
J'ai fait deux screenshots pour illustrer le problème:
- IE: http://users.skynet.be/bk372655/ie.png
- NS: http://users.skynet.be/bk372655/ns.png
 
Si je ne mets pas de valeur au width, j'ai un espace entre les div latéraux et le div central.

Comment sont positionnés les DIVs ? Le BODY a-t-il une marge ? du padding ? Bref, donne un peu plus de code...

ca ne va pas être bref, désolé:
 

 
rightmenu.asp

 
pour leftmenu.asp, c'est la même idée
 
un exemple de contenu de la colonne du milieu

 
Les css:

 
J'ai supprimé ce qu'il me semblait inutile pour le cas qui nous intéresse.

J'ai trouver, j'avais oublier de modifier les marges pour la colonnes du milieux alors que j'avais supprimer les bords ==> décalage.
 
Mais j'ai toujours un petit soucis, dans IE6 mes div ne sont pas tout à fait bien placé, ils devraient être 1 pixel plus à droite.
 
http://users.skynet.be/bk372655/iebug.png, je suppose vient du div englobant, mais je n'en suis pas sur.
 
pour la colonne de droite

 
les deux div qui sont englobés dans la colonne de droite:

Bah voilà tu as fini par trouver tout seul

Essaye de faire apparaître les bordures des différents DIV afin de visualiser lequel n'est pas aligné avec les autres.

Pour moi, c'est toute la colonne de droite qui est mal placé. Si je fait right: -1px au lieu de right: 0px, l'alignement est correct dans IE, mais bien sur pas dans Mozilla/NS. Donc, il me semble que c'est elle qui pose problème.
 
Ah aussi, comme les colonnes sont en position: absolute, la hauteur de la page est défini par la colonne du mileu. Le problème s'est qu'il peut arriver que la colonne de gauche soit plus haute que celle du milieu (affichage en arbre que l'on cache en partie) et donc vient "écraser" le menu du bas, ce qui n'est pas très joli. Y a-t-il une solution pour que la hauteur de la page varie en même temps que celle de la colonne?

Ca me fait une belle jambe, 90% des utilisateurs utilisent IE.
 
Règle n°2: l'utilisateurs a toujours raison, ainsi que le patron