Bon je fais du surplace depuis 1 heure et je dois terminer ce design pour demain… Donc j’en appelle aux connaisseurs de la cafzone.
J’ai un probleme de background-image qui ne veut pas marcher (ni même courir… un peu d’humour ne fait pas de mal ). Et avec mon header et ma bann ne veulent pas se placer comme je le souhaite, c’est a dire au dessus de la boite centre (bref à droite).
Sous Firefox les deux boites sous le header sont bien placé, mais ce n’est pas le cas sous IE. je pense que c’est lié au fait que je galere avec mon header et ma bann. Je me suis base au depart sur cette mise en page de alsacréation que j’ai essaye d’adapter à ma sauce (mais bon ça marche pas)
bon le code CSS : [quote]body{
background-color : #F0F0F0;
margin : 0;
padding : 0;
} #site{
position : absolute;
width : 770px;
left : 50%;
margin-left : -375px;
background-color : #F0F0F0;
} #header{
width : 770px;
height: 150px;
margin-right : 0;
right : 0;
background-color: #F0F0F0;
} #bann{
width : 630px;
background : #F0F0F0 url(« images/centremil.png ») repeat-y left top;
height : 128px;
margin-right : 0;
right : 0;
} #bas{
margin-top : 0;
width : 770px;
} #gauche{
position : absolute;
margin-top : 1px;
margin-left : 0;
width : 150px;
} #menu{
width : 150px;
background : #F0F0F0 url(« images/menumil.png ») repeat-y left top;
} #contenu{
top : 0px;
background-color:#F0F0F0;
margin-left: 150px;
} #centre{
left : 0;
width : 630px;
background : #F0F0F0 url(« images/centremil.png ») repeat-y left top;
}[/quote] Et un le lien vers la page
Tes balises img sont pas dans le même div, c’est normal ?
Voici la déclaration d’un fond CSS tout-en-un :
background:#eee url(/images/template/pixel/fond.gif) no-repeat scroll top right;
(merci à w3schools)
Ceci ne répond pas directement au problème :
Le position absolute n’aime pas IE (ou c’est le contraire). Même chose pour les left:x; et right:x; je crois pas que ça ait marché un jour sous IE, si quelqu’un peut me prouver le contraire …
Quand j’ai deux éléments à placer l’un à côté j’utilise des floats avec des tailles fixes pour mes 2 éléments, c’est supporté par plus de navigateurs et c’est plus “instinctif”. En dessous un élément avec un clear:left; (si on doit mettre un élément en dessous) pour ne pas que tout se mélange et c’est bon.
Que mes balises img ne soient pas toutes dans la même div est normal car sinon j’ai mon image de background qui dépassent mon image de fin de la div ( je n’ai jamais compris pourquoi surtout que j’utilise des image de fond de 1px de hauteur ).
La déclaration de fond que j’utilise dans mes CSS vient d’un de mes sites où ça ne pose aucun problème, mais je vais quand même essaye avec la formulation de la WC3school.
Bon c’est pas la première fois que IE me fait chier… Et je sens que je suis pas au bout de mes peines…
Bon je vais tenter ta technique ce soir.
Merci d’avoir répondu.
Bon je progresse mais ce n’est pas encore ça…
J’ai encore 2 petits problèmes.
Le premier avec IE, il veut toujours pas me foutre ma division gauche à gauche
Et le deuxième, c’est que je voudrais en fait que ma bannière soit pile au dessus de centre.
Si quelqu’un voit ce qui cloche…
Sinon j’ai regle le problème avec la background image. A priori l’emplacement était mal indiqué. Même si je ne comprend pas pourquoi car j’ai récupéré la syntaxe d’un autre de mes sites avec exactement la même arborescence et qui lui marchait surper bien. Quelque chose doit m’échapper mais je vois pas quoi…
Bon je vous met le nouveau fichier CSS :
[quote]body{
background-color : #F0F0F0;
} #site{
position : absolute;
width : 770px;
left : 50%;
margin-left : -375px;
background-color : #F0F0F0;
} #header{
width : 770px;
height: 150px;
margin-right : 0;
background-color: #F0F0F0;
clear:left;
} #bann{
width : 630px;
background: #F0F0F0 url(…/images/fondcentre.png) repeat-y left top;
height : 128px;
margin-right : 0;
float : right;
} #gauche{
position : absolute;
margin-left : 0;
width : 150px;
float : left;
} #menu{
width : 150px;
background:#F0F0F0 url(…/images/fondmenu.png) repeat-y left top;
} #contenu{
top : 0px;
background-color:#F0F0F0;
margin-left: 150px;
float : right
} #centre{
width : 630px;
background:#F0F0F0 url(…/images/fondcentre.png) repeat-y left top;
}[/quote] Et je vous remet le lien vers la page.
