28173 sujets

CSS et mise en forme, CSS3

Disparition d'arrieres plans

Bonjour,

J'ai trois divs les uns a cote des autres. Ils ont tous des images ou couleurs de fond.
Lorsque un des divs contient du text, et que l'utilisateur diminue la fenetre pour faire apparaitre le scrollbar du navigateur, lorsqu'on scroll vers le bas pour voir le text, les arrieres plans (que ce soit une image ou une couleur) des divs qui ont "height=100%" n'apparaissent plus dans la zone fraichement decouverte...

Voila le code html :
<body>	
		<div class="conteneur">
			<div class="colonneG"></div>
			<div class="contenu">
				<table cellpadding="0" cellspacing="0">
					<tr bgcolor="#e5e5e5">
						<td height="49"></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td width="71" bgcolor="e5e5e5" align="right"><img src="img/menuShadow_1.jpg" alt="" /></td>
						<td><img src="img/menu_top.jpg" alt="" /></td>
						<td width="69" bgcolor="e5e5e5"><img src="img/menuShadow_2.jpg" alt="" /></td>
					</tr>
					<tr>
						<td class="menuSpace" align="right"><img src="img/menuShadow_3.jpg" alt="" /></td>
						<td>
							<ul class="menu">
								<li><a href="" class="accueil"></a></li>
								<li><a href="" class="chambres"></a></li>
								<li><a href="" class="appartements"></a></li>
								<li><a href="" class="reservation"></a></li>
								<li><a href="" class="contact"></a></li>
							</ul>
						</td>
						<td class="menuSpace"><img src="img/menuShadow_4.jpg" alt="" /></td>
					</tr>
					<tr>
						<td align="right"><img src="img/menuShadow_5.jpg" alt="" /></td>
						<td><img src="img/menu_bottom.jpg" alt="" /></td>
						<td><img src="img/menuShadow_6.jpg" alt="" /></td>
					</tr>
				</table>
				<div class="textAccueil">
					Bienvenue &agrave; notre bed &amp; breakfast &quot;Le 3 Mai&quot;.<br>
					Notre chaleureux g&icirc;te est situ&eacute; &agrave; deux minutes de la rue Ste-Catherine,<br>
					des bars, restaurants et du m&eacute;tro.<br><br>

					Nous vous offrons 5 chambres avec deux salles de bain partag&eacute;es, climatiseur et t&eacute;l&eacute; c&acirc;bl&eacute;e. <br>
					Un copieux d&eacute;jeuner continental vous est servi tous les matins entre 9H00 et 11H00. <br>
					Trois appartements compl&egrave;tement meubl&eacute;s sont &eacute;galement disponibles<br>
					pour vos s&eacute;jours prolong&eacute;s.<br>
					C'est avec grand plaisir que nous vous informerons sur les diff&eacute;rentes activit&eacute;s et festivit&eacute;s<br>
					qui se d&eacute;roulent dans la ville, le jour comme la nuit.<br> <br>

					En esp&eacute;rant vous accueillir lors de votre prochain s&eacute;jour &agrave; Montr&eacute;al,<br>
					je serai heureux d’&ecirc;tre votre h&ocirc;te.
				</div>
		  </div>
			<div class="colonneD"></div>
		</div>
	</body>


Et voila le code CSS :

/* CSS Document */

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none;
}

html{
		overflow-x: hidden; 
		overflow-y: auto;
		overflow : -moz-scrollbars-vertical;
}

body{
	text-align: center ;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-image:url(../img/fond.jpg);
	background-repeat:repeat-x;
}

div.conteneur{
	width: 981px ;
	height:100%;
	text-align: left ;
	background-color:#e5e5e5;
}

div.colonneG{
	width: 135px;
	height: 100%;
	float:left;
	background-image:url(../img/coloneG_main.jpg);
}

div.colonneD{
	width: 85px;
	height: 100%;
	float:left;
	background-image:url(../img/coloneD_main.jpg);
}

div.contenu{
	width: 761px;
	height:100%;
	float:left;
	background-color:#f5f5f5;
}

div.textAccueil{
	background-image:url(../img/page_home/titre.jpg);
	background-repeat:no-repeat;
	padding-left:50px;
	padding-top:187px;
	color:#545454;
}

td.menuSpace{
	background-image:url(../img/menu_spacer.jpg);
}


ul.menu{
	margin:0;
	padding:0;
	list-style-type:none;
}

ul.menu li{
	float: left ;
	text-align: center ;
}

ul.menu li a{
	height: 16px;
	display:block;
	cursor:hand;
}

ul.menu li a:hover{
	display: block ;
	height: 16px;
	cursor: hand;
	background-position: 0px -16px;
}

.accueil{
	background:url(../img/btn_accueil.jpg) no-repeat 0px 0px;
	width:107px;
	height:16px;	
}

.appartements{
	background:url(../img/btn_appartements.jpg) no-repeat 0px 0px;
	width:147px;
	height:16px;	
}

.chambres{
	background:url(../img/btn_chambres.jpg) no-repeat 0px 0px;
	width:120px;
	height:16px;
}

.contact{
	background:url(../img/btn_contact.jpg) no-repeat 0px 0px;
	width:115px;
	height:16px;
}

.reservation{
	background:url(../img/btn_reservation.jpg) no-repeat 0px 0px;
	width:132px;
	height:16px;
}


Merci beaucoup
Sujet clos
Aller à