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 !