28173 sujets

CSS et mise en forme, CSS3

bonjour, je suis nouveau sur ce forum mais l'utilisant depuis longtps et bloquant depuis pas mal de temps je vous fait parvenir mon probleme en esperant une réponse.
j'ai changé de doctype et depuis, la mise en page fait des siennes.
je suis passé d'un :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html xmlns="http://www.w3.org/1999/xhtml"lang="<%= $this->getApplication()->getGlobalization()->getCulture() %>">


à:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


jusqu'ici cela ne vous parle pas mais voici l'objet de ma recherche:
j'ai un div(ou table ou n'importe quoi du moment que ça marche..) dans lequel on trouve 2 lignes (le header et le container) dont l'une est fixe (le header) et l'autre (le container) variable en fonction de la fenetre du navigateur. il s'agit ni plus ni moins d'un redimensionnement automatique par css pour eviter la lourdeur du javascript (je limite son utilisation au max car tres lourd).
avec le 1er doctype: aucun probleme
avec le nouveau (soit disant plus normalisé... donc obligatoire): sous FF le div se cale sur son contenu et sous IE, le div prend 100% de la fenetre globale et donc deborde de "la taille du header".
je sais pas si je me suis fait bien comprendre mais si vous avez des idées, n'hesitez pas et demandez moi tt ce que vous voulez savoir pour m'aiguiller dans une solution probable....


bien à tous,


Pascal
Bonjour,

Si "changer de doctype" s'est résumé à modifier la première ligne des fichiers html, il y a maldonne.

As-tu validé tes pages ? Passer de HTML 4.01 Transitional à XHTML Strict implique un certain nombre de changements dans la syntaxe des pages, ainsi que la disparition de certains attributs.

a écrit :
soit disant plus normalisé... donc obligatoire
C'est faux. HTML 4.01 est un langage parfaitement normalisé, tout autant que XHTML 1.0 ! XHTML 1.0 n'est qu'un "reformatage" de la syntaxe d'HTML 4.01 pour arriver à une syntaxe plus rigoureuse de type XML. Recoder toutes ses pages pour passer de HTML 4.01 à XHTML 1.0 n'a pas grand intérêt, s'il n'y a pas une autre bonne raison que de suivre la tendance Smiley decu

Par contre, il faut utiliser la définition complète du doctype pour rester en mode de rendu standards (Recommended list of DTDs), même en HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Modifié par Thomas D. (16 Mar 2007 - 11:35)
oui effectivement, en dehors de suivre le mouvement, je n'ai rien trouvé sur le net qui me permette d'affirmer une normalisation.
en ce qui concerne la modification du code, j'ai effectivement quelques changements comme la fermeture des balises et ce genre de modifications mais rien en rapport avec ma mise en page.

quant à l'HTML, il s'agit d'une erreur de ma part opérée lors de test. j'avais effectivement le doctype que tu m'as indiqué.

mon probleme résulte du changement de doctype mais honnetement je suis graphiste avant tout et mes informaticiens se chargent du reste.
par contre personne n'a été en connaissance de me montrer la solution d'un redimenssionnement CSS par une application utile et effective des Heights 100% et autre jeu de table.

j'ai parcouru bcp de tuto et d'aide mais aucuns ne correspond vraiment a mes attentes.

je m'explique:

j'ai un header de hauteur fixe et de largeur 100%.
j'ai un container de hauteur 100% de la page (ce qui reste entre le header et la barre d'état du navigateur) et de largeur 100%.

lorsque mon container est vide, il n'a pas de hauteur (j'ai même tenté la solution ).
je vous fais parvenir deux imprim' écran expliquant mon pb:

upload/11417-miseenpage.jpg

http://brushfire.free.fr/alsa/images/mise_en_page_voulue.jpg
http://brushfire.free.fr/alsa/images/mise_en_page_effectiveFF.jpg
http://brushfire.free.fr/alsa/images/mise_en_page_effectiveIE.jpg

voilà merci d'avance
brushfire a écrit :
j'ai changé de doctype et depuis, la mise en page fait des siennes.

Tu es passé d'un doctype incomplet et donc invalide, faisant passer IE en mode de rendu Quirks, à un doctype valide (mode de rendu standard).

Forcément, ça peut avoir quelques conséquences sur le rendu. Smiley cligne
oui.. effectivement.. mais il s'agit là d'une erreur que j'ai mentionné et sur laquelle j'avoue toutes mes fautes.

dorenavant j'aurai aimé quelques aides des maitres incontestés des CSS d'AlsaCreations..

vous avez compris mon probleme de mise en page ?
Smiley eek

le soleil tape trop à Montpellier Smiley langue et j'ai du mal à concentrer toute mon attention sur ce pb... ça fait une semaine passée que je suis dessus , ça commence à me ... mignon mignon, voilà pourquoi je viens aux robins des bois ou autre John Mc Lame du CSS Smiley rolleyes ....
La problématique des hauteurs à 100% et des hauteurs à "100% moins un bout d'en-tête" a été traitée plusieurs fois sur le forum. Une petite recherche ne peut pas faire de mal. Smiley cligne

Le plus simple sera sans doute de faire une page en hauteur minimale de 100% (voir ce tutoriel mais sans tenir compte de ce qui est strictement relatif au pied de page), puis de placer l'en-tête à l'intérieur. On utilisera la page avec hauteur minimale à 100% pour placer l'image du bas.

Quoi qu'il en soit, il ne sera pas possible de donner une hauteur de "100% moins la hauteur de l'en-tête" à ton bloc de contenu. Ne pas chercher dans cette direction, à moins que l'en-tête n'ait une hauteur en pourcentages (là, ça sera peut-être jouable). Il va falloir jouer à l'illusionniste, et donner l'impression d'un bloc de contenu de la bonne hauteur alors qu'en fait une partie des images qui le dessinent viendront du conteneur global, et une autre partie (supérieure) du bloc de contenu lui-même.

C'est complexe à gérer si on ne maitrise pas les CSS. Si ça n'est pas le cas : il me semble peu rentable de perdre trop de temps sur ce point de mise en page. Faire plus simple et plus raisonnablement réalisable, et attendre d'avoir plus d'expérience avec les CSS pour réaliser ce genre de subtilité.

(Sinon, il doit y avoir des choses jouables avec un tableau à deux cellules... je ne sais plus trop.)
merci bien pour toutes ces propositions mais j'avais déjà pensé à certaines qui se sont avérées non-réalisables.
le pb etant que mon header est fixe donc en px..
la solution existe et je l'ai déjà réalisée.. en javascript mais le tps de chargement atteint les 2secondes (prado qui tourne derriere est tres lourd et avec le javascript.. on s'en sort plus.. c humainement acceptable mais on peut et on doit faire mieux).

je suis assez tétu et je trouverai la solution.. mais si ya des bouts de réponse.... JE SUIS PRENEUR !!
sinon ben je vous remercie car les réponses sont rapides
brushfire a écrit :
merci bien pour toutes ces propositions mais j'avais déjà pensé à certaines qui se sont avérées non-réalisables.
le pb etant que mon header est fixe donc en px..

Comme je le disais, il y a un coup à jouer avec un conteneur global en min-height: 100%, peut-être un pied de page décoratif positionné en absolu, et des images de fond.

Par contre, ça risque d'être peu gérable (voire impossible) s'il faut faire quelque chose en largeur fluide...

Désolé, donc. (En même temps, ça ne me semble pas être important au point de mobiliser des heures et des heures de tests et de recherche...)