pb page créée pour résolution 1024 pour adaptation à autre réso

pb page créée pour résolution 1024 pour adaptation à autre réso - HTML/CSS - Programmation

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 !

Reply

Marsh Posté le 03-08-2006 à 21:02:41   

Reply

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é ...

Reply

Marsh Posté le 03-08-2006 à 21:10:12    

Fait voir le code source si le site n'est pas en ligne...

Reply

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)

Reply

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.

Reply

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 !

Reply

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">&nbsp;&nbsp;<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&eacute;l&eacute;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>&copy; Copyright 2006 Morel - Tous droits réservés</p></div>
</div>
 
</body>
 
</html>

Reply

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

Reply

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

Reply

Marsh Posté le 03-08-2006 à 21:38:36    

ba non sa centre pas le body mais j'avais pas vu le css attend

Reply

Marsh Posté le 03-08-2006 à 21:38:36   

Reply

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 ...

Reply

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 ;)

Reply

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>

Reply

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.

Reply

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,...

Reply

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 :)

Reply

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed