Contenu qui dépasse la DIV

Bonjour à tous,

je rencontre un problème qui me fait tourner en rond depuis 2h, le contenu de ma div dépasse de celle-ci au lieu d'aggrandir la div.

J'ai trouvé pleins d'exemples sur le web mais aucune soluce marche, je ne sais pas si j'ai fais une connerie ailleurs...

Vous pourrrez trouver la page ici : http://www.san-isolation.fr/index.php?page=reference

Merci d'avance car je craque !

Salut,

il faudrait commencer par renseigner un doctype, enchaîner par la lecture de cette astuce et plus globalement (re)lire le guide de survie du positionnement.

Au passage l'utilisation de mots-clés écrits en blanc sur fond blanc n'est pas très maligne et tu risques tout simplement de ne pas être indexé pour des raisons de spamdexing.
Modifié par Heyoan (25 Apr 2009 - 18:06)

Merci pour cette réponse.

Je vais m'occuper du doctype. Pour le lien que tu me proposes, je l'ai lu en long en large et en travers, mais rien n'est passé, je sais pas si y'a pas autre chose sur le CSS qui bloque.

Je ne vois pas de quels mots clé en blanc sur fond blanc il s'agit ?

shadeoner a écrit :
Je vais m'occuper du doctype. Pour le lien que tu me proposes, je l'ai lu en long en large et en travers, mais rien n'est passé, je sais pas si y'a pas autre chose sur le CSS qui bloque.

Oui : tu mélanges allègrement positionnement relatif, marges négatives et float alors que tout irait beaucoup mieux en laissant les éléments dans le flux (cf. le lien sur le guide).

shadeoner a écrit :
Je ne vois pas de quels mots clé en blanc sur fond blanc il s'agit ?

Oups ! Désolé : j'avais fait quelques tests avec Firebug et ta div#keywords n'apparaissait plus...

ghost a écrit :
Salut,
Allez Heyoan un pti coup de pousse... un overflow: auto sur son bloc #bloc suis sur qu'il va lire les tutos...

Arf ! Tu es plus sympa (et confiant) que moi !

J'avais mis l'overflow en auto mais je me retrouvais avec des scroll bar sur IE

Mais je prends aussi toutes les observations autres (je suis débutant sur CSS)

rectifie la ligne 14 dans ta feuille de style css.css comme suite :

background-color:white;
border:1px solid #33CCFF;
float:left;
left:50%;
margin-left:-471px;
padding:0 0 20px;
position:relative;
text-align:left;
width:943px;

ca va marche ami
N.B: tu mets un copié collé c mieux
Modifié par mnajah (25 Apr 2009 - 23:30)

je ne fais qu'aider les gens c tout

mnajah a écrit :
je ne fais qu'aider les gens c tout

Je n'ai rien à redire à cela !

Cela ne t'empêche pas d'utiliser les balises [ code]...[ /code] et de ne pas reprendre ce qui n'allait pas dans le code existant.
Modifié par Heyoan (25 Apr 2009 - 23:27)

En effet ça fonctionne mais j'ai pas compris.... j'ai exactement les mêmes propriétés (mais pas mis dans l'ordre)

J'ai un peu nettoyé mon code ailleurs j'ai vu des conneries que j'avais laissé en voulant tester d'autres trucs.

Merci Mnajah

Heyoan : que vois-tu à améliorer ? (sachant que j'ai revu et corriger une partie des CSS suite à ce que j'ai lu sur l'article que tu proposais)

A vrai dire je crois pas que c'est le même code sinon je dis que j'ai la baguette magique , j'ai ajouté une

float:left

et j'ai supprimé height

shadeoner a écrit :
Heyoan : que vois-tu à améliorer ?

Eh bien comme je te disais il faudrait laisser les éléments dans le flux. Concrètement utiliser un conteneur global qui te servirait à centrer le tout :

<div id="global">
...
</div>

#global {
   width: 943px;
   margin: 5px auto;
}

Il ne te reste plus qu'à y placer #keywords (avec text-align: center) suivi de #bloc...

Cela permet de se débarrasser du position: relative, des marges négatives et du float
Modifié par Heyoan (25 Apr 2009 - 23:35)

mnajah :
Ah je n'avais pas vu le float, mais d'après le lien que j'ai lu il ne faut pas utiliser de float hors mit pour positionner côte à côte deux DIV.

Heyoan :
Ce qu'on appel "Flux" pourrait s'apparenter à de l'héritage ? Car je n'ai pas compris ce terme.
En gros tu me dis que si je positionne mon #keywords à l'intérieur de la div global, j'hériterais des paramêtres de ma div parent ? (ce que tu appels flux)

shadeoner a écrit :
Ce qu'on appel "Flux" pourrait s'apparenter à de l'héritage ?

Non : c'était expliqué dans le lien sur le guide (qu'il faut vraiment prendre le temps de lire en suivant les liens !)

Notamment : flux et position relative.

Heyoan a écrit :
Non : c'était expliqué dans le lien sur le guide (qu'il faut vraiment prendre le temps de lire en suivant les liens !)

Notamment : flux et position relative.

Oui désolé j'essaye souvent d'aller à l'essentiel et je loupe des choses...

Est-ce que tu es d'accord avec la remarque que j'ai fais au dessus : le float est nécessaire que pour les div côte à côte ?

shadeoner a écrit :

Oui désolé j'essaye souvent d'aller à l'essentiel et je loupe des choses...

Est-ce que tu es d'accord avec la remarque que j'ai fais au dessus : le float est nécessaire que pour les div côte à côte ?

Je rajoute que j'ai utilisé ton CSS #global mais l'alignement ne passe pas sous IE

J'ai mis une page de test à cette adresse.

A noter :
* il faut suivre la hiérarchie des titres (après un H1 on utilise un H2 et pas un H3)
* un lien ne peut contenir que des éléments en-ligne et donc pas un DIV.
* "L'isolation a (pas à ) sa solution"
Modifié par Heyoan (26 Apr 2009 - 01:22)

C'est super sympa ton aide

J'ai bien noté toutes tes remarque.

Je vais analyser ce que tu as mis dans ta page de test pour bien comprendre.

Merci encore