Résolution écran

ddehem · le 17 mars 2010

Bonjour,

J'ai un problème (qui n'en est pas un) d'affichage de mon site suivant la résolution de l'écran utilisé.

Chez moi, j'utilise un 20' et mon site s'affiche sans barre de défilement horizontale. Sur d'autres PC, la barre y est et on doit naviguer de gauche à droite eet vice-versa pour voir l'entièreté de la page.

J'ai cherché sur des forums et j'ai vu qu'il s'agissait de "tables". je ne suis pas doué eniprogramation, j'utilise un prgramme (Web Easy Pro), qui fonctionne bien mais ne gère apparemment pas ce genre de problème.

Ma question est donc la suivante ; comment faire pour que mes pages web s'affichent sur tous les pc à 100% quelle que soit la résolution d'écran. J'ai trouvé ce script :

<html>

<head>

</head>

<tr>

<td colspan="2">Titre sur 2 cellules horizontalement contigues</td>

</tr>

<td rowspan="2">Titre sur 2 cellules verticales contigues</td>

<td>bip centré</td>

<td>blurp centré</td>

</tr>

<td>pif centré</td>

<td>paf centré</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Si il est bon, où dois-je le coller tenant compte que j'ai une page "index.html" et que les autres sont les pages titre du site nommées index_001.html etc...

merci d'avance pour votre aide précieuse.

ddehem

Basphet · le 17 mars 2010

Bonjour.

Je ne suis pas du tout doué en programmation HTML non plus, mais moi j'ai réussi à faire apparemment ce que tu veux avec FrontPage pour mon site.

C'est FrontPage qui a généré le code automatiquement, mais tu peux peut être t'en inspirer en éditant le code de la page d'index de mon site : www.maitrisepc.fr

PS : que personne n'y voie une pub masquée, ma boite est malheureusement fermée, le site existe toujours mais n'est même plus référencé...

Et en plus j'ai viré toutes les coordonnées...

ddehem · le 17 mars 2010

Bonjour Basphet,

je vais tenter ce que tu me conseilles et je reviendrai si ça ne marche pas.

Merci pour toa réponse.

ddehem

ddehem · le 17 mars 2010

J'ai été voir le code source du site indiqué par Basphet, mais mon problème reste le même.

Les codes td sont placés avec des renvois vers des lignes de texte.

Si quelqu'un peut m'indiquer où je dois placer le script, quelles lignes de ce scrip sont indispensables et lesquelles adapter et comment??

Je fais ce site pour un membre de ma belle famille qui a pas les moyens de se payer un informaticien : www.torothentique.com

Dylav · le 17 mars 2010

Bonjour ddehem,

Le “script” que tu nous présentes n'est pas un script, mais le code HTML d'une page WEB. La particularité de cette page, c'est que les dimensions qui y sont données sont relatives, et non pas absolues. En d'autres termes, les dimensions horizontales des tables et de leurs cellules sont données en pourcentage de la largeur de la fenêtre. Ainsi, tant que tu ne demandes pas d'afficher plus de 100% de la fenêtre, il n'y aura pas de scrolling horizontal.

Comment appliquer cette technique à ton site ? En remplaçant toutes les dimensions fixes par des dimensions proportionnelles. Dans l'exemple ci-dessous du bloc <div> “e14” (pris dans la feuille de style index_p.css),

- il est positionné en fixe (left et top dans une unité fixe d'ailleurs pas très adéquate),

- il a également des dimensions fixes (width et height).

Il faut donc que tu transformes tout ça en relatif...

div#e14 { /* <DIV><FONT size="4"><STR... */
position : absolute;

left : 202.50pt;

top : 15.00pt;

width : 578.25pt;

height : 45.75pt;

}

Dans cet exemple, tu pourrais essayer tout d'abord left:12%; et width:34%; (c'est très au pif). Quant à la taille de ton écran (comme de ceux de tes visiteurs), il ne faut pas la considérer en pouces, mais en définition (par exemple 1600x900, c'est-à-dire 1600 pixels de largeur sur 900px de hauteur, ou 800x600 pour de bons vieux 15" à canon)...

La question est passionnante, mais pour la résoudre il va falloir que tu t'investisses un peu dans les langages XHTML et CSS. Rassure-toi, les bases sont simples ! Je te conseille d'aller voir le tutoriel du Site du ZérO, particulièrement bien conçu et agréable à lire : un vrai roman policier

sebdraluorg · le 17 mars 2010

Salut à tous,

Euh bin suffit de définir une largeur de 100% (en css)

Exemple:

<head>
<style type="text/css">

body 
		{
			width: 100%; 
		}
</style>
</head>

Bon il va de soit que si tous tes éléments html ont une taille fixe ça ne changera rien, mais à toi de définir quelle(s) zone(s) doivent avoir une taille relative également...

++

Dylav · le 17 mars 2010

Bonsoir Séb,

Euh bin suffit de définir une largeur de 100% (en css)

Certes, mais inutile, car c'est bien sûr la valeur par défaut.

Bon, il va de soi que si tous tes éléments html ont une taille fixe, ça ne changera rien

Oui, tout le problème est là, et c'est justement ce que je tentais d'exposer à Ddehem, non ?

KewlCat · le 17 mars 2010

Euh... Comment le body pourrait avoir une autre largeur que 100%, exactement ?? Vu que c'est le tout premier élément du document il ne peut qu'occuper toute la surface affichée (tout le "viewport")....

Et pour tous les éléments de type bloc, la largeur par défaut est toujours "100%" donc inutile de le préciser explicitement. Il n'y a que ceux qui seraient susceptibles de se retrouver en largeur "auto" qui devraient être spécifiés. Enfin, "100%" c'est 100% de l'espace disponible à ce bloc pour s'afficher, parce que la propriété width à "100%" signifie que le bloc fils prend toute la largeur de son conteneur, ce qui va poser de sacrés problèmes s'il y a du padding (décalages en tous genres, et pas toujours pareil selon les navigateurs. Que du bonheur, quoi)

On pourrait reprendre du début ?

Ce que je vois sur cette page, c'est (de gauche à droite et de bas en haut) :

- un logo

- un titre

- un menu

- le contenu (composé de deux images l'une en-dessous de l'autre mais dont la seconde gagnerait à être remplacée par un cadre centré rempli d'un tire et de texte)

Je propose la structure suivante :

- background-image rouge sur le haut du body et background-color gris

- l'image dans le titre (en "img" ou en background-image, float ou position absolue)

- le titre en h1 à côté de l'image

- le menu de type bloc en float-left, de largeur fixe

- le contenu qui occupe le reste de l'espace libre

Ca devrait déjà beaucoup mieux passer sur toutes les tailles de fenêtres !

Dylav · le 18 mars 2010

Dans la veine de ce que suggère KewlCat, je te propose une page HTML simplifiée, structurée ainsi,

un écran gris #CCC avec une image de fond répétée verticalement pour faire une marge (où s'inscrira le menu),
un bandeau haut de fond rouge sombre #900, avec à gauche le logo en image de fond non répétée,
une <div> fixe à gauche, pour inscrire le menu dans la marge,
un corps d'écran (hors bandeau et menu) affichant une grande image composite centrée (parce que je n'ai absolument pas compris comment on pouvait tracer des traits entre images, surtout en oblique ?), et en-dessous l'encart “Pourquoi ce site Internet ?”

L'intérêt que tu trouveras à cette ébauche de solution, c'est la concision de sa formulation. Compare le source généré par ton produit Avanquest avec celui que je propose : lequel semble le plus lisible ?

La page HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title> ACCUEIL </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css;" />
<meta name="Description" content="Ce site a été créé à la mimine par Dylav" />
<link rel="stylesheet" href="index_p.css" type="text/css"
         media="screen,projection,print" />	<!--// Page Style //-->
</head>
<body>
 <div id="bandeau">
   <h1>Association “ <strong>Pour une Tauromachie Authentique 33</strong> ”</h1>
   <h2>Ce site est en construction et sera bientôt opérationnel</h2>
 </div>
 <div id="menu">
   <p><a href="index_012.html">Présentation de l'Association</p></a>
   <p><a href="index_002.html">Les Fondamentaux</p></a>
   <p><a href="index_003.html">Nos points de vue sur la tauromachie authentique</p></a>
   <p><a href="index_004.html">Vos points de vue sur la tauromachie authentique</p></a>
   <p><a href="index_010.html">Actualités de la tauromachie</p></a>
   <p><a href="index_015.html">Comment se documenter</p></a>
   <p><a href="index_014.html">Partenaires-Liens</p></a>
   <p><a href="index_011.html">Statuts et fonctionnement</p></a>
   <p><a href="index_013.html">Nous contacter</p></a>
 </div>
 <div id="corps">
   <img src="http://moe.mabul.org/up/moe/2010/03/18/img-165412ke15w.jpg" 
        alt="" title="photographies" />
   <div id="pourquoi">
     <p><strong>Pourquoi ce site Internet ?</strong></p>
     <ul>
       <li>il est destiné aux "afficionados à los toros" autrement dit, 
           les amateurs de corridas,</li>
       <li>il doit leur permettre de,
         <ul>
           <li>s'informer sur les vraies valeurs,</li>
           <li>s'exprimer sur la tauromachie authentique et dialoguer,</li>
           <li>se documenter,</li>
           <li>participer aux actions de préservation de la tradition culturelle
               que constitue la corrida.</li>
         </ul>
       </li>
     </ul>
   </div>
 </div>
</body>
</html>

La feuille de style

body {
    margin: 0;
    background: #CCC url(http://moe.mabul.org/up/moe/2010/03/18/img-165346qw5e2.jpg) repeat-y;
    }
h1 {
    margin:0;
    padding: 20px 0 0 0;
    font: 24px "Comic sans MS";
    color: #000;
    }
h2 {
    margin:0;
    font: italic 16px "Arial Unicode MS";
    color: #FFF;
    }
a {
    text-decoration: none;
    color: #000;
    }
a:hover {
    color: #F00;
    }
ul {
    padding-left: 12px;
    }
li {
    padding-left: 3px;
    }
#bandeau {
    height: 97px;
    background: #900 url(http://moe.mabul.org/up/moe/2010/03/18/img-165357hqk0e.jpg) no-repeat;
    text-align: center;
    vertical-align: middle;
    padding-left: 141px;
    }
#menu {
    position: fixed;
    top: 97px;
    left: 0;
    width: 156px;
    padding: 0;
    }
#menu > p {
    margin: 15px 0 0 3px;
    font: bold 13px "Arial Unicode MS";
    }
#corps {
    padding-top: 10px;
    margin-left: 156px;
    text-align: center;
    }
#pourquoi {
    width:50%;
    border: 2px solid #FFF;
    margin: 20px 0 0 25%;
    padding: 0 15px;
    font: 12px "Arial Unicode MS";
    text-align: left;
    }

Nota : à cause de ton image composite centrale, on ne peut néanmoins pas descendre en-dessous d'une résolution 1024x768. Mais il ne doit plus exister beaucoup d'écrans 800x600 encore en fonctionnement !

sebdraluorg · le 18 mars 2010

Euh... Comment le body pourrait avoir une autre largeur que 100%

Certes, mais inutile, car c'est bien sûr la valeur par défaut.

huhu bah vi ! Vu comme ça, c'est forcement très con

L'idée etait de l'inviter à utiliser des tailles relatives et non fixe, le body a 100% etait la pour lui dire "tu pars d'une zone qui fait 100% à toi de découper ces 100% comme tu le souhaites..."

++

Connexion

Pas encore inscrit ?

Résolution écran

Messages recommandés

ddehem

Basphet

ddehem

ddehem

Dylav

sebdraluorg

Dylav

KewlCat

Dylav

sebdraluorg

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer