Se connecter / S'enregistrer
Votre question

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

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
26 Octobre 2010 20:07:00

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

Autres pages sur : html css probleme mise page

a c 232 L Programmation
26 Octobre 2010 20:40:49

jondon456 a dit :
Bonjour,

Bonjour :D 

jondon456 a dit :
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?


http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

jondon456 a dit :
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.


Il ne faut pas utiliser de position absolute. C'est toujours super chiant à gérer. Mets les deux div en float:left et elles se mettront l'une à côté de l'autre.
N'oublies pas de mettre un clear:left ou clear:both après les divs.

jondon456 a dit :
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?

Si les deux divs sont l'une à côté de l'autre, comment l'une peut cacher l'autre ?
m
0
l
26 Octobre 2010 22:42:02

Tout d'abord, merci!

1ère: C'est comme j'ai fait. Finalement j'ai utilisé un overflow: hidden; ça marche pas mal.

2ème: Je sais pas si ça sera plus simple avec des float. J'ai 7 div avec des positionnements très spécifiques, donc...
En plus, c'est pas ce que je cherche, comme je vais l'expliquer dans la 3ème.

3ème: Voilà exactement ce que je voudrais 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+!
m
0
l
Contenus similaires
a c 232 L Programmation
26 Octobre 2010 23:11:00

Si tu peux faire un ou des schémas que ce soit plus simple ? :D 
m
0
l
27 Octobre 2010 20:16:08

Finalement c'est bon j'ai réussi.


Par contre j'ai un autre problème:

J'ai deux fonctions appelées par un onclick.
La première se passe à chaque onclick.
La deuxième se passe au onclick si on appuie en même temps sur ctrl.

La 1ère fonctionne, mais pas la 2ème.
Je sais pas ce qu'il faut mettre dans le if, sur firefox.

function selectImg(imgSrc){
if (window.event.ctrlKey){
document.getElementById('diaporama').innerHTML="<img src='"+imgSrc+"' height='95%'>";
}
}

Merci,
A+!
m
0
l
27 Octobre 2010 21:15:08

Mouais j'ai pas tout compris...
En gros faut mettre quoi dans le if? Juste pour firefox.

Merci!
A+!
m
0
l
a c 232 L Programmation
27 Octobre 2010 21:32:55

Tu utilises le paramètre de ta fonction onclick qui est l'objet évènement pour firefox, et sinon tu prends event
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS