HTML/CSS/JS - problème de mise en page Fermé

Question

Bonjour, 

Je suis en train de faire une application en javascript, et j'ai besoin que le background (une image de 1700x1000 faites par mes soins avec gimp) utilise toute la fenêtre, sans barre de défilement, quitte à être déformée au besoin.
J'utilise innerWidth et innerHeight pour définir la taille de la fenêtre dynamiquement, et l'image de fond est affichée par une balise <img> dans le fichier HTML (pas dans le CSS avec background-image).
Le problème, c'est que des barres de défilement apparaissent quand, même, mais elles sont inutiles. Ex: La barre horizontale sert juste à voir ce qui est caché par la barre verticale, et vice-versa.
Je pourrais utiliser overflow: hidden; mais je sais pas si cela cache quelques pixels. Et si il n'y a pas une solution plus propre? Ou est-ce que vous avez autre chose à me proposer?

J'ai un autre problème:
L'application est formée de plusieurs div. Elles sont positionnées en % (ex: left: 20%) afin que ça s'adapte à la fenêtre et ainsi à tous les écrans et résolutions.
Premièrement: Avez-vous une meilleure solution?
Deuxièmement: Si par exemple j'ai ma 1ère div:
position: absolute;
left: 0%;
width: 10%;

Et la 2ème:
position: absolute;
left: 10%;
width: 90%;

Et bien ça ne s'affiche pas correctement. Le bord gauche de la 2ème ne s'aligne pas au bord droite de la 1ère, suivant comment on redimensionne la fenêtre. Et dans mon cas c'est très embêtant.
Pour bien il faudrait que je puisse dire que je veux que la 2ème div se mettre juste contre la 1ère.

Ah est encore une troisième question qui me vient après la 2ème: Je voudrais que la 2ème div soit cachée quand elle est derrière la 1ère, bien que celle si soit transparente... ça sera ensuite modifié par javascript. Donc ce qui est pas derrière la 1ère se voit. Est-ce possible?

Voilà merci d'avance
A+!


Configuration: Intel core 2 Duo 3.166 GHz
4gb DDR3
ATI RADEON 5850HD

Utilisateur anonyme · Answer

Salut ! Réponse n° 1 : Essaye dans u css : html, body { overflow-y:hidden; overflow-x:hidden; } Ce code ne cache aucun pixel de ta page, mais que les ascenseurs. Réponse N°2 : - Non, c'est la meilleur solution, sachant que tu cache les ascenseurs XD - Pour ton problème de style, il faut biensur que tout les div soit les enfants directs du body :

Ok

Pas ok

Sinon il prendra le pourcentage du div ou il est. Réponse N°3 : Là j'ai pas compris XD : si les deux div sont accolés, pourquoi veux-tu que l'une soit en dessous de l'autre ? Bon si tu veux superposer utilise la propriété CSS z-index (https://www.zonecss.fr/proprietes-css/z-index-css.html

jondon456 · Answer

Réponse N°1 :
ça ne revient pas à faire un simple overflow?
Je vois pas la différence en fait...

Réponse N°2 :
Oui tout les div sont directement placé en dessous du body (sauf dans un cas spécial, mais là y'a pas de problème).

Réponse N°3 :
Alors je vais essayer d'expliquer ce que je veux faire:
Il y a une div n°1 à gauche qui fait 10%, et une div n°2 au centre de la fenêtre qui fait le reste. Une barre d'outil (une div n°3 de width=6% et height=30%) sera à l'origine cachée derrière la div n°1. Grâce au javascript, avec un évènement (ici l'affichage d'une certaine image), la div n°3 va se déplacer jusqu'à être totalement visible sur la div n°2. Elle va donc apparaitre depuis derrière la div n°1.
Le problème, c'est que la div n°1 est transparente, et même avec des z-index, la div n°3 est visible derrière la div n°1.
Je cherche donc à cacher la partie derrière la div n°1, et à laisser apparente la partie en dehors de cette div n°1.

C'est compliqué à expliquer, j'espère que t'aies compris...

Merci encore
A+!

Utilisateur anonyme · Answer

R1
Il me semble de la propriété CSS overflow est obsolette ou bien elle n'est pas reconnu par les navigateurs modernes.

R2
Il est possible que ce soit le contenu d'un de tes 2 div qui pose problème. Ca te dérangerais de m'envoyer le code complet de ta page, pour voir ce qu'il ne vas pas et comment ça fait chez moi ? A propos, quel navigateur utilises-tu ?

R3
Bon je te propose quelque chose, mais je me demande si ça va t'aller... Ta grosse image de derrière, elle va du coin supérieur gauche au coin inférieur droit, quitte à être déformé, tu l'as dit toi même. Bien. Or, si on réfléchit bien, ton div 1, qui occupe une bande de 100% de la hauteur et 10% de largeur de la page, donc de l'image ! Il te suufit donc d'ouvrir ta grosse image avec paint ou autre, et tu prend une bande de 170x1000px que tu mettras comme image étiré dans ton div 1. Le div 1 donne maintenant l'illusion qu'il est transparent, mais il est comporte en fait une bande de l'arrière plan, par dessus le div 3

Me suis-je bien fait comprendre ?
A+

jondon456 · Answer

R1: ah ok.

R2 + R3: MP

J'utilise firefox, dernière version.
Et oui, j'ai bien compris, je vais voir...

HTML/CSS/JS - problème de mise en page

4 réponses

Discussions similaires