Salut,
 
Comme on peut le voir ici notament : http://www.alsacreations.com/articles/div/, le positionnement d'une div en flottant la fait sortir du flux normal et donc sa hauteur n'est pas comptée dans celle de son conteneur.
 
En pratique voila le problème que j'obtiens :
http://bougetoi.com/projet/sitecom/
Avec une bordure blanche pour mieux visualiser le problème :
http://bougetoi.com/projet/sitecom/index_bordure.html
 
Le problème n'apparait pas sous ie.
 
Voila ce que ça devrait donner (voir le fond bleu) :
http://bougetoi.com/projet/sitecomm2.png
 
Comment faire donc pour que ma div site prenne automatiquement la bonne hauteur ?
 
Merci,
 
a+  

0- t'aurais quand même pu passer ta page au validator  
1- c'est quoi ces divs inclus dans les <dl> pour faire les titres?  
d'ailleurs on ne peut pas mettre un <div> au sein d'un <a>, c'est invalide
2- d'ailleurs pourquoi utiliser des definition lists  
ul je comprendrais np et à la limite ol, mais dl...
3- pourquoi nester à ce point? tu pourais retirer un certain nombre d'étages
4- tu sers ta page avec comme mime-type application/xhtml+xml?
non, alors reste en XHTML 1.0, il est fait pour pouvoir être servi en mime text/html, le 1.1 non
5- un "id" ca ne s'utilise qu'une seule fois, si tu veux appliquer le même style à plusieurs éléments il faut utiliser "class"
6- un <dd>, ça ne se met pas dans un <dt>
<dt> -> Definition Term (terme à définir)
<dd> -> Definition Description (définition du terme)
7- <img src="logo.gif" border="0" width="51" height="50" alt="Logo">
border  
alt logo  
un alt doit remplacer l'image si celle ci ne peut être affichée, il doit avoir un sens, porter une information. S'il n'en porte pas, on met un alt vide (alt="" )
<img src="" alt="" />, t'es en XHTML, essaie de faire comme si tu t'en rendais compte  
8- <img src="titre.gif" border="0" width="311" height="47" alt="Camping">
voir ci dessus
9- d'ailleurs ces deux images seraient des candidats parfaits pour l'utilisation du FIR
10- et à l'utilisation de la transparence GIF/PNG aussi  
11.1- Comment tu veux que ta div "site" ait une taille correcte quand tu lui impose 1px de haut?  
11.2- Pourquoi contenu est en float:left? c'est stupide!
dégage le float et met "margin-left: 159px;" à la place  
11.3- Il faut préciser les unités de toutes tes valeurs non nulles: "height: 1" n'a aucun sens
11.4- paf, ça fait des chocapics

Oui c'est un grand débat qui se base sur ça :
http://www.alsacreations.com/articles/deroulant/

Avec un peu de recul, je deviens de plus en plus circonspect quant à l'utilisation des DL, tu as raison... mais il n'empêche que les Listes simples témoignent d'un manque cruel pour ce genre d'applications.
Vivement le XHTML2 avec les <nl> !
 
Note : est-ce une habitude de casser tous les newbies sur ce forum ?
C'est étonnant comme spécificité, je n'ai pas l'habitude de rencontrer ce genre d'agressivité ailleurs. Ce n'est pas dirigé contre toi, Masklinn (tu es très loin d'être le seul), mais il y'a vraiment deux mondes qui ne doivent surtout pas se rapprocher ici : les "omniscients" et les newbies.
Dommage car les "omniscients" ont des choses à apprendre... et ont dû être newbies un jour  

Ah j'oubliais, on va quand même essayer de répondre à la question "le positionnement d'une div en flottant la fait sortir du flux normal et donc sa hauteur n'est pas comptée dans celle de son conteneur. Comment faire donc pour que ma div site prenne automatiquement la bonne hauteur ? "
 
Ceci est le "boulot" de la propriété CSS "clear" qui s'applique pour gérer les éléments flottants.
Toutes les informations ici :
http://www.openweb.eu.org/articles/initiation_float/
 
Bonne chance

Quand même si
 
(disons que j'ai un peu de mal avec les erreurs "de base" qu'un simple coup de validateur permet de dégager, je considère que la moindre des choses, avant de mettre en place son CSS, c'est avoir un markup correct)

bof
 
clear permet de le faire (et encore, il faut un spacer, c'est pas loin du hack), mais ici il utilise float de manière complètement abusive (en mettant ses 2 éléments en float) ET il fixe en dur la hauteur de l'élément censé être à hauteur variable

Je crois qu'on est d'accord sur chacun des points.
Mais une bonne explication est toujours mieux qu'un "ton code est tout pourri" (même si c'est vrai).
M'enfin moi ce que j'en pense hein    

   
 
j'ai quand même essayé d'expliquer pourquoi il est pourri et ce qu'il faut modifier non?

Oui. On va dire que le ton n'était peut-être pas des plus aptes à la conversation et à l'apprentissage    
Bref, c'était juste une remarque totalement hors sujet qui m'a quelque peu fait quitter (ou suivre moins) ce forum, alors que beaucoup de connaisseurs s'y trouvent pourtant.

Je serais bien en mal de le nier  
(mais quand on dit qu'un problème n'apparait pas sous IE alors qu'il apparaît s'il n'est pas pire ca m'énerve )
(en plus du fait que je sois naturellement énervé )
(et con)
(et que je me les pèle parce que pour raison de ménage toutes les fenêtres sont ouvertes )

Voilà un argument contre lequel toute tentative de défense est vaine  

Bon chui un peu dégouté là, j'avais passé 10 min tout à l'heure à rédiger ma réponse (je suis parti manger après) et à cause d'un bug du forum elle est pas passée.
 
Bref. Déja merci Masklinn d'avoir pris le temps de m'expliquer tout ce qui n'allait pas, même si c'était pas ça la question à l'origine .
J'avais passé la page au w3c validator mais j'avais pas encore pris le temps de corriger les ptites erreurs qui comme tu dis ne sont rien à corriger.
J'ai nettoyé la page et fait ce que tu as dit pour mon problème, c'est niquel merci .
 
Par contre en ce qui concerne les div imbriqués dans le <a> ça devait être ma question suivante, puisque j'ai pas trouvé le moyen de faire autrement pour avoir l'effet d'apparition de l'onglet au passage de la souris ... Si quelqu'un a la solution sans utiliser de js (vu qu'il parait que c'est obsolete) je suis complètement preneur.
 
En ce qui concerne le FIR, je connais pas encore, j'irai me documenter là dessus.
 
Pour les listes j'ai pas du tout l'habitude de les utiliser mais ça me paraissait être plutôt pas mal d'après ce que j'avais vu sur le site alsacreation.com justement.
 
Sibelius, c'est vrai que le ton était un peu sec mais bon tant que j'ai la réponse à ma question donc je vais pas me plaindre.  
Et puis je suis pas complètement newbie non plus hein.    C'est vrai que j'ai jamais fait de sites en respectant les normes mais ça fait quand même 5 ans que j'en fait, je pense commencer à avoir quelques bases

 
Ayant egalement fait l'erreur je me permet de preciser un petit detail :
http://www.w3.org/TR/html401/struc [...] l#edef-IMG
En allant voir la ref html 4.01 on peut voir ca :

En html 4.01 il ne faut pas fermer le tag img. Par consequence le tag img ne doit egalement pas etre ferme en xhtml.
 
J'avais fait la meme erreur dans le passe, et je m'etais fait corriger par antp a l'epoque . A mon tour de montrer corriger ce petit detail.
 
(Ne le prends pas comme une attaque personelle, ca vaut pas le coup ).

gniii plantage browser

de rien

ça te permettra de "travailler" ton lien comme si c'était un <div> au niveau stylistique

(pff ca c'était le gros morceau, à refaire )
 
Je te détrompe immédiatement: utiliser des listes pour les menus, c'est très bien et c'est un extrèmement bon réflexe.
Je n'ai pas critiqué ton usage des listes, j'ai critiqué ton usage des listes de définition pour deux raisons
 
1- La première est objective: tu les utilises mal (en nestant les dt et dds par exemple )
2- La seconde est subjective mais me tient beaucoup plus à coeur: je trouve les listes de définition hautement illogiques dans le cadre des menus, bien plus que les listes classiques (ordonnées ou non). Je parle ici du sens "sémantique" de la chose: un menu n'est pas une liste de définitions, c'est une liste de localisations/liens, je trouve (personnellement je le rappelle, d'autres considèrent ça d'un très bon oeuil) complètement inadapté l'utilisation des listes de définition dans le cadre des menus.
 
À part ça, je le répète, les listes sont un très bon moyen de faire des menus, d'ailleurs je t'enjoins à profiter au maximum de Listamatic et de son Listutorial  (ce site a pour but de promouvoir l'utilisation des listes en général et leur utilisation dans le cadre des menus en particulier, il est très bien fait)
(de plus il pourra t'aider dans l'utilisation des <a> en display bloc)
(et tu peux aller jeter un oeuil sur le Floatutorial )

FIR = Fahrner Image Replacement
C'est une technique visant à remplacer une information textuelle par une information équivalente sous forme d'image par le biais des CSS, c'est très puissant et surtout extrèmement utile pour les titres et les menus (dont on accepte rarement qu'ils s'affichent comme du "simple" texte).
 
Tu trouveras un article dessus sur Stopdesign (l'article couvre le remplacement de texte par des images en général et le FIR en particulier), et pour des exemples il suffit d'aller sur CSS Zen Garden: dans quasiment tous les CSS, on a au moins le titre principal (h1 + h2) qui est remplacé par un "header" en images, et les titres de paragraphes le sont également très souvent.
(NB: CSSZG extrèmement utile pour:  
* Convertir les gens aux CSS en leur montrant la puissance de ces machins
* Se rincer l'oeuil et s'esbaudir devant les capacités de certains graphistes
* Apprendre de nouvelles techniques CSS (pas toujours facile, par contre, de comprendre comment les mecs ont fait leur bidule )
 
Voilà, je vais conclure en te remerciant (humblement?) pour la manière dont tu as (bien) pris mon ton pourtant trop sec

nop, ce que tu as quoté signifie que la forme <img src="" alt=""></img> est interdite, le XHTML c'est du XML et toute balise XML doit être fermée, ce n'est pas optionnel et ca n'admet aucune exception (d'ailleurs si tu tentes de faire du xhtml avec des tags <img> non fermés tu vas te faire jeter), je t'invite à ce sujet à aller voir le document de la norme XHTML 1.0 qui montre (à l'endroit que j'ai linké) que les tags <img> doivent être fermés.
 
Soit tu as mal compris la remarque que t'avais fait antpaÿ soit il s'est planté, mais le tag <img> doit être fermé en xhtml

 
Je plussoie on se fait jeter par le validateur si on ne ferme pas la balise <img> en XHTML 1.0

Hmmm, effectivement d'apres ton lien il faudrait effectivement fermer le tag img.  
Voila le lien ou j'avais commis l'erreur et ou antp m'avais corrige : http://forum.hardware.fr/forum2.ph [...] 0&subcat=0
Hmm, apres reflexion je pense avoir compris mon probleme.
Ceci ma induis en erreur :

 
Le contexte parlais d'html, j'ai fait une remarque a tord comme quoi le tag img devait etre ferme. Par la suite qqn a donne la syntaxe xhtml pour fermer le tag img (<img /> ). Ce qui dans le contexte etais faux puisqu'on parlais d'html et non d'xhtml.
Le commentaire d'antp m'as ensuite induis en erreur, j'ai effectivement pense qu'il ne fallait pas feremer le tag img en xhtml, ce qui est faux (etant donne que le probleme venait surtout du contexte dans lequel il est utilise).
Antp ne s'est donc pas trompe. J'ai mal compris le sens de sa remarque.
 
Voila, tu as raison, me suis trompe
/me a honte

Pas grave
 
dommage, j'aurais bien aimé que antpaÿ se soit planté, j'aurais pu me moquer de lui
 
(je remarque d'ailleurs que Hermès a qualifié le passage Frontpage > DW de "passer de Charybde en Scylla", je tiens à dire que c'est faux
Frontpage > GoLive c'est passer de Charybde en Scylla, Frontpage > DW c'est quitter le monde des légumes pour celui des tétraplégiques )

Voila ça fonctionne et c'est valide au xhtml 1.0 strict. Il me reste plus qu'à le rendre valide pour IE ...
Par contre j'ai pas reussi à faire apparaitre les bloques de sous-menu en css. Je pense que je vais le faire avec un ptit script js.
Merci encore pour votre aide .

Sous IE, il est impossible de faire un menu déroulant tout en CSS... Le seul moyen serait d'imbriquer des <a>, ce qui est complètement interdit

a.ton_lien_de_menu {
    display: block;
}
ça te permettra de "travailler" ton lien comme si c'était un <div> au niveau stylistique
 
----------------------
 
Vu qu'il y a des costauds sur ce forum, j'en profite pour soumettre un petit exercice de style en utilisant un lien <A> intégré dans une liste, mais avec la possibilité d'afficher le liens tabulé en colonnes.
Le but est de pouvoir cliquer n'importe où sur la ligne pour la sélectionner (mais sans avoir les colonnes collées).
 
exple :
1 : test1       test2         test3  
2 : autretest2  autretest2    autretest3  
3 : autretest4  autretest456  autretest4544  
 
Je m'explique avec un petit exemple, qui fonctionne sous IE, mais pas sous FireFox :
 
<UL>  
<LI>
<a href=#>  
<span style='width:200px;'>test1</span>  
<span style='width:200px;'>test2</span>  
<span style='width:200px;'>test3</span>  
</a>  
<LI>
<a href=#>  
<span style='width:200px;'>test1</span>  
<span style='width:200px;'>test2</span>  
<span style='width:200px;'>test3</span>  
</a>  
</UL>  
 
J'ai essayé en ajoutant des "float:left;", mais c'est pire...
 
Si vous avez une idée, n'hésitez pas !
Bon courage...
 
Robz

Faut utiliser du display: inline-block je pense, qui fonctionne sous IE et Opera, mais pas sous FireFox.