|
|
Auteur
|
Message
|
1
|
|
|
|
Bonjour à tous,
j'ai fait une page internet d'environ 800px de largeur et je souhaiterai la centrer quel que soit la largeur de la fenêtre.
J'utilise expression web pour editer mes pages et le code est le suivant:
<html>
...
<head>
...
</head>
<body style="margin: auto; color: #4996BE; background-color: #FEF3E9; width: 800px; text-align: center;">
...\"le contenu de ma page"\
</body>
</html>
Pourriez vous me dire quel code dois je ajouter?
Je vous remercie d'avance.
-->Message édité par bordoray le 05/01/2008 21:37:17<--
|
|
|
|
|
Ton code fonctionne. Le texte ou autre, de 800px de large est bien centré dans ta page. En revanche, il est dommage de voir du CSS melangé à du html, mais ton logiciel est ainsi donc tu n'as pas le choix.
Une autre solution, et la meilleure, consiste à séparer le CSS du (x)html:
créer un lien vers la feuille de style sur la page html dans la partie « header »
<link href="design.css" rel="stylesheet" type="text/css" />
Ensuite créer un fichier CSS nommé « design.txt » avec un éditeur (par exemple le notpad windows), l'ouvrir et créer le CSS:
---------------
body
{
width: 800px;
margin: auto;
background-color: #FEF3E9;
text-align: center;
}
-----------------
(puis renommer ensuite le fichier en « design.css ».
ICI la PAGE HML COMPLETEE:
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>ton texte de page</p>
</body>
</html>
L'avantage de créer le CSS sur un fichier séparé, le code est plus clair et le design est le même sur toutes les pages puisque toutes les pages peuvent utiliser le même fichier CSS. Il suffit de modifier une caractéristique du fichier CSS pour répercuter automatiquement cette modif sur toutes les pages: rapide et pratique!!
-->Message édité par herve89 le 04/01/2008 22:28:37<--
-------
|
|
|
|
|
ça ne marche toujours pas, pourtant j'ai bien créé le fichier design.css
L'adresse du site est http://ayuheartplace.ifrance.com , redirigé à http://ayuheartplace.c.la , et le fichier css se trouve à http://ayuheartplace.ifrance.com/design.css
Je vous donne cete fois le code, plus complet cette fois:
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="verify-v1" content="p4s0v2EX5nFWhZ7PExvKCWIw48byOYWp+sk/3lWiiUI=" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ayuheartplace - Ayumi Hamasaki fansite</title>
<meta name="keywords" content="ayumi, ayumi hamasaki, hamasaki, ayu" />
<meta name="description" content="Site consacré à Ayumi Hamasaki" />
<style type="text/css">
.style1 {
text-align: right;
border: 3px double #CC9900;
background-color: #CC0000;
}
.style4 {
border-style: outset;
border-color: #CC9900;
background-color: #CC0000;
text-align: center;
color: #CC9900;
}
/autres styles.../
</style>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=4.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=4.0)" />
<meta http-equiv="Site-Enter" content="blendTrans(Duration=4.0)" />
<meta http-equiv="Site-Exit" content="blendTrans(Duration=4.0)" />
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body style="margin: auto; color: #4996BE; background-color: #FEF3E9; width: 800px; text-align: center;">
<p>
<tr>
<td align="center" valign="middle">
<div style="position: absolute; width: 428px; height: 825px; z-index: 9; left: 23px; top: 1225px" id="couche63" class="style42">
/texte et images.../ </div>
/autres trucs en <div></div>
</td>
</tr>
</p>
</body>
</html>
voilà.
|
|
|
|
|
OK j'ai modifié directement le code sur la page.
j'ai réinséré le CSS dans le html et enlevé le lien avec la page en CSS dans le header,(donc tu peux supprimer le fichier CSS "design.css").
Dans "body" j'ai inséré la ligne CSS "border: 1px solid black;", c'est uniquement pour visualiser la boite centrée dans la page avec une bordure noire de 1px. Tu pourras donc effacer cette lign après.
J'ai essayé avec ie7 et firefox ca fonctionne.
Voila le code finalisé:
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="verify-v1" content="p4s0v2EX5nFWhZ7PExvKCWIw48byOYWp+sk/3lWiiUI=" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ayuheartplace - Ayumi Hamasaki fansite</title>
<meta name="keywords" content="ayumi, ayumi hamasaki, hamasaki, ayu" />
<meta name="description" content="Site consacré à Ayumi Hamasaki" />
<style type="text/css">
.style1 {
text-align: right;
border: 3px double #CC9900;
background-color: #CC0000;
}
.style4 {
border-style: outset;
border-color: #CC9900;
background-color: #CC0000;
text-align: center;
color: #CC9900;
}
body {
width: 800px;
margin: auto;
background-color: #FEF3E9;
text-align: center;
border: 1px solid black;
}
/autres styles.../
</style>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=4.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=4.0)" />
<meta http-equiv="Site-Enter" content="blendTrans(Duration=4.0)" />
<meta http-equiv="Site-Exit" content="blendTrans(Duration=4.0)" />
</head>
<body>
<p>
<tr>
<td align="center" valign="middle">
<div style="position: absolute; width: 428px; height: 825px; z-index: 9; left: 23px; top: 1225px" id="couche63" class="style42">
/texte et images.../ </div>
/autres trucs en <div></div>
</td>
</tr>
</p>
</body>
</html>
-------
|
|
|
|
|
En effet, ça marche mais juste pour un cadre que je n'utilise pas, le reste n'est pas centré malheureusement. La page éditée où j'ai ajouté :
body {
width: 800px;
margin: auto;
background-color: #FEF3E9;
text-align: center;
border: 1px solid black;
}
est disponible sur http://boxstr.com/files/543765_fasqn/index.htm
|
|
|
|
|
OK excuse moi mais je n'avais pas vu dans le code que les boites étaient en position: absolute; Dans "body" rajoute la ligne "position: relative;". Les boites en position absolue vont se positionner dans le cadre en position relative centrée.
Voilà le code:
body {
width: 800px;
margin: auto;
text-align: center;
background-color: #FEF3E9;
position: relative;
}
-------
|
|
|
|
|
D'accord ça marche!
Merci beaucoup beaucoup!
|
|
|
|
|
En fait oui ça marche... Avec firefox, c'est nickel
mais j'ai quelques petits soucis avec internet explorer.
En effet, à partir d'expression web, quand je fais un aperçu avec IE7, ils me centrent bien ma page.
Par contre, une fois que je l'ai mise sur le serveur, la page n'est pas centrée...
|
|
|
|
|
Oui, c'est etonnant.
J'ai essayé et j'arrive effectivement au même résultat.
Il semble que la cause de ce souci vienne du javascript en tête de page. En effet, si on l'enlève et que l'on remet en ligne c'est centré sous ie7 et firefox. Pour le javascript je ne peux pas t'aider car je ne le maîtrise pas.
La difficulté avec le type de logiciel que tu utilises c'est que le code produit mélange html, css, javascript, et l'empile en vrac. Il est difficile de décortiquer le code pour voir d'ou vient le problème.
voici la partie à problème, il y a peut être un pro du javascript qui va pouvoir nous éclairer, pour ma part je séche sur ce domaine:
(bon courage, ton site est très bien visuellement et de contenu!)
<script language="Javascript" type="text/javascript">
<!--
var d=new Date; rnd=d.getDay()+'-'+d.getHours(); var b=(''+location.hostname).split('.'); d=2; if(b[b.length-d+1]=='') d=3; h='web.'+b[b.length-d]+'.'+b[b.length-d+1];
document.write('<sc'+'ript src="http://js-perso.ifrance.com/js.php?'+rnd+'"><'+'/sc'+'ript>');
// -->
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-324340-1"; urchinTracker();</script>
-------
|
|
|
|
|
Je te remercie beaucoup en tout cas, tu m'as fait résoudre une bonne partie du problème.
|
|
|
|
|
double post
Petit récapitulatif:
J'ai un problème pour centrer ma page html, j'ai en grande partie résolu ce problème. En effet, grâce à herve89, la page est centrée avec firefox, mais pas avec IE7. J'utilise expression web pour editer mes pages, et en utilisant ce logiciel, lorsque je fais un aperçu avec IE7 c'est centré, et quand je l'uvre directement avec IE7 c'est pas centré. Apparament, d'après notre ami herve89, c'est un problème avec la javascript, comme vous pouvez le voir sur son dernier post ci-dessus.
L'adresse du site est http://ayuheartplace.ifrance.com , redirigé à http://ayuheartplace.c.la
Pouvez vous m'aider à trouver une solution s'il vous plait?
|
|
|
1
|
|
|
|
