Problème taille de page site / dreamweaver
Résolu/Fermé
bowbaq91
Messages postés
14
Date d'inscription
mercredi 3 novembre 2010
Statut
Membre
Dernière intervention
29 août 2015
-
3 nov. 2010 à 18:35
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 8 nov. 2010 à 15:59
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 8 nov. 2010 à 15:59
A voir également:
- Problème taille de page site / dreamweaver
- Supprimer une page word - Guide
- Site de telechargement - Guide
- Comment réduire la taille d'un fichier - Guide
- Site de vente entre particulier - Guide
- Site inaccessible - Guide
8 réponses
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
4 nov. 2010 à 15:54
4 nov. 2010 à 15:54
En fait, je pense avoir trouvé une solution plus simple. Ça va ressembler à ma première, mais avec infiniment moins d'étapes.
Dans le fond, crée la balise <div> comme précisé précédemment. Ça devrait ressembler à ceci dans ton code :
<body [attributs quelconques]>
<div style="margin:0pt auto; position:relative; width:800px; left:-420px;">
[contenu de ta page]
</div>
</body>
En rajoutant à la Div l'attribut left:-420px;, ça devrait mettre tes choses à l'endroit désiré.
J'ai essayé avec la page d'accueil sur un écran normal et un widescreen, et ça marche comme un charme. Il ne reste plus qu'à voir si tu peux adapter ça facilement aux autres pages.
Dans le fond, crée la balise <div> comme précisé précédemment. Ça devrait ressembler à ceci dans ton code :
<body [attributs quelconques]>
<div style="margin:0pt auto; position:relative; width:800px; left:-420px;">
[contenu de ta page]
</div>
</body>
En rajoutant à la Div l'attribut left:-420px;, ça devrait mettre tes choses à l'endroit désiré.
J'ai essayé avec la page d'accueil sur un écran normal et un widescreen, et ça marche comme un charme. Il ne reste plus qu'à voir si tu peux adapter ça facilement aux autres pages.
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
3 nov. 2010 à 20:00
3 nov. 2010 à 20:00
Malheureusement c'est le problème avec la création de sites web avec des logiciels style Dreamweaver. Le design est souvent trop statique et immuable et ne s'adapte pas bien à toutes les situations.
Connais-tu le CSS ? C'est le langage qui s'occupe de la partie "disposition", voire "design", de ton site.
Si j'essaie d'expliquer en gros, Dreamweaver a sectionné ta page en divisions (de manière très caca, dois-je malheureusement ajouter) et a donné à ces divisions des attributs comme :
(Ça vient d'une des divisions de ton site). Ça signifie que, quoiqu'il arrive, la division en question aura TOUJOURS 95 pixels de haut, 104 de large, et sera positionnée à 458 pixels en partant du haut, et 459 pixels en partant de la gauche, de la division parente.
La solution que je vais te donner est loin d'être idéale, mais j'espère que ça aidera en attendant que tu aies les connaissances nécessaires pour rendre le tout plus stable.
Premièrement, va dans le code source de ta page dans Dreamweaver.
Tout de suite après le début de la balise <body>, ajoute ceci :
Puis, juste avant la fin de la balise </body>, ajoute ce qui suit :
Ensuite, je ne sais pas comment Dreamweaver va te le présenter, mais il faudrait que tu trouves toutes les divisions apDiv :
et ainsi de suite...
Pour chacune de ces divisions, il faut que tu trouves l'attribut "left" dans le CSS (essaie de trouver, sinon je t'aiderai comme je peux) et que tu le réduises de 450 pixels. Par exemple, si l'attribut était de 451px, tu dois le mettre à 1px ; s'il était de 503px, mets-le à 53px. Et ainsi de suite.
J'ai essayé rapidement sur ta page, ça semblait bien s'afficher... Je ne peux pas garantir un résultat, mais c'est le mieux qu'on peut faire avec un code généré par Dreamweaver :S
Dis-moi comment ça marche, et si tu rencontres d'autres problèmes, on pourra voir si on peut les régler jusqu'à obtenir un résultat optimal. Cependant, si ça crée plus de problèmes que ça n'en résout, considère d'aller sur www.w3schools.com et d'apprendre le HTML/CSS.
J'espère que ça t'aidera ! ;)
Connais-tu le CSS ? C'est le langage qui s'occupe de la partie "disposition", voire "design", de ton site.
Si j'essaie d'expliquer en gros, Dreamweaver a sectionné ta page en divisions (de manière très caca, dois-je malheureusement ajouter) et a donné à ces divisions des attributs comme :
height:95px; left:459px; position:absolute; top:458px; width:104px;
(Ça vient d'une des divisions de ton site). Ça signifie que, quoiqu'il arrive, la division en question aura TOUJOURS 95 pixels de haut, 104 de large, et sera positionnée à 458 pixels en partant du haut, et 459 pixels en partant de la gauche, de la division parente.
La solution que je vais te donner est loin d'être idéale, mais j'espère que ça aidera en attendant que tu aies les connaissances nécessaires pour rendre le tout plus stable.
Premièrement, va dans le code source de ta page dans Dreamweaver.
Tout de suite après le début de la balise <body>, ajoute ceci :
<div style="margin:0 auto; position:relative; width:800px;">
Puis, juste avant la fin de la balise </body>, ajoute ce qui suit :
</div>
Ensuite, je ne sais pas comment Dreamweaver va te le présenter, mais il faudrait que tu trouves toutes les divisions apDiv :
<div class="apDiv1"></div> <div class="apDiv2"></div> <div class="apDiv3"></div> <div class="apDiv4"></div>
et ainsi de suite...
Pour chacune de ces divisions, il faut que tu trouves l'attribut "left" dans le CSS (essaie de trouver, sinon je t'aiderai comme je peux) et que tu le réduises de 450 pixels. Par exemple, si l'attribut était de 451px, tu dois le mettre à 1px ; s'il était de 503px, mets-le à 53px. Et ainsi de suite.
J'ai essayé rapidement sur ta page, ça semblait bien s'afficher... Je ne peux pas garantir un résultat, mais c'est le mieux qu'on peut faire avec un code généré par Dreamweaver :S
Dis-moi comment ça marche, et si tu rencontres d'autres problèmes, on pourra voir si on peut les régler jusqu'à obtenir un résultat optimal. Cependant, si ça crée plus de problèmes que ça n'en résout, considère d'aller sur www.w3schools.com et d'apprendre le HTML/CSS.
J'espère que ça t'aidera ! ;)
bowbaq91
Messages postés
14
Date d'inscription
mercredi 3 novembre 2010
Statut
Membre
Dernière intervention
29 août 2015
2
3 nov. 2010 à 20:46
3 nov. 2010 à 20:46
Tout d'abord merci coeus d'avoir repondu à mon message.
Oui je sais ce qu'est le CSS et je ne le connais malheureusement pas assez.
En tout cas j'ai bien compris tes explications ;O)
J'essaye de mettre cela en oeuvre et je te tiens au courant.
Merci encore
Oui je sais ce qu'est le CSS et je ne le connais malheureusement pas assez.
En tout cas j'ai bien compris tes explications ;O)
J'essaye de mettre cela en oeuvre et je te tiens au courant.
Merci encore
duweb
Messages postés
352
Date d'inscription
dimanche 30 mai 2010
Statut
Membre
Dernière intervention
6 mars 2014
72
Modifié par duweb le 3/11/2010 à 21:50
Modifié par duweb le 3/11/2010 à 21:50
le problème c'est que tu utilises des position:absolute pour les class #apDiv. donc c'est normal que le site ne soit pas à la même place en fonction de la résolution.
par exemple :
#apDiv15 {
position:absolute;
width:91px;
height:93px;
z-index:27;
left: 1051px;
top: 120px;
}
ma résolution est de 1280x1024. donc chez moi le site est complètement à droite.
par exemple :
#apDiv15 {
position:absolute;
width:91px;
height:93px;
z-index:27;
left: 1051px;
top: 120px;
}
ma résolution est de 1280x1024. donc chez moi le site est complètement à droite.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
4 nov. 2010 à 14:18
4 nov. 2010 à 14:18
Oui c'est exactement ce que j'avais... J'imagine que le site était fait pour du widescreen à la base...
bowbaq91
Messages postés
14
Date d'inscription
mercredi 3 novembre 2010
Statut
Membre
Dernière intervention
29 août 2015
2
4 nov. 2010 à 14:44
4 nov. 2010 à 14:44
Merci duweb. Mais que dois je faire alors?
Utiliser l'astuce de coeus?
Ou y a t'il une autre solution??
Merci d'avance
Utiliser l'astuce de coeus?
Ou y a t'il une autre solution??
Merci d'avance
bowbaq91
Messages postés
14
Date d'inscription
mercredi 3 novembre 2010
Statut
Membre
Dernière intervention
29 août 2015
2
5 nov. 2010 à 22:04
5 nov. 2010 à 22:04
Coucou coeus,
Je viens de faire les modifs sur toutes les pages et je te remercie grandement !!! car cela marche... A voir sur un plus petit écran ce que ça donne car là je suis sur 1 Mac 20 pouces....
Comme j'aime bien comprendre..peux tu m'expliquer pourquoi le fait d'avoir rajouté left:-420px et aussi <div style="margin:0pt auto; position:relative; width:800px> celà a t'il resolu mon problème ??
Si je reconstruit un site sur dreamweaver quel est le code à inscrire pour que la taille du site s'adapte directement en fonction de la résolution et/ou de la taille de l'écran?
Faut'il que toutes mes <div> soit en position relative?
Encore merci pour cette solution ;O)
Vraiment tu m'arrange vraiment sur ce coup ;O)
Je viens de faire les modifs sur toutes les pages et je te remercie grandement !!! car cela marche... A voir sur un plus petit écran ce que ça donne car là je suis sur 1 Mac 20 pouces....
Comme j'aime bien comprendre..peux tu m'expliquer pourquoi le fait d'avoir rajouté left:-420px et aussi <div style="margin:0pt auto; position:relative; width:800px> celà a t'il resolu mon problème ??
Si je reconstruit un site sur dreamweaver quel est le code à inscrire pour que la taille du site s'adapte directement en fonction de la résolution et/ou de la taille de l'écran?
Faut'il que toutes mes <div> soit en position relative?
Encore merci pour cette solution ;O)
Vraiment tu m'arrange vraiment sur ce coup ;O)
duweb
Messages postés
352
Date d'inscription
dimanche 30 mai 2010
Statut
Membre
Dernière intervention
6 mars 2014
72
6 nov. 2010 à 02:37
6 nov. 2010 à 02:37
je ne sais pas si tu as mis la modif en ligne mais chez moi rien n'a changé.
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
8 nov. 2010 à 15:59
8 nov. 2010 à 15:59
Hey ! Content que ça t'aide ! :)
L'explication : l'important dans la formule, c'est le margin:0 auto; et le width:800px;
En fait, le margin:0 auto;, ça détermine les quatre marges autour de la division. Le "0" (ou le premier chiffre) c'est pour le haut et le bas. Le deuxième chiffre (ici, le "auto") est pour la droite et la gauche. Et pour les côtés, mettre un "auto" comme valeur au lieu d'un chiffre sert à centrer l'élément. Il y a des restrictions et des détails, mais ce sont les grandes lignes. La largeur de 800px, c'est pour éviter que la division ait la même largeur que la page, dans lequel cas elle serait déjà centrée, dans un sens.
Pour le position:relative, c'est parce que toutes les divisions sur ta page sont en position absolute, ce qui veut dire qu'elle se positionnent par rapport au premier parent rencontré qui a un positionnement soit absolute, soit relative. Donc en déterminant le positionnerment de la division de cette manière, elle devient le point de référence de tout le reste de ta page.
Et finalement le "left:-420px", ça sert simplement à rétablir ton contenu, du fait que toutes tes divisions sont décalés de plus ou moins 420px de la gauche. Donc en faisant une division globale qui annule ce décalage, ça donne l'impression que le site est effectivement centré.
Pour un futur sir en Dreamweaver, je n'ai pas vraiment de réponse, parce que la largeur de ta page par rapport au navigateur dépend de plein de choses. Moi ce que je te conseille, c'est de viser à faire des sites qui ont une largeur fixe, et qui sont centrés sur des écrans plus grands. D'habitude, je fais mes sites d'une largeur de 1000 pixels, ce qui convient aux écrans de 1024px de large et plus. Je ne m'occupe pas des écrans en 800x600 ; presque plus personne n'a ça.
Bref, fais des sites qui ont une division globale de 1000px de largeur, avec un margin:0 auto;, et adapte ton contenu en fonction de cette division globale au lieu de la page au complet. Tu va avoir des résultats satsifaisants ;)
Sinon, quand tu détermines tes largeurs, au lieu d'y aller avec des valeurs fixes (en pixels ou en points ou en "em"), vas-y avec des pourcentages. Ex.: width:20%; (pour un menu situé à gauche de la page, disons)... Ce n'est pas totalement l'idéal je pense, mais à la longue tu vas trouver quelques trucs que tu aimes bien.
Bonne chance avec ton site et tes prochains !
L'explication : l'important dans la formule, c'est le margin:0 auto; et le width:800px;
En fait, le margin:0 auto;, ça détermine les quatre marges autour de la division. Le "0" (ou le premier chiffre) c'est pour le haut et le bas. Le deuxième chiffre (ici, le "auto") est pour la droite et la gauche. Et pour les côtés, mettre un "auto" comme valeur au lieu d'un chiffre sert à centrer l'élément. Il y a des restrictions et des détails, mais ce sont les grandes lignes. La largeur de 800px, c'est pour éviter que la division ait la même largeur que la page, dans lequel cas elle serait déjà centrée, dans un sens.
Pour le position:relative, c'est parce que toutes les divisions sur ta page sont en position absolute, ce qui veut dire qu'elle se positionnent par rapport au premier parent rencontré qui a un positionnement soit absolute, soit relative. Donc en déterminant le positionnerment de la division de cette manière, elle devient le point de référence de tout le reste de ta page.
Et finalement le "left:-420px", ça sert simplement à rétablir ton contenu, du fait que toutes tes divisions sont décalés de plus ou moins 420px de la gauche. Donc en faisant une division globale qui annule ce décalage, ça donne l'impression que le site est effectivement centré.
Pour un futur sir en Dreamweaver, je n'ai pas vraiment de réponse, parce que la largeur de ta page par rapport au navigateur dépend de plein de choses. Moi ce que je te conseille, c'est de viser à faire des sites qui ont une largeur fixe, et qui sont centrés sur des écrans plus grands. D'habitude, je fais mes sites d'une largeur de 1000 pixels, ce qui convient aux écrans de 1024px de large et plus. Je ne m'occupe pas des écrans en 800x600 ; presque plus personne n'a ça.
Bref, fais des sites qui ont une division globale de 1000px de largeur, avec un margin:0 auto;, et adapte ton contenu en fonction de cette division globale au lieu de la page au complet. Tu va avoir des résultats satsifaisants ;)
Sinon, quand tu détermines tes largeurs, au lieu d'y aller avec des valeurs fixes (en pixels ou en points ou en "em"), vas-y avec des pourcentages. Ex.: width:20%; (pour un menu situé à gauche de la page, disons)... Ce n'est pas totalement l'idéal je pense, mais à la longue tu vas trouver quelques trucs que tu aimes bien.
Bonne chance avec ton site et tes prochains !
bowbaq91
Messages postés
14
Date d'inscription
mercredi 3 novembre 2010
Statut
Membre
Dernière intervention
29 août 2015
2
6 nov. 2010 à 12:02
6 nov. 2010 à 12:02
salut duweb,
C'est un ami à moi qui met en ligne.
Je lui ai demandé hier, il ne l'a peut être encore pas fait :O)
C'est un ami à moi qui met en ligne.
Je lui ai demandé hier, il ne l'a peut être encore pas fait :O)
