Aller au contenu

maskangel

Membre
 Afficher le profil  Parcourir son contenu

  • Compteur de contenus

    5

  • Inscrit(e) le

  • Dernière visite

Réputation sur la communauté

0 Neutre
  1. maskangel
    Bonjour, Je commence vraiment à tourner en rond et à limite péter un plomb avec la position que j'essaie de donner à mon footer ! Mon but est d'avoir toujours mon footer en bas de l'écran. Je me suis donc basé sur le script du site pompage.net: http://www.pompage.net/pompe/pieds Ce que je n'arrive pas à comprendre, c'est pourquoi mon footer dépasse de la hauteur de la fenêtre. De plus, il la dépasse de sa propre hauteur (mon footer fait 71px et il est en dessous de la page de 71px). Voici donc mon code html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Document sans nom</title> <link href="test.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> <!-- function getWindowHeight() { var windowHeight = 0; if (typeof(window.innerHeight) == 'number') { windowHeight = window.innerHeight; } else { if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; } else { if (document.body && document.body.clientHeight) { windowHeight = document.body.clientHeight; } } } return windowHeight; } function setFooter() { if (document.getElementById) { var windowHeight = getWindowHeight(); if (windowHeight > 0) { var contentHeight = document.getElementById('page').offsetHeight; var footerElement = document.getElementById('footer'); var footerHeight = footerElement.offsetHeight; if (windowHeight - (contentHeight + footerHeight) >= 0) { footerElement.style.position = 'relative'; alert (windowHeight); alert (contentHeight); alert ((windowHeight - (contentHeight + footerHeight)) + 'px'); footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px'; } else { footerElement.style.position = 'static'; } } } } window.onload = function() { setFooter(); } window.onresize = function() { setFooter(); } //--> </script> </head> <body> <div id="page"> <div id="headercentre">logo</div> <div id="headerdroite">header droite</a> </div> <div id="navigation">navigation </div> <div id="centre"> <div class="accroche-home"> <p>accroche 1<br /> <a href="#" target="_blank">En savoir plus…</a></p> </div> <div class="accroche-home"> <p>accroche 2<br /> <a href="#" target="_blank">En savoir plus…</a></p> </div> </div> <div id="droite">droite</div> </div> <div id="footer">footer</div> </body> </html> Et voici mes css: html, body { color: #515151; margin: 0; padding: 0; border: 0; font: 11px Verdana, Arial, Helvetica, sans-serif; background-image:url(bkgrnd.gif); background-repeat:repeat-y; background-position: center; height: 100%; } p { text-align: justify; margin: 0 } /* Mise en page */ #page { margin: 0 auto; width: 768px; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; height: auto; } html>body #page { height: auto; } * html #page { height: 100% } #headercentre { float: left; width: 616px; height: 50px } #headerdroite { float: right; width: 147px; margin-top: 10px } #navigation { background-color: #00b053; width: 100%; height: 47px; clear: both } #centre { float: left; width: 616px } #droite { float: right; width: 147px; padding: 0; margin-top: 10px; } #footer { background-color: #0000FF; position: relative; width: 768px; height: 71px; margin: 10px auto 0 auto; clear: both } .accroche-home { float: left; width: 302px; color: #FFF; background-color: #757575; margin: 1px 1px 0 0; padding: 0 } J'espère que quelqu'un va pouvoir m'aider. D'avance merci beaucoup et meilleures salutations. David
  2. maskangel
    Au fait, comment est-ce que je peux rajouter le tag [Résolu] dans le titre de mon message ???
  3. maskangel
    Effectivement. Toutefois, la solution a été de tout reprendre à zéro donc pas mal de chose en changé. Toutefois, mon gros problème était lié au fait que je voulais que mes dégradés soient toujours du haut au bas de la page quoiqu'il arrive et la même chose pour un fond de colonne de couleur. La solution a été de créer une image de background de 1px de haut et de toute la largeur de mon contenu (800px). Dans cette image, il y a la présence des dégradés (les dégradés sont horizontaux) ainsi que du fond bleu. Ainsi, je n'ai plus besoin d'avoir de contenu qui tire le tout. Mon contenu prend la place qu'il veut, le background fait le reste. C'était tellement simple que je n'y avait pas pensé A cela, j'ai laissé le js qui met toujours le footer en bas de page et ça donne quelque chose de très propre. Toutefois, je ne peux rien montrer car il s'agit d'un rebranding d'une boîte qui ne sortira qu'en avril...
  4. maskangel
    Oubliez mon problème, j'ai trouvé des parades ! Merci et salutations.
  5. maskangel
    Bonjour, J'essaie de mettre en css un site actuellement en tables. J'avance gentillement toutefois, je rencontre un gros problème. Si mon contenu est long, ça actif le scroll et là, j'ai une partie de mes contenus qui vont jusqu'enbas (c'est le but), mais pas tous. Ce qui a pour but de me faire péter la page. Voici mon code html: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Document sans nom</title> <link href="bcv4.css" rel="stylesheet" type="text/css"> <script language="javascript" src="hauteur_nav.js"></script> </head> <body> <div id="global"> <div id="degradegauche"> </div> <div id="page"> <div id="header">header</div> <div id="conteneur"> <div id="contenu"> </div> </div> <div id="colonne-bleue">colonne-bleue</div> <div class="deblayage"> </div> <div id="footer">footer</div> </div> <div id="degradedroite"> </div> </div> </body> </html> Et voici mes css: html, body { background-color: #fff; color: #666666; margin: 0; padding: 0; height: 100%; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px } #global { background-color:#000000; position: relative; margin: 0 auto; width: 800px; text-align: left; height: 100%; } #page { width: 770px; height: 100%; position: relative; float: left; background-color: #009933; } #degradegauche { background-color:#FF0099; height: 100%; width: 15px; position: relative; float: left; margin: 0 } #degradedroite { background-color:#FF0099; height: 100%; width: 15px; position: relative; float: left; margin: 0 } #header { background-color:#999999; width: 100%; height: 80px; position: relative; float: left } #conteneur { background-color:#999966; width: 100%; float: left; margin-right: -160px; margin-top: 0; } #contenu { background-color:#993333; margin-right: 160px; margin-top: 0; height: 1000px } #colonne-bleue { background-color:#00CCFF; height: 100%; margin-top: -130px; width: 160px; float: right } .deblayage { height: 0px; clear: both; } #footer { width: 770px; height: 50px; background-color:#993399; vertical-align: bottom } J'ai volontairement forcé la hauteur du contenu pour activer le scroll. Comment puis faire pour que la div global tire jusqu'en bas de la page? Ainsi, mes futurs dégradés (div à gauche et à droite) suivront également. D'avance merci beaucoup et meilleures salutations. David
×
×
  • Créer...