28221 sujets

CSS et mise en forme, CSS3

Ptit pb de mise en page browser[Resolu]

Hello
je comprends plus rien, il me semble de pas faire d'erreur alors voici mon probleme..

Le premier probleme, c'est que ma mise en page sous FF est propre mais ... sous IE c'est affreux pk ? Smiley ohwell

Le deuxieme probleme est que des que je veux mettre un padding dans l'id d'un div ben j'ai mon div qui s'agrandit et qui repete l'image, pk ? Smiley ohwell

merci d'avance de m'aider Smiley bawling

le lien

les codes :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New site ICC - Version Beta</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="lib/format.css">
</HEAD>

<BODY>
<div id="global">
<div id="menuhaut"></div>
<div id="header"></div>
<div id="zonemembres"></div>
<div id="centre"></div>
<div id="menu"></div>
<div id="infos"></div>
<div id="footer"></div>
</div>
</BODY>
</HTML>


et CSS :

html,body{
text-align:center;
margin:0;
padding:0;
}
#global{
border:1px solid black;
width:780px;
background-color:#EEEEEE;
margin:auto;
text-align:left;
}
#menuhaut{
background-image:url("../images/menuhaut.gif");
width:780px;
height:39px;
}
#header{
background-image:url("../images/header.gif");
width:509px;
height:176px;
float:left;
}
#zonemembres{
background-image:url("../images/zonelogin.gif");
margin-left:509px;
width:271px;
height:176px;
}
#centre{
background-image:url("../images/centre.gif");
width:530px;
height:359px;
float:left;
}
#menu{
background-image:url("../images/menudroit.gif");
width:250px;
height:359px;
margin-left:530px;
}
#infos{
background-image:url("../images/infos.gif");
width:780px;
height:157px;
}
#footer{
background-image:url("../images/footer.gif");
width:780px;
height:25px;
}

Modifié par Fijer (22 May 2005 - 13:23)
Salut,
pour le padding, faut pas mettre de background-repeat à ton image

Pour IE/FF ça peut venir de plein de trucs différents quels sont exactement les problèmes ?
ok merci pour ta reponse, sinon pour le background repeat, c'etait un test pour voir si ca venait de la...
pour le pb entre iE/FF ben c'est que c'est nickel sous FF mais sous IE ca fait des escaliers enfin je me comprends.
sinon je vais faire une autre version en rajoutant seulement un padding:10px; au div
je n'ai rajoute que els 2 dernieres lignes a #centre
#centre{
background-image:url("../images/centre.gif");
width:530px;
height:359px;
float:left;
padding-left:15px;
padding-top:45px;
}

LIEN
Modifié par Fijer (22 May 2005 - 12:34)
Ton probléme vient du probléme de IE et de la largeur des boites.

Va dans la FAQ, il y a des choses d'expliqué sur ces problémes.
doomer a écrit :
Ton probléme vient du probléme de IE et de la largeur des boites.

Va dans la FAQ, il y a des choses d'expliqué sur ces problémes.


merci de ta reponse, mais ca reglera la repetition des images ou la mise en page sous IE ?
jb_gfx a écrit :
Pour la répetition des images Olivier t'as répondu juste avant...

Oui mais je vois pas de background-repeat dans mon CSS Smiley sweatdrop
Fijer a écrit :

Oui mais je vois pas de background-repeat dans mon CSS Smiley sweatdrop

Justement il faut mettre background-repeat: no-repeat;

Par défaut, il est à repeat

Tu peux raccourcir l'écriture des background en utilisant directement
background: url(...) no-repeat;

Enleve les guillemets dans les url aussi, c'est source de problèmes dans certains navigateurs

Je te conseille de lire ça :
http://w3qc.org/docs/trucs-et-astuces-css-1.html
et ça :
http://pompage.net/pompe/cssefficace/
Modifié par Olivier (22 May 2005 - 13:03)
merci bon j'ai reussi a empecher donc la repetition du fond mais j'ai tout qui se decale.. Smiley sweatdrop
tanpis je vais faire uen mise en page plus simple a gerer

thanks pour tout
Sujet clos
Aller à