Besoin d'aide en CSS, le retour...
Lili
-
monkey_monk Messages postés 681 Statut Membre -
monkey_monk Messages postés 681 Statut Membre -
Bonjour,
Puisque mon sujet précédent a été signalé "résolu" sans qu'il le soit vraiment, je reposte à nouveau mon problème.....
J'ai développé un site avec plein de div. En plein écran cela fonctionne très bien, mais dès que je redimensionne la fenêtre tout part en sucette, les div se décalent toutes.
Ce site possède une feuille de style CSS. Comment faire pour que rien ne bouge même si on redimensionne la fenêtre??
Toutes les divs sont en pourcentages.
Et je remet l'extrait de mon CSS:
Voilà, merci pour toute aide qu'il pourra m'être apportée.
Puisque mon sujet précédent a été signalé "résolu" sans qu'il le soit vraiment, je reposte à nouveau mon problème.....
J'ai développé un site avec plein de div. En plein écran cela fonctionne très bien, mais dès que je redimensionne la fenêtre tout part en sucette, les div se décalent toutes.
Ce site possède une feuille de style CSS. Comment faire pour que rien ne bouge même si on redimensionne la fenêtre??
Toutes les divs sont en pourcentages.
Et je remet l'extrait de mon CSS:
/* Corps */
body{
background-image: url("images/fond.jpg");
width:100%;
margin: 0px;
height:100%;
display:block;
}
html{
height:100%
}
Voilà, merci pour toute aide qu'il pourra m'être apportée.
A voir également:
- Besoin d'aide en CSS, le retour...
- Retour à la ligne excel - Guide
- Retour à la ligne chatgpt ✓ - Forum MacOS
- Retour en arriere sur pc ✓ - Forum Windows
- Comment revenir en arriere sur un pc ✓ - Forum Windows
- Comment faire un retour en arriere sur un pc - Forum Windows
63 réponses
bon ça va a peu près.
J'aimerais que mon footer soit systematiquement en bas de la page et que mon contenu aille jusque là.
Comment arranger mon CSS pour que cela soit possible?
J'aimerais que mon footer soit systematiquement en bas de la page et que mon contenu aille jusque là.
Comment arranger mon CSS pour que cela soit possible?
salut,
peux-tu te faire une version en ligne ?
ce serait bien plus simple pour travailler directement sur ton code.
peux-tu te faire une version en ligne ?
ce serait bien plus simple pour travailler directement sur ton code.
Je sais pas comment faire pour y mettre en ligne.
J'ai réussi à ce que le footer soit en bas! Mais cela marche que pour firefox... De plus j'ai pas trouvé comment faire pour que les colonnes gauche et droites et mon contenu s"allongnent jusqu'en bas, au niveau du footer.
Comment ça marche pour IE?
J'ai réussi à ce que le footer soit en bas! Mais cela marche que pour firefox... De plus j'ai pas trouvé comment faire pour que les colonnes gauche et droites et mon contenu s"allongnent jusqu'en bas, au niveau du footer.
Comment ça marche pour IE?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
pour le footer ça devait déjà fonctionner.
as-tu bien gardé {postion:absolute;bottom:0;} et pour <body> {position:relative;} ?
comment faire pour que les colonnes gauche et droites et mon contenu s"allongnent jusqu'en bas
il faut utiliser la méthode des fausses colonnes.
as-tu bien gardé {postion:absolute;bottom:0;} et pour <body> {position:relative;} ?
comment faire pour que les colonnes gauche et droites et mon contenu s"allongnent jusqu'en bas
il faut utiliser la méthode des fausses colonnes.
Nan, je souhaite que mon footer soit toujours situé en bas de ma fenêtre. C'est à dire qu'il soit toujours visible.
Pour ajuster mon contenu, c'est à dire pour que l'arrière plan de mon contenu descende jusqu'à mon footer, j'ai utilisé la propriété CSS min-height:649px;
Mais cette propriété ne marche pas avec IE. De même que mon footer qui est collé au contenu vers le milieu de la page...
Pour ajuster mon contenu, c'est à dire pour que l'arrière plan de mon contenu descende jusqu'à mon footer, j'ai utilisé la propriété CSS min-height:649px;
Mais cette propriété ne marche pas avec IE. De même que mon footer qui est collé au contenu vers le milieu de la page...
Ah oui, le footer ne fonctionait pas correctement avec ce que tu m'as donné, le l'ai transformé ainsi et ça marche sous ff:
div#footer{
background-image: url("images/10.jpg");
width:100%;
height:40px;
position:fixed;
border:0px;
margin:0px;
padding:0px;
bottom: 0;
text-align:center;
vertical-align: center;
font-family:Trebuchet ms;
font-size:13;
color: #9A5E31;
}
essaie :
body{
height:100%;
}
div#footer{
background-image: url("images/10.jpg");
width:100%;
height:40px;
position:absolute;
border-style:none;
margin:0
padding:0;
bottom: 0;
left:0;
text-align:center;
vertical-align: center;
font-family:"Trebuchet ms", serif;
font-size:13; /* manque l'unité ! */
color: #9A5E31;
}
Yes merci le footer apparait bien en bas de ma fenêtre, plus qu'à faire que le contenu descende jusque là... ?
J'ai également un petit souci au niveau des colonnes gauche/droite et du contenu. En effet sur certaines pages la colonne de gauche doit disparaitre pour laisser plus de place au contenu. Pour la même raison, je fais disparaitre les deux colonnes sur d'autres pages.
Pour cela j'ai créé deux div supplémentaires sous CSS:
J'éspère avoir expliqué correctement mon problème...
Encore merci pour ton aide Dalida.
J'ai également un petit souci au niveau des colonnes gauche/droite et du contenu. En effet sur certaines pages la colonne de gauche doit disparaitre pour laisser plus de place au contenu. Pour la même raison, je fais disparaitre les deux colonnes sur d'autres pages.
Pour cela j'ai créé deux div supplémentaires sous CSS:
div#content{ //colonne gauche + contenu + colonne droite
background-image: url("images/08.jpg");
margin:0 180px;
min-height:649px; /* ne devrait pas être défini */
/*_height: 649px;*/
overflow:auto;
}
div#bigcontent{ // colonne gauche + contenu
background-image: url("images/08.jpg");
min-height:649px;
width:680px; //680= largeur contenu + largeur colonne droite
overflow:auto;
}
div#bigbigcontent{ //juste contenu
background-image: url("images/08.jpg");
min-height:649px;
width:100%; //100% pour tte la largeur du wrapper
overflow:auto;
}
J'éspère avoir expliqué correctement mon problème...
Encore merci pour ton aide Dalida.
non, le plus simple est d'ajouter une classe à ton <div id="contenu"> qui annulera la marge inutile.
et au besoin tu ajoutes au <div>, l'une, l'autre ou les deux :
évidement il faut enlever les <div> des colonnes en conséquence.
.sans-marge-gauche{margin-left:0;}
.sans-marge-droite{margin-right:0;}
et au besoin tu ajoutes au <div>, l'une, l'autre ou les deux :
<div id="contenu" class="sans-marge-gauche"> <div id="contenu" class="sans-marge-droite"> <div id="contenu" class="sans-marge-gauche sans-marge-droite">
évidement il faut enlever les <div> des colonnes en conséquence.
Ok pour les différentes classes de mon div "content"
Sauf que: le scroll se met sur la totalité de la page, du coup, vu que ma page est longue, elle passe en dessous du footer...
Je dois avouer sinon que je n'ai pas compris comment fonctionnait méthode des fausses colonnes.
Sauf que: le scroll se met sur la totalité de la page, du coup, vu que ma page est longue, elle passe en dessous du footer...
Je dois avouer sinon que je n'ai pas compris comment fonctionnait méthode des fausses colonnes.
Je n'avais pas fait gaffe mais à chaque fois que mon contenu est long, il passe toujours en dessous du footer au lieu de créer un scroll à sa droite. Et cela pour tout type de contenu: normal, sans marge droite, ou sans aucune marges...
La "méthode des fausses colonnes" est très pratique et facile à mettre en oeuvre...
pour expliquer rapidement, le premier div "col_gauche" est positionner en float:left et se place donc "sur la div suivante" (ce n'est pas tout à fait exacte mais le résultat est le même). Quand à la div suivante, tu la force à commencer son contenu après avec un margin-left équivalent à la largeur de ton col_gauche.
En gros c'est comme si tu plaçait un petit livre sur un plus gros, tu vois les 2 sauf qu'ici le gros est imprimé avec une énorme marge ! ^^'
*métaphore pourrie*
Sinon, pour ton problème, tu pourrais nous coller une version light de ton code ? (div vide et css)
Courage !
pour expliquer rapidement, le premier div "col_gauche" est positionner en float:left et se place donc "sur la div suivante" (ce n'est pas tout à fait exacte mais le résultat est le même). Quand à la div suivante, tu la force à commencer son contenu après avec un margin-left équivalent à la largeur de ton col_gauche.
En gros c'est comme si tu plaçait un petit livre sur un plus gros, tu vois les 2 sauf qu'ici le gros est imprimé avec une énorme marge ! ^^'
*métaphore pourrie*
Sinon, pour ton problème, tu pourrais nous coller une version light de ton code ? (div vide et css)
Courage !
Je craque, j'abandonne pour aujourd'hui, j'espère que tu passeras par ici demain Dalida!
Encore merci, bonsoir
Encore merci, bonsoir
Bonjour! Nouvelle journée, nouvelles galères?
Alors résumé des épisodes précédents... Il me reste deux problèmes:
1/ Le contenu et les colonnes droite et gauche ne descendent pas jusqu'au pied de page, je vais regarder la méthode des fausses colonnes.
2/ Inversement, lorsque le contenu est long, il descend plus bas que le footer, qui lui reste placé au même endroit. Il faudrait qu'il y ai une scrollbar...
Ralala...
Alors résumé des épisodes précédents... Il me reste deux problèmes:
1/ Le contenu et les colonnes droite et gauche ne descendent pas jusqu'au pied de page, je vais regarder la méthode des fausses colonnes.
2/ Inversement, lorsque le contenu est long, il descend plus bas que le footer, qui lui reste placé au même endroit. Il faudrait qu'il y ai une scrollbar...
Ralala...
salut,
Inversement, lorsque le contenu est long, il descend plus bas que le footer, qui lui reste placé au même endroit. Il faudrait qu'il y ai une scrollbar...
ça je comprends pas pourquoi il le fait.
si tu veux une scrollbar, regarde en <40>.
Inversement, lorsque le contenu est long, il descend plus bas que le footer, qui lui reste placé au même endroit. Il faudrait qu'il y ai une scrollbar...
ça je comprends pas pourquoi il le fait.
si tu veux une scrollbar, regarde en <40>.
J'ai déjà un overflow:auto pour chaque colonne et pour mon contenu c'est pour ça que je comprends pas.
Bon j'ai refait des screenshot:
http://www.zimagez.com/zimage/screenshotcolonnes.php
http://www.zimagez.com/zimage/screenshotcolonnes2.php
Plus mon CSS actuel:
http://pastebin.com/m4eec81b
J'ai du mal à comprendre la méthode des fausses colonnes.
http://www.zimagez.com/zimage/screenshotcolonnes.php
http://www.zimagez.com/zimage/screenshotcolonnes2.php
Plus mon CSS actuel:
http://pastebin.com/m4eec81b
J'ai du mal à comprendre la méthode des fausses colonnes.
c'est le {height:100%;} du <body> qui fait planter le comportement du footer.
pour les fausses colonnes, tu dessines ta pages avec juste les cadres, tu découpes une bande de 10 pixels de haut qui fait juste la largeur de tes colonnes.
tu appliques cette image comme arrière-plan du contenu avec une répétition en Y.
pour les fausses colonnes, tu dessines ta pages avec juste les cadres, tu découpes une bande de 10 pixels de haut qui fait juste la largeur de tes colonnes.
tu appliques cette image comme arrière-plan du contenu avec une répétition en Y.