CSS hauteur 100% - Web design - Graphisme
Marsh Posté le 22-03-2004 à 20:03:21
ca va sur prog plutot ca nan ?
Marsh Posté le 22-03-2004 à 20:16:54
oui et non... Car le CSS n'est pas un language tel que le php avec des boucles ou autre... c'est plutôt un outils de présentation graphique sous forme de programmation.
Si je post ici et pas dans programmation, c'est que ce sujet interesse plus le designer que le programmeur pur, car le css à pour but de complétement dissocier le code de la forme
Marsh Posté le 22-03-2004 à 20:26:43
pyksel a écrit : Le css est un superbe outil de présentation web. A condition que celui-ci soit maîtrisé... |
Juste pour embêtter le monde un id est unique
Bon plus sérieusement, ça m'interesse aussi cette histoire
Marsh Posté le 22-03-2004 à 20:35:28
oui : un id est unique, mais tu peux l'utiliser autant de fois que tu veux... En fait tu le defini dans le style #div1 qui est ta definitaion. Pour l'emploi html tu utilise <div id="div1">
Marsh Posté le 22-03-2004 à 21:19:03
et ça valide de l'utiliser plusieurs fois? il me semble que le validateur avait fait la gueule la denière fois que j'ai fais ça : /
Marsh Posté le 22-03-2004 à 21:25:35
le validateur fais la tronche si plusieurs objets ont le meme id.
un ID est unique.
si c'est pour appliquer a plusieurs objets -> class
Marsh Posté le 22-03-2004 à 23:26:45
euh je veux aps faire mon relou mais les tableaux ne permettaient pas non plus l affichage height 100% comme tu l entends
pour la bonne raison qu on ecrit de droite a gauche (edit : hihihi je laisse la coquille )et c est comme ca que ton navigateur va remplir les donnees et que le 100% width fonctionne
a 100% height il s arrete quand il n y a plus de donnees mais la longueur possible est infinie
c est ecrit dans un francais lamentable mais je pense vraiment que c est pas possible
(ca aurait peut etre deja été fait )
Marsh Posté le 23-03-2004 à 00:04:17
Merci aeron, mattc et ceam, c'est ce que je voulais dire pour le validateur bien sûr
Marsh Posté le 23-03-2004 à 06:41:04
Bon pour synthétiser, il n'est pas possible de créer des tableaux à 100% de hauteur... En fait si... http://www.pyksel.com
La partie blanche dans le degradé est un tableau html à 100% de hauteur...
le code commence ainsi :
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" class="bloc_principal">
<tr>
<td>
C'est ma class bloc_principal qui gére la hauteur... Ne regardez pas trop le code du html ni du css, y a pas mal de nettoyage à faire, d'autant plus que je remplace l'ensemble du contenu par des div... J'ai pu obtenir un div de 100% de haut, mais impossible de me souvenir comment. Là je recherche, j'avais pas noter tous les paramétres... Simplement ce dont je me souviens, c'est l'imbrication multible de div spéciaux dont certains sont des spacer... Si ca peut mettre sur la voie... Car je suis sûr qu'on peut y arriver...
Marsh Posté le 23-03-2004 à 08:00:40
si mes souvenirs sont bons, à peu près la même question a été soulevée dans le topic sur la faq css sur le forum programmation, je vais aller voir
Marsh Posté le 26-03-2004 à 10:15:47
il faut que html et/ou body ait une hauteur mise à 100% pour qu'un div ou une table puisse avoir une hauteur à 100% (vu que c'est une hauteur relative à leur conteneur, les éléments html et/ou body s'il sont au niveau le plus haut dans l'arborescence)
Marsh Posté le 26-03-2004 à 15:43:20
pyksel a écrit : Bon pour synthétiser, il n'est pas possible de créer des tableaux à 100% de hauteur... En fait si... http://www.pyksel.com |
en fait non ...
ca depasse chez moi sur mozilla en 1280*1024 si je suis pas en plein ecran (donc ca marche pas : un 100% width ne chipote pas)
et si c etait vraiment 100% height ca se redimensionnerait au fur et a mesure que je reduit la taille de ma fenetre ce qui n est pas le cas (ce qui arrive avec un 100% width)
c est plutot une taille fortuite due a la longueur de ton contenu
et je persiste a dire que si c etait possible on en aurait -par exemple- deja vu sur http://www.csszengarden.com/
Marsh Posté le 26-03-2004 à 19:18:31
VanessaUsedT0Live a écrit : |
Je neparle pas d'un 100% qui s'adapte à la taille navigateur -> ca oui, je sais que c'est pas encore possible , je parle d'un 100% d'un espace précis...
Marsh Posté le 26-03-2004 à 23:44:23
ben 100% de quoi alors ?
tu dis que sur ton site tu y es arrivé ..
arrivé a quoi ?
je comprends pas
par exemple sur ton site dans ta table du bas ...le div qui devrait etre conteneur ne fait pas 100%
c est de ca que tu parles ?
il faut utiliser la propriété clear
Citation : <div id="Layer1" style="position:relative; width:100%; z-index:1" class="bloc1"> |
(sinon je suis pas sur de l utilité des z-index....dreamweaver s en sert par defaut mais je ne m en suis jamais servi)
Marsh Posté le 27-03-2004 à 20:07:56
le height=100% pour un div fonctionne, mais sous un navigateur autre que IE (firefix par exemple)
Marsh Posté le 27-03-2004 à 21:27:30
swich a écrit : le height=100% pour un div fonctionne, mais sous un navigateur autre que IE (firefix par exemple) |
lis un peu les autres posts avant de dire des betises
Marsh Posté le 29-03-2004 à 04:09:55
swich a écrit : le height=100% pour un div fonctionne, mais sous un navigateur autre que IE (firefix par exemple) |
meme sur ie ca marche c est moi qui suis con
désolé
Marsh Posté le 22-03-2004 à 20:00:38
Le css est un superbe outil de présentation web. A condition que celui-ci soit maîtrisé...
Je me posais donc la question (qui pour le moment n'a pas de réponses), celle de trouver une astuce pour permettre l'affichage de <div> à 100% de hauteur...
Je m'explique... Quand on crée un style #div1{ height:100%; } on obtient pas les 100% de hauteur en fournissant le code html : <div id="div1>contenu</div> (sous ie notament)... Ca marche trés bien pour les largeurs...Mais pas les hauteurs... (ca fonctionne si on utilise pas des valeurs en % mais en pixels...)
On utilise donc un conteneur, quand on veut placer plusieurs <div> l'un à côté de l'autre... mais leur hauteurs ne sont pas homogéne pour peu que le style soit defini comme ceci :
#div1{
height:100%;
float:right; background-color: #EEEEEE;
}
L'attribut float servant à placer les div l'un à coté de l'autre dans le conteneur...
soit en html :
<div> <- Conteneur
<div id="div1>contenu1</div>
<div id="div1>contenu2</div>
<div id="div1>contenu3</div>
</div>
Donc je propose (si quelqu'un veut bien) qu'on puisse trouver une solution... J'ai testé différentes méthodes. Les hauteurs en pixels marchent trés bien, mais on ne maîtrise alors plus le contenu. C'est à dire qu'on ne peut pas créer de style div1 qui fonctionne de maniére général... Car on peut avoir des contenus trés long et d'autres plus court...