28173 sujets

CSS et mise en forme, CSS3

Probleme de boite contenu qui ne prend pas la taille voulue

Bonjour tout le monde,

J'ai commencé un site web : http://dragonnoob.free.fr et j'ai essayer de mettre cela en css.

Je suis débutant dans le domaine et ca fait longtemps que j'en avait pas fait en plus lol.

En tout cas j'aimerai avoir une information là-dessus.

En fait ma mise en page marche comme je le voudrai sous IE6 mais sous firefox ca ne fonctionne pas.

En fait le but sur mon interface est d'avoir un contenu dont la boite va s'aggrandire en meme temps que je vais ajouter du texte.

J'ai un peu regarder dans le forum mais les solutions que j'ai trouvé ne fonctionne pas ou je n'arrive pas a les mettres en place.

Voici le contenu de mon fichier css


*{
	padding: 0px;
	margin: 0px;
	text-align: left;
}

div.vide{
	clear: both;
	height: 0px;
	font-size: 0px;
}

body{
	text-align: center;
}

#global1{
	background-image: url('images/degradegauche.gif');
	background-repeat: repeat-y;
	width: 778px;
	margin: auto;
	border: 1px solid black;
	border-bottom: none;
	border-top: none;
}
#global2{
	background-image: url('images/degradedroit.gif');
	background-repeat: repeat-y;
	background-position: right;
	width: 753px;
	margin-left: 25px;
}
#principal{	
	border-top: none;
	border-bottom: none;
	height: 600px; /* cette ligne indique la hauteur du bloc menu */
	width: 728px;
	margin-right: 25px;
}
#header{
	background-image: url('images/header.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 728px;
	height: 175px;
}

#menugauche{
	background-image: url('images/kyologo.gif');
	background-repeat: no-repeat;
	margin-right: 7px;
	margin-top: 7px;	
	margin-left: 7px;
	float: left;
	display: inline;
	width: 175px;
	height: 370px; /* cette ligne indique la hauteur du bloc menu */
}

#contenu {
	border: 1px solid #D1D1D1;
	display: inline;
	float: right;
	height: 370px;
	width: 528px;
	margin-right: 7px;
	margin-top: 7px;	
	background-color: #F1F1F1;
	
}

#bas{
	background-image: url('images/footer.gif');
	background-repeat: repeat-x;
	background-position: center;
	width: 728px;
	height: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
	position: fixed;
	bottom: 50px;
}


Donc voila si vous avez des idées ca serai super.

Merci beaucoup
Bonsoir,

Deux petites remarques pour commencer :

1 - concernant le prologue xml : <?xml version="1.0" encoding="utf-8"?>
C'est très bien avec un balisage en XHTML 1.1 (qui est de type strict), SAUT pour Internet Explorer. Le DOCTYPE que tu utilises (<!DOCTYPE html (...) xhtml11.dtd">) dis aux navigateurs que ton site est conforme aux standards et qu'il doit être rendu (affiché) comme tel.
Seulement, sur IE, le prologue XML le fait passer en mode Quirks (en mode de rendu propriétaire, où il affiche tout à sa saute personnelle). Donc, on évite si ce n'est pas nécessaire, et si on veut appeller le mode standard
sous IE (ce qu'il faut ici).

2 - concernant le XHTML 1.1 servi avec un type-mime "text/html"
Même si ce codage fonctionne normalement avec ce type-mime, il convient de le servir en tant que "application/xhtml+xml". C'est un type de fonctionnement propre aux XML avec lequel la moindre erreur ne pardonne pas : si le moteur de rendu XML d'un navigateur tombe sur une erreur de balisage (comme une balise mal fermée : exemple : <br >), la page ne s'affiche pas et on ne verra qu'une erreur et sa position.

Pour déclarer ce type-mime, on ne peut pas utiliser la balise META avec "content-type", ça ne fonctionne pas.
Pour ça on peut :
- utiliser une extension de page en .xhtml
- modifier les entêtes avec un code exécuté côté serveur (comme du PHP)
- modifier certains fichiers propres au fonctionnement du serveur

Il y a encore un problème, si tu déclares comme il faut ton site avec le type-mime "application/xhtml+xml", IE ne pourra pas afficher les pages car il ne le comprend pas (il essaye d'ouvrir une boîte de téléchargement pour la page).
Il faut donc en plus faire de la négociation de contenu : c'est à dire servir aux navigateurs qui le comprennent le bon type mime, et à IE, un type mime de type "text/html".

Pourquoi ne pas donner du "text/html" à tous les navigateurs ? Comme dis plus haut, ce n'est pas correct avec du XHTML 1.1. Donc, la solution est de déclarer du XTHML 1.1 avec type-mime correct à ceux qui peuvent, et du XHTML 1.0 en "text/html" aux navigateurs type IE. (Le XHTML 1.0 strict peut être servi avec ce type-mime pour un souci de rétro-compatibilité ave les vieux navigateurs).

Personnellement, je te conseille de ne pas t'embêter avec ce codage un peu restrictif (il y a pas mal de fonctionnalités interdites et qui empêche toute validation, bien qu'elles soient conseillées au niveau accessiblilité...), et d'utiliser du XHTML 1.0 strict. (Ce qui revient presque au même.)

Une lecture traduite de l'anglais qui explique que Servir du XHTML en tant que text/html jugé néfaste.




Rien à voir avec les remarques précédentes. Un petit truc que tu as du voir sur de nombreux sites : les "lorem ipsum".
Pour ne pas t'embêter à écrire testing et obtenir du contenu imitant mieux un texte véritable, tu peux visiter ce site : http://www.lipsum.com
On peut lui faire générer autant de paragraphes, listes, mots, que nécessaire.




Concernant ton problème, je vois que tu as attribué une hauteur fixe (370 px) au bloc div#contenu.
Sauf erreur, IE interprète "height: 370px;" avec le sens de "min-height", c'est à dire "hauteur minimale". Il fera donc 370 px de hauteur minimale, mais il devrait s'étendre en fonction du contenu. Pour un navigateur conforme, une hauteur fixe de 370px ne changera jamais en fonction du contenu de celle-ci.
Si tu supprimes cette ligne, le div prend une hauteur "auto" par défaut, et s'agrandit en suivant le contenu. (On peut aussi écrire "height: auto;".)

Il y a également un problème avec ton pied-de-page (footer). Sa position est de type "fixed", fixe. Seulement, IE ne comprend cette position que pour un élément contenu dans le BODY et ne l'interprète pas ici.
En revanche, les navigateurs qui comprennent, comme Firefox, lui confèrent bien une position fixe : même si tu fais défiler la page, sa position reste toujours la même. Je parle de problème car, si tu corriges celui de la hauteur du div précédent, ton bas-de-page fixe va rester en plein milieu (ce qui n'est pas très esthétique pour le moment).

Il faut donc lui attribuer un autre positionnement si tu veux le placer en bas de page.



Dernier petit conseil, si tu permets : pense à utiliser des commentaires pour rendre ton balisage plus lisible, et éviter tout problème.

Un exemple, quand tu as un grand bloc div avec plein de contenu : 
[#gray]<!-- bloc menu -->[/#]
<div id="menu">
    (contenu du menu...)
</div>
[#gray]<!-- fin du bloc menu -->[/#]

[#gray]<!-- bloc contenu-->[/#]
<div id="contenu">
    (contenu du site...)
</div>
[#gray]<!-- fin du bloc contenu -->[/#]

...
Ces commentaires permettent de délimiter un bloc div, de savoir où il commence et surtout, où il termine. (Ainsi, on est assuré de n'avoir jamais de </div> en trop ou manquants - ce qui arrive assez souvent à certains.)
Modifié par Smiley neko (16 May 2006 - 01:49)
Rebonjour,

Déja merci beaucoup Neko pour ta réponse j'ai retravaillé un peu certains trucs et j'ai réussi a patcher mon probleme de boite contenu. Maintenant elle expand au fur a mesure du texte.

J'ai enlever height et j'ai mis un min-height a la place pour que firefox fasse ca comme il faut.

Le seul probleme maintenant est que explorer rend la boite plus petite que la taille minimum que je voulais lui imposer a la base mais avec du contenu dedans ca ne se verra pas donc c'est un moindre mal.

Maintenant il me reste mon probleme de footer qui s'affiche comme je le veux sous explorer mais pas sous firfox.

Il se retrouve tout en bas et je n'arrive pas vraiment a comprendre pourquoi.

Encore une fois si vous avez des idées ca serai super Smiley lol
Rebonjour j'ai résolu mon probleme en ajoutant un border-bottom:white; a mon id contenu. Je ne comprend pas pourquoi cette solution a fonctionnée mais aprés avoir fait ca mon interface s'affiche comme il faut dans IE6 et firefox.

J'avoue ne pas comprendre pourquoi cela a résolu mon probleme donc si vous avez des explications ce serai parfait Smiley smile

Merci
La seule chose que corrige l'ajout d'une bordure ou d'un padding, c'est la fusion des marges qui créer des espaces (ou en supprime) entre deux blocs ayant des marges contiguës identiques. C'était donc probablement ça ton problème.

Ton site est relativement simple pour le moment, mais le prologue XML risque de te jouer de mauvais tours avec IE.
Modifié par Smiley neko (16 May 2006 - 23:36)
Sujet clos
Aller à