Sujet Précédent Sujet Suivant

Besoin d'aide en CSS, le retour...

Fermé
Lili - 29 juin 2009 à 10:39
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 7 juil. 2009 à 17:27
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: 

/* 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.

63 réponses

Précédent
Réponse 21 / 63
Lili
2 juil. 2009 à 09:53
rolalala j'arrive à rien c'est trop compliqué avec les images que j'ai, tout se décale... :(
0
Réponse 22 / 63
Lili
2 juil. 2009 à 11:31
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?
0
Réponse 23 / 63
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
2 juil. 2009 à 12:27
salut,

peux-tu te faire une version en ligne ?

ce serait bien plus simple pour travailler directement sur ton code.
0
Réponse 24 / 63
Lili
2 juil. 2009 à 13:40
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?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 25 / 63
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
2 juil. 2009 à 14:43
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.
0
Réponse 26 / 63
Lili
2 juil. 2009 à 15:13
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...
0
Réponse 27 / 63
Lili
2 juil. 2009 à 15:15
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;
}
0
Réponse 28 / 63
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
2 juil. 2009 à 15:39
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;
}
0
Réponse 29 / 63
Lili
2 juil. 2009 à 16:05
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: 

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.
0
Réponse 30 / 63
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
2 juil. 2009 à 16:11
non, le plus simple est d'ajouter une classe à ton <div id="contenu"> qui annulera la marge inutile. 
.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.
0
Réponse 31 / 63
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
2 juil. 2009 à 16:19
pour que le contenu descende, as-tu regardé la méthode des fausses colonnes ?
0
Réponse 32 / 63
Lili
2 juil. 2009 à 16:25
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.
0
Réponse 33 / 63
Lili
2 juil. 2009 à 16:34
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...
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
2 juil. 2009 à 16:47
au risque de me répéter : faudrait une version en ligne, difficile de parler dans le vide…

tu peux essayer d'ajouter {overflow:auto;} ou {overflow:scroll;} au contenu.
0
Réponse 34 / 63
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
2 juil. 2009 à 16:43
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 !
0
Réponse 35 / 63
Lili
2 juil. 2009 à 16:44
Je craque, j'abandonne pour aujourd'hui, j'espère que tu passeras par ici demain Dalida!
Encore merci, bonsoir
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
2 juil. 2009 à 16:48
j'espère que tu passeras par ici demain Dalida!
y a des chances !
-;o)
0
Réponse 36 / 63
Lili
3 juil. 2009 à 09:21
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...
0
Réponse 37 / 63
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
3 juil. 2009 à 09:33
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>.
0
Réponse 38 / 63
Lili
3 juil. 2009 à 09:38
J'ai déjà un overflow:auto pour chaque colonne et pour mon contenu c'est pour ça que je comprends pas.
0
Réponse 39 / 63
Lili
3 juil. 2009 à 10:02
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.
0
Réponse 40 / 63
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
3 juil. 2009 à 12:30
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.
0

Discussions similaires

Retour à la ligne tchat.
sartorius1108 -
momolapince -

5 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Quel est le lien de l'étiquette retour pour mon matériel Free ?
marmotte52 -
AigleBleu -

107 réponses
télécharger router scan v2.6
naf_2019 -
brucine -

2 réponses
Faire un retour à la ligne sur Google Sheet
29vitruve -
eric -

7 réponses