pb page créée pour résolution 1024 pour adaptation à autre réso - HTML/CSS - Programmation
Marsh Posté le 03-08-2006 à 21:08:04
Tu as le lien de ton site ? Sinon ton site est centré à la base ? Car normalement si tu centre tout à la base dans des plus hautes résolution se sera toujours centré ...
Marsh Posté le 03-08-2006 à 21:10:12
Fait voir le code source si le site n'est pas en ligne...
Marsh Posté le 03-08-2006 à 21:21:59
je viens de l'hébergé gratuitement, l'adresse est la suivante : 
http://roni_clan.kartzone.info 
(j'ai utilisé des feuilles de styles css)
Marsh Posté le 03-08-2006 à 21:26:36
Et bien pour centrer le tout, suffit d'y mettre dans un div conteneur, de luis donner une largeur orécise et de mettre les margin left et right à auto. 
 
De plus, pour que ie comprenne bien, faut mettre le text-align du body à center et donc le rétablir à left dans le div conteneur.
Marsh Posté le 03-08-2006 à 21:29:21
oui justement le div conteneur il prendrait quelle largeur par exemple pour que ça convienne. Merci pour votre aide !
Marsh Posté le 03-08-2006 à 21:31:36
je sais pas si sa va marcher mais essay sa: 
 
<html> 
<head> 
 <title>Rise Of Nations Invaders</title> 
 <link rel="stylesheet" media="screen" type="text/css" title="index" href="styles/index.css"/> 
</head> 
<body> 
<div align="center"> 
<!--MENU GAUCHE--> 
<div id="menug"> 
<img src="images/francep.gif">  <a href="english/index.html"><img  
 
src="images/anglaisp.gif"></a><br /><br /> 
<a href="index.html">Accueil</a><br /><br /> 
<a href="membres.html">Membres</a><br /><br /> 
<a href="resultats.html">Résultats</a><br /><br /> 
 
<a href="matchs.html">Matchs</a><br /><br /> 
<a href="http://roni-clan.darkbb.com/index.forum">Forum</a><br /><br /> 
<a href="download.html">Téléchargements</a> 
 
</div> 
<!--MENU DROITE--> 
<div id="menud"> 
<h3>Sites d'autres clans :</h3> 
<a href="www.ilclan.bulock.net">IL</a><br /> 
<a href="www.sok-knights.tk">SoK</a><br /> 
 
<a href="www.tnt-clan.tckclan.net">TNT+TCK</a><br /> 
<a href="www.cbc.aowc.net">CBE</a><br /> 
<a href="www.fishstickfoundation.com">FSF</a><br /> 
<a href="www.revolutiongang.net/elite/">Elite</a><br /> 
<a href="www.deadalli.proboards40.com">DA</a><br /> 
<a href="www.nrad.net">NRAD</a><br /> 
<a href="www.soulfingerband.free.fr">Groupe de musique</a><br /> 
 
 
 
</div> 
<!--BANNIERE --> 
<div id="banniere"></div> 
<!--CORPS--> 
<div id="corps"> 
<h1>Accueil</h1> 
<p>Bienvenue à tous sur le site du clan <strong>Roni</strong> (Rise Of Nations Invaders). Ce clan est un  
 
clan francophone et accepte tout joueur parlant notre langue et connaissant les bases du jeu. Le clan  
 
<strong>Roni</strong> permettra aux débutants de progresser en apprenant de nouvelles techniques.</p> 
<br /> 
 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
 
<img src="images/senat.jpg"> 
 
</div> 
<!--COPYRIGHT--> 
<div id="copyright"><p>© Copyright 2006 Morel - Tous droits réservés</p></div> 
</div> 
 
</body> 
 
</html>
Marsh Posté le 03-08-2006 à 21:35:02
j'ai modifié, est-ce que tu peux aller voir ce que ça donne, j'ai pas le 1280 sur cet écran. merci encore
Marsh Posté le 03-08-2006 à 21:37:18
ça a centré les menus mais bon ça c'est pas grave, je modifierais les divs
Marsh Posté le 03-08-2006 à 21:38:36
ba non sa centre pas le body mais j'avais pas vu le css attend
Marsh Posté le 03-08-2006 à 22:01:14
arf j'ai essayé plusieur maniere mais sa centre pas le body juste le texte ... je vais voir ...
Marsh Posté le 03-08-2006 à 22:03:39
ok je sais pas si ça peut se faire. Bon moi je vais y aller, merci de m'aider en tout cas, c'est sympa. Je repasse demain 
Marsh Posté le 03-08-2006 à 23:57:51
Voilà sa marche pour des résolusions de 1024*768 et + (Mais blem si inférieur à 1024 > Manque le début et la fin en largeur du BODY) 
 
+----------+ 
| Ton CSS  |  
+----------+ 
------------------------------------------------------------------ 
#menug img 
{ 
 border : none; 
} 
#menud a 
{ 
 color : red; 
 font-weight : bold; 
 text-decoration : none; 
} 
#menud a:hover 
{ 
 color : white; 
} 
h2 
{ 
 color : red; 
 font-family : arial; 
 font-size : 18px; 
 text-align : left; 
 text-decoration : underline; 
} 
table 
{ 
 width : 500px; 
 border-collapse : collapse; 
 text-align : center; 
} 
tr, td 
{ 
 border : 1px solid red; 
 color : white; 
} 
th 
{ 
 border : 1px solid red; 
 color : red; 
} 
body 
{ 
 background-color : black; 
} 
 
#global { 
 	position:fixed !important; /* pour MAC ^^ */ 
 position:absolute; 
 left:50%; 
 margin-left:-500px; 
 width:1000px; /* largeur de ton BODY */ 
} 
 
#corps 
{ 
 position : absolute; 
 width : 600px; 
 height: 800px; 
 background-color : black; 
 border: 1px solid red; 
 top : 200px; 
 left : 200px; 
 text-align : center; 
} 
#corps p 
{ 
 color : red; 
 text-align : left; 
 font-family : "trebuchet ms"; 
 font-size : 14px; 
} 
#corps h1 
{ 
 color : red; 
 font-family : arial; 
 font-size : 26px; 
} 
  
 
#menug 
{ 
 position : absolute; 
 width : 200px; 
 height : 800px; 
 border : 1px solid red; 
 background-image : url("images/menug.jpg" ); 
 top : 200px; 
 left : 0px; 
 padding-top : 40px; 
 padding-left : 0px; 
} 
#menug a 
{ 
 color : red; 
 font-family : "trebuchet ms"; 
 text-decoration : none; 
 font-size : 24px; 
} 
#menug a:hover 
{ 
 color : white; 
 font-weight : bold; 
} 
#menud 
{ 
 position : absolute; 
 width : 200px; 
 height: 800px; 
 border : 1px solid red; 
 background-color: black; 
 top : 200px; 
 left : 800px; 
} 
#menud h3 
{ 
 color : red; 
 font-family : "trebuchet ms"; 
 font-size : 14px; 
 font-weight : normal; 
 padding-top : 20px; 
 padding-left : 10px; 
 text-decoration : underline; 
} 
#copyright 
{ 
 position : absolute; 
 width : 600px; 
 height : 100px; 
 background-color : black; 
 left : 200px; 
 top : 1000px; 
 padding-top : 30px; 
} 
#copyright p 
{ 
 color : red; 
 text-align : center; 
 font-family : "trebuchet ms"; 
} 
#banniere 
{ 
 position: absolute; 
 width : 1000px; 
 height : 200px; 
 top : 0px; 
 left : 0px; 
 background-image : url("images/banniere.jpg" ); 
} 
-------------------------------------------------------------------- 
 
+--------------------+ 
| Sur tes pages web   |  
+--------------------+ 
-------------------------------------------------------------------- 
<html> 
<head> 
<title>TON_TITRE</title> 
<link rel="stylesheet" media="screen" type="text/css" title="index" href="TON_CSS.css"> 
</head> 
<body> 
<div id="global"> 
(les trois blocs menu, banniere et corps...) 
</div> 
</body> 
</html>
Marsh Posté le 04-08-2006 à 12:39:55
ok, merci beaucoup, c'est sympa d'avoir passé du temps ! je teste ça, à la prochaine soul_snake.
Marsh Posté le 04-08-2006 à 13:20:46
avec css, tu peux definit plusieurs mise en page en fonction de l'interface de sortie: écran1, écran2, imprimante,...
Marsh Posté le 06-08-2006 à 12:22:08
ouais, il faut quand meme une fonction js pour connaitre l'affichage de l'utilisateur, j'y ai pensé aussi mais ça aurrait été plus long 
Marsh Posté le 06-08-2006 à 14:03:57
si au passage tu retablissait l'overflow, car moi je ne peux pas naviguer sur ton site, j'ai pas d'ascenseur
Marsh Posté le 03-08-2006 à 21:02:41
Bonjour !
J'ai créé site qui fonctionne correctement en 1024*768 mais lorsque je passe dans une réso plus forte (ex : 1280..), ça me met une bande de la couleur du fond sur la droite. C'est normal vu que j'ai mis toutes les dimensions et les écarts des div en pixels. N'y aurrait-il pas moyen de centrer toute la page (les trois blocs menu, banniere et corps) pour que ce soit un peu plus correct. J'ai esseyé de tout faire en % mais j'ai souvent des problèmes. Merci !