Problème affichage sur mobile

Question

hamdiR

30 Mar 2016 à 16:43

Bonjour, je viens de réaliser un site web perso et il est bien fonctionnel sur navigateur pc mais sur le navigateur mobile c'est pas le cas. Merci pour vos réponse Smiley smile

JENCAL

30 Mar 2016 à 17:01

Quand tu dis fonctionnel, tu entends quoi ? responsive ?

tu as une erreur console : Uncaught Error: Bootstrap's JavaScript requires jQuery
Modifié par JENCAL (30 Mar 2016 - 17:07)

_laurent

Modérateur

31 Mar 2016 à 08:55

Bonjour

hamdiR a écrit :
Bonjour, je viens de réaliser un site web perso et il est bien fonctionnel sur navigateur pc mais sur le navigateur mobile c'est pas le cas. Merci pour vos réponse

Derien.

(Il n'y a pas de question là hein... Smiley sweatdrop

)

hamdiR

31 Mar 2016 à 13:56

Bonjour _laurent, je suis vraiment désolé si ma question n'etai pas si claire. En fait , mon site s'affiche correctement sur un navigateur PC mais si je le lance depuis un navigateur mobile, il y a des élements qui ne saffichent pas, c'est au niveau de la largeur.
J'ai essayé de jouer sur le width et le viewport mais pareil

JENCAL

31 Mar 2016 à 14:00

Perso, je t'ai déjà dit que sur ton site tu avais une erreur bootstrap, d'ailleurs même la correction de celle ci ne changerait rien vu que tu n'utilise pas les classes de bootstrap

ensuite, avec

min-width: 1200px;

sur le body, cela risque pas de regler le responsive Smiley cligne

Modifié par JENCAL (31 Mar 2016 - 14:00)

hamdiR

31 Mar 2016 à 14:15

Jencal, merci pour ta réponse mais peux-tu m'expliquer de plus SVP?
ensuite comment t'as su que c'est 1200px? hein

JENCAL

31 Mar 2016 à 14:18

hamdiR a écrit :
Jencal, merci pour ta réponse mais peux-tu m'expliquer de plus SVP?
ensuite comment t'as su que c'est 1200px? hein

ici

hamdiR

31 Mar 2016 à 14:40

ahh d'accord Smiley smile

parceque je viens de changer vers 1000px.
Concernant la bootstrap, je l'utilise pour certains éléments mais là je vois pas comment régler ce porblème.

JENCAL

31 Mar 2016 à 14:57

Mais si tu laisse sur 1000px, cela ne sera jamais responsible, car c'est une taille fixe.

hamdiR

31 Mar 2016 à 15:19

je l'ai essayé mais si je lance mon site sur mobile; il y a le "contact" du menu fixe qui ne s'affiche pas. tu vois e que je veux dire?

JENCAL

1 Apr 2016 à 10:20

mais tu peux pas lancer ton site sur mobile, rien n'est responsive sur ton site, tu n'utilise pas de media queries,
Modifié par JENCAL (01 Apr 2016 - 10:21)

hamdiR

1 Apr 2016 à 11:12

donc là je dois faire un autre fichier CSS avec des nouvelles proprietes pour le media mobile?

JENCAL

1 Apr 2016 à 11:20

Tu peux également le faire dans le même fichier CSS via avec les media queries

hamdiR

1 Apr 2016 à 11:24

d'accord je vais essayer et je te ferai signe des changements. merci bcp

~~supprimé~~

1 Apr 2016 à 13:11

Bonjour,
Difficile de comprendre pourquoi tu écrit tout cela (au passage en oubliant de charger jquery ...)
tout cela pour écrire une page Smiley eek

Je veux bien te faire un model en éliminant bien sur tout ce javascript et autres éléments inutils
Si tu n'a pas de solution entre temps, je te poste cela ici d'icio une heure Smiley cligne

Donc a tout de suite !!

hamdiR

1 Apr 2016 à 13:23

merci bcp Christele

~~supprimé~~

2 Apr 2016 à 14:06

Excuses moi mais un contre-temps familiale m'a un peut bloqué Smiley confused

Je suis en train de terminer, mais pour gagner du temps je te donnes un html sommaire
Donc tu copie / colle dans un toto.htm et tu testes, cela te donnera une piste fiable !

Juste un petit probléme à régler ,mais déjà tu va t'y retrouver !


<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<STYLE type="text/css">
html,body{height:100%;}
body {margin:0;font-family:Georgia,"TimesNewRoman",Times,serif;color:#000000;font-size:20px;}
ul { list-style-type: none;
margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;
pading-top:0px; pading-right:0px; pading-bottom:0px; pading-left:0px;  
overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%;z-index: 70;}
li {float:left;width:12%;padding-top: 14px;padding-botton: 14px;text-align:center;font-size:20px;}
li a {display: block;color: white;text-align: center;padding-top: 14px;padding-botton: 14px;text-decoration: none;}
li a:hover:not(.active) {background-color: #111;}
.active {background-color: #4CAF50;}
div.arrondi {width : 100%;background-color : #333333;text-align:center;font-family:Georgia,"TimesNewRoman",Times,serif;
   color:#ffffff;font-size:20px;}  
div.cale {text-align:center !important;}
div.cale { padding-top:40px; } /* hauteur du menu */
div.arrondi { padding:20px; }

div.Lcentre {height : auto;width : auto;max-width : 750px;margin : auto;text-align : center;}
span.LaFonte_blog {  font-family: "Times New Roman", Times, serif; color :#333333; font-size :24px  ! important; }
/* =================alternative=====;border-radius : 10px============ */
@media screen and (max-width:900px)
{
  ul { list-style-type: none;margin: 0; padding: 0; overflow: hidden; background-color: #333;width: 100%;font-size:16px;z-index: 70;}
  div.cale {padding-top:230px !important;}
  li {float:none;width:80%;padding-top: 4px;padding-botton: 0px;text-align:center;}
  li a {display: block;color: white;text-align: center;padding-top: 4px;padding-botton: 4px;text-decoration: none;}
  li {clear:both;}
}
@media (max-width: 640px) 
{
  body, element1, element2 {width:auto;margin:0;padding:0; }
  img, table, td, blockquote, pre, textarea, input, iframe, object, embed, video {max-width:100%; } 
  img {height: auto; width: auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  ul { list-style-type: none;margin: 0; padding: 0; overflow: hidden; background-color: #333;  width: 100%;font-size:16px;z-index: 70;}
  div.cale {padding-top:230px !important;}
  li {float:none;width:80%;padding-top: 4px;padding-botton: 0px;text-align:center;}
  li a {display: block;color: white;text-align: center;padding-top: 4px;padding-botton: 0px;text-decoration: none;}
  li {clear:both;}
  element1, element2 {float: none;width: auto; }
 .hide_mobile {display: none !important; }
 body:before {content:"Version mobile du site";display:block;color:#999999;text-align:center;font-style:italic; }
}
</STYLE>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
var ancien= "1";
function menu(id) {
  document.getElementById(ancien).className="Nactive";
  document.getElementById(id).className="active";
  ancien= id;
}
</script>
<div>
<ul>
 <li><a href="#haut" id="1" class="active" onclick="menu(this.id)">Accueil</a></li>
 <li><a href="#presentation" id="2" class="Nactive" onclick="menu(this.id)" >Présentation</a></li>
 <li><a href="#etudes" id=3 class="Nactive" onclick="menu(this.id)" >Etudes</a></li>
 <li><a href="#certificats" id="4" class="Nactive" onclick="menu(this.id)" >Certificats</a></li>
 <li><a href="#projets" id="5" class="Nactive" onclick="menu(this.id)" >Projets</a></li>
 <li><a href="#experiences" id="6" class="Nactive" onclick="menu(this.id )" >Expériences</a></li>
 <li><a href="#skills" id="7" class="Nactive" onclick="menu(this.id )" >Compétences</a></li>
 <li><a href="#contact" id="8" class="Nactive" onclick="menu(this.id);" >Contact</a></li> 
</ul>
</div>
  <div id="haut" class="cale"> 
  <div class="arrondi">Accueil</div>  
  <img src="http://www.fox-infographie.com/forum/xxxx.jpg" alt="moi" width="100%" ><br />
  </div>
  
  <div id="presentation" class="cale">
  <div class="arrondi">Presentation</div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
  
  <div id="etudes" class="cale">
   <div class="arrondi">Etudes</div>
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
 
  <div id="certificats" class="cale">
  <div class="arrondi">Certificats</div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
     
  <div id="projets" class="cale">
  <div class="arrondi">Projets</div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>

 <div id="experiences" class="cale">
  <div class="arrondi">Expériences</div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
 </div>

 <div id="skills" class="cale">
  <div class="arrondi">Skills</div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
  

 <div id="contact" class="cale">
  <div class="arrondi">Contact</div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>

  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

Modifié par Christele (04 Apr 2016 - 12:36)

~~supprimé~~

4 Apr 2016 à 12:37

Voila j'ais réédité en version finale !
Bon courage

Sujet clos

Questions générales et questions de débutants

Problème affichage sur mobile