28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Problème de répétition d'un background!

Bonjour,

Je viens demander de l'aide sur ce forum car j'ai un "problème" que je n'arrive vraiment pas à résoudre par moi même... J'ai indiqué une longueur minimale de 500px avec min-height et une longueur qui doit s'étendre avec un repeat-y du fond et un heig: auto... Seulement, ca ne marche pas du tout!

Voila ce que cela donne... http://www.tatane.net/coiffure2/livres.php?id=livre%20dor


Voici le css :


/* Valeurs par default
-----------------------------------------------------------------------------*/
*{margin:0;padding:0;list-style:none;}
body{ font:75% Arial, Helvetica, sans-serif}

/* couleurs et images arriere plan */
body#yellow{background:#948a6e url(img/yellowbg.png) repeat-x}
body#blue{background:#7b8a97 url(img/bluebg.png) repeat-x}
body#red{background:#a17f7a url(img/redbg.png) repeat-x}
body#green{background:#aab8a4 url(img/greenbg.png) repeat-x}

a{text-decoration:none;color:#000;}
a:hover{color:#666;}
a img{border:0}

.clear{clear:both;	background:url(img/hr.jpg) no-repeat 0 100%; height:5px; padding-top:15px; border:0;margin: 0 -5px; }





/* Structure des Blocks
----------------------------------------------------------------*/
h1{line-height:0;font-size:0; height:189px;width:850px;margin:0 auto;}

#speedbar{
	background:url(img/speedbar.png);
	height:52px;
	text-align:center;
	font-size: 11px;
	width:680px;
	margin:0 auto;
	padding-left:170px;
	text-transform:uppercase;
	font-weight:bold
}

#content{
	width:850px;
	margin:0 auto;
	background:url(img/content.png);
	background-repeat:repeat-y;
	position:relative;
	min-height: 500px;
	height:auto;
}

#footer{
	width:850px;
	margin:0 auto;
	background:url(img/footer.png) no-repeat;
	min-height:65px;
	text-align:center
}









/* Contenu de Speedbar
----------------------------------------------------------------*/
#speedbar li{float:left;}
#speedbar li a{display:block;width:70px;height:21px; background:url(img/button.png) 0 0;color:#fff; padding-top:13px; margin-right:2px;}
#speedbar li a#ldes{padding-top:4px;height:29px; line-height:13px;}
#speedbar li a:hover, #speedbar li a.activ{background:url(img/button.png) 0 -35px;}




/* Contenu de content
----------------------------------------------------------------*/
#content h2{
	background:url(img/content-title.png) no-repeat;
	padding:10px 450px 20px 50px;
	font-size:1.1em;
	font-weight:normal;
	color:#757470;
}



#content .news{
	padding:20px 0 30px;
	margin: 0 40px;
	height:12px;
	font-size:1em;
	color:#fff;
}
#content .news h3{font-size:1.1em;margin: 0 15px 5px; text-transform:uppercase;}
#content .news  .p1{padding:4px 15px}
#content .news .p1:first-letter{font-size:130%;color:#ccc;}

#content .news  .p2{
font-size:1em;
height:auto ! important;
height:15px;

}








/* Contenu de Footer
----------------------------------------------------------------*/
#footer li#copyright{
	padding-top:48px;
	font-size:0.9em;
	color:#544f4b;
}	
#footer li#copyright small{ margin-left:20px;}

#footer li#normes{
	padding: 18px 20px 7px;
	font-size:0.9em;
	color:#fff;
}
#footer li#normes span{ margin-left:70px;}
#footer li#normes a{color:#f2f2f2; font-weight:bold}





/* Contenu de Formulaire
----------------------------------------------------------------*/

.namef { 
	text-transform:uppercase;
	font-weight: bold;
	font-size: 11px;
	padding-left: 10px;
	}
	
.Titrepage {
	font-weight: bold;
	font-size: 16px;
	color:#FFFFFF;
	}

.table {
	background:url(img/texte_bg.png)   no-repeat;	
	text-transform:uppercase;
	font-weight: bold;
	font-size: 13px;
	float:left;
	
}


Et voici la page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Styling-Coiffure - Accueil</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body id="blue">

<!--============== En-tete ============-->
 <h1><img src="img/header.png" alt="" /></h1>
 
<!--============== Menu Speedbar ============-->
  <ul id="speedbar">

   <li><a href="index.php?id=accueil" href="attitude.php" class="none">Accueil</a></li>
   <li><a href="attitude.php?id=attitude" class="none">attitude</a></li>
   <li><a href="luxe.php?id=le luxe detre soi" id="ldes" class="none">le luxe d'etre soi</a></li>
   <li><a href="salon.php?id=le salon" class="none">le salon</a></li>
   <li><a href="services.php?id=services" class="none">services</a></li>
   <li><a href="astuces.php?id=astuces" class="none">astuces</a></li>

   <li><a href="livres.php?id=livre dor" class="activ">contact</a></li>
  </ul>

<!--============== Contenu ============-->  
  <div id="content">
   <h2 class="Titrepage">Vous désirez prendre contact ?</h2>

      <blockquote class="news">
       <h3></h3>
	
	   
<!--============== Formular ============-->  	
 <p class="p2">Vous pouvez nous joindre du mardi au samedi de 8h à 18h au 071/34 11 02
 <br>Notre salon se trouve Chaussée de Nivelles, 176 à 6041 Gosselies </br>
 <br> <br />Voici un plan détaillé de sa location:</p>

<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.be/maps?oe=utf-8&amp;client=firefox-a&amp;ie=UTF8&amp;q=Chauss%C3%A9e+de+Nivelles+176+++++6041+Gosselies&amp;fb=1&amp;gl=be&amp;ei=WP3ISr_iKpi_OOux1UY&amp;cid=7564963080885828627&amp;li=lmd&amp;hq=Chauss%C3%A9e+de+Nivelles+176+++++6041+Gosselies&amp;hnear=&amp;ll=50.474004,4.42955&amp;spn=0.006295,0.006295&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.be/maps?oe=utf-8&amp;client=firefox-a&amp;ie=UTF8&amp;q=Chauss%C3%A9e+de+Nivelles+176+++++6041+Gosselies&amp;fb=1&amp;gl=be&amp;ei=WP3ISr_iKpi_OOux1UY&amp;cid=7564963080885828627&amp;li=lmd&amp;hq=Chauss%C3%A9e+de+Nivelles+176+++++6041+Gosselies&amp;hnear=&amp;ll=50.474004,4.42955&amp;spn=0.006295,0.006295&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>
   
 <p class="p1">Vous avez une question? Un doute? N'hésitez pas à remplir le formulaire ci-dessous.</p>
 <p class="p2"> 
 <table width="570" height="330" border="0" align="center" background="img/texte_bg.png"   class="table">
<form action="envoi.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire">
  <tr>
    <td height="40" colspan="3" class="Titrepage">Formulaire de contact </td>
    </tr>
  <tr>
    <td width="119" class="namef" >Nom</td>
    <td width="424" colspan="2"><input name="nom" type="text" class="textfield" size="45" maxlength="150" /></td>
  </tr>
  <tr>
    <td class="namef">E-mail</td>
    <td colspan="2"><input name="mail" type="text" class="textfield" size="45" maxlength="100"></td>
  </tr>
  <tr>
    <td class="namef">Sujet</td>
    <td colspan="2"><input name="objet" type="text" class="textfield" size="45" maxlength="100"></td>
  </tr>
  <tr>
    <td class="namef">Message</td>
    <td colspan="2" ><textarea name="message" cols="50" rows="10" class="textfield"></textarea></td>
  </tr>
  <tr>
    <td ></td>
    <td align="center"><input name="Submit" type="reset" class="submit" value="Réinitialiser">        </td>
    <td align="left"><input name="Submit" type="submit" class="submit" value="Envoyer"></td>
  </tr>
  </form>
</table>
</p>
	   
	  
	    
      <p class="p1"> A bientôt!      </blockquote>
</div>

<!--============== Footer ============-->  
  <ul id="footer">
    <li id="copyright">HTTP://WWW.COIFFURE-STYLISME.COM &copy; <small>Tous droits réservés</small></li>
    <li id="normes">
      Intégration Xhtml/css 
      <span>Site Valide: <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a>

      et <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS 2.1</a></span>
    </li>
  </ul>
</body>
</html>



Merci d'avance si vous pouvez m'apporter une quelconque aide...
Modifié par Yume (09 Oct 2009 - 14:19)
Salut,

Ceci va résoudre ton problème.

#content {overflow:hidden;}


Cependant ce qui serait plus propre serait de passer ton content en float:left mais il faudra revoir ton CSS car tes positions ne seront plus bonnes.
Vraiment, merci du fond du coeur..

Cependant, ca ne regle pas le probleme sur les autres pages... même avec le overflow, le corps n'est pas extensible

J'ai fait ce codage avec l'aide d'un ami, donc je ne me risquerais pas de tout changer Smiley sweatdrop
Modifié par Yume (07 Oct 2009 - 00:32)
Sujet clos
Aller à