un footer avec des divs [ - Job's Done - ]

un footer avec des divs [ - Job's Done - ] - HTML/CSS - Programmation

Marsh Posté le 11-03-2004 à 18:58:00    

Maintenant avec des divs...


Message édité par xkamui le 14-03-2004 à 22:04:24
Reply

Marsh Posté le 11-03-2004 à 18:58:00   

Reply

Marsh Posté le 11-03-2004 à 19:35:02    

Utilise plutot les css...
Je te laisse chercher qq renseignement sur ces 2 sites :
http://openweb.eu.org/
http://www.alsacecreations.com/articles/ (Merci Cerel !!!)

Reply

Marsh Posté le 11-03-2004 à 19:43:24    

nota : j'utilise déjà des CSS, mais, je vais checker tes liens quand même...
 
mais j'ai rien trouvé qui ressemble à ce que je recherche...


Message édité par xkamui le 11-03-2004 à 19:46:54
Reply

Marsh Posté le 11-03-2004 à 19:47:30    

Tu fais une fort mauvaise utilisation des CSS...
La plupart de tes site sont très mal réalisé dun point de vue conceptuel...
 
XHTML = contenu
CSS = présentation
 
Alors que dans tes site, tu utilise encore des tableau pour présenter des page entre autre...  
 
Au fait, ton site divx-lister bug complétement sur FireFox !

Reply

Marsh Posté le 11-03-2004 à 19:48:39    

Tu va me dire que tu as eu le temps de consulter les site ke je tai donné en 3mn ?
 
(cf lheure de l'edit, la 2e phrase ny étais pas tout de suite....)

Reply

Marsh Posté le 11-03-2004 à 20:17:35    

krtek a écrit :

Tu va me dire que tu as eu le temps de consulter les site ke je tai donné en 3mn ?
 
(cf lheure de l'edit, la 2e phrase ny étais pas tout de suite....)


c'est un rapide !!!  :lol:


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 11-03-2004 à 20:45:51    

j'ai en effet, checké tes deux site, mais j'ai rien trouvé sur les footer...
 
et plus drole encore, quand je tape 'footer' dans le moteur de recherche de http://openweb.eu.org/, il me trouve 11 réponses pour le terme 'futur'... alors euh...
 
toujours est-il que, j'aimerais bien mettre ça au point : http://scott.sauyet.name/CSS/Demo/FooterDemo1.html mais avec mes tablos... c possible ??

Reply

Marsh Posté le 11-03-2004 à 22:24:35    

Ben pk ne pas faire comme sur le site que dont tu donnes le lien?
 
la mise en page avec des tableau, c'est nul de toute façon, et complétement dépassé en plus !!!
 
et au contraire de ce que tu dis, les 2 liens que je donne contiennent des articles sur le positionement CSS, qui permet de faire ce que tu veux avec bcp plus de classe qu'avec des tableau
 
Et pr couper court a la discussion, ce que tu veux faire est, je pense, impossible avec des tableau, ou alors très compliqué, alors qu'avec des CSS, c'est fait en 10mn chrono montre en main et en tappant avec les pieds !

Reply

Marsh Posté le 12-03-2004 à 11:25:33    

Reply

Marsh Posté le 12-03-2004 à 14:34:32    

okay, alors maintenant, je vais essayer avec des divs...
 
comment je dois m'y prendre ??
 
voilà ce que j'ai commencé :

Code :
  1. <style>
  2. .div-left {background: #CCC; border: 2px solid #F00; float: left;}
  3. .div-alls {background: #999; border: 2px solid #0F0;width: 900px;}
  4. .div-main {background: #666; border: 2px solid #00F;}
  5. .div-foot {background: #333; border: 2px solid #F0F;}
  6. .div-rigt {background: #FFF; border: 2px solid #FF0; float: right;}
  7. </style>
  8.   </head>
  9. <body>
  10. <div class="div-alls">
  11. <div class="div-left">LEFT PART</div>
  12. <div class="div-main">MAIN PART</div>
  13. <div class="div-foot">FOOTER PART</div>
  14. <div class="div-rigt">RIGHT PART</div>
  15. </div>
  16. </body>


 
es-ce que c'est bon ??

Reply

Marsh Posté le 12-03-2004 à 14:34:32   

Reply

Marsh Posté le 12-03-2004 à 14:36:07    

Ben vu que tu as éditer ton premier post, on ne sait pas exactement ce que tu veux finalement :)
Si tu veux des modèles avec footer : http://www.alsacreations.com/articles/modeles/


Message édité par sibelius le 12-03-2004 à 14:36:51

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 12-03-2004 à 14:42:52    

oupsss... oui, alors re-voilà une image pour illustrer :  
 
http://xkamui.com.free.fr/divs/divers/hfr/divs-alls.gif
 
ce qui est en vert, est de taille variable, et avec un bg spécifique à chaque.
ce qui est en bleu à une taille fixe de 900px.
ce qui est en rouge devrais rester en bas, koi k'il arrive.


Message édité par xkamui le 12-03-2004 à 14:43:53
Reply

Marsh Posté le 12-03-2004 à 15:10:16    

bon, je viens de faire plusieurs essais, et voilà où je coince :  
 
http://www.gconsult.fr/works/decor [...] -foot.html
http://www.gconsult.fr/works/decor [...] foot2.html
dans cette configuration, je suis confronté à 2 problèmes...
 

  • le premier est que, bien que les images shade-left.png et shade-right.png fassent chacune 10px de large, lorsque que j'affiche cette page, un petit écart apparait de chaque côté dedu div principal, laissant voir le BG... c'est pas bô...
  • le second, c'est que mon footer ne veux pas se mettre en bas... quand j'utilise un 'position: absolute; bottom: 0;', il me le met bien en bas, mais plus loin que la page, occasionnant un scrollbar vertical, et aussi au centre de mon div main...


Message édité par xkamui le 12-03-2004 à 15:11:25
Reply

Marsh Posté le 14-03-2004 à 20:33:00    

Ayé, j'ai presque réussi.. ouff oufff
 
voici un exemple du résultat :  
http://www.gconsult.fr/works/decor37.fr/test/test.html
 
si vous pouvez me dire ce que ça donne sur d'ôtre navigateur, ça m'arrangerais, lol
 
les soucis qu'ils me restent sont les suivants :  
 

  • lorsque j'ai trop de texte, mon footer ne suit pas à la fin de mon texte, il reste placé en bas de ma hauteur de fenêtre.
  • dans le même cas (quand trop de texte) mes bordure de gauche et droite ne prennent pas plus de 100% de ma hauteur...


siouplait, un petit geste pour me sortir de là... :jap:


Message édité par xkamui le 14-03-2004 à 20:48:31
Reply

Marsh Posté le 14-03-2004 à 20:57:58    

xkamui a écrit :

Ayé, j'ai presque réussi.. ouff oufff
 
voici un exemple du résultat :  
http://www.gconsult.fr/works/decor37.fr/test/test.html
 
si vous pouvez me dire ce que ça donne sur d'ôtre navigateur, ça m'arrangerais, lol
 
les soucis qu'ils me restent sont les suivants :  
 

  • lorsque j'ai trop de texte, mon footer ne suit pas à la fin de mon texte, il reste placé en bas de ma hauteur de fenêtre.
  • dans le même cas (quand trop de texte) mes bordure de gauche et droite ne prennent pas plus de 100% de ma hauteur...


siouplait, un petit geste pour me sortir de là... :jap:  


 
Déjà testé dans tous les sens.
 
Aucune solution réellement viable uniquement avec des divs si tu veux 100% de hauteur quand la page n'est pas remplie.

Reply

Marsh Posté le 14-03-2004 à 20:59:22    

krtek a écrit :


 
Et pr couper court a la discussion, ce que tu veux faire est, je pense, impossible avec des tableau, ou alors très compliqué, alors qu'avec des CSS, c'est fait en 10mn chrono montre en main et en tappant avec les pieds !


 
Non c'est le contraire.
 
Un seul tableau suffit pour faire une  page de 100% de hauteur qui s'agrandit en fonction du contenu en poussant le footer.
 
Le faire en div sans passer par des hack est impossible...  :hello:

Reply

Marsh Posté le 14-03-2004 à 21:02:08    

Si tu as 2 possibilités (tout est dans les CSS dans les deux cas):
 
1) Tu utilises une table avec 2 cellules : une pour le bas (footer) exprimée en px, celle du haut en auto, table à 100%
 
2) Tu fais avec des divs, mais tu devras utiliser des hack qui ne fonctionneront peut être plus dans les futures versions des navigateurs...

Reply

Marsh Posté le 14-03-2004 à 21:03:14    

je vais rester avec mes cellules je pense.. mais c'est possible de mettre un height: auto; dans un style ??

Reply

Marsh Posté le 14-03-2004 à 21:05:14    

xkamui a écrit :

je vais rester avec mes cellules je pense.. mais c'est possible de mettre un height: auto; dans un style ??


 
.nom-table
{
 height : 100%;
}
 
.cell-haut
{
 height : auto;
}
 
.cell-bas
{
 height : 20px;
}
 
 
et dans ton xhtml :
 
<table class="nom-table">
<tr>
<td class="cell-haut"></td>
</tr>
<tr>
<td class="cell-bas"></td>
</tr>
</table>

Reply

Marsh Posté le 15-03-2004 à 08:02:16    

Hermes > ça ne fonctionne pas chez moi. Ni sur IE, ni sur FB :(
http://www.alsacreations.com/divers/test.htm


Message édité par sibelius le 15-03-2004 à 08:03:30

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 10:16:43    

Heu... Ce que j'ai écri, c'est le principe hein...
 
Il faut html,body {height : 100%; } et fixer la largeur souhaitée aussi...

Reply

Marsh Posté le 15-03-2004 à 10:22:37    

maintenant, il faut voir si avec le patch IE7 il n'est pas enfin possible de réaliser cela proprement.

Reply

Marsh Posté le 15-03-2004 à 10:27:33    

gizmo a écrit :

maintenant, il faut voir si avec le patch IE7 il n'est pas enfin possible de réaliser cela proprement.


 
Ha oui, c'est vrai ça.  :jap:  

Reply

Marsh Posté le 15-03-2004 à 10:30:26    

Hermes > euh non, toujours pas... en tout cas pas sur IE (même lien)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 10:38:33    

SIBELIUS a écrit :

Hermes > euh non, toujours pas... en tout cas pas sur IE (même lien)  


 
Gnéé ?  :heink:  
 
Je viens de vérifier et ça passe sans problème avec IE 5.5... Avec le 6 ça passe pas ?

Reply

Marsh Posté le 15-03-2004 à 10:51:28    

En tout cas, le lien que je t'ai donné (http://www.alsacreations.com/divers/test.htm) ne passe pas sur IE6 (c'est ok sur firebird par contre)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 10:54:09    

Prologue xml

Reply

Marsh Posté le 15-03-2004 à 10:57:16    

"Prologue xml" > je ne le mets jamais, ai-je tort ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 10:58:44    

SIBELIUS a écrit :

"Prologue xml" > je ne le mets jamais, ai-je tort ?


 
oui

Reply

Marsh Posté le 15-03-2004 à 11:10:08    

ok, ça évite le mode quirck de IE6 c'est bien ça.
Si je le mets, il comprendra correctement les tailles de boites ... ou est-ce l'inverse justement ?
 
Après renseignements : " La présence d'un prologue XML (<?xml version="1.0"?> ) fait basculer plusieurs navigateurs (Opera 7, MSIE 6 Windows) dans le modèle de boîte Microsoft, en dépit de la DTD XHTML?"
>>> Moi au contraire, je ne veux pas avoir un modèle de boite faux sur mes documents   :(


Message édité par sibelius le 15-03-2004 à 11:13:33

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 11:17:04    

SIBELIUS a écrit :

ok, ça évite le mode quirck de IE6 c'est bien ça.
Si je le mets, il comprendra correctement les tailles de boites ... ou est-ce l'inverse justement ?
 
Après renseignements : " La présence d'un prologue XML (<?xml version="1.0"?> ) fait basculer plusieurs navigateurs (Opera 7, MSIE 6 Windows) dans le modèle de boîte Microsoft, en dépit de la DTD XHTML?"
>>> Moi au contraire, je ne veux pas avoir un modèle de boite faux sur mes documents   :(  


 
Le prologue xml va devenir indispensable à l'avenir... Donc, il le faut point.
 
Et pour les "boites", rien n'est faux avec le prologue... Je sais pas où tu as été chercher ça... Je travaille uniquement avec le prologue depuis 1 an, et jamais de problème.
 

Reply

Marsh Posté le 15-03-2004 à 11:20:34    

hermes le messager a écrit :


Et pour les "boites", rien n'est faux avec le prologue... Je sais pas où tu as été chercher ça...  


Le prologue fait basculer dans le modèle de boîte Microsoft, qui est différent du modèle Standard...
Si les deux sont différents, il y'en a bien un des deux qui est bon et l'autre faux, non ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 11:23:35    

SIBELIUS a écrit :


Le prologue fait basculer dans le modèle de boîte Microsoft, qui est différent du modèle Standard...
Si les deux sont différents, il y'en a bien un des deux qui est bon et l'autre faux, non ?


 
Moi ma politique est d'avoir EXACTEMENT la même feuille de style pour IE 5.5+, Mozilla 1+ et opera 7+
 
Je ne triche pas, et je n'utilise jamais de hack qui risquent un jour de ne plus être pris en compte...

Reply

Marsh Posté le 15-03-2004 à 11:27:06    

hermes > oui je suis entièrement d'accord sur ce principe et je suis contre l'utilisation de hacks également.
En clair, tu me dis qu'il est plus compatible et plus propre d'utiliser le modèle de boite Microsoft non standard que celui proposé par les normes ?
(y'a pas de sous-entendu dans ce que je dis, je veux simplement comprendre et forger mon avis)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 11:29:29    

SIBELIUS a écrit :

hermes > oui je suis entièrement d'accord sur ce principe et je suis contre l'utilisation de hacks également.
En clair, tu me dis qu'il est plus compatible et plus propre d'utiliser le modèle de boite Microsoft non standard que celui proposé par les normes ?
(y'a pas de sous-entendu dans ce que je dis, je veux simplement comprendre et forger mon avis)


 
Le prologue xml fait partie des recommandations.Il faut donc le mettre. Il deviendra indispensable assez vite je pense... Il permet par exemple à tidy dans jEdit de faire une analyse syntaxique...

Reply

Marsh Posté le 15-03-2004 à 11:30:36    

ça ne répond pas à ma question, mais c'est une bonne information supplémentaire ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 11:38:24    

Sib >> pour le prologue XML, ce n'est plus vrai pour opera7, il utilise bien son rendu optimal.

Reply

Marsh Posté le 15-03-2004 à 11:43:24    

gizmo > tu veux dire que opera 7 utilise le modèle de boite standard même avec le prologue ? Ben ça nous arrange pas, ça du coup :(


Message édité par sibelius le 15-03-2004 à 11:44:10

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-03-2004 à 11:51:29    

Ah? et en quoi cela ne vous arrange-t-il pas?

Reply

Marsh Posté le 15-03-2004 à 11:54:05    

gizmo > ben Hermes s'arrange pour avoir un modèle de boite microsoft partout grâce au prologue xml (sans hacks) et maintenant ils se trouve que même avec le prologue, opera 7 reste conforme aux standards.
Il va donc falloir un hack pour opera7 ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed