28172 sujets

CSS et mise en forme, CSS3

[Résolu] Multiples Dégradés qui ne se Repeat pas

Bonsoir.

Je dois être fatigué Smiley lol

Je ne parviens pas à répéter plusieurs dégradés dans mon contenu.

Bon sur IE7 ça fonctionne mais je ne me demande même pas pourquoi, c'est IE ... Smiley ravi

Quelqu'un veut-il bien m'aider à trouver l'erreur ?

Je cherche depuis un moment la et je bloque.

Merci Smiley smile

HTML :


<body>
<div id="global">

<div id="header"></div>

<div id="page"><!-- POUR DEGRADE OMBRE -->

<div id="contenu"><!-- POUR DEGRADE DANS LA PAGE -->

<div id="menu"></div>

<div id="slider"></div>

<div class="gauche"><img src="visuels/titre.png" alt="Titre Droit" width="221" height="35" /></div>

<div class="bloc1">
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>

<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
</div>

<div class="bloc2">
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>
<p>BlablablaBlablablaBlablablaBlablablaBlablabla</p>

</div>

<div class="droite"><img src="visuels/titre-droit.png" alt="Titre Gauche" width="224" height="39" /></div>

<div class="bloc3">
<p>BlablablaBlablabla</p>
<p>BlablablaBlablabla</p>
<p>BlablablaBlablabla</p>
<p>BlablablaBlablabla</p>
<p>BlablablaBlablabla</p>
<p>BlablablaBlablabla</p>

</div>

</div><!-- FIN CONTENU -->
</div><!-- FIN PAGE -->

</div><!-- FIN GLOBAL -->

<div id="footer"><div id="bigfooter"></div></div>
</body>


CSS :


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	background-image: url(visuels/back.png);
	background-repeat: repeat-x;
	background-color: #b2b2b2;
}
/******* GLOBAL *******/
#global {
	width:998px;
	padding-top:20px;
	margin:auto;
}
/******* HEADER *******/
#header {
	height: 130px;
	background-image: url(visuels/header.png);
	background-repeat: no-repeat;
}
/******* CONTENT *******/
#page {
	width:972px;
	margin:auto;
	background-image: url(visuels/fond.png);
	background-repeat: repeat-y;
	}
#contenu {
	width:960px;
	margin:auto;
	background-color:red;
	background-image: url(visuels/contenu.png);
	background-repeat: repeat-x;
}
/******* MENU *******/
#menu {
	height: 38px;
	background-image: url(visuels/menu.png);
	background-repeat: no-repeat;
	margin-bottom:19px;
	margin-left:-19px;
}
/******* SLIDER *******/
#slider {
	height: 209px;
	width:900px;
	margin:auto;
	background-color:red;
	margin-bottom:23px;
}
/******* TITRES *******/
.gauche { margin-left:-19px;}
.droite { margin-top:30px; margin-right:-19px; float:right;}
/******* BLOCS *******/
.bloc1 {
	float:left;
	width: 300px;
	background-color:#FF6633;
	margin-left:30px;
}
.bloc2 {
	float:left;
	width: 300px;
	background-color:red;
	margin-left:30px;
}
.bloc3 {
	float:right;
	width: 200px;
	background-color:purple;
	margin-right:20px;
}
/******* FOOTER *******/
#footer {
clear: both;
background-image:url(visuels/footerback.png);
background-repeat:repeat-x;
background-position:0 52px;
}
#bigfooter {
width:1116px;
margin:auto;
height:294px;
background-image: url(visuels/bigfooter.png);
background-repeat:no-repeat;
}
/******* BASE *******/
img {border: none;}
/******* Menu *******/
ul, li {
	list-style-type: none;
	margin:0;
	padding:0;
}


Pour vous motiver : Un peu de musique

Smiley ravi
Modifié par yank (19 Jul 2010 - 10:23)
Allez une dernière pour les courageux Smiley cligne

Funky

Je cherche toujours ...

Je sais qu'il s'agit d'un problème de Flottant ... Smiley ravi
Modifié par yank (17 Jul 2010 - 01:33)
Heyoan a écrit :
Salut,

pas sûr que ça réponde complètement à ta question mais il manque un contexte de formatage pour tes blocs flottants. Par exemple :
#contenu {
   ...
   overflow: hidden;
}
Cela est expliqué en détail dans cette astuce.


Merci pour ta réponse.

Effectivement cela fonctionne mieux et merci pour l'article Smiley cligne

Par contre du coup mon menu et mes titres son coupés sur les côtés ... Normal car avec le overflow:hidden ma page prend la largeur du #contenu ...
Modifié par yank (19 Jul 2010 - 10:23)
L'astuce donne plusieurs pistes : le overflow:hidden nécessite de revoir la mise en forme mais s'il pose problème il suffit d'utiliser la technique du clear.
Heyoan a écrit :
L'astuce donne plusieurs pistes : le overflow:hidden nécessite de revoir la mise en forme mais s'il pose problème il suffit d'utiliser la technique du clear.


Smiley cligne

ça me paraît bien (sur Ie comme FF)

<div class="spacer"></div>

.spacer {clear: both;}

Modifié par yank (19 Jul 2010 - 10:24)
Sujet clos
Aller à