Problème de mise en page avec des colonnes factices

Suite à des conseils de ce forum je m'étais lancé dans une mise en page à l'aide des tutoriaux de pompage.net: Marges Négatives et Colonnes Factices seulement j'ai échoué voir où j'en suis de mon site ici (ma partie news ne descend pas jusqu'en bas comme je le voulais). Du coup vu que j'ai une page qui ne passe pas bien sous les navigateurs j'ai décidé de refaire le squelette de mon site proprement, pour cela je suis partie de l'exemple 5 de pompage.

Ça m'a donc pris la journée, et au final j'atteind presque mon but mais j'ai encore quelques bugs. En effet comme vous pouvez voir sur ma page web test ici, et ma page CSS ici il y a une partie bleue, alors qu'en fait je voudrais qu'à la place ma partie centre prenne toute la place (justement) et donc que cela soit orange.
Contrairement au modèle, j'ai fait rentré mon "footer" (vert) dans le flux donc ça vient peut-être de là. Par rapport à ce dernier j'ai remarqué également que si je ne mettais pas de <br> pour faire un retour à la ligne, mon texte se mettait à déborder sur ma partie news. J'aimerai remédier à cela également.

(Note:j'ai changé les couleurs volontairement afin de faire ressortir le problème je vous rassure il n'y aura pas orange ni de vert et j'espère pas de bleu ).

J'espère également arriver à valider mon code html et css, et même avec si peu de code ça ne m'a pas l'air gagné

Merci pour votre aide.

Je rappelle également que j'ai toujours 4 Problèmes avec mon Menu et aucune réponse
Modifié par Jefferson (17 Dec 2005 - 18:08)

Up. Aidez-moi s'il vous plaît .

Bonjour à toi,
Après un tout rapide coup d'oeil à ton code, on peut voir ce genre d'erreur :

<div class="conteneur">
	    <div class="contenu>

      <div class="menu>
	  Menu
      </div>

En fermant les guillemets de ta div "contenu" et "menu", le bleu disparait .

Sinon, c'est absolument nécessaire toutes ces div ? Essaye de les remplacer par d'autres blocs qui ont un sens dans la sémantique HTML, genre "dl" pour tes menus etc... Pour ma part, je ne mettrais que 5 éléments de bloc (top, menu, center, news et footer)... Ta mise en page ne bougera pas si tu enlèves les autres.
Modifié par Jihel (20 Dec 2005 - 14:04)

Merci pour ta réponse je commençais à désepérer je m'en étais allé poster sur un autre forum . En effet j'avais oublié un guillemet erreur de débutant que je suis mais juste à contenu, à menu il y était. Du coup quand je l'ai rajouté ça m'a enlevé le bleu comme tu l'as dit mais j'ai un nouveau problème, ma partie news est beaucoup plus large, et même elle déborde en-dessous des autres div (menu,footer,etc.) on dirait voir ici. C'est ça qui m'éneve avec le webmastering à peine on répare un truc on créé un autre problème .

Par rapport à la neccessité d'avoir les autres div, c'est pour le système de colonnes factices, si je les enlève, ça ne répète plus les images http://humanbeatbox.free.fr/news1x146px-d8d8b5.gif et http://humanbeatbox.free.fr/menu1x135px-990000.gif vers le bas comme tu peux le voir ici (je voudrais que ça aille jusqu'au niveau de mon footer, note: pour news y'a du <br> donc c'est normal que ça descende un peu). Ce n'est pas moi qui l'ai inventé (à la base j'étais parti comme toi avec l'idée de 5 éléments juste), mais comme je disais j'ai trouvé ça sur pompage.net après un conseil de Merlin ici. J'ai essayé de suivre le code "à la lettre" (ou presque) pour l'adapter à ce que je cherchais à faire mais ça ne passe pas apparement.

Je n'ai pas suivi ce que tu voulais dire par rapport à :

a écrit :
remplacer par d'autres blocs qui ont un sens dans la sémantique HTML, genre "dl" pour tes menus etc...

Est-ce par rapport à mon problème de menu? Désolé je suis encore un gros newbie même si je galère depuis des mois

A mon avis tu veux faire trop de choses à la fois... C'est vrai qu'au début, tout est compliqué mais avec de la patience on arrive à tout. Par contre il ne faut pas brûler les étapes.
Je réponds à tes questions dans l'ordre d'apparition.
1/ D'après ce que je peux voir avec la webdevelopper toolbar (extension magique de Firefox), ce n'est pas ta div #newsandfeatures qui dépasse, mais #conteneur (qui a la même couleur).

2/ Ce que tu dis par rapport à l'image de fond des tes div est exact en l'état. Mais en modifiant un peu tes CSS, tu peux définir le fond de #menu et #newsandfeatures avec l'image des divs #enveloppe-exterieure et #enveloppe (que tu pourras virer après coup). Il te faudra alors modifier tes blocs pour qu'il aient la bonne taille. A ce propos, évite ce genre de choses :

.menu {
float:left;
width: 135px;
background-color: #990000;
top: 0em;
left: 0em;
width: 0em;

Ta largeur est définie 2 fois et au final le navigateur ne garde que la dernière valeur (0em, )
Une autre solution apparait dans le tuto que tu as lu sur les colonnes factices : une image de fond qui fait toute la largeur du body et qui te permettra de "faire comme si" tes colonnes allaient jusqu'au bas de la page.

3/ La sémantique est quelque chose de trop souvent oublié. En fait, ca consiste à utiliser les bonnes balises au bon endroit plutôt que de mettre un tas de div. Coder avec plein de div, c'est comme si je te parlais en mettant des "trucs" à la place des mots. Du coup tu ne comprendrais rien, alors qu'en utilisant les bons mots, c'est tout de suite plus clair. On en traite ici, là et plus généralement là.

Enfin, vérifie bien tes fichier HTML. Dans les exemples que tu montres, il manque la balise <html> en début de fichier. Il est important de procéder avec méthode, quitte à fermer directement une balise ouverte et à écrire dedans après, pour être sûr. Prend ton temps, lis bien les tutos et ton code et tu verras que ca finira par venir !
Modifié par Jihel (20 Dec 2005 - 20:54)

un petit tuto qui va peut être t'aider (exemple de mise en page avec des colonnes factices)
Mise en pages CSS de type fluide avec marges négatives et "colonnes factices"
Modifié par robby (30 Oct 2006 - 20:10)

OK merci beaucoup pour vos réponses j'ai presque résolu le problème, maintenant y'a juste ma div conteneur qui me crée un espace blanc voir ici sous firefox (mais pas sous IE ). À noter que je n'ai pas encore étudier la sémantique donc ça résoudra peut-être le problème, je vous tiens au courant juste. Noyeux Joel

P.S: à noter également que la validateur me détecte une seule erreur html que je comprend pas:
"Line 4 column 73: character data is not allowed here.
...e" content="text/html; charset=ISO-8859-1" />
Et si j'enlève le ">" (ce qui n'est pas normal mais bon j'ai testé) du coup sous Firefox mon titre apparaît dans la page au lieu de la barre des titres. Franchement je ne vois pas comment réparer ça, et les explications données ne m'aident pas:
" You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes)."
Modifié par Jefferson (24 Dec 2005 - 14:25)

Bonsoir,
Pour ton espace blanc, tu peux appliquer à ta div contenu la même couleur d'arrière-plan que ta div center. Ce sera certainement la solution la plus rapide.

Pour ton problème de validation, tout vient de ta DTD :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

En effet, en HTML 4 on ne ferme pas les balises auto-fermantes avec " />" comme en XHTML.

Pour l'espace ce blanc c'est ce que j'avais décidé de faire, enfin l'inverse c'est à dire que c'est ma div centre qui a un fond blanc et du coup elle se confond avec ma div contenu, cependant ça me fait des bugs avec certaines pages de mon site où là le fond de ma partie centre doit être noir ou autre (comme ici) mais y'a un problème à cause d'une marge en fait, il faudrait trouver un moyen de modifier celle-ci.

Sinon c'est bon ma page test4 est valide ! J'ai changé les /> en > et ça a tout réglé ! Du coup j'ai appliqué ton ça à mon site mais celui-ci est loin d'être validable (j'ai toujours des gros problèmes avec mon menu et juste 1 réponse qui m'a à peine aidée) voir ici. Je suis conscient que pour progresser dans la conception de mon site il me faudrait un code valide et là je suis bloqué je n'arrive plus à trouver la page en français (j'ai trouvé en anglais) qui explique les codes que l'on utilise en html 4.01 transitionnel, donc si quelqu'un a un petit lien par là…