Votre question

Cadres html et resolution

Tags :
  • Dreamweaver
  • Programmation
Dernière réponse : dans Programmation
28 Juin 2007 23:00:41

Bonjour tout le monde,
j'ai récemment acheté un livre pour apprendre a utiliser dreamweaver, et il m'a beaucoup aider. Par contre, je suis confronté a un problème non traité dans ce bouquin. J'ai donc créer un site (http://mouizina.free.fr/ )mais selon la résolution, la bannière qui est en haut devient incomplète (j'ai fait le site en 1024*768).
Donc la question est comment y remédier? Je ne demande pas nécessairement un code mais plutôt la façon de faire.
Merci d'avance :) 

Autres pages sur : cadres html resolution

29 Juin 2007 11:52:40

Effectivement c'est bien dreamweaver XD

Il y a vraiment beucoup de trucs qui ne vont pas (tout ?).

Pour ton problème, déjà si tu utilises une image elle pourra pas être réduite lors du redimensionnement, il vaut mieux utiliser un background ou une image de 1px de large en repeat-x.
De plus tes marges devraient être reduites proportionellement à la réduction de la fenêtre.

Désolé pour ton achat mais je te conseille vraiment d'essayer de faire le code de ton site "à la main".
Recherche des tutos sur google, apprends le html et le css et tu maitriseras ton site ;) 
29 Juin 2007 12:41:38

Ok , au moins comme ca c'est clair ^^
Si certaines personnes ont des adresses qui sont bien pour des tutos je suis preneur :jap: 
Contenus similaires
2 Juillet 2007 15:24:29

Sans forcemment refaire tout ton site d'un coup voilà une petite solution :)  (D'ailleurs même en le codant à la main tu auras toujours ce problème lol)

Il faut utiliser du JavaScript, qui va détecter la résolution de l'écran et changer l'image de la bannière en fonction. Mais pour ça il faut que tu aies deux bannières : ban1024.jpg et ban800.jpg par exemple.

<img id="banniere">

<script language="JavaScript">
window.document.getElementById('banniere').src = 'ban' + screen.width + '.jpg';
</script>


Pas testé mais ça devrait aller :) 
4 Juillet 2007 03:24:13

Je viens de finir l'apprentissage html css :p 
Et donc je suis revenu car en effet le problème persiste et oh que vois je, il faut passer au javascript? :cry: 

Merci pour le code en tout cas, ça va me dépanner :) 

Sinon, mmm, le script je le met dans le body ou le css? et j'ai pas trop compris l'histoire de deux bannières? Il faut en avoir une pour la résolution 1024*768 et un autre pour la 800*600 par ex? et donc si je dois faire pareil pour tout image que j'aurai dans le site?
donc du peu que j'ai compris :

<img id="banniere">

<script language="JavaScript">
window.document.getElementById('banniere').src

donc c'est deux la sont lié, si je change le nom de l'un je dois changer le nom de l'autre. Par contre la suite je comprend pas. A quoi correspond le ban, screen.width et le .jpg. Je dois les remplacer par quelques choses? le .jpg peut il être remplacer par un autre format?

Merci d'avance :) 
4 Juillet 2007 13:27:19

Alors je t'explique le code (ça va il est pas très long!):

L'attribut id="banniere" donne un identifiant à l'image (balise <img>) du nom de "banniere"

Ensuite le code javascript va chercher dans la fenêtre (window), puis dans le document (window.document) un objet qui a pour id "bannière" (getElementById veut dire RechercheObjetParId). Puis il va redéfinir son chemin d'accès grâce à "src". window.document.getElementById('banniere') correspond donc à une manière d'identifier la bannière.

Ensuite screen.width définit la largeur de l'écran (screen=écran,width=largeur). Si ta résolution est 1024*768, screen.width sera donc 1024. Si elle est de 800*600, alors il sera égal à 800, etc etc... Le chemin d'accès de l'image ayant pour ID "banniere" va donc être modifié suivant la largeur de l'écran: si la résolution est de 1024*768 par exemple, le nom de l'image recherchée sera : ban1024.jpg. En revanche si tu es en 800*600, ce sera ban800.jpg qui sera recherchée. Il est donc impératif que tu aies deux bannières sur ton serveur suivant la détection de la résolution. L'idée est que ban800.jpg est proportionnellement plus petite que ban1024.jpg pour qu'un visiteur en 800*600 ne soit pas encombré d'une bannière qui dépasse de partout. Tu peux ensuite nommer tes bannières comme tu l'entends! Si tu remplaces "'ban' + screen.width + '.jpg';" par "'banniere_' + screen.width + '.gif';", le script recherchera banniere_1024.gif ou banniere_800.gif, ce qui répond à ta question: oui, tu peux changer l'extension :) 
Le mieux est de mettre des images pour ton site qui soient passe-partout, sinon en effet tu devras faire la même manipulation à chaque fois. Par exemple tu pourrais avoir:

<img id="banniere">
<br>
Du texte à mort!
<br>
<img id="prout">

<script language="JavaScript">
window.document.getElementById('banniere').src = 'ban' + screen.width + '.jpg';
window.document.getElementById('prout').src = 'prout' + screen.width + '.jpg';
</script>


Ici on aura ban1024.jpg, ban800.jpg mais aussi prout1024.jpg et prout800.jpg. Ca fait un tas d'image!

Si tu veux éviter de t'ennuyer à mettre autant de code tu peux aussi rediriger le site sur une page différente en fonction de la résolution! Par exemple si la résolution est 1024*768, tu pourras envoyer le visiteur sur page1024.html, etc etc...
4 Juillet 2007 13:38:33

Et donc il faut que je fasse ca pour du 1280 ,1024 et du 800? mmm ca va etre long :p 
4 Juillet 2007 13:45:06

Oui assez, mais c'est le prix a payer pour que ton site soit classe et visible par tous!

<script language="JavaScript">
window.location.href = 'page' + screen.width + '.html';
</script>


Plus pratique si tu as beaucoup de résolutions différentes à prendre en compte, puisque ce script redirige vers une page précise (comme marqué plus haut) :) 
4 Juillet 2007 13:49:06

ok, donc le dernier script redirige vers une autre page que j'aurai créer pour cette résolution.
Imaginons par exemple je travaille en 1280*1024, ma page sera index.html
il faut que je crée donc un index800.html et un index1024.html c'est ca?
4 Juillet 2007 19:28:58

si tu es en 1280*1024, le mieux est de créer une page index1280.html en plus :D 
4 Juillet 2007 20:56:51

ay caramba, du boulot m'attend la :p 

En tout cas merci pour tout :bounce: 
4 Juillet 2007 21:01:17

Y'a pas de souci!

Si tu estimes être satisfait de mes services rajoute un [résolu] dvt le sujet :p 
14 Juillet 2007 23:17:55

re, c'est encore moi ^^
Une derniere chtite question, le script qui redirige vers les pages precises, je le met dans le body ou le head? En fait, je le met ou exactement? imaginons que j'ai un index1280.html et un index1024.html, le script je le met ou?
Merci :p 
16 Juillet 2007 17:23:10

up :) 
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