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

Question

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.

Dalida · Answer

salut, Comment faire pour que rien ne bouge même si on redimensionne la fenêtre?? il faut dimensionner ton site en taille fixe et en prévoyant les petites résolutions. par exemple : body{ background-image: url("images/fond.jpg"); width:800px; margin: 0px; height:100%; display:block; } et adapter tes autres

.

Lili · Answer

Donc quand tout le monde me dit qu'il faut mettre des pourcentages... en fait il faut mettre des tailles fixes?!

Dalida · Answer

tout dépend de ce que tu veux mais le plus simple est de fixer la taille.

tu peux vouloir un design "fluide" qui prendra toujours toute la largeur de l'écran mais ça sera plus compliqué à mettre en place et surtout il faut avoir beaucoup de contenu dans tes pages web pour remplir un écran > 1024 pixels. donc si c'est pour avoir un site super large, super vide…

+ un exemple basique de mise en page avec largeur fixe, ça ne bouge pas !

+ un autre dans le même style

Lili · Answer

Le problème c'est que j'ai déjà tout converti en pourcentage, et mes tout mes divs prennent la totalité de l'écran... Pas le choix alors, je met tout en taille fixe?

Dalida · Answer

as-tu une version en ligne ?

et si tu peux retrouver l'adresse de la discussion précédente, je suis suis aussi preneur.

Lili · Answer

Non je n'ai pas de version en ligne...
Mon ancien post:
http://www.commentcamarche.net/forum/affich 13043920 besoin d aide en css
Mais y'a pas grand chose de plus dedans.

Ralala ce CSS....

okuni · Answer

Que dire de plus?
soit tu met des tailles fixes soit tu les laisse en % mais tu adapte ton design et images

Dans tout les cas, tu dois modifier ton css.

Dalida · Answer

code-nous les codes HTML/CSS chez pastebin par exemple.

et dis-nous précisément à quoi c'est censé ressembler, stp.

Lili · Answer

Alors voilà j'ai posté mon CSS et ma page index:

http://pastebin.com/m56b8b0ba
http://pastebin.com/m26b1585e

Et comme un screenshot vaut mieux que toute explications:

http://www.zimagez.com/zimage/screen-index0.php

Voilà j'espère qu'on pourra m'aider !

Dalida · Answer

salut,

je t'ai fait des exemples, avec un design fluide et avec un design fixe, il n'y a quasiment rien qui change, par contre j'ai un peu adapté ton HTML.

Lili · Answer

Ca marche pas?
Je disais:
Woah merci, l'exemple avec les colonnes fixe est parfait!
Comment je peux voir le "screen.css" ?

poliquinp · Answer

Si tu veux que rien ne bouge tu dois utiliser la valeure de positionnement @absolute@

body{
	background-image: url("images/fond.jpg");
      position: absolute
	width:100%;
	margin: 0px;
	height:100%;
	display:block;
  }

Absolute : Peut importe la grosseur de ton écran, ta div restera toujours à ta position x,y
Relative : Le calcul se fait si tu utilise margin : 0 auto (le auto le place automatique au centre peut importe la largeur de l'écran.) Bien utile

Lili · Answer

Ca change rien, il faudrai donc que je fasse comme toi et rajoute une div ?

//celle là??

Dalida · Answer

il faudrai donc que je fasse comme toi et rajoute une div ? ah bien sûr ! il faut le même structure HTML sinon ça ne fonctionnera pas ! il faut un container qui englobe bannière, navigation, contenu et colonnes. chez moi c'est

le plus simple c'est sans doute d'enregistrer mon fichier sous index.php et d'y ajouter tes include(). mais pense à sauvegarder tout avant !

Lili · Answer

Merci beaucoup. J'aimerai aussi connaître les propriétés CSS que tu as utilisé pour "

??

Lili · Answer

Merci encore, comment j'accède à screen.css?

Dalida · Answer

cf. <15>.

Lili · Answer

Lol justement chez moi ça passe de <14> à <16>, pas de <15>... Je veux pas faire la chieuse mais woilà ^^'

Dalida · Answer

???

tu as clique sur le 15 ?
bref…

Comment je peux voir le "screen.css" ?
en retrouvant son URL dans le code source du fichier HTML.

screen.css

le common.css ne sert qu'à attribuer les couleurs d'arrière plan.

Lili · Answer

Bé merci beaucoup pour toute ton aide, je vais essayer d'appliquer cela à mon site!!

Lili · Answer

rolalala j'arrive à rien c'est trop compliqué avec les images que j'ai, tout se décale... :(

Lili · Answer

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?

Dalida · Answer

salut,

peux-tu te faire une version en ligne ?

ce serait bien plus simple pour travailler directement sur ton code.

Lili · Answer

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?

Dalida · Answer

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.

Lili · Answer

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

Lili · Answer

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;
}

Dalida · Answer

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;
}

Lili · Answer

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.

Dalida · Answer

non, le plus simple est d'ajouter une classe à ton

qui annulera la marge inutile. .sans-marge-gauche{margin-left:0;} .sans-marge-droite{margin-right:0;} et au besoin tu ajoutes au

, l'une, l'autre ou les deux :

évidement il faut enlever les

des colonnes en conséquence.

Dalida · Answer

pour que le contenu descende, as-tu regardé la méthode des fausses colonnes ?

Lili · Answer

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.

Lili · Answer

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

monkey_monk · Answer

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 !

Lili · Answer

Je craque, j'abandonne pour aujourd'hui, j'espère que tu passeras par ici demain Dalida!
Encore merci, bonsoir

Lili · Answer

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

Dalida · Answer

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

Lili · Answer

J'ai déjà un overflow:auto pour chaque colonne et pour mon contenu c'est pour ça que je comprends pas.

Lili · Answer

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.

Dalida · Answer

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.

Lili · Answer

Les height 100% ne change rien j'ai toujours pas de scrollbar.

"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. "

Comment ça une bande de 10 pixels de haut ? une bande blanche donc? Répétition en Y? Mais puisque j'ai jamais de scroll, ça va répéter jusqu'ou? Je vois pas...

monkey_monk · Answer

Bon, je vais me permettre de faire quelques remarques sur ton css...

- lorsque tu as une valeur NULL tu n'es pas obligé de préciser le type... donc au lieu de border:0px; tu peux mettre border:0;

- url("images/fdposte2.jpg"); et url(images/fdposte2.jpg); on le même effet, pas besoin de guillemets

- float:top; n'existe pas...
"La propriété css float peut prendre les valeurs de : - none, l'élément ne flotte pas, remet le type à sa valeur initiale. - left, affichage de l'élément à droite, transforme l'élément en type block (display:block). - right, affichage de l'élément à gauche, transforme l'élément en type block (display:block).Un élément ayant une propriété css float sa hauteur n'est pas prise en compte dans la redimensionnement de son conteneur, on dit qu'il sort du flux."
(source: https://www.zonecss.fr/rechercher/index.php?mot=float

- font-size:12;, là il serait bon de préciser le type (em pt % px ???)

- text-decoration:none; ...ne fonctionnera que dans le cas d'un lien sauf si les liens sont définit de manière générale... préférer séparer les contenus >> div#header a {text-decoration:none;}

- dans div#content.sans-marge-droit ainsi que dans div#content.sans-marges tu définis 2 fois tes marges >> margin-right:0;  margin-left:0;  margin:0 180px; pour les raccourcis voir http://www.pompage.net/traduction/raccourcisCSS

- je ne comprend pas à quoi sert display: block; dans div#right-column img pareil pour div#right-column font  

- div#footer , il me semble que bottom et vertical-align sont très similaires...


Je crois que c'est tout, mais pour pouvoir t'aider il faudrait ton HTML... ne serais-ce que tes balises pour voir les imbrications !

Courage ! Courage !

monkey_monk · Answer

Re, j'ai un peu mieux regardé tes screen... et selon mes observations ton html devrait ressembler à ça :

...je suis dans le bon ou pas du tout ? Parce que vu ton css, tu sembles avoir cherché un peu trop loin... Pour le css on verra plus tard... ^^"

Lili · Answer

C'est presque ça, en fait j'ai fait l'affichage sous forme de fonctions car cela va être appliqué à une centaine de pages...

	

        <?php
		
					require 'affichage.php';
					
					aff_head("Aide"); 
					
					aff_top2(); //Cela pourrait être aff_top1() ou aff_top3(), vois affichage.php
	?>
	
		***ici je met ce qu'il va y avoir dans mon contenu***

	<?php 
                                       aff_bottom();
         ?>

affichage.php: http://pastebin.com/m47cf5863

Honnêtement j'en peux plus j'ai beau tout essayer ça ne va jamais...

Merci pour toutes les indications pour améliorer mon css monkey_monk !

monkey_monk · Answer

Ton PHP me semble correct (pour ce que j'ai pu en voir), pourrais tu mettres le code généré par celui-ci ? Si ce n'est que ton DIV content est en dehors des 2 colonnes... (mais c'est peut-être normal... ?) je ne vois rien de significatif. Pour ce qui est de ton PHP... tu devrais le faire plus proprement avec des concaténations. ^^ ex.: echo '

'.$contenu.'

'; Ce qui te permet de diminuer les guillemets... et donc échapements ! En plus les apostrophes sont plus rapides à l'exécution que les guillemets. Je vais essayer de faire le css qui va avec le bout d'html que j'ai écrit tout à l'heure... mais plutôt dans la soirée. ^^ Mais, s'il te plait, poste la page > html <, celle que reçoit ton navigateur, pour pouvoir vérifier la structure de tes éléments (DIV et autres qui sont généré via ton PHP). Sur ce, à plus ! ;)

monkey_monk · Answer

Alors voilà,

c'est fait rapidement et sans tester mais j'imaginais un truc comme ça pour le css :

* { margin:0; padding:0; }
html { width:100%; height:100%; background:url(background.gif) 0 0 repeat-x; }
div#main { width:100%; height:100%; text-align:center; }
div#header { width:100%; height:25px; background-color:grey; }
div#container { width:800px; height:100%; margin:20px auto 50px; text-align:left; }
div#chapeau { width:800px; height:200px; }
div#menu_top { width:800px; height:60px; }
div#content { width:800px; height:100%; vertical-align:top; }
div#colonne_gauche { float:left; width:250px; height:100%; vertical-align:top; }
div#colonne_droite { margin-left:260px; width:100% height:100%; vertical-align:top; }
div#clear { clear:left; }
div#footer { width:800px; height:60px; vertical-align:bottom; }

Tu comprends ?

Lili · Answer

Bonjour, j'ai essayé d'appliquer ce que tu m'as donné mais cela ne fonctionne pas, j'ai eu des bugs, et du coup j'ai remit comme c'était avant. 
Avec ce que j'ai il doit y avoir un moyen d'arranger les deux bugs?
Pffffff

Lili · Answer

Bon j'abandonne j'en ai marre

monkey_monk · Answer

Bonjour,

vu où en sont arrivé tes nerfs... pour quoi ne nous donnerais tu pas tout ton code ? Qu'on puisse y chipoter tranquillement et te trouver une solution ?

Fais nous un joli ZIP par exemple... avec les images... pour pourvoir afficher proprement ta page.

Et courage ! Je sais que c'est frustrant... mais quand tu auras ta solution, tu oublieras vite la frustration.

courage courage !

Lili · Answer

J'ai essayé de faire un zip mais rien ne fonctionne plus... J'ai dû oublié des choses mais je ne vois pas quoi. J'essaye de faire mieux... :( :( :(

Lili · Answer

Ou puis-je uploader mon zip ?

Lili · Answer

http://dl.free.fr/getfile.pl?file=/0T5CdYRn voilà en espérant que ça marche... J'en peux plus du CSS je comprends pas ceux qui aiment ça!

monkey_monk · Answer

Hello,

je viens de faire ça... http://dl.free.fr/getfile.pl?file=/ceC9dTf8 

Dis moi ce que tu en penses et si c'est bien celà que tu attendais !

Si tu as encore besoin d'aide, n'hésite pas !

Pour info, le problème de positionnement que tu avais avec le footer est du aux multiples float qui faussent les valeurs des dimensions height... pour régler ça j'ai un peu triché... enfin tu verras !

Bon courage !

monkey_monk · Answer

* note pour moi-même *

'faut vraiment que je me calme avec les points d'exclamation... ^^

Lili · Answer

Merci, merci, merci beaucoup, c'est quasiment ça!
Mais j'ai un bug, il y a un gros espace blanc entre la fin du contenu et des colonnes, et le footer en bas. Du coup il faut descendre dans la page pour voir le footer. Ça faisait ça chez toi aussi?
Encore merci !

monkey_monk · Answer

Je n'ai pas vraiment essayé... pourrais-tu faire un screen shot ?

Lili · Answer

Voili voilou: http://www.zimagez.com/zimage/sc220.php

monkey_monk · Answer

Mmmh ! C'est effectivement étrange et agaçant ! ^^

Et cela t'oblige à scroller pour arriver en bas même si il n'y a rien dans ta page ?

A mon avis tu va devoir chipoter, soit avec ton footer en position:absolute, soit avec le height du container...

Je n'ai pas le temps de t'aider plus pour le moment mais j'essayerais d'y jeter un oeil dans la soirée !

Lili · Answer

Ça fait plus d'1h que je fait des tests et rien ne va, cette fois j'abandonne ça me soule.... J'y reviendrai peut-être plus tard mais là je fait une overdose de css !!
Merci encore

monkey_monk · Answer

Ceci dit... si tu en as envie, tu peux très bien virer tes div colonne et contenu. Et mettre à la place un tableau à 3 colonnes !

Les div sont principalement pour le positionnement, donc je pense que tu seras quand même dans la "bonne méthode".

Et ça évitera peut-être tous les décalages suivant.

Enfin, ce n'est qu'une idée... ^^'

Lili · Answer

Nan mais là je stoppe tout, j'ai tout remis comme c'était avant. Raz le bol. J'y reviendrai surement plus tard mais là c'est plus possible j'y ai perdu 4 longues journées. C'est MORT!

monkey_monk · Answer

Je te comprends très bien... néanmoins, ne sois pas trop dégoutée du CSS. Parfois c'est vraiment galère c'est vrai, mais ça ne fais que s'améliorer !

Au final c'est vraiment agréable quand on arrive à un bon résultat !

Courage donc, et éloigne-toi de ton travail un moment.

Ce soir je tâcherais d'essayer de t'aider.

monkey_monk · Answer

Tiens ! Je viens de découvrir ce petit outil bien pratique... peut-être t'aidera-t-il !

https://csscreator.com/version2/pagelayout.php

Il te permettra de faire ton layout rapidement.

Je ne l'ai pas encore essayé mais on ne sait jamais... ça peut être utile.

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

63 réponses

Votre réponse

Discussions similaires