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

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...
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
3 juil. 2009 à 14:19
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 !

0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
3 juil. 2009 à 14:31
Re,

j'ai un peu mieux regardé tes screen... et selon mes observations ton html devrait ressembler à ça :
<div id="main">
    <div id="header"></div>
    <div id="container">
        <div id="chapeau"></div>
        <div id="menu_top"></div>
        <div id="content">
            <div id="colonne_gauche"></div>
            <div id="colonne_droite"></div>
            <div class="clear"></div>
        </div>
    </div>
    <div id="footer"></div>
</div>

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

0
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 !
0

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

Posez votre question
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
3 juil. 2009 à 17:49
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 '<div id="machin">'.$contenu.'</div>';


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 ! ;)
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
3 juil. 2009 à 21:34
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 ?
0
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
0
Bon j'abandonne j'en ai marre
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
6 juil. 2009 à 12:24
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 !
0
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... :( :( :(
0
Ou puis-je uploader mon zip ?
0
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!
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
6 juil. 2009 à 23:24
Désolé, j'ai eu des problèmes avec ma connexion et n'ai as pu télécharger ton fichier avant... je regarde ça maintenant et te répondrait demain !

Bon courage ! ;)
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
7 juil. 2009 à 00:34
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 !
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
7 juil. 2009 à 00:37
* note pour moi-même *

'faut vraiment que je me calme avec les points d'exclamation... ^^
0
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 !
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
7 juil. 2009 à 09:22
Je n'ai pas vraiment essayé... pourrais-tu faire un screen shot ?
0
Voili voilou: http://www.zimagez.com/zimage/sc220.php
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
7 juil. 2009 à 10:20
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 !

0
Ç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
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
7 juil. 2009 à 11:13
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... ^^'
0