Ajustement automatique taille de la page
52322 Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
sevrain90130 - 5 août 2015 à 07:23
sevrain90130 - 5 août 2015 à 07:23
Bonjour à tous.
Me revoila avec deux questions concernant mon site en construction "http://www.guilde-lbu.fr".
J'ai travaillé les éléments graphiques (images se trouvant dans les tableau) via photoshop sur mon pc qui est en 1280 par 1024 dans les paramêtres d'affichage. Donc quand je suis sur mon pc la page s'affcihe nikel (bordures + le fait que la page s'affiche en entièr sans barres de défilement vertical ou horizontal = c'est ca que je veux) et dés que je l'affiche sur un poste en résolution différente (en loccurence inférieure d'une façon générale), bah mes bordures noires d'un pixel des tableaux et cellules du tableau se voient rognées par la droite, toutes sans exception.
Par conséquant voila mes questions : - Est ce que cela vient de mon code ?
- Existe t il un code pour faire en sorte que la page s'ajuste automatiquement lors de son affichage
quelque soit la résolution de l'écran utilisé ? (je souhaite que, quelque soit la résolution utilisée,
l'affichage soit ajusté de telle sorte que la page rentre en entier sans barres de défilement et avec
mes bordures noires d'1 pixel enfin tout bien quoi :)
Voila, merci d'avance pour toute aide :)
À bientot !
Me revoila avec deux questions concernant mon site en construction "http://www.guilde-lbu.fr".
J'ai travaillé les éléments graphiques (images se trouvant dans les tableau) via photoshop sur mon pc qui est en 1280 par 1024 dans les paramêtres d'affichage. Donc quand je suis sur mon pc la page s'affcihe nikel (bordures + le fait que la page s'affiche en entièr sans barres de défilement vertical ou horizontal = c'est ca que je veux) et dés que je l'affiche sur un poste en résolution différente (en loccurence inférieure d'une façon générale), bah mes bordures noires d'un pixel des tableaux et cellules du tableau se voient rognées par la droite, toutes sans exception.
Par conséquant voila mes questions : - Est ce que cela vient de mon code ?
- Existe t il un code pour faire en sorte que la page s'ajuste automatiquement lors de son affichage
quelque soit la résolution de l'écran utilisé ? (je souhaite que, quelque soit la résolution utilisée,
l'affichage soit ajusté de telle sorte que la page rentre en entier sans barres de défilement et avec
mes bordures noires d'1 pixel enfin tout bien quoi :)
Voila, merci d'avance pour toute aide :)
À bientot !
A voir également:
- Taille page html
- Comment réduire la taille d'un fichier - Guide
- Supprimer une page word - Guide
- Forum Loisirs / Divertissements
- Editeur html - Télécharger - HTML
- Reduire taille photo - Guide
28 réponses
Bonsoir,
oui, bien sûr le tableau en %. Pour les polices, problèmes. Les fureteurs ne sont pas tous d'accord avec la définition des %. Par contre tu peux définir les grandeurs des polices en fonction de la grandeur de la fenêtre avec du javascript. C'est compliqué, cependant.
Serge.
oui, bien sûr le tableau en %. Pour les polices, problèmes. Les fureteurs ne sont pas tous d'accord avec la définition des %. Par contre tu peux définir les grandeurs des polices en fonction de la grandeur de la fenêtre avec du javascript. C'est compliqué, cependant.
Serge.
Bonjour,
Oui, pas de “px” pour la “width” ou la “height”… dans le HTML.
S'il voulait laisser son image occuper toute la place de son en-tête sans qu'elle se répète MAIS au prix de déformations, 52322 pourrait adapter ça :
HTML
Oui, pas de “px” pour la “width” ou la “height”… dans le HTML.
S'il voulait laisser son image occuper toute la place de son en-tête sans qu'elle se répète MAIS au prix de déformations, 52322 pourrait adapter ça :
HTML
<table class="table01" align="center" height="272" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<img src="https://image.staticox.com/?url=http%3A%2F%2Fwww.guilde-lbu.fr%2Fimages%2FLBU-sliced-1024_01.gif" id="tete" />
<h4>LIGUE DES BRASSEURS UNIS</h4>
<h6>HORDE - CONSEIL DES OMBRES</h6> <!-- le h6 dans le h4, pas nécessaire (-; -->
</td>
CSS #tete {
position : relative;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
border : 0;
}
h4, h6 {
position : absolute;
width : 100%;
left : 0;
margin : 0;
padding : 0;
text-align : center;
}
h4 {
top : 104px;
}
h6 {
top : 190px;
}--
Voila mon site: www.ateliercalc.com
les onglets, les barres bleues, le logo et le fond noir sont une image que j'ai mise en arrière plan
body {
background-image: url(memo/images/Accueil.gif);
background-repeat: no-repeat;
margin-left: 0%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
}
est-ce que avec les css je peux faire la même mise en page pour qu'elle s'adapte à toutes les résolutions?
J'ai pensé mettre les barre bleu en "background-repeat: repeat-x;" en les plaçant en haut et en bas, mais comment je peux changer leur hauteur en fonction de la résolutions? je précise que je ne connais pas le javascript...
les onglets, les barres bleues, le logo et le fond noir sont une image que j'ai mise en arrière plan
body {
background-image: url(memo/images/Accueil.gif);
background-repeat: no-repeat;
margin-left: 0%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
}
est-ce que avec les css je peux faire la même mise en page pour qu'elle s'adapte à toutes les résolutions?
J'ai pensé mettre les barre bleu en "background-repeat: repeat-x;" en les plaçant en haut et en bas, mais comment je peux changer leur hauteur en fonction de la résolutions? je précise que je ne connais pas le javascript...
Oh, très bien, Sandykoala! Très belles mises en pages. Bon, à bien y penser, beaucoup de choses peuvent être extensibles (i.e. proportionel à la résolution, ou la grandeur de la fenêtre) facilement sur ton site. Seule les grandes images centrales de mises en pages sont difficiles.
Tu pourrais donc commencer par faire les onglets, les liens à gauche, le fond noir, etc. en html et css. Puis, l'image centrale peut être un fond de div ou de table (tableau). Si cette image centrale est un peu plus petite, tu pourrais la faire entrer dans à peu près toutes les grandeurs de fenêtres.
Il y a plusieurs autres solutions par la suite pour ajuster l'image centrale en la rendant extensible (en fait non, mais en cachant la partie à droite selon la résolution), ou en ayant plusieurs grandeurs choisies par javascript.
Serge.
Tu pourrais donc commencer par faire les onglets, les liens à gauche, le fond noir, etc. en html et css. Puis, l'image centrale peut être un fond de div ou de table (tableau). Si cette image centrale est un peu plus petite, tu pourrais la faire entrer dans à peu près toutes les grandeurs de fenêtres.
Il y a plusieurs autres solutions par la suite pour ajuster l'image centrale en la rendant extensible (en fait non, mais en cachant la partie à droite selon la résolution), ou en ayant plusieurs grandeurs choisies par javascript.
Serge.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut,
le couple HTML/CSS fonctionne parfaitement bien.
pour ce qui est des navigateurs il y a seulement quelques contraintes.
le principal problème avec ta mise c'est qu'elle n'utilise pas pleinement CSS.
il faudrait surtout ne pas utiliser de tableau.
pour l'adaptation au navigateur, une largeur proportionnelle n'est pas forcement le plus facile à gérer.
pour JavaScript, j'aurais tendance à te dire : plus il y a de code moins c'est stable, surtout si tu multiplies le nombre de technologies.
le couple HTML/CSS fonctionne parfaitement bien.
pour ce qui est des navigateurs il y a seulement quelques contraintes.
le principal problème avec ta mise c'est qu'elle n'utilise pas pleinement CSS.
il faudrait surtout ne pas utiliser de tableau.
pour l'adaptation au navigateur, une largeur proportionnelle n'est pas forcement le plus facile à gérer.
pour JavaScript, j'aurais tendance à te dire : plus il y a de code moins c'est stable, surtout si tu multiplies le nombre de technologies.
Voila ce que ça me donne: http://www.ateliercalc.com/Onglets.html
C'est censé faire comme les onglets de http://www.ateliercalc.com/Accueil.html mais quand la souris e dessus, les onglets se colorent en rose et se baisse légèrement.
Je ne comprend pas pourquoi ça ne marche pas.
C'est censé faire comme les onglets de http://www.ateliercalc.com/Accueil.html mais quand la souris e dessus, les onglets se colorent en rose et se baisse légèrement.
Je ne comprend pas pourquoi ça ne marche pas.
salut,
pour la taille de l'image, je ne suis pas d'accord. si tu appliques des valeurs aux attributs 'height' et 'width' en valeurs relatives, ces valeurs s'expriment par rapport à leur contenant.
"les longueurs exprimées en pourcentages sont fonction de l'espace horizontal et vertical disponible à cet instant, non des dimensions naturelles de l'image"
Spécification HTML 4.01
pour la taille de la police, le '%' est comme le 'em'.
"Une valeur en pourcentage spécifie une taille de police absolue par rapport à celle de l'élément parent"
Spécification CSS 2
cela signifie que si tu codes un lien dans une cellule de tableau :
et que tu codes la taille de police ainsi :
la taille de police du lien fera la moitié de la taille de police de la cellule.
si pour la cellule la police mesure 12pt,pour le lien elle mesurera 6pt.
par rapport aux différences entre navigateurs (comme te l'a dit Serge_La), il ne prennent pas tous la même valeur de référence.
si tu codes une police à '80%' ou '.8em' et si dans un navigateur la taille de référence est 16pt alors que dans l'autre la taille de référence est 14pt, tu as des différences…
'<img>' vs '{background-image}'
là c'est surtout une question de sémantique.
la question à se poser est : à quoi sert l'image dans ma page ?
• si l'image fait parti du contenu de la page, il faut l'insérer en tant qu'image, '<img>' ;
• si l'image sert à la décoration du site, il faut la placer en image de fond avec la règle css '{background-image}'.
pour la taille de l'image, je ne suis pas d'accord. si tu appliques des valeurs aux attributs 'height' et 'width' en valeurs relatives, ces valeurs s'expriment par rapport à leur contenant.
"les longueurs exprimées en pourcentages sont fonction de l'espace horizontal et vertical disponible à cet instant, non des dimensions naturelles de l'image"
Spécification HTML 4.01
pour la taille de la police, le '%' est comme le 'em'.
"Une valeur en pourcentage spécifie une taille de police absolue par rapport à celle de l'élément parent"
Spécification CSS 2
cela signifie que si tu codes un lien dans une cellule de tableau :
<table> [...] <tr> <td> <a href="#">Lien</a> </td> [...] </tr> [...] </table>
et que tu codes la taille de police ainsi :
a
{
font-size: 50%;
}la taille de police du lien fera la moitié de la taille de police de la cellule.
si pour la cellule la police mesure 12pt,pour le lien elle mesurera 6pt.
par rapport aux différences entre navigateurs (comme te l'a dit Serge_La), il ne prennent pas tous la même valeur de référence.
si tu codes une police à '80%' ou '.8em' et si dans un navigateur la taille de référence est 16pt alors que dans l'autre la taille de référence est 14pt, tu as des différences…
'<img>' vs '{background-image}'
là c'est surtout une question de sémantique.
la question à se poser est : à quoi sert l'image dans ma page ?
• si l'image fait parti du contenu de la page, il faut l'insérer en tant qu'image, '<img>' ;
• si l'image sert à la décoration du site, il faut la placer en image de fond avec la règle css '{background-image}'.
bonjour Sandykoala,
Je voudrais bien avoir les polices ajustées par % mais ça cause trop d'incertitudes quant aux bugs et aux différences entre fureteurs. Je mets toujours mes polices en pixels pour éviter les problèmes. En pratique, j'utilise un javascript pour détecter la grandeur de la fenêtre et je fais tout ajuster selon. Pratiquement seulement les images ne sont pas ajustées selon, et les images pourraient aussi.
Serge.
Je voudrais bien avoir les polices ajustées par % mais ça cause trop d'incertitudes quant aux bugs et aux différences entre fureteurs. Je mets toujours mes polices en pixels pour éviter les problèmes. En pratique, j'utilise un javascript pour détecter la grandeur de la fenêtre et je fais tout ajuster selon. Pratiquement seulement les images ne sont pas ajustées selon, et les images pourraient aussi.
Serge.
Re les geeks.
Vraiment personne n'aurait qq infos sur mon probleme ? (possible, impossible ?)
Merci.
Vraiment personne n'aurait qq infos sur mon probleme ? (possible, impossible ?)
Merci.
J'ai le même problème que toi et en fouillant un peu sur google, j'ai vu qu'il fallait utiliser des % au lieu des pixels. Avec des tableaux de 100% sur 100%, la page se redimùensionne automatiquement.
Mon problème c'est surtout pour les éléments de la page. Mon fond s'adapte bien mais pas mes polices et mes autres images. Toutes mes pages sont constituées de calques dans lequel j'ai mis du texte ou une image.
Si quelqu'un a une solution....
Mon problème c'est surtout pour les éléments de la page. Mon fond s'adapte bien mais pas mes polices et mes autres images. Toutes mes pages sont constituées de calques dans lequel j'ai mis du texte ou une image.
Si quelqu'un a une solution....
Salut sandykoala :p
Merci pour cette info juteuse, je vais tenter ça de mon coté une fois que je serai rentré du boulot, c-a-d ce soir.
Pour la taille de la police, il me semble que tu peux également la gérer en % mais est ce que cela va s'adapter au redimensionnement de la page...ça je ne sais pas. Je chercherai ce soir de mon coté et ajouterai ce que je trouve à la suite de la discussion si je trouve qqch :p
Merci encore et à bientot
Merci pour cette info juteuse, je vais tenter ça de mon coté une fois que je serai rentré du boulot, c-a-d ce soir.
Pour la taille de la police, il me semble que tu peux également la gérer en % mais est ce que cela va s'adapter au redimensionnement de la page...ça je ne sais pas. Je chercherai ce soir de mon coté et ajouterai ce que je trouve à la suite de la discussion si je trouve qqch :p
Merci encore et à bientot
Dans mon cas, l'image sert de décoration, donc je l'a met en background-color. Mais est-ce qu'elle va s'adapter à toutes les résolutions?
non, elle ne s'adaptera pas.
tu peux la faire se répéter (mosaïque) et ainsi couvrir une grande surface avec un tout petit bitmap mais elle ne s'adaptera pas.
pour la balise '<img>' c'est la même chose, si tu spécifies une taille plus grande que la taille du bitmap tu vas baisser en résolution, si tu indiques une taille plus petite tu perdras inutilement de la vitesse de chargement.
il faut :
• soit avoir plusieurs bitmap de tailles différentes qui seront appliquées via Javascript aux différentes tailles d'écran ;
• soit créer une image qui s'adapte à un contexte fluide (qui change de taille). pour cela tu peux par exemple mettre un bitmap dans un coin ou au centre en dégradant la couleur des bords du bitmap vers la couleur de l'arrière plan de la page.
tu peux la faire se répéter (mosaïque) et ainsi couvrir une grande surface avec un tout petit bitmap mais elle ne s'adaptera pas.
pour la balise '<img>' c'est la même chose, si tu spécifies une taille plus grande que la taille du bitmap tu vas baisser en résolution, si tu indiques une taille plus petite tu perdras inutilement de la vitesse de chargement.
il faut :
• soit avoir plusieurs bitmap de tailles différentes qui seront appliquées via Javascript aux différentes tailles d'écran ;
• soit créer une image qui s'adapte à un contexte fluide (qui change de taille). pour cela tu peux par exemple mettre un bitmap dans un coin ou au centre en dégradant la couleur des bords du bitmap vers la couleur de l'arrière plan de la page.
Je regarde en ce moment comment je peux faire les onglets en css mais il y aura toujours le problème de la police. Si j'ai bien compris, en mettant la police en %, elle va varié selon la taille de l'onglet (si celui-ci est exprimé en %)??
J'ai trouvé quelques site vraiment bien sur les css:
mamouthland.free.fr/cours/css/
batraciens.net/css-astuces/
openweb.eu.org/css/
www.alsacreations.com
Si vous en connaissez d'autres (en français si possible)...
J'ai trouvé quelques site vraiment bien sur les css:
mamouthland.free.fr/cours/css/
batraciens.net/css-astuces/
openweb.eu.org/css/
www.alsacreations.com
Si vous en connaissez d'autres (en français si possible)...
salut,
je t'avais fait un exemple pour la taille de police.
elle dépend de la taille de police du conteneur mais pas de la taille du conteneur lui même.
je ne vois pas ce qui te chagrine avec les onglets.
pour les sites, avec ceux là tu as de quoi faire pour longtemps !
je t'avais fait un exemple pour la taille de police.
elle dépend de la taille de police du conteneur mais pas de la taille du conteneur lui même.
je ne vois pas ce qui te chagrine avec les onglets.
pour les sites, avec ceux là tu as de quoi faire pour longtemps !
Salut.
"div#corps", c'est du CSS.
C'est pour sélectionner la balise div qui a l'id (identifiant) "corps".
"div#corps", c'est du CSS.
C'est pour sélectionner la balise div qui a l'id (identifiant) "corps".
Bonjours les geeks !
Désolé de ne pas avoir été plus présent dans mon propre post mais beaucoup de boulot donc pas b de temps pour gerer le site.
J'ai qd meme cherché un peu pour l'histoire des %, j'ai réussi a faire ce que je voulais (enfin je crois ^^ et si vous voulez voir , go voir le code source de la page :) donc autant dire que vous m'avez été d'une aide précieuse (je pense nottament à toi sandykoala :) .
Merci encore et good luck à toi sandy :p
Désolé de ne pas avoir été plus présent dans mon propre post mais beaucoup de boulot donc pas b de temps pour gerer le site.
J'ai qd meme cherché un peu pour l'histoire des %, j'ai réussi a faire ce que je voulais (enfin je crois ^^ et si vous voulez voir , go voir le code source de la page :) donc autant dire que vous m'avez été d'une aide précieuse (je pense nottament à toi sandykoala :) .
Merci encore et good luck à toi sandy :p
en effet ca marche bien, apart que ton image est en mosaïque sur une grande résolution.
Je comprend pas comment ca peut s'adapter si tu as utiliser des px??!!!!
Je comprend pas comment ca peut s'adapter si tu as utiliser des px??!!!!
bonjour Sandy et 52322,
Le site de 52322 est très beau.
Son site est extensible parcqu'il applique un css tout en %. Et 52322 a fait une erreur dans le code. Le code suvant:
est erroné. En html, le width est en pixel par défaut. Il doit mettre width="1000" je crois bien.
La grandeur de la police n'a pas nécessairement besoin d'être ajustée avec la résolution. Il suffit de prendre une grandeur moyenne qui sera lisible si plus petite ou plus grande.
Le conteneur et le contenant en % est une bonne idée si ça marche et que ça ne cause pas de bugs. Je vais visiter son site sur d'autres ordinateurs pour voir le résultat.
Serge.
Le site de 52322 est très beau.
Son site est extensible parcqu'il applique un css tout en %. Et 52322 a fait une erreur dans le code. Le code suvant:
<table class="table02" align="center" width="1000px">
est erroné. En html, le width est en pixel par défaut. Il doit mettre width="1000" je crois bien.
La grandeur de la police n'a pas nécessairement besoin d'être ajustée avec la résolution. Il suffit de prendre une grandeur moyenne qui sera lisible si plus petite ou plus grande.
Le conteneur et le contenant en % est une bonne idée si ça marche et que ça ne cause pas de bugs. Je vais visiter son site sur d'autres ordinateurs pour voir le résultat.
Serge.
salut,
ça ne fera pas beaucoup avancer le schmilblik mais l'attribut 'width' pour la balise '<table>' est une longueur.
à ce titre elle s'exprime soit en pixel sans unité soit en pourcentage avec '%'.
ça ne fera pas beaucoup avancer le schmilblik mais l'attribut 'width' pour la balise '<table>' est une longueur.
à ce titre elle s'exprime soit en pixel sans unité soit en pourcentage avec '%'.
Le CSS c'est pas mal mais c'est pas toujours bien é par les navigateurs. En local, ma page s'affiche bien sur IE mais pas sur mozilla. En plus, quand je met en ligne, la page ne s'affiche pas bien ni dans IE et ni dans Mozilla. Why???
Sinon, est-ce que le javascript permet pour un débutant d'ajuster la page?
Sinon, est-ce que le javascript permet pour un débutant d'ajuster la page?
Est-ce qu'une image d'arrière plan se redimensionne automatiquement selon l'arrière plan? Dans le tableau, est-ce que c'est mieux d'insérer une imùage ou de la mettre en fond du bloc?