Problème de centrage IE PC

Question

LeNainConnu

18 May 2005 à 22:21

Hello à tous !

Voilà me suis mise au xhtml/Css il y a peu et j'essai de monter mon site ...
Je pense que j'ai du faire plein d'erreur de conception ... c'est difficile de se mettre au css qu'en on est "formaté tableau" dans la tête Smiley cligne

mais enfin, j'apprend ...

J'ai un gros soucis de centrage horizontal de mon site ...
Sur Mac (Firefox, Safari, Explorer, Netscape) le site est niquel.
Par contre sour IE PC (j'ai pas pu tester sur d'autres navigateur) mon site n'est plus centré Smiley eek

de plus vous remarquerez que ma "Chat-box" en bas (dans des iframes, je sais c'est pas glop, moi aussi j'aime pas les iframe, mais pour le moment j'ai pas le choix) est décalée vers la droite ainsi que les 3 boutons qui se trouvent après ...
Et si vous êtes sur PC, il y a un petit décalage entre l'image bannière du haut et les bords de mes box .. mais bon c'est moins grave...

Vous pouvez aller zieuter par là>>
LA PAGE

voilà le CSS


html { 
padding:0px;
margin:0px;
}

body {
	margin:0px;
	padding:0px;
	background-image: url(../images/design/fond_gris.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: bottom;
}

#box {
width:710px;
margin: 0px auto;
padding:0px;
}

#content {
	width:546px;
	float:left;
	background-color:#ffffff;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF6600;
	border-right-color: #FF6600;
	border-bottom-color: #FF6600;
	border-left-color: #FF6600;
	padding-top: 15px;
}

#head {
	background-color:#CCCCCC;
	width: 710px;
	background-image: url(../images/design/baniere/banniere_complet.jpg);
	background-repeat: no-repeat;
	height: 212px;
}

#left {
	width:159px;
	background-color: #FFFFFF;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #cc0033;
	border-right-color: #cc0033;
	border-bottom-color: #cc0033;
	border-left-color: #cc0033;
	float: left;
	text-align: right;
}

#news {
	width: 450px;
	margin-left: 47px;
	margin-bottom: 15px;
	border: 1px solid #FF6600;
	overflow: auto;
	height: 160px;
}

#agenda {
	width: 450px;
	margin-left: 47px;
	margin-bottom: 15px;
	border: 1px solid #FF6600;
}

#chat {
	background-color: #FFFFFF;
	float:left;
	width: 298px;
	margin-left: 48px;
	margin-bottom: 15px;
	border: 1px dotted #FF6600;
	margin-right: 10px;
	height: 250px;
}

#bouton {
	float:left;
	width: 140px;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-right: 8px;
	background-image: url(../images/design/degrade_orange.jpg);
	background-repeat: repeat-y;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #FFFFFF;
	font-weight: bold;
	margin-top: 0px;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	padding-right: 8px;
	font-weight: normal;
	padding-top: 0px;
	margin-top: 0px;
}

.tagger {
	height:240px;
	width: 288px;
	overflow:auto;
	border: 0px;
}


a:link {
	color: #cc0033;
	text-decoration: none;
	line-height: 23px;
	font-weight: bold;
	margin-top: 0px;
	padding-top: 0px;
}
a:hover {
	color: #FF6600;
}
a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FF6600;
	text-decoration: none;
}

Là la page

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="box">
	
  <div id="head">zz
  </div>
  <div id="left"> 
    <h1>MENU</h1>
	<h2><a href="page.php?page=homepage" title="Homepage">Homepage</a><br />
      <a href="#">Historique</a><br />
      <a href="#">Membres</a><br />
      <a href="http://www.google.fr" target="_blank">Activit&eacute;s de la soci&eacute;t&eacute;</a><br />
      <a href="#">Le village d'Arconciel</a><br />
      <a href="#">Galerie photos|vid&eacute;os</a><br />
      <a href="#">Fun &amp; More</a><br />
      <a href="#">Liens</a><br />
      <a href="#">Contacts</a><br />
      <a href="#">Probl&egrave;mes ?</a><br />
    </h2>
    <h1>VIP|MEMERS ONLY</h1></div>
  
<div id="content"> 
 
 <?php

  // On définit le tableau contenant les pages autorisées
  // ----------------------------------------------------
  $pageOK = array('homepage' => 'homepage.php',
                  'historique' => 'historique.php');

  // On teste que le paramètre d'url existe et qu'il est bien autorisé
  // -----------------------------------------------------------------
  if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
    include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
  }

?>
 
 
</div>
</body>
</html>

Et le contenu central appelé en include php


    <div id="news">
	<?php
  include('news/p1.php');  // NEWS
?>
</div>
    <div id="agenda"> 
      <?php
  include('manifs.php');  // NEWS
?>
    </div>
    <div id="chat">
	  <iframe class="tagger" src="http://www.jeunessearconciel.ch/jeunesse/people/modules/tagger/index.php" name="minichat"> 
      Désolé mais votre navigateur ne supporte pas les iframes. Pour plus d'information, 
      reportez-vous au menu "problèmes ?". Merci.</iframe>
    </div>
    <div id="bouton"><img src="images/homepage/bouton1.jpg" alt="truc à la con du mois" width="140" height="40" border="0" /><img src="images/homepage/bouton1.jpg" alt="on cherche !" width="140" height="40" vspace="12" border="0" /><img src="images/homepage/bouton1.jpg" alt="giron 2007 à Arconciel" width="140" height="40" border="0" /></div>
    <img src="images/design/bande_bas.gif" alt="copyright jeunesse d'Arconciel" width="356" height="24" hspace="95" vspace="5" border="0" /></div>

Je remercie d'avance ceux qui pourront aider la pôôvre newbie que je suis Smiley cligne

Modifié par LeNainConnu (18 May 2005 - 22:31)

Igor

18 May 2005 à 22:31

Bonjour et bienvenue sur Alsacréations LeNainConnu,

Merci d'éditer ton message pour présenté ton code plus lisiblement comme tu as dû le lire dans les Règles. Smiley cligne

édit c'est corrigé entre temps

Pour ton problème de centrage sur IE tu devrais lire le tutoriel sur ce sujet, il y a une précision pour IE:

a écrit :

Pour que ça fonctionne sous IE, il faut aligner le texte de façon centrée dans le body (car IE interprête mal cette propriété et s'en sert pour tout aligner : texte, mais aussi images et tous les éléments en général).

et la suite pour tout rentre dans l'ordre.

ps: pour tes propriétés tu devrais utiliser des propriétés raccourcies:


border:solid 1px #FF6600;

Modifié par Igor (18 May 2005 - 22:32)

LeNainConnu

18 May 2005 à 22:34

excuse moi pour le soucis de code ... c'était ce que j'étais en train de faire ... (Tu réponds trop vite ! Smiley cligne

)

Dans Firefox Mac ... c bizarre chez moi ça bug les balises du forum ... enfin bon ...

ok je prend note de tes remarques ... je vais voir ça ...

Pour le problème de la chatbox ... c vraiment bizarre par contre (IE mon amour... grrr ) elle devrait réagir comme les 2 autre box au dessus d'elle non ?
Modifié par LeNainConnu (18 May 2005 - 22:36)

LeNainConnu

18 May 2005 à 23:02

Héhé super ! Merci ! effectivement ... j'avais loupé un chapitre sur le centrage Smiley cligne

c'est niquel ...

Par contre si des gens pourraient éventuellement me dire si la chatbox et mes 3 boutons du fond sont décalé par rapport au reste ?

Ben ouais ... j'ai pas de PC à la maison ... Smiley sweatdrop

*|A faire: s'acheter un crouille PC pour les test|*

encore merci pour ta réponse si rapide ! Smiley biggrin

Raphael

Administrateur

18 May 2005 à 23:54

En attendant, je déplace dans le salon "CSS et mise en forme"

Sujet clos