Probleme de remplissage

Et oui c'est encore, le petit débutant du monde css
J'ai créer et corriger quelque problème de mon interface gràce a vous, mais je me pose maintenant à un autre problème.

http://ketby.website.free.fr/.

Regardez le cadre noir en haut, normalement, tout le contenu de la page est dans ce bloc, pourtant, il reste tout petit en haut, il n'entoure pas son contenu (tout le reste de la page).
Voici son style :

#cadre_central {
    margin-left: auto;
    margin-right: auto;
	text-align: left; 
	width : 955px;
	border-color: #640000;
	border-bottom : solid 1px;
	border-left : solid 1px;
	border-right : solid 1px;
	border-top : solid 1px;
	padding-bottom : 10px;
}

Pourquoi ne prend t'il pas en compte son contenu pour l'entourer?

juste comme ça esseye avec un height: auto; ou donne lui une hauteur.

Je sais ce qui cause le problème, a priori, mais je n'arrive pas à le régler alors que j'ai un site où ça fonctionne... (je sais pas pourquoi). J'essaye de faire des tests pour solutionner ça.

Le problème (sous firefox, pas sous IE) : le bloc conteneur n'encadre que le contenu situé dans le flux du document... sauf si ?
Tout ce qui y est positionné en absolu n'est pas pris en compte par le bloc conteneur qui ne s'étendra pas pour l'encadrer...

Une petite page d'essai pour les tests:
- l'entête et le menu ne sont pas positionnés, et restent dans le flux
- (ici le menu est après le contenu, dans le balisage)
- le contenu est positionné en float: right;
Modifié par (19 May 2006 - 22:06)

Le height auto ne fonctionne pas.
Je ne veux pas lui donner une hauteur fixe, car le contenu changera dynamiquement, il m'est impossible de prévoir la taille du bloc qui va être a l'interieur.

J'en ai besoin pour faire un fond tres clair et encadré avec une ombre l'intégralité du site.
Je cherche des solutions simples, si jamais je trouve je tiendrais au courant via ce post.
Si qqun a d'autre idée pour tester?
Et a savoir que tout le contenu est en postion : absolute avec des balise de postionnement en pixel .
Modifié par ketby (19 May 2006 - 20:54)

Tu cherches à faire adopter à ton bloc conteneur le comportement d'un bloc qui contiendrait des éléments dans le flux alors que tu n'en as aucun en positionnant tous les éléments en abolute.
A celà tu n'as pas tellement d'alternatives :
- soit tes éléments sont tous avec des positions absolues, et tu en connais donc exactement la taille et tu adaptes la taille du conteneur
- soit tu intègres des éléments dans le flux à l'intérieur de ton conteneur pour qu'il s'adapte...

d'accord avec ce que cktoon vient de dire, si tu veux que ca bouge et bien il va falloir un peu de relatif dans ton histoire ! esseye déja en gardant ton cadre_central en heigth:auto; puis pour ton "center" met ceci :

center{
	position : relative;
	width : 955 px;
	margin-top : 140px;
}

aprés je suppose que tu auras à retoucher tes menus mais c'est comme ça !

J'ai réussi à arranger ma page de test et à régler le problème. On est bien-sûr obligé de positionner les éléments avec float pour qu'ils puissent être encadrés par le bloc conteneur.

La page est ainsi construite :
- entête : pas de positionnement *
- menu : pas de positionnement *, situé après le contenu dans le balisage
- contenu : positionné en [i]float: right;
- pied-de-page : pas de positionnement*, clear: both;


Le clear: both; du pied-de-page le force à se placer sous le contenu, si on l'enlève, il remonte. Ici, sans ce pied-de-page (et sa propriété), impossible de faire descendre le cadre du conteneur sous le bloc de texte.[/b]

Pour tester, il suffit de retirer ce clear: both avec Web developer.

* pas de positionnement fait référence au positionnement relatif, absolu, ou à float. Je ne parle pas des marges ici.


Edit - Je suis en train de regarder ton code ketby, mais il y a du boulot.
Modifié par (19 May 2006 - 22:51)

Je ne sais pas si tu te préoccupes de l'accessibilité, mais je trouve que tu as beaucoup trop d'informations qui passent par l'image.


Sans images, plus de menu, plus de titre de site, ou de rubriques...

Salut la foule

ketby a écrit :

Et a savoir que tout le contenu est en postion : absolute avec des balise de postionnement en pixel .

Quelle est ce principe de tout mettre en postion : absolute ??? ...

A+

Salut

Je vais t’aider un peux quelle est le design que tu veux exactement

A+

Le meme que j'ai la, meme si j'ai pas totalement fini de dévelloper la forme et la position des bloc centraux, tout ce que je veux c'est que sa soit le plus standar possible,et que si un jour je veux changer de design , je n'ai juste qu'a toucher au css.
C'est dans le but de travailler sur un projet assez gros pour un site de tournois ce jeux vidéo européen. Le but etant de devenir quelque chose d'enorme, (ce n'est pas le design de la page que j'ai donné,sa c'est pour m'entrainé), je me dois de devenir très vite un pro du css, a moins que tu sois interesser gégé envoi moi un mp si tu veux plus de détail.

Voilà Ketby, j'ai fini !
J'ai refait ton site à ma sauce, en essayant de rester proche du tiens : http://univers-fusco.com/tests/ketby/ketby.html

En gros :

- code : XHTML 1.0 strict valide
- CSS : valide - 2 avertissements (on ne peut pas les virer ici : fond transparent...)

a écrit :
* Ligne : 256 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : #header1 h1
* Ligne : 289 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : #header2 li a:hover

- liens d'évitement (+raccourcis-clavier)
- fil d'Ariane
- 1 menu haut sous forme de liste : recourt à float: left; sur les liens pour forcer le comportement en ligne malgré le display: bloc; nécessaire pour utiliser les images
- 1 menu gauche sous forme de liste : positionnement absolu
- 1 menu droit sous forme de liste : positionnement absolu
- 1 bloc texte : dans le flux
- 1 pied-de-page : avec clear: both; - sert à amener le cadre du bloc conteneur tout en bas
- tailles de polices relatives
- Rendu presque identique sous FF ou IE
- Les menus latéraux sont placés sous le contenu, dans le balisage, pour ne pas gêner en cas de CSS désactivée


REMARQUES :
* Le bloc texte possède une hauteur minimale : il faut agrandir celle-ci si on rajoute des menus supplémentaires. Explication : le bloc texte repousse le pied-de-page (qui repousse le cadre du conteneur) ; sans hauteur minimale et sans suffisamment de contenu, les menus gauche et droit positionnés en absolu déborderaient du conteneur principal.
Vu que _height: auto; n'est pas valide, j'ai procédé ainsi pour les height (IE) et min-height (FF) :

#texte {
	(...)
	height: 389px; [#gray]/* valeur lue par IE et FF 
             - IE comprend hauteur minimale, FF hauteur maximale */[/#]
	min-height: 389px [#gray]/* hauteur minimale lue par FF */[/#]
	}
#contenu>#texte {height: auto;}[#gray]/* on annule la hauteur fixe pour FF */[/#]

* À charge pour toi de modifier les couleurs et remettres tes images sur les menus latéraux.

Bon, -> dodo...


Edit -- On peut avoir un comportement marrant sur le menu haut en rempaçant une ligne :

#header2 li a:hover {
	color: #ffffcc;
	background-color: transparent;
	[#orange]text-decoration: overline;[/#]
	}
        ->
#header2 li a:hover {
	color: #ffffcc;
	background-color: transparent;
	[#orange]border-top: 5px solid #333;[/#] /* décale l'onglet vers le bas au survol */
	}

Modifié par (20 May 2006 - 03:50)

Merci pour toute tes indications, je prend modèle de ton css, et je vais faire sa à ma sauce, avec des float pour le principal, et n'utiliser l'absolute que vraiment quand c'est obligatoire.
Merci bcp encore de ton aide
A bientot peu etre

salut !

Je comprends pas neko pourquoi tu es besoin d'un font transparent on fond blanc ferait l'affaire non?

Re-bonjour,

Voilà, c'est fait : sur cette page-là, les colonnes menu gauche, contenu central et menu droit
sont toutes en float: left;.

En plus de modifier le positionnement et de remettre le menu gauche au dessus du texte dans le balisage, j'ai dû rajouter un #contenu>#menuGauche {margin-left: 10px;} pour passer une valeur différente entre IE et Firefox sur menuGauche.

Au final, l'affichage est quasiment identique à l'autre page.

(J'ai aussi modifié le menu comme dit dans mon message précédent sur celle-ci.)
Modifié par (20 May 2006 - 11:04)

a écrit :
Je comprends pas neko pourquoi tu es besoin d'un font transparent on fond blanc ferait l'affaire non?

Non, car ce sont les textes qui sont positionnés sur des images : le titre du site sur la bannière du haut, les liens du menu haut sur des images bouton.

Si on met un fond blanc à ces textes, ça va faire une bande blanche et cacher l'image derrière le texte. On pourrait ne pas spécifier de fond, mais l'avertissement serait toujours là.
Avec transparent, on peut espérer que lorsque la recommandation CSS3 sera effective, le validator reconnaisse la propriété transparent et supprime l'avertissement.

Ici, on peut éviter le premier avertissement si on ne spécifie aucune couleur à #header h1, en se contentant de laisser l'héritage faire son boulot (sur les navigateurs qui l'applique) après avoir spécifié cette couleur sur un élément parent (comme le body ici).

Edit -- j'ai un peu la tête dans le... pas assez dormi. Je ne peux pas supprimer le second avertissement qui concerne la couleur de lien au survol.
Modifié par (20 May 2006 - 11:05)

Je sais que je débute mais pour le header autant mettre le titre dans l'image via photoshop et utilisé un tire <h1> avec le alt l'image et ca ne pose pas de probleme au validator, mais peut etre que je dis une con..rie! Remarque l'avantage que tu as c'est de ne pas avoir un cadre alt autour de ton texte comme ça!
Modifié par rvantony (20 May 2006 - 11:32)

Salut a tous

Pour Info j'avais envoyé a ketby en PM un essai

pour le voir http://test.hysatech.com/aidecreation.html

A+

Impressionnant
Merci bcp.
Je vais essayer de reprendre sa pour moi alors, merci bcp tous, si jamais j'ai d'autre probleme, je reviendrais vous voir
Merci encore a tous.