28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème fond d'écran.

Bonjour à tout les internautes,

j'ai un problème très étrange. J'essaie de mettre un fond d'écran dégradé de noir à blanc de haut en bas (pour coller avec l'image du header que j'ai mise) et je n'y arrive absolument pas. Soit le fond d'écran est tout blanc, soit il y a des dégradés noirs/blancs (quand j'utilise body {} en CSS) qui se répètent et qui font la hauteur de l'image header que j'ai mise alors qu'elle n'est même pas dans le body. C'est à n'y rien comprendre.

Aidez moi svp. Je vous remercie d'avance.

(ici j'ai mi l'image du header dans le body pour voir si sa changeait quelque chose mais non)

Voici le résultat en image : http://img15.hostingpics.net/pics/874729Sanstitre.png
*{
	padding:0%;
	margin:0%;
}
.header{
	width: 100%;
	margin: 0%;
	margin-bottom:10%;
	padding: 0%;
	margin-bottom: -0.3%;
}
body{
	background: -webkit-linear-gradient( top, black, white);
	background: -moz-linear-gradient( top, black, white);
	background: -ms-linear-gradient( top, black, white);
	background: -o-linear-gradient( top, black, white);
	background: linear-gradient( to bottom, black, white);
	width: 100%;
}
.texte{
	background-color: white;
	border-radius:10px;
	margin-left: 25%;
	margin-right: 8%;
	z-index: 4;
	position:absolute;
}
#menu-accordeon {
  padding:0;
  margin-left:5%;
  list-style:none;
  text-align: center;
  width: 11%;
  z-index: 4;
  position:absolute;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
background:-webkit-gradient(linear,left top,left bottom,from(#729EBF),to(#333A40));
background:-webkit-linear-gradient(top, #729EBF, #333A40);
background:   -moz-linear-gradient(top, #729EBF, #333A40);
background:     -o-linear-gradient(top, #729EBF, #333A40);
background:        linear-gradient(top, #729EBF, #333A40);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40;
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:14px
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:12px
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
		<title>OCR Center</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

	</head>
	<body>
		<img src="header.jpg" class="header"/>
		<div class="fond">
		qsdqsdqsd <br/> <br/>
			<ul id="menu-accordeon">
				<li>
					<a href="#"> Qui sommes nous ? </a>
				</li>
				<li><a href="#"><div class="nav"> Tarifs </div></a>
					<ul>
						<li><a href="#">Forfaits, modalités de paiement</a></li>
					</ul>
				</li>
					<li><a href="#"> Plannings</a>
					<ul>
						<li><a href="#">Horaires d'ouverture et des cours collectifs</a></li>
					</ul>
				</li>
					<li><a href="#">Produits complémentaires</a>
					<ul>
						<li><a href="#">Compléments alimentaires</a></li>
					</ul>
				</li>
					<li><a href="#">Nous contacter </a>
					<ul>
						<li><a href="#">Contact, Questions, Remarques</a></li>
					</ul>
				</li>
			</ul>
			<div class="texte"> Ceci est un texte
			</div>
		</div>
	</body>
</html>

Modifié par Philigane (29 Jun 2013 - 17:54)
Sujet clos
Aller à