IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Erreurs d'affichage sur petits écrans


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Avril 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2013
    Messages : 1
    Par défaut Erreurs d'affichage sur petits écrans
    Bonjour,
    J'ai codé mon page dans un grand écran, et sur mon petit pc il s'affiche pas correctement.
    Je suis nulle en html mais voici mon code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    <HTML>
    <HEAD>
    <title>tara.fr</title>	
    	<STYLE>
    #een{
    	background-image: url("immage/een.png");
        background-repeat: no-repeat;
    	float: left;
    	margin-left: 260px;
    	width: 20%;
    	margin-top:50px;
    	clear: both;
    }
    #twee{
        background-image: url("immage/twee.png");
    	background-repeat: no-repeat;
    	width: 20%;
    	float: left;
    	margin-top:50px;
    }
    #drie{
    	background-image: url("immage/drie.png");
    	background-repeat: no-repeat;
        margin-top:50px;
        width: 35%;
        float: left;
    }
    #vier{
    	background-image: url("immage/vier.png");
    	background-repeat: no-repeat;
    	float: left;
    	margin-left: 260px;
    	width: 20%;
    	margin-top: 50;
    	clear: both;
    }
    #vijf{
    	background-image: url("immage/vijf.png");
    	background-repeat: no-repeat;
    	width: 20%;
    	float: left;
    	margin-top: 50px;
    }
    #zes{
    	background-image: url("immage/zes.png");
    	background-repeat: no-repeat;
    	margin-top: 50px;
    	width: 35%;
    	float: left;
    }
    #zeven{
    	background-image: url("immage/zeven.png");
    	background-repeat: no-repeat;
    	float: left;
    	margin-left: 260px;
    	width: 20%;
    	margin-top: 50;
        clear: both;
    }
    #acht{
    	background-image: url("immage/acht.png");
    	background-repeat: no-repeat;
    	width: 20%;
    	float: left;
    	margin-top: 50px;
    }
    #negen{
    	background-image: url("immage/negen.png");
    	background-repeat: no-repeat;
    	margin-top: 50px;
    	width: 35%;
    	float: left;
    }
    	</STYLE>
    </HEAD>
    <BODY bgcolor="#000000">
     
       	<div id="een"><img src="immage/een.png"></div>
        <div id="twee"><img src="immage/twee.png"></div>
        <div id="drie"><img src="immage/drie.png"></div>
        <div id="vier"><img src="immage/vier.png"></div>
        <div id="vijf"><img src="immage/vijf.png"></div>
        <div id="zes"><img src="immage/zes.png"></div>
        <div id="zeven"><img src="immage/zeven.png"></div>
        <div id="acht"><img src="immage/acht.png"></div>
        <div id="negen"><img src="immage/negen.png"></div>                            
     
    </BODY>
    </HTML>
    comment je peux faire pour être sur que ma page s'affiche correctement en tout résolution?

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Bonsoir,
    et sur mon petit pc il s'affiche pas correctement.
    je dois admettre que c'est un peu léger comme explication du dysfonctionnement!

    Question au passage, pourquoi une image en background de DIV identique à l'image contenue dans la même DIV?

  3. #3
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Bonjour,

    Je pense que vous ne comprenez pas bien :
    - l'utilisation de la cascade en Css;
    - la propriété float qui est mal utilisée avec des clear.

    Je vous propose cette solution pour bien positionner vos éléments en fonction des largeurs d'écran.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <!doctype html>
    <html>
        <HEAD>
        <meta charset="UTF-8">
        <title>tara.fr</title>
        <STYLE>
    #een {
    	width: 20%;
    	background: #060;
    }
    #twee {
    	width: 20%;
    	background: #C33;
    }
    #drie {
    	width: 35%;
    	background: #FC9;
    }
    #vier {
    	width: 20%;
    	background: #09F;
    }
    #vijf {
    	width: 20%;
    	background: #939;
    }
    #zes {
    	width: 35%;
    	background: #0FC;
    }
    #zeven {
    	width: 20%;
    	background: #339;
    }
    #acht {
    	width: 20%;
    	background: #C60;
    }
    #negen {
    	width: 35%;
    	background: #F69;
    }
    .container{
    	margin-top:50px;
    	margin-left:260px;
    }
    .box{
    	display:table;
    	width:100%;
    }
    #een, #twee, #drie, #vier, #vijf, #zes, #zeven, #acht, #negen {
    	display:table-cell;
    }
    </STYLE>
        </HEAD>
       <BODY >
    <div class="container">
     <div class="box">
    	  <div id="een"><img src="immage/een.png">1</div>
    	  <div id="twee"><img src="immage/twee.png">2</div>
    	  <div id="drie"><img src="immage/drie.png">3</div>
        </div>
     <div class="box">
          <div id="vier"><img src="immage/vier.png">4</div>
          <div id="vijf"><img src="immage/vijf.png">5</div>
          <div id="zes"><img src="immage/zes.png">6</div>
        </div>
     <div class="box">
          <div id="zeven"><img src="immage/zeven.png">7</div>
          <div id="acht"><img src="immage/acht.png">8</div>
          <div id="negen"><img src="immage/negen.png">9</div>
        </div>
      </div>
      </BODY>
    </html>

  4. #4
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Février 2013
    Messages
    149
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2013
    Messages : 149
    Par défaut
    Bonjour,
    Pour commencer, je serais toi, je séparerai ton code CSS de ton code html ( tu t'en sortiras mieux par le suite).
    Pour ce faire, commence à créer un nouveau fichier qui se nommera par exemple : 'CSS.css'

    si tu code en utf8 rajoute en tout premier dans ton document :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    @charset "utf-8";
    /* CSS Document */

    puis tu transfert toutes tes données css dedans ( un copier/coller ^^ simple )

    ça te donnera :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    @charset "utf-8";
    /* CSS Document */
     
    #een {
    	width: 20%;
    	background: #060;
    }
    #twee {
    	width: 20%;
    	background: #C33;
    }
    #drie {
    	width: 35%;
    	background: #FC9;
    }
    #vier {
    	width: 20%;
    	background: #09F;
    }
    #vijf {
    	width: 20%;
    	background: #939;
    }
    #zes {
    	width: 35%;
    	background: #0FC;
    }
    #zeven {
    	width: 20%;
    	background: #339;
    }
    #acht {
    	width: 20%;
    	background: #C60;
    }
    #negen {
    	width: 35%;
    	background: #F69;
    }
    .container{
    	margin-top:50px;
    	margin-left:260px;
    }
    .box{
    	display:table;
    	width:100%;
    }
    #een, #twee, #drie, #vier, #vijf, #zes, #zeven, #acht, #negen {
    	display:table-cell;
    }

    et ensuite dans ta page html :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>tara.fr</title>
    <link href="CSS.css" rel="stylesheet" type="text/css"> /*tu fait appel à ton fichier css*/
    </head>
     <body> //attention au espace tu en avais un apres body
    <div class="container">
     <div class="box">
    	  <div id="een"><img src="immage/een.png">1</div>
    	  <div id="twee"><img src="immage/twee.png">2</div>
    	  <div id="drie"><img src="immage/drie.png">3</div>
        </div>
     <div class="box">
          <div id="vier"><img src="immage/vier.png">4</div>
          <div id="vijf"><img src="immage/vijf.png">5</div>
          <div id="zes"><img src="immage/zes.png">6</div>
        </div>
     <div class="box">
          <div id="zeven"><img src="immage/zeven.png">7</div>
          <div id="acht"><img src="immage/acht.png">8</div>
          <div id="negen"><img src="immage/negen.png">9</div>
        </div>
      </div>
      </body>
    </html>
    Cordialement.

Discussions similaires

  1. [Carte graphique] Performance affichage sur 2 écrans
    Par soforever dans le forum Composants
    Réponses: 3
    Dernier message: 04/05/2007, 10h40
  2. Erreur d'affichage sur le montant HT
    Par dddodo dans le forum Access
    Réponses: 8
    Dernier message: 13/12/2006, 22h22
  3. [Ecran] Problème d'affichage sur un écran
    Par sylsau dans le forum Périphériques
    Réponses: 5
    Dernier message: 09/08/2006, 09h58
  4. Problème d'affichage sur un écran 16/9ème
    Par kurul1 dans le forum C++Builder
    Réponses: 2
    Dernier message: 23/01/2006, 11h51
  5. [langage] Erreur d'arrondi sur petits nombres
    Par Tchetch dans le forum Langage
    Réponses: 7
    Dernier message: 12/01/2005, 10h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo