Site HTML ne s'affiche pas pareil suivant le format de l'écran
CedNad8
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
angeha Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
angeha Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous !
Je réalise une petite page Web perso que j'ai créée avec Notepad++. Malheureusement, mes compétences en HTML et CSS sont limitées.
Mon problème est que j'ai créé ma page avec mon ordinateur 13 pouces, et l'affichage est parfait ! Malheureusement, lorsque je l'ouvre avec un ordinateur qui a un écran plus grand... l'affichage est complètement décalé...
...SVP pouvez vous m'aider ?
La page est simple, elle est constituée :
- d'une photo en background
- d'une image (en haut à gauche) qui permet de télécharger un docx lorsqu'on clique dessus.
- d'un fichier pdf qui est affiché (légèrement sur la droite)
Voici mon codage :
<!DOCTYPE html>
<html>
<head>
<title>MON_TITRE</title>
<style type="text/css">
body {
background-image:url("MON_BACKGROUND.jpg");
heigth:100%;
background-size:cover;
}
#monpdf {
position: relative;
left: 35%;
width:667px;
height:550px;
}
</style>
</head>
<body>
<a href="MON_FICHIER_A_TELECHARGER.docx">
<img src="MON_IMAGE.jpg"> </a>
<div id="monpdf">
<iframe src="MON PDF.pdf" width="667px" height="535px"></iframe>
</div>
</body>
</html>
Je réalise une petite page Web perso que j'ai créée avec Notepad++. Malheureusement, mes compétences en HTML et CSS sont limitées.
Mon problème est que j'ai créé ma page avec mon ordinateur 13 pouces, et l'affichage est parfait ! Malheureusement, lorsque je l'ouvre avec un ordinateur qui a un écran plus grand... l'affichage est complètement décalé...
...SVP pouvez vous m'aider ?
La page est simple, elle est constituée :
- d'une photo en background
- d'une image (en haut à gauche) qui permet de télécharger un docx lorsqu'on clique dessus.
- d'un fichier pdf qui est affiché (légèrement sur la droite)
Voici mon codage :
<!DOCTYPE html>
<html>
<head>
<title>MON_TITRE</title>
<style type="text/css">
body {
background-image:url("MON_BACKGROUND.jpg");
heigth:100%;
background-size:cover;
}
#monpdf {
position: relative;
left: 35%;
width:667px;
height:550px;
}
</style>
</head>
<body>
<a href="MON_FICHIER_A_TELECHARGER.docx">
<img src="MON_IMAGE.jpg"> </a>
<div id="monpdf">
<iframe src="MON PDF.pdf" width="667px" height="535px"></iframe>
</div>
</body>
</html>
A voir également:
- Site HTML ne s'affiche pas pareil suivant le format de l'écran
- Format epub - Guide
- Site de telechargement - Accueil - Outils
- Format factory - Télécharger - Conversion & Codecs
- Site comme coco - Accueil - Réseaux sociaux
- Double ecran - Guide
7 réponses
Salut
Ton problème a mon avis vient de là : left: 35%;
car 35% de 1000px -->350px alors que 35% 720px --> 252 px
Ton problème a mon avis vient de là : left: 35%;
car 35% de 1000px -->350px alors que 35% 720px --> 252 px
CedNad8
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
Je pense que tu as entièrement raison, mais existe-il un moyen pour y remédier ?
Salut,
Tester en remplacent "left: 35%; " par "margin: 0 auto;" ce qui devrait centrer le div concerné.
Tester en remplacent "left: 35%; " par "margin: 0 auto;" ce qui devrait centrer le div concerné.
Finalement, mon problème n'est pas trop le décalage du pdf.
C'est surtout mon background, qui est fixe et bien positionné sur les 'crans 13 et 15 pouces.
Mais qui se répète sur les 17 pouces...
Des idées ??
C'est surtout mon background, qui est fixe et bien positionné sur les 'crans 13 et 15 pouces.
Mais qui se répète sur les 17 pouces...
Des idées ??
Bonjour; recree simplement ta page web sans donner une taille au body car le body est suppose represente ta page tout entiere.
ou alors si tu veux limiter ton document par certaines dimensions, cree donc a laide de la balise div la ou les divisions a l'interieur de body. et organise les a laide de css.
courage
ou alors si tu veux limiter ton document par certaines dimensions, cree donc a laide de la balise div la ou les divisions a l'interieur de body. et organise les a laide de css.
courage
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ah oui ça m'a l'air intéressant !
Dans mon cas, comment puis je donner une taille au body ?
Dans mon cas, comment puis je donner une taille au body ?
Dans ton cas ne donne aucune taille au body; plutot ajoute un div wrapper dans le body; et tu dimensionne le wrapper : widht (largeur) et height pour hauteur; et a laide du css donne les valeurs du margin and padding du wrapper auto; ainsi le wrapper se positionnera automatiqmement au milieu de ta page. ainsi a linterieur du wrapper tu peux creer autant de idivions que tu veux.
je pense que ca taidera
je pense que ca taidera
Ou alors, supprimer la taille du body et ajouter un padding et margin à zéro, centrer et fixer sans répétition l'image de fond.
body {
margin:0;
padding:0;
background: url("MON_BACKGROUND.jpg") no-repeat center fixed;
-webkit-background-size: cover; /* Chrome et Safari */
-moz-background-size: cover; /* Firefox */
-o-background-size: cover; /* Opera */
background-size: cover; /* standard */
}
