Sujet Précédent Sujet Suivant

Page HTML affichage mobile et tablettes

Fermé
CedNad8 Messages postés 13 Date d'inscription vendredi 7 mars 2014 Statut Membre Dernière intervention 10 mars 2014 - Modifié par jee pee le 10/03/2014 à 11:30
cyril1982 Messages postés 110 Date d'inscription vendredi 7 mars 2014 Statut Membre Dernière intervention 19 septembre 2018 - 11 mars 2014 à 21:38
Bonjour à tous, et merci de vous être arrêté sur mon post !

Récemment, j'ai créé une page web perso avec Notepad++.
Tout marche impeccable, et j'ai réussi à avoir un affichage correct sur des écrans allants de 13 pouces à 17 pouces.
En revanche, dès que le site est ouvert sur Smartphone ou tablette, il me manque au moins 5cm à droite de la page...

Pouvez vous m'aider, car j'ai essayé de me renseigner sur le responsive Webdesign..., mais mes connaissances sont très faible en HTML et je ne pompe rien... !!

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:

1 réponse

Réponse 1 / 1
cyril1982 Messages postés 110 Date d'inscription vendredi 7 mars 2014 Statut Membre Dernière intervention 19 septembre 2018 12
11 mars 2014 à 21:38
Bonjour,

Les largeurs sont exprimées en pixel dans ta page.
Tu pourrais commencer par les exprimer en % car avec des largeurs de 667px cela ne passera jamais sur un smartphone.

Mais pour obtenir un rendu adapté aux smartphones, il faudra utiliser les media queries afin de définir un rendu selon la taille de l'écran. Exemple : 

//Affichage standard
#monpdf
{ 
  position: relative; 
  left: 35%; 
  width:667px; 
  height:550px; 
} 

#monpdf iframe
{
  width:667px; 
}

//Affichage pour smartphone et tablette (On utilise 100% de la largeur pour que cela soit lisible)
@media (max-width: 860px) {
  #monpdf
  { 
    width:100%;  
  } 
  #monpdf iframe
  {
    width:100%; 
  }
}

Voici un lien intéressant sur les media queries :
https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Bon courage
0

Discussions similaires

je peux plus me connecter sur coco.fr
Domi -
pasc -

3 réponses
[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
Connexion impossible sur coco.fr
Folya -
Xileh -

6 réponses
[SUJET GROUPÉ] Problèmes rencontrés sur le site COCO.
Pisceneo -
bazfile -

19 réponses