Problème d'affichage en haute résolution
Problème d'affichage en haute résolution - HTML/CSS - Programmation
Marsh Posté le 13-10-2011 à 12:16:10
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 !
Marsh Posté le 13-10-2011 à 14:49:06
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.
Marsh Posté le 14-10-2011 à 17:51:01
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...
Marsh Posté le 15-10-2011 à 02:34:42
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.
Marsh Posté le 20-10-2011 à 23:46:21
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
ça change pas
Marsh Posté le 23-10-2011 à 19:25:55
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
Marsh Posté le 23-10-2011 à 19:39:28
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
Marsh Posté le 23-10-2011 à 19:58:40
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 { |
Message édité par Zangalou le 23-10-2011 à 20:11:54
Marsh Posté le 24-10-2011 à 05:57:20
tu as testé ? j'ai pas l'impression.
Mais sinon corrige ton HTML, un HTML propre permet aussi d'éviter les rendus qui foirent 
---------------
Blablaté par Harko
Sujets relatifs:
- problème avec réécriture d'URL et images site
- probleme affichage internet explorer
- problème avec menu css horizontal
- Problème Tomcat / MYSQL / RMI
- [Résolu] Problème pour acceder à un site bancaire
- problè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
Marsh Posté le 10-10-2011 à 04:24:27
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.
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&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&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;
}