28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Problème de background étirable

Bonjour,

J'ai un gros souci pour mon site qui n'existait pas avant. J'ai une version IE8 et Firefox 3.5.7

Sur mon site il y a un bloc principal #page. une image de fond couvre tout ce bloc.

mon code css sous ie ne pose pas problème :

body {
	margin:10px 0 0 0;
	font-family:verdana;
	font-size:11px;
	background-color: #DDFF77;
}
#entete{
float:left;
width:100%;
height:160px;
margin: 0 0 0 0;
}

#piedpage{
	float:left;
	width: 100%;
	height:60px;
	background-color: #96AE24;
}



#page{
	float:none;
	width: 750px;
	height:100%;
	margin: 0 auto 0 auto;
	background-image: url(../IMG/Fonds/fond.jpg);
	background-repeat: repeat-y;
}

#navigation{
float:left;
width:210px;
	height:100%;
margin: 50px 0 0 0;
padding-left:5px;
padding-right:5px;
}

#colonnedroite{
float:right;
width:170px; 
padding-left:6px;
padding-right:5px;
	margin: 0 0 0 0;
}



#global{
float:left; 
width:330px; 
	margin: 0 0 0 0;
}

#conteneur{
float:left; 
width:330px; 
text-align:justify;
background-repeat: no-repeat;
padding-left:5px;
padding-right:5px;
	margin: 0 0 0 0;
}


le conteneur se trouve dans le global et le global dans page


mais ça ne fonctionne pas sous mozilla. la hauteur n'est pas prise en compte

de plus, j'ai une feuille de style différente selon le navigateur. mais ie utilise quand même le css par défaut :

<!--FEUILLE DE STYLE PAR DEFAUT-->

[(#REM) Feuille de style CSS pour l'affichage du site a l'ecran ]
<link rel="stylesheet" href="[(#CHEMIN{habillage.css}|direction_css)]" type="text/css" media="projection, screen, tv" />


<!--FEUILLE DE STYLE POUR INTERNET EXPLORER-->

[(#REM) Feuille de style CSS pour l'affichage du site a l'ecran sur ie7 et + ]
<!--[if IE 7]><link rel="stylesheet" href="[(#CHEMIN{habillage-ie.css}|direction_css)]" type="text/css" media="projection, screen, tv" /><![endif]-->

[(#REM) Feuille de style CSS pour l'affichage du site a l'ecran sur ie7 et + ]
<!--[if IE 8]><link rel="stylesheet" href="[(#CHEMIN{habillage-ie.css}|direction_css)]" type="text/css" media="projection, screen, tv" /><![endif]-->

[(#REM) Feuille de style CSS pour l'affichage du site a l'ecran sur ie6 ]
<!--[if IE 6]><link rel="stylesheet" href="[(#CHEMIN{habillage-ie2.css}|direction_css)]" type="text/css" media="projection, screen, tv" /><![endif]-->



<!--FEUILLE DE STYLE QU'INTERNET EXPLORER NE DOIT PAS PRENDRE EN COMPTE-->

<!--[if !IE]><!--> 
  <link rel="stylesheet" href="[(#CHEMIN{habillage.css}|direction_css)]" type="text/css" media="projection, screen, tv" />
<!--<![endif]-->


je commence à m'arracher les cheveux.

si vous avez des solutions...

merci d'avance

http://depressionquotidien.free.fr/
Modifié par floriane (11 Mar 2010 - 20:34)
Bonjour,

Je ne suis pas sûre d'avoir compris ton message, mais j'ai l'impression que tu cherche à réaliser des colonnes factices (en plus comme c'est de la largeur fixe, c'est plus simple). La technique est tout à fait applicable à tes trois colonnes (il suffit d'ajuster l'image de fond).

Tu peux également regarder du côté des gabarits de Florent. Le gabarit 10 correspond exactement à ce que tu cherche à faire.
merci !
j'ai remanié les squelettes et le css
ça fonctionne
mais il y a un espace entre l'entête et le reste. je n'arrive pas à savoir d'où ça vient...

mon nouveau code pour IE :

body {
	font-family:verdana;
	font-size:11px;
	background-color: #DDFF77;
margin: 0;
padding:0;
}

/* * bloc global */
#global{
	float:none;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#entete{
margin: 0;
padding:0;
height:157px;
}

/* * bloc centre */
#centre{
	width: 100%;
	overflow: hidden;
	background-image: url(../IMG/Fonds/fond.jpg);
	background-repeat: repeat-y;
}
#navigation{
float:left;
width:220px;
height:100%;
margin: 0 0 0 0;
padding:0 5px 0 5px;
}
#conteneur{
	float: left;
	width: 440px;
	height:100%;
	padding: 10px 20px;
	margin: 0 0 0 0;
	text-align:justify;
}
#colonnedroite{
	float:right;
	width: 190px;
	height:100%;
	position: absolute;
	margin: 0 0 0 0;
padding:0 5px 0 0;
}

/* Pied de page */
#pied {
	margin: 0;
	padding: 15px 20px 10px 0;
	font-size: .85em;
	background-color: #96AE24;
}




mon nouveau code pour mozilla :

body {
	font-family:verdana;
	font-size:11px;
	background-color: #DDFF77;
margin: 0;
padding:0;
}

/* * bloc global */
#global{
	float:none;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#entete{
height:157px;
margin: 0 0 0 0;
padding:0;
}

/* * bloc centre */
#centre{
	width: 100%;
	overflow: hidden;
	background-image: url(../IMG/Fonds/fond.jpg);
	background-repeat: repeat-y;
}
#navigation{
float:left;
width:220px;
height:100%;
margin: 0 0 0 0;
	padding: 0 5px 0 5px;
}
#conteneur{
	float: left;
	width: 440px;
	height:100%;
	padding: 10px 20px;
	margin: 0 0 0 0;
	text-align:justify;
}
#colonnedroite{
	margin-left: 700px;
	margin-right: 20px;
	padding: 0 5px 0 5px;
}

/* Pied de page */
#pied {
	margin: 0;
	padding: 15px 20px 10px 0;
	font-size: 0.85em;
	background-color: #96AE24;
}

Modifié par floriane (11 Mar 2010 - 20:37)
c'est bon c'est résolu,
je devais juste indiquer la hauteur de l'entête
merci encore !
Modifié par floriane (11 Mar 2010 - 20:32)
Bonjour

Je cherche désespérément un moyen de modifié cette lignes de codes..
j ai crée une image 1920x1080,que je souhaite mettre en background..jusque la simple..
et écris ainsi : <body background="fond.jpg">

maintenant je voudrais ajouté a cette commande la possibilité que mon image de fond s ajuste a tout types d écran ou de résolution..bien sur pour du plus petit..donc que si sur mon portable je suis sur la page ce fond s ajuste a ma résolution plus petite..et non que je perde une grande partie de l image et qu elle ne soit plus centré..

donc un background qui soit 100 % centré et qui s ajuste a la fenêtre....

svp help
Sujet clos
Aller à