problème de longueur

et de décalage

Sujet résolu

13 février 2006 à 0:10:54

Bonsoir chers ZérOs,

J'ai deux soucis de mise en page :

Sous firefox et IE :

image n°1

Je voudrais bien évidemment que les deux menus descendent jusqu'en bas
tout en gardant mes balises div (sans faire de tables quoi)

voilà mon code CSS

#centre
{
margin:auto;
width:800px;
}
/*baniere*/
#baniere
{
width:800px;
height:128px;
background-image:url("images/design/baniere.jpg");
background-repeat:no-repeat;
}

#bancon
{
padding:0;
border-collapse:collapse;
background-image:url('images/design/design_ames.jpg');
background-repeat:no-repeat;
text-align:center;
width:800px;
height:32px;
background-color:#404040;
font-family:Verdana;
font-size:10px;
}

/*menu de droite*/
#droite
{
margin-left:0px;
float:right;
padding-left:0px;
margin-top:0px;
width:130px;
background-image:url('images/design/design_droite.jpg');
text-align:right;
background-color:black;
}

/*partie gauche*/
#gauche
{
margin-top:0px;
float:left;
width:130px;
background-image:url('images/design/design_gauche.jpg');
background-color:black;
}

/*corps de la page*/
#corps
{
margin-left:130px;
margin-top:0px;
width:540;
text-align:center;
background-image:url('images/design/design_milieu.jpg');
}

/*footer*/
#footer
{
clear:right;
}

et mon code xhtml

<div id="centre">

<div id="baniere">
<table class="baniere">
<tr>
<td valign="bottom"><script type="text/JavaScript">MyRandomMess();</script></td>
</tr>
</table>
</div>

<div id="bancon">
<table class="bancon">
<tr>
<td valign="bottom">
Actuellement  3 âmes errantes en ligne
</td>
</tr>
</table>
</div>

<div id="droite">
<?php
require "includes/menus/droite.html";
?>
</div>

<div id="gauche">
<?php
require "includes/menus/gauche.html";
?>
</div>

<div id="corps">
<?php
require "accueil.html";
?>
</div>

<div id="footer">

<table class="disclaimer">
<tr>
<td align="center">
<script src="includes/disclaimer.js" type="text/javascript"></script>
</td>
</tr>
</table>

<table class="tablefoot">
<tr>
<td class="td1"align="left" valign="middle">

<p>
Copyright © 2000-2006 Nosgoth-fr.net - Contact : <A HREF="mailto:webmaster@nosgoth-fr.net">webmaster@nosgoth-fr.net</A><BR>
Design by R@Z et Analand
</p>

</td>

<td class="td2" align="center" valign="middle">

<script src="includes/icra.js" type="text/javascript"></script>

<script src="includes/xiti.js" type="text/javascript"></script>
<noscript><a href="http://www.xiti.com/xiti.asp?s=30894" target="_blank"><img class="xiti" height="25" title="Mesurez votre audience" alt="Mesurez votre audience" src="images/hit.gif"></a></noscript>

</td>

</tr>
</table>
</div>

</div>

Ensuite, mon deuxième souci :

image n°2

L'image parle d'elle même.

Si vous pouviez m'aider ... merci beaucoup

jp949

13 février 2006 à 10:54:29

salut.
pour le 2eme probleme c'est la largeur totale de tes elements qui est trop importante , IE ajoute des marges qu'on ne peut pas supprimer donc il faut que tu diminues la largeur d'un element de 3px.
pour le 1er la solution consiste a faire 2 div qui englobent les 3 blocs (droite gauche et corps avec pour un background-image celle du menu droite et bg-position:right et de meme pour l'autre en mettant image du menu gauche bg-position:left

Gibou

13 février 2006 à 14:43:46

Merci beaucoup !!

Je ne sais pas trop comment je vais me débrouiller pour réduire de 3 pixels car le design n'est pas de moi et il est fait au pixel près mais je me débrouillerai. Tu m'enlèves en tout cas une grosse épine du pied pour le premier souci !!!

Vive le site du zéro !!

jp949

13 février 2006 à 14:48:01

avec plaisir si tu as un probleme reviens je t'ai donné un truc vite fait il y aura peut-etre des details a regler

Gibou

13 février 2006 à 15:01:40

Ba maintenant que tu le dis ...
Je veux bien de l'aide.

En fait, mon corps de page remonte si je réduis sa largeur de 6 pixels mais du coup ya un espace avec le design de chaque côté.

en image

Ah oui et pourquoi, même en mettant

#centre
{
margin:auto;
width:800px;
}

et le

sous IE, ce n'est pas centré alors que sous firefox, oui. J'ai pourtant ça sur mon site et ça marche sur les deux navigateurs. Pourquoi là, ça ne marche pas, c'est un mystère.

jp949

13 février 2006 à 15:13:14

c'est sur qu'avec IE les design avec images qui ajustent posent un probleme.
La solution consiste encore a inserer 2 div dans les div menu avec background-image la meme que menu repeat-y position:relative; left:-3px margin-right:-3px; et pour l'autre position:relative; right:-3px; margin-left:-3px;

Gibou

13 février 2006 à 15:37:10

Excuse moi de faire mon boulet mais tu pourrais me le faire au moins sur un côté parce-qu'à part tout décaler, je n'arrive pas à grand chose ... :/

Merci encore

jp949

13 février 2006 à 15:46:18

#gauche {
background: #BBBBBB;
margin: 0px;
padding: 0px;
float: left;
height: 300px;
width: 130px;
}

#corps {
background: #FF6600;
margin: 0px auto;
height: 300px;
width: 534px;
}
#droite {
background: #BBBBBB;
margin: 0px;
padding: 0px;
float: right;
height: 300px;
width: 130px;

}
#dr2 { height:100%;
background: #BBBBBB;
position:relative; left:-3px; }
#ga2 { height:100%;
background: #BBBBBB;
position:relative; right:-3px; }

tu remplaces les couleurs de background par tes images et les hauteus aussi la j'ai mis ca pour que ca s'affiche

Gibou

13 février 2006 à 16:00:47

Marchi !!!
C'est bon, j'ai re-bidouillé ça avec un tit coup de !important et ça roule

Sinon, dernier mini souci celui là je pense :
Le centrage qui ne marche pas avec IE
Une idée ?
J'ai essayé un bête div align="center" et même ça ne marche pas !

jp949

13 février 2006 à 16:06:10

#centre { margin:0 auto; }

Gibou

13 février 2006 à 16:31:30

Ah oui, j'avais un attribut en trop qu'il ma fallu redistribuer.

Merci de t'être donné toute cette peine, c'est parfait

Merci encore

jp949

13 février 2006 à 16:36:08

pas de quoi, ac plaisir