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:

Uniformisation en HTLM

Forester

Par Forester
dans Programmation

 Partager

Messages recommandés

Forester Full Patch Member

Forester

Posté(e)
Posté(e)

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. ;)

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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…

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être 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.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...