[Résolu] Couper des div pour ajuster selon la résolution

Bonjour, je fais une page web pour m'entrainer et apprendre et je n'arrive pas à faire ce que je veux. En fait, je ne veux aucune barre de défilement ni de "blanc" sur ma page, je veux quelle occupe tout l'espace, elle est composé de dizaine de div avec des table-cell table-row pour un effet tableau et je ne veux pas que la taille de ces div bougent. en gros, les div du bord devront être coupé en gros mais je ne sais pas comment faire çà !

Voici à quoi çà ressemble : http://leo-poupet.fr/accueil.php
Pour le code, vaut mieux faie clic droit code source vous verrez mieux que si je le met ici, long et dynamique avec du php. Voila si vous avez des questions n'hésitez pas et merci d'avance !
Modifié par tralgar (27 May 2013 - 14:37)

Bonjour,

Les trames que l'on voit actuellement, c'est censé être le fond du site ?

Si oui (et à priori c'est le cas vu que le fichier s'appelle bgAccueil.png), je ferai une div conteneur qui englobe tout et appliquerait le fond dessus. D'autant plus qu'à ce que je vois, ton CSS est modifié avec du Javascript, est-ce réellement utile ?

tu veux dire que je mette une seul fois le bgAccueil ? et oui y'a du css avec le js sur les event mouseenter et mouseleave pour l'opacité des div, car sur le mouseenter la duration css3 d'opacity est instante et sur le mouseleave elle est a 2 sec en ease. Et je veux vraiment avoir cet effet je le trouve bien marrant et je veux arriver à faire ce que je m'imaginais ^^ je veux pas contourner le problème, pour bien apprendre il faut le résoudre comme il se doit, tel un pro ! =D mais j'avoue que perso je seche, 5 jours que j'essaye des trucs et çà fail à chaque fois, j'ai tenté aussi les screen.width/height sur une div qui englobe tout et autre

Au-delà du fait de contourner le problème ou autre, avant de rajouter des effets d'opacité, etc., il faut que tu poses les bases, et donc dans ton cas que tu positionnes tes éléments (les blocs) comme tu le souhaites.

Donc si j'étais toi, je désactiverais tout ce qui est Javascript/effets et positionnerais bien tout comme il faut. Il sera temps ensuite de rajouter les effets que tu souhaites.

Ouais ba à la base c'est ce que j'avais fait mais y'a un moment où t'es tellement bloqué qu'il faut passer à autre chose en attendant, et le JS que j'ai çà change rien, ça touche pas le DOM ni les tailles/position/display etc donc c'est pas grave. Mais j'ai toujours pas trouvé comment faire çà j'ai l'impression qu'en fait c'est impossible !

Je pense comme j0r qu'il faut reprendre depuis le début. Pourrais-tu décrire à nouveau ton problème ? Car je n'ai pas très bien compris. Coupé ? Coupé par quoi ? Dans quel sens ?
Fait éventuellement un shéma, car même si ton idée est très claire dans ta tête, ce n'est pas forcemment facile à décrire avec des mots.

Ouais je me rend compte que ce que je dis c'est pas clair =) Bon j'ai essayé de faire un schéma rapido. Donc ma page web est composé de plein de div disposé en tableau, colonne-ligne normal. Les cases 1, la ou y'a un 1 entouré, ce sont des div 100x100, cette taille doit être toujours fixe et ne changer sous aucun prétexte ! Les cases 2 et 3 comme on le voit à droite sur les deux schémas, sont coupées dans le sens de la largeur, c'est a dire qu'on coupe la div pas qu'on la rétrécisse, donc on ne voit pas toute l'image mais qu'une partie. Tout çà sans barre de défilement ! j'aimerai que les div en trop, qui dépassent de la page et provoquent une barre de défilement que ce soir vertical ou vertical, soient coupées, pas rétrécies. Vous voyez mieux ou pas ?

Voila et merci pour vos idées !

Au final, c'est quoi l'intérêt de faire ça ? Peux-tu nous expliquer le contexte s'il te plaît ?

Peut-être que par rapport à ce que tu veux faire, il y a une autre méthode car ce que tu demandes va un peu à l'encontre du fonctionnement "normal" du CSS...

Ouais ba je veux juste savoir faire çà en fait, c'est pour apprendre, que le jour ou je vais devoir faire çà, ce qui arrivera peut etre, ba je torche le truc ! Et j'aime les problèmes comme ça, je sais pas pourquoi mais j'ai envie d'y arriver, je pense plus qu'a ça ! xD

C'EST COMME UNE DROOOOGUE
Modifié par tralgar (28 May 2013 - 11:35)

tralgar a écrit :
Ouais ba je veux juste savoir faire çà en fait, c'est pour apprendre, que le jour ou je vais devoir faire çà, ce qui arrivera peut etre, ba je torche le truc ! Et j'aime les problèmes comme ça, je sais pas pourquoi mais j'ai envie d'y arriver, je pense plus qu'a ça ! xD

C'EST COMME UNE DROOOOGUE

Dans ce cas là, je pense avoir réussi à obtenir le résultat que tu veux.

La solution

Comme tu peux le voir, j'ai défini une taille fixe de 660px au conteneur et j'y ai mis des blocs de 100x100 comme tu le souhaitais.

Le dernier bloc est coupé et les suivants sont cachés, le tout sans barre de défilement.

Le "white-space: nowrap" empêche le retour à la ligne des blocs et le "overflow: hidden" fait disparaître le contenu qui dépasse du container.
Modifié par j0r (28 May 2013 - 11:45)

ha ouais pas mal, je connais pas le nowrap je fais aller lire la doc mais c'est pas encore exactement ca, vu que le conteneur fait 660px, il y a 6 div de 100px normal mais il faudrait que sur cette ligne, il est une div de 60px pour compléter, qu'il n'y est pas de blanc (la du gris en l’occurrence), qu'on voit 60 d'une div en plus, que ce soit tout noir. Mais déjà ca va m'aider à etre plus opti je pense.
Merci beaucoup pour cette bonne piste !!

Ok donc en fait le hidden:overflow çà peut etre la solution mais sur une taille de conteneur fixe en pixel, si je met en % ca marche plus (normal) faut récupérer la taille surement avec screen.height.

Voila ce que je voulais, si tu regarde le 5eme carré, il est coupé !!

http://jsfiddle.net/3kX4V/
Modifié par tralgar (28 May 2013 - 14:20)

heuuuu.....

Oo t'es un génie mec, merci beaucoup c'est QUASIMENT çà qu'il me fallait !

(en passant çà marchait pas car j'avais mi body{position:absolute} je sais plus trop pourquoi x)

Mais maintenant il faut que ce soir pareil en bas, si je met pas de taille spécifique en pixel, la hauteur prend la place qu'elle veut !

http://jsfiddle.net/mtusa/

Regarde en rajoutant des div fille directe à #parent, y'a bien une barre de défilement verticale !
Modifié par tralgar (29 May 2013 - 09:55)

salut,
cela dépend par rapport à quoi tu veux que le taille en hauteur ne dépasse pas ( c'est du français ?) bon... En gros si c'est par rapport à la fenêtre, tu n'as qu'à ajouter un height:100% sur html et body par ex

EDIT: et en enlevant bien sûr les marges de ces derniers.
Modifié par Zelalsan (29 May 2013 - 10:32)

Nikel, parfait, le jour ou je te vois je te fais des bisoux xDD !
Franchement merci beaucoup, çà parait tout con mais c'est exactement comme çà qu'il faut faire, faut pas toucher apres çà chamboule tout.
Sujet résolus ! (je sais pas comment on le met resolved, donc je le dis)

Trouvé !