28173 sujets

CSS et mise en forme, CSS3

[RESOLU] - Pourquoi mon block dépasse la hauteur imposée dans le CSS ?

Plaupe @

J'ai un dernier ptit sushi avec mon site :

http://frozen.fox.free.fr

Bon, il n'est pas difficile de voir qu'il y a un truc qui coince ^^
Au début de ma page HTML, j'ai créé un <table> dont la hauteur est 100% Par conséquent, il me crée automatiquement un tableau qui fera la hauteur de la page, quelque soit la résolution de l'utilisateur.

Mon problème, c'est que lorsque le texte dans le cadre principal (là ou il y a marqué "News") n'est pas assez important, au lieu de m'agrandir le cadre principal pour arriver en bas de page, il m'agrandit le menu en haut alors que j'ai bien précisé que je voulais une hauteur pour ce menu de 51px !


.menu_haut
{          
        background-image : url("../images/peaks_bright.jpg") ; 
        height : 51px ;
}


Si vous cliquez sur Biographie, vous vous apercevez que j'ai rempli le cadre principal, et par conséquent, comme celui-ci s'est agrandi, il a diminué la hauteur du menu à la valeur que je lui avais indiqué.

Ma question est donc :
A quoi cela sert-il de préciser une hauteur de bloc si c'est pour au final ne pas la respecter ? Et comment je pourrais faire pour qu'il me laisse ce satané menu en 51px de hauteur et qu'il m'agrandisse à la place le cadre principal là ou il y a mon texte ?

Merci d'avance Smiley smile
Modifié par Sinner (01 Aug 2006 - 23:25)
Salut Sinner, Smiley cligne

Au risque de te décevoir, je ne te serais pas d'une grande utilité car ... mes connaissances en gestion de tableau sont plus que limitées (voires carrément inexistantes pour être honnête). Smiley rolleyes

Ceci dit, ma question est la suivante : pourquoi diable utiliser un tableau ?
Tu es apparemment au début de la conception de ton site ... , profites-en pour le créer dans les règles de l'art, pour que tout le monde puisse y accéder aisément.. Smiley biggrin

Il y a sur ce site un certain nombre de tutoriaux qui te donne une excellente base pour développer ton site (gabarits de site) et ton menu (propositions de menus). Je suis sûre que tu y trouveras ton bonheur !
D'ailleurs, ce gabarit-ci devrait te satisfaire pleinement ...
Car il te suffit de supprimer le footer pour avoir la mise en page recherchée ! Smiley langue

Voilà...
Sur ce, je te souhaite bon courage pour t'engager dans la bonne voie Smiley ravi
Et sinon, bon courage pour régler ton problème Smiley murf
Modifié par Cygnus (01 Aug 2006 - 21:59)
pour utiliser les valeurs en pourcentage dans un tableau, il faut que les cellule et le tableaux parent aillent leur haut a 100% aussi.

si tu veux que le tableau où ton contenu "news" est affiché prenne tout l'espace qui reste, affecte lui une hauteur de 100% pour qu'il prenne 100% de la hauteur restante.

Et si tu veux avoir le parfait control de tes hauteur, remplace ou j'ai mit des valeurs par des class.

<html> 

<body>	

<table>	
	<thead>		<!-- Bordures hautes -->
		
		<tr>
				
			<td class="haut_gauche"></td>
			<td class="haut"></td>
			<td class="haut_droite"></td>
					
		</tr> 	
	</thead> 
	
	<tfoot>		<!-- Bordures basses -->	
		<tr>
		
			<td class="bas_gauche"></td>
			<td class="bas"></td>
			<td class="bas_droite"></td> 
			
		</tr> 
	</tfoot> 
	
	<tbody>		<!-- Bordures gauche, droite et partie centrale-->	
		<tr>
		
			<td class="gauche"></td>
			<td class="centre">
			
				<table>	
				
					<tr>  	<!-- Partie centrale - Bannière horizontale (logo + photo) -->
						<td class="banniere_horizontale">
						<div id="renard"><img src="../images/logo.gif" alt="" /></div>
						<img class="photo_ff" src="../images/photo_ff.jpg" alt="" /></td>
					</tr>
					
					<tr>
						
						<td colspan="2">
				
							<!-- Partie centrale - Menu du haut -->
							<table>	
							
								<tr class="menu_haut" align="center">
										
										<td><a href="http://frozen.fox.free.fr/index.php"><img src="../images/menu_news.gif" class="news" alt="" /></a></td>
<td><a href="http://frozen.fox.free.fr/pages/biographie.php"><img src="../images/menu_biographie.gif" class="biographie" alt="" /></a></td>
<td><a href="http://frozen.fox.free.fr/pages/compos.php"><img src="../images/menu_compos.gif" class="compos" alt="" /></a></td>
<td><a href="http://frozen.fox.free.fr/pages/lyrics.php"><img src="../images/menu_lyrics.gif" class="lyrics" alt="" /></a></td>	
<td><a href="http://frozenfox.aceboard.fr/i-212564.htm"><img src="../images/menu_forum.gif" class="forum" alt="" /></a></td>	
<td><a href=""><img src="../images/menu_livre_or.gif" class="livre_or" alt="" /></a></td>	
<td><a href="http://frozen.fox.free.fr/pages/liens.php"><img src="../images/menu_liens.gif" class="liens" alt="" /></a></td>	
<td><a href="http://frozen.fox.free.fr/pages/contacts.php"><img src="../images/menu_contacts.gif" class="contacts" alt="" /></a></td>	

								</tr>
							
							</table>
						
						</td>
							
					</tr>	 
					
					<tr>
					
						<td [#red]height="100%"[/#] colspan="2">
					
							<table [#red]height="100%"[/#]>
								
								<tr>
								
									<td class="menu_gauche"></td>
									
									<td class="textes"> 
				
										<!-- CELLULE DE TEXTE CENTRALE - NEWS -->	
									
										<blockquote>

<p>News


</blockquote>  
										
										
										</blockquote>  
				
									</td>
								
								</tr>
						  </table>
				
						</td>
					
					</tr>
			  </table>			

			</td>
			<td class="droite"></td> 
			
		</tr> 
	</tbody> 

</table> 

</body>	

</html>

Modifié par s_har_k (01 Aug 2006 - 22:02)
Bonsoir s_har_k

Tout d'abord merci pour ton aide précieuse Smiley smile En effet, cela fonctionne correctement.

Tu n'es pas le premier à me dire de ne pas utiliser les tableaux. Je trouve en effet que les structures full CSS sont bien plus appropriées, cependant, je me suis dit que ce serait vraiment difficile de faire ce que je voulais en CSS, notamment la jolie bordure qui encadre mon site. Pour faire cette bordure, j'ai du la découper en plusieurs morceaux (côté droit, gauche, coins, etc.) puis les insérer dans des cellules de tableau.

Malheureusement, ça a l'air très difficile de faire ça en CSS et je ne m'en suis pas senti capable ^^ Pas pour tout de suite car je débute et que je risque de passer vraiment beaucoup de temps dessus Smiley smile

Merci encore pour ton aide Smiley smile
Sujet clos
Aller à