Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Forester

Uniformisation en HTLM

Messages recommandés

Bonsoir,

 

Je réalise dans le cadre de mes études un petit site HTML, mais une question me taraude, comment ou par quel biais faire en sorte que mes pages HTML soient visibles de la même façon peu importe la taille de l'écran car le problème c'est que je travaille sur un écran 17 pouces à la fac mais là sur un 15 pouces le texte est trop gros donc mal placé...

 

Bon voilà tout simple certainement...merci pour votre aide. ;)

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour Forester,

 

Si tu souhaites créer des pages WEB qui sachent s'adapter à un peu toutes les résolutions d'écrans, il faut les construire en relatif. C'est-à-dire, par exemple, exprimer les dimensions d'un bloc en pourcentage de celles du bloc qui le contient, ou exprimer la taille de la police de caractères dans l'unité "em" (liée à la résolution d'écran).

 

Dans l'exemple ci-dessous, l'écran est divisé en trois colonnes égales (attributs float et width) qui s'ajustent automatiquement à la taille de la fenêtre (il te suffit, pour le vérifier, de modifier la largeur de la fenêtre de ton navigateur). Par ailleurs, la taille de la police est proportionnelle à la résolution de l'écran (attribut font-size)…

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ecran en 3 colonnes</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1252" />
<style type="text/css">
.colonne{float:left;
        width:30%;
        height:400px;
        border:1px solid #999;
        margin:2px;
        padding:5px;
        font-size:0.8em;
        text-align:center;
       }
.valid  {height:31px;
        width:88px;
        margin:5px 0 0 2px;
        border:0;
       }
</style>
</head>
<body>
<h1>Mon écran est en 3 colonnes</h1>
<div class="colonne">
<p>Première colonne</p>
</div>
<div class="colonne">
<p>Seconde colonne</p>
</div>
<div class="colonne">
<p>Troisième colonne</p>
</div>
<p>
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" class="valid" />
</p>
</body>
</html>

ce qui donne,

meee3c.jpg

Après, si tu veux creuser, je te suggère le tout nouveau tuto Apprenez à créer votre site web avec HTML5 et CSS3 du Site du ZérO (leurs tutos sont d'excellente qualité), et les articles pointus du site Pompage : un des derniers articles explique justement la toute nouvelle unité "rem" (CSS3)… ;)

 

Mais n'espère pas que ta page ait exactement la même apparence chez tous tes visiteurs. Certains ajustements seront imparfaits : pour commencer, il existe des différences d'interprétation du code HTML/CSS entre les divers navigateurs ! Alors…

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×
×
  • Créer...