28220 sujets

CSS et mise en forme, CSS3

Décalage de contenu

Hello tous encore moi !


Bon voilà, sous mac (IE, Netscape, firefox, safari) mon site s'affiche super bien. Mais dès que je passe sous IE PC ...

Dans ma page centrale (contenu) les boîtes ne sont pas centrées ... Pourtant elles sont décalées de 46px, ce qui après calcul doit les mettre au centre. Et les 2 bloc du fond (chat et les boutons), eux se trouvent encore plus décalés vers la droite ...


La seule chose qui se porte comme un charme, c'est l'image copyright du fond qui est centrée (par je ne sais quelle magie !!) Smiley eek

Je désespère ... snif Smiley bawling

Ma page à voir ...

PS j'ai ajouté des couleurs de fond, histoire de voir un peu comment la structure du contenu de la page se goupille ...

Merci à tout ceux qui pourront m'aider ...



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

body {
	margin:0px;
	padding:0px;
	text-align:center;
	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:543px;
	float:left;
	background-color:#FFCCCC;
	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:162px;
	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;
		background-color:#FFFFFF;
	border: 1px solid #FF6600;
	overflow: auto;
	height: 160px;
	margin-left: 46px;
	margin-bottom: 15px;
	border: 1px solid #FF6600;
}

#agenda {
	width: 450px;
	background-color:#FFFFFF;
	margin-left: 46px;
	margin-bottom: 15px;
	border: 1px solid #FF6600;
}

#chat {
	background-color: #FFFFFF;
	float:left;
	width: 298px;
	margin-left: 46px;
	margin-bottom: 15px;
	border: 1px dotted #FF6600;
	height: 230px;
	margin-right: 10px;
	padding: 0px;
	text-align: center;
}

#bouton {
	float:left;
	width: 140px;
}

#copyright {
	float:left;
	width:543px;
		background-color:#B3FFC2;
	
}

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;
	paddi°?ng-bottom: 1px;
	color: #FFFFFF;
	font-weight: bold;
	margin-top: 0px;
}

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

.tagger {
	height:225px;
	width: 288px;
	border: 0px;
	margin: 0px;
	padding: 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;
}





<?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="#">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"> 
    <div id="news"> :: NEWS On rencontre donc plusieurs types de chambres comme 
      le d&eacute;potoir, le magasin, le grenier, la salle commune, la pouponni&egrave;re 
      &agrave; &#339;uf, larves et nymphes qui sont situ&eacute;es dans la partie 
      la plus obscure de la fourmili&egrave;re. Ceci dit la r&eacute;partition 
      des chambres est tr&egrave;s variable, le plus souvent la r&eacute;partition 
      des chambres est due aux conditions de temp&eacute;rature et d&#8217;humidit&eacute; 
      de leur milieu (en Europe souvent une for&ecirc;t de conif&egrave;res).<br />
      Les mat&eacute;riaux de d&eacute;blai accumul&eacute;s &agrave; l&#8217;ext&eacute;rieur 
      de la fourmili&egrave;re forment un monticule en forme de d&ocirc;mes. Ce 
      d&ocirc;me est constitu&eacute; avec des aiguilles de pins et des branchettes 
      d&#8217;arbres, de cette mani&egrave;re qu&#8217;il neige ou qu&#8217;il 
      pleuve la fourmi est toujours au sec car l&#8217;eau ruisselle sur le d&ocirc;me 
      sans y p&eacute;n&eacute;trer ; la neige et les aiguilles de pins pi&egrave;gent 
      la chaleur d&eacute;gag&eacute;e par l&#8217;activit&eacute; des fourmis 
      et la fourmili&egrave;re reste toujours &agrave; une temp&eacute;rature 
      sup&eacute;rieure &agrave; 20&deg;C.</div>
    <div id="agenda"> Placez de la sauge verte ou du camphre dans les garde-robes.<br />
      Les fourmis g&acirc;te-bois peuvent &ecirc;tre attir&eacute;es et tu&eacute;es 
      avec un m&eacute;lange de beurre d&#8217;arachide et d&#8217;acide borique 
      car elles se logent habituellement dans le bois mou ou en d&eacute;composition.<br />
      Vous pouvez encore faire une infusion de tanaisie : versez 30g de tanaisie 
      fra&icirc;che dans 1 litre d'eau bouillante et laissez infuser 24 h. Filtrez 
      et pulv&eacute;risez l'infusion sur la fourmili&egrave;re.<br />
      Si vous n'avez pas de jeunes enfants, vous pouvez aussi acheter du BORAX 
      en pharmacie, le m&eacute;langer avec du sucre et d&eacute;poser le tout 
      dans des petits contenants qui attireront et &eacute;limineront les fourmis.<br />
    </div>
    <div id="chat">
   <iframe class="tagger" src="http://www.jeunessearconciel.ch/jeunesse/people/modules/tagger/index.php" name="minichat" frameborder="0">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>
    <div id="copyright"><img src="images/design/bande_bas.gif" alt="copyright jeunesse d'Arconciel, Valérie Surchat" width="356" height="24" hspace="46" /></div>
	</div>
</div>
</body>
</html>

Modifié par LeNainConnu (21 May 2005 - 13:39)
Sujet clos
Aller à