Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1598 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème d'affichage en haute résolution

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème d'affichage en haute résolution

n°2105493
Zangalou
PlayJV
Posté le 10-10-2011 à 04:24:27  profilanswer
 

Bonjour,
 
Après avoir tenté de régler les problèmes en petites résolutions, je me rend compte que la page s'affiche mal en grande résolution. Ne disposant que de 1600x900, j'ai demandé à une personne de tester avec du 1920 et voilà le résultat.
 
http://data.imagup.com/12/1132878945.JPG
 
La page n'est pas encore accessible par moteurs, donc je vous l'indique via un lien a modifier http://jeuxonline.ca/ index2.php
 
Il y a surement des erreurs mais je cherche à apprendre alors merci de votre aide.
 
(J'ai aussi un problème avec le menu, avec un souhait qu'il reste toujours collé en bas de page)
 
Merci
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jeux Vidéo Online : Consoles de jeux et PC</title>
<link rel="stylesheet" type="text/css" href="style_div2.css">
</head>
 
<body background="images/fond.png" bgproperties="fixed">
<div id="top"><span class="sitemap">Jeux Vidéo > Accueil</span></div>
<div id="logo"><img src="images/logosoon.png" /></div>
<div id="twitter"><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 2000,
  width: 350,
  height: 50,
  theme: {
    shell: {
      background: 'none',
      color: '#000000'
    },
    tweets: {
      background: 'none',
      color: '#386b85',
      links: '#998768'
 
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: false,
    avatars: false,
    behavior: 'all'
 }
 
}).render().setUser('JeuxOnlineCa').start();
</script></div>
 
 
<div id="dossiers"><div id="image1"><img src="images/mario.png" /></div> <div id="image2"><img src="images/f3ar.png" /></div><div id="image3"><img src="images/gears-of-war-3.png" /></div></div><div id="logos"><div id="image1bis"><img src="images/830px-Super_Mario_3D_logo.png" /></div><div id="image2bis"><img src="images/Fear-_3_logo.png" /></div><div id="image3bis"><img src="images/gears-of-war-3-logo.png" /></div></div>
</div><div style="clear:both;"></div>
 
<div id="autres"><img src="images/1up.png" align="left"  /><p><span class="gauche">À ne pas manquer :</span> <span class="droite"><img src="images/discu.png" align="left" style="margin-right:15px;" />Dossier de la semaine :</span></p></div>
<div style="clear:both;"></div>
 
<div id="articles"><img src="images/starfox-64-3D.png" onmouseout="javascript:this.src='images/starfox-64-3D.png';" onmouseover="javascript:this.src='images/starfox-64-3Dbis.png';" /> <img src="images/forza-4.png" onmouseout="javascript:this.src='images/forza-4.png';" onmouseover="javascript:this.src='images/forza-4bis.png';" /> <img src="images/fleche.png" onmouseout="javascript:this.src='images/fleche.png';" onmouseover="javascript:this.src='images/flechebis.png';" /> <img src="images/noel.png" style="margin-left:50px;" onmouseout="javascript:this.src='images/noel.png';" onmouseover="javascript:this.src='images/noel2.png';" /><img src="images/fleche.png" onmouseout="javascript:this.src='images/fleche.png';" onmouseover="javascript:this.src='images/flechebis.png';" /></div>
 
<div id="menu" style="padding-left:15px;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FJeuxOnlineCanada&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height="30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowTransparency="true"></iframe><img src="images/menu.png" align="right" style="padding-right:15px;" /></div>
</body>
</html>


 
Et le css :
 

body {
 
 margin:0px;
 padding:0px;
 width:100%;
 background-attachment:fixed;
 
 }  
 
.twtr-ft {  
display:none;
 }
 
/* pour IE */
div#top {
 background : #D7DBC8;
 filter : alpha(opacity=70);  
 
}
 
/* pour IE */
div#menu {
 background : #D7DBC8;
 filter : alpha(opacity=70);  
 
}
 
div.middle {
 position:absolute;
 left: 40%;
 top: 50%;
 width: 200px;
 height: 200px;
 margin-left: -100px; /* Cette valeur doit être la moitié négative de la valeur du width */
 margin-top: -100px; /* Cette valeur doit être la moitié négative de la valeur du height */
}
 
div#logo {
margin-left:38%;
width:auto;
margin-top: 30px;
float:left;
 }
 
 div#dossiers {
 
 
 margin-top: 10px; /* moitié de la hauteur de l'image */
 margin-left: auto;
 margin-right: auto; /* moitié de la largeur de l'image */
 width:720px;
 }  
 
 div#image1 {
 
   float:left;
   
 }  
 
  div#image2 {
 
   float:left;
  margin-left:30px;
 }  
 
 div#image3 {
 
   float:left;
   margin-left:30px;
 }  
 
div#logos {
 
 
 margin-top: 70px; /* moitié de la hauteur de l'image */
 margin-left: auto;
 margin-right: auto;
 width:720px;
 }  
 div#image1bis {
 
   float:left;
   margin-left:10px;
 }  
 
  div#image2bis {
 
   float:left;
   margin-left:51px;
   margin-top:5px;
 }
 
 div#image3bis {
 
   float:left;
   margin-left:48px;
   margin-top:5px;
 }  
 
 div#autres {
   
  margin-top:20px;
 width:800px;
 margin-left: auto;
 margin-right: auto;
 }  
 
  div#articles {
   
 
 width:800px;
 margin-left: 28%;
 margin-right: 72%;
 margin-top:10px;
 }  
 
 div#twitter {
 
margin-top: 33px;
 
 
 }  
 
 p span.gauche {
   font-size:20px;
   font-weight:bold;
   font-family:Arial, Helvetica, sans-serif;
float:left;
   color:#9FAB29;
   margin-left:15px;
   padding-top:5px;
   
   }
   
    p span.droite {
   font-size:20px;
   font-weight:bold;
   font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:200px;
   color:#DC3535;
padding-top:5px;
   
   }
   
 span.sitemap {
 
 color:#000;
 font-weight:bold;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;   }
   
div#menu {
 
position:absolute;
padding-top:8px;
 margin-top: 89px; /* moitié de la hauteur de l'image */
 background-color: rgba(215,219,200,0.6);
clear: both;
width:99%;
 
 
 }  
 div#top {
 
 width:auto;
 height:20px;
 margin:auto;
 background-color: rgba(215,219,200,0.3);
 border-bottom: 3px solid #4B4B4B;
 padding-left:10px;
 padding-top:5px;
 }
 
 .cliquez {
   font-size:25px;
   font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-left:210px;
text-decoration: none;
color:#000;
}


---------------
GT: ZangalouQC
mood
Publicité
Posté le 10-10-2011 à 04:24:27  profilanswer
 

n°2105695
Zangalou
PlayJV
Posté le 10-10-2011 à 23:32:13  profilanswer
 

petit up, besoin de l'ai des connaisseurs


---------------
GT: ZangalouQC
n°2106052
Zangalou
PlayJV
Posté le 12-10-2011 à 20:04:20  profilanswer
 

si dur que ça ?


---------------
GT: ZangalouQC
n°2106155
olivthill
Posté le 13-10-2011 à 12:16:10  profilanswer
 

Le positionnement d'éléments est l'une des choses les moins simples avec le HTML/CSS sauf si on fait tout en coordonnées absolues.
 
Peut-être que vous auriez plus de réponses si vous décriviez le problème avec des mots au lieu de donner une image sur laquelle on ne sait pas très bien ce qu'il faut regarder. Et si vous pouviez indiquez aussi le nom du navigateur, car la mise en page peut varier de l'un à l'autre.
 
En tous cas, bon courage !

n°2106180
Zangalou
PlayJV
Posté le 13-10-2011 à 14:49:06  profilanswer
 

Navigateur Chrome mais problème identique IE.
 
L'affichage est correct en 1024, correct en 1600, mais comme sur l'image en 1900, c'est à dire que l'image Mario et le logo Super Mario sont censées être à gauche de FEAR.


---------------
GT: ZangalouQC
n°2106426
Zangalou
PlayJV
Posté le 14-10-2011 à 16:31:05  profilanswer
 

dernier up de désespoir


---------------
GT: ZangalouQC
n°2106448
GordonF_69
Posté le 14-10-2011 à 17:51:01  profilanswer
 

Apres avoir vite vue les DIV et les placement, j'pense que ta pas mal de truc a refaire, si tu veux qqc de clean et fonctionnel (pas de pb pour les future mise a jours)
 
Par ex l'image du jeu dans la meme div que son titre...

n°2106504
Zangalou
PlayJV
Posté le 15-10-2011 à 02:34:42  profilanswer
 

si je demande de l'aide c'est justement parce que je sais que j'ai des choses à refaire tu crois pas ? Une semaine pour une réponse comme ça ... je vais passer mon chemin.


---------------
GT: ZangalouQC
n°2107445
gatsu35
Blablaté par Harko
Posté le 20-10-2011 à 23:46:21  profilanswer
 

Ton taf n'est ni fait ni à refaire, il faut revoir entierement la CSS et la construction html, c'est unfiasco total


---------------
Blablaté par Harko
n°2107740
Zangalou
PlayJV
Posté le 23-10-2011 à 19:14:33  profilanswer
 

putain ce forum :D ça change pas


---------------
GT: ZangalouQC
mood
Publicité
Posté le 23-10-2011 à 19:14:33  profilanswer
 

n°2107742
gatsu35
Blablaté par Harko
Posté le 23-10-2011 à 19:25:55  profilanswer
 

Ben je te dis juste la vérité. Et si tu veux un coup de main on peut t'en donner hein.
 
La première chose à faire est d'arrêter le bricolage avec des left:20% ou autres trucs de ce genre.
 
Ensuite tu mets tout ton site dans un container qui a une largeru figée, et qui est centré.
A partir de là, tu évite le position absolute, tu laisse tes blocs aller dans le flux, et si tu les veux en ligne, tu les float : float:left.


---------------
Blablaté par Harko
n°2107744
Zangalou
PlayJV
Posté le 23-10-2011 à 19:39:28  profilanswer
 

au moins la tu me donnes des informations concrètes, c'est tout ce que je demande.
 
Au final mon problème c'est que je veux que tout soit centré, j'ai donc à foutre tout dans un div global qui lui aura une propriété de centre.


Message édité par Zangalou le 23-10-2011 à 19:42:53

---------------
GT: ZangalouQC
n°2107748
Zangalou
PlayJV
Posté le 23-10-2011 à 19:58:40  profilanswer
 

Donc j'ai tout mis, sauf le top et le bottom, dans un div (global), j'ai donc supprimé les % du logo, bonne voie ?
 

body {
 
 margin:0px;
 padding:0px;
 width:100%;
 background-attachment:fixed;  
}
 
 a:link { font-weight: bold ; color: black ; text-decoration: none ; }
a:visited {font-weight: bold ; color :black ; }
a:hover { text-decoration: none ; }
 
.twtr-ft {  
display:none;
 }
 
/* pour IE */
div#top {
 background : #D7DBC8;
 filter : alpha(opacity=70);  
 
}
 
/* pour IE */
div#menu {
 background : #D7DBC8;
 filter : alpha(opacity=70);  
 
}
 
 
div#global {
 margin-left: auto;
  margin-right: auto;
  width:800px;
 }
 
div#logo {
 
margin-left: auto;
  margin-right: auto;
margin-top: 30px;
float:left;
text-align:center;
height:auto;
 }
 
 div#dossiers {
 
 
 margin-top: 10px;
 margin-left: auto;
 margin-right: auto;
 width:717px;
 }  
 
 div#image1 {
 
   float:left;
   
 }  
 
  div#image2 {
 
   float:left;
  margin-left:30px;
 }  
 
 div#image3 {
 
   float:left;
   margin-left:30px;
 }  
 
div#logos {
 
 
 margin-top: 70px;  
 margin-left: auto;
 margin-right: auto;
 width:720px;
 
 }  
 div#image1bis {
 
   float:left;
   margin-left:10px;
 }  
 
  div#image2bis {
 
   float:left;
   margin-left:51px;
   margin-top:5px;
 }
 
 div#image3bis {
 
   float:left;
   margin-left:48px;
   margin-top:5px;
 }  
 
 div#autres {
   
  margin-top:20px;
 width:800px;
 margin-left: auto;
 margin-right: auto;
 }  
 
  div#articles {
   
 
 width:800px;
 margin-left: 50px;
 margin-right: auto;
 margin-top:10px;
 }  
 
 div#twitter {
 
margin-top: 33px;
 
 
 }  
 
 p span.gauche {
   font-size:20px;
   font-weight:bold;
   font-family:Arial, Helvetica, sans-serif;
float:left;
   color:#9FAB29;
   margin-left:15px;
   padding-top:5px;
   
   }
   
    p span.droite {
   font-size:20px;
   font-weight:bold;
   font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:200px;
   color:#DC3535;
padding-top:5px;
   
   }
   
 span.sitemap {
 
 color:#000;
 font-weight:bold;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;   }
   
div#menu {
 
position:absolute;
padding-top:8px;
 margin-top: 89px; /* moitié de la hauteur de l'image */
 background-color: rgba(215,219,200,0.6);
clear: both;
width:99%;
 
 
 }  
 div#top {
 
 width:auto;
 height:20px;
 margin:auto;
 background-color: rgba(215,219,200,0.3);
 border-bottom: 3px solid #4B4B4B;
 padding-left:10px;
 padding-top:5px;
 }
 
 .cliquez {
   font-size:25px;
   font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-left:210px;
text-decoration: none;
color:#000;
}  


Message édité par Zangalou le 23-10-2011 à 20:11:54

---------------
GT: ZangalouQC
n°2107770
gatsu35
Blablaté par Harko
Posté le 24-10-2011 à 05:57:20  profilanswer
 

tu as testé ? j'ai pas l'impression.
 
Mais sinon corrige ton HTML, un HTML propre permet aussi d'éviter les rendus qui foirent :o


---------------
Blablaté par Harko
n°2107839
Zangalou
PlayJV
Posté le 24-10-2011 à 15:17:20  profilanswer
 

oui j'ai testé et il n'y a plus de décalage du tout


---------------
GT: ZangalouQC

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème d'affichage en haute résolution

 

Sujets relatifs
problème avec réécriture d'URL et images siteprobleme affichage internet explorer
problème avec menu css horizontalProblème Tomcat / MYSQL / RMI
[Résolu] Problème pour acceder à un site bancaireproblème paramétrages avec un script
Probléme de reconnexion avec les winsocks du VB 6.0[Resolu] Regex : Variable et incrementation dans le replace
Action lors de l'affichage d'un message 
Plus de sujets relatifs à : Problème d'affichage en haute résolution


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR