Site HTML ne s'affiche pas pareil suivant le format de l'écran
CedNad8
Messages postés
13
Statut
Membre
-
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>
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
-
Salut,
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 ?? -
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 -
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 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
-
-
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 */ } -
Merci à tous pour vos réponses, j'ai pu me débrouiller grâce à vous.
En revanche, cela ne me permet pas d'afficher la page correctement sur un Iphone ou Ipad...
Connaissez vous une technique ??
