28173 sujets

CSS et mise en forme, CSS3

La fonction height me rend fou...

Bonjour bonjour.

Tout abord, bonjour tout le monde, je suis nouveau (vous l'avez peut être remarqué par le monstrueux nombre de message que j'ai posté !).

Ceci dit, je vous expose mon problème. Déjà, je sais pas trop si je suis dans la bonne section, car je sais pas si ça vient de mon script xhtml ou css Smiley rolleyes .

Je suis donc entrain d'apprendre le xhtml/css et je fais en sorte de faire un site de A à Z (beaucoup de taff pour un débutant, mais bon, scripteur un jour, scripteur toujours ! Aucun rapport ? Pas grave). Donc je commence déjà à faire le squelette de mon site, avec les balises divs & tables.

Voila, mais depuis, j'ai un problème qui commence réellement à me faire péter un plomb si j'puis dire. En effet, je n'ai aucun problème avec la fonction width, mais alors avec la fonction height... Elle ne prend pas en compte les pourcentages ! Et j'ai fait en sorte de tout faire avec les pourcentages ! Enfaite, si vous preferez, si je mets "height:100%" c'est comme si je mettais "height:0px" ... Donc, je peux pas faire le squelette de mon site !

Voici les scripts. Ils sont peu remplis, et un peu bordélique, mais c'est mes débutants, et là je suis entrain de voir comment règler le problème. D'avance, si vous voulez voir le désastre, je vous précise que j'ai mis une ligne de séparation pour vous dire ce que j'ai essayé de modifier avec les pourcentages (donc cette partie à s'occuper, le reste, ça me sert à rien, tout est fait en "em").

site.html
<!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" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="site.css" />
   </head>
   <body>
	<div class="div_corp_site">
		<table>
			<tr>
				<td class="td_etage_1_none">
				</td>
				<td class="td_etage_1">
				Bannière
				</td>
				<td class="td_etage_1_none">
				</td>
			</tr>
		</table>
		<table>
			<tr class="tr_etage_2_none">
				<td colspan="5">
				</td>
			</tr>
			<tr>
				<td class="td_etage_2_none_1">
				</td>
				<td class="td_etage_2_menu">
				MENU
				</td>
				<td class="td_etage_2_none_2">
				</td>
				<td class="td_etage_2_affichage">
				AFFICHAGE
				</td>
				<td class="td_etage_2_none_1">
				</td>
			</tr>
			<tr class="tr_etage_2_none">
				<td colspan="5">
				</td>
			</tr>
		</table>
		<table class="apparition">
			<tr>
				<td class="td_etage_3_none">
				</td>
				<td class="td_etage_3">
				Connectés
				</td>
				<td class="td_etage_3_none">
				</td>
			</tr>
		</table>
	</div>
   </body>
</html>


site.css
body
{
height: 100%;
width: 100%;
}
.div_corp_site
{
margin: auto;
border: 3px solid black;
width: 80%;
height: 100%;
}
.td_etage_1
{
width: 60%;
height: 20%;
border: 1px solid black;
}
.td_etage_1_none
{
width: 10%;
height: 20%;
}

!------ À PARTIR D'ICI JE N'AI PLUS MODIFIÉ ------!


.td_etage_2_menu
{
width: 20em;
height: 42em;
border: 1px solid black;
}
.td_etage_2_affichage
{
width: 42em;
border: 1px solid black;
}
.td_etage_2_none_1
{
width: 6em;
height: 1px;
}
.td_etage_2_none_2
{
width: 6em;
height: 1px;
}
.tr_etage_2_none
{
width: 1px;
height: 2em;
}
.td_etage_3
{
width: 66em;
height: 15em;
border: 1px solid black;
}
.td_etage_3_none
{
width: 7em;
height: 15em;
}
.apparition
{
border: 1px solid red;
}
tr, td
{
border: 1px solid green;
}


Vous pouvez faire le test, et vous verrez que si vous remplacez par exemple tous les "em" par des "%" ça fera un site raplaplat Smiley murf

Merci de votre aide, Sbizz.
Modifié par Sbizz (05 Dec 2007 - 21:10)
Bonjour et bienvenue, Sbizz.

La hauteur d'un élément (comme sa largeur, d'ailleurs) est calculée par le navigateur en fonction de la hauteur de son élément parent.

En l'absence de contenu, la page n'a aucune hauteur, puisqu'elle est vide. Donc, si tu veux avoir une mise en page sur toute la hauteur de la fenêtre, il faut commencer par donner une hauteur à l'élément HTML : 
html {
  height: 100%;
}
body {
  height: 100%;
}
Ensuite, il vaut mieux éviter d'indiquer une hauteur fixe à ton conteneur principal. En effet, si ton contenu commence à remplir toute la fenêtre, tu vas voir apparaître des barres de défilement a priori inutiles ... On utilisera donc plutôt min-height : 
div.corps_site {
  min-height: 100%;
}
Et à partir de là, à toi de jouer Smiley smile

Une petite remarque d'ordre général : les classes (class="...") devraient être utilisées pour des éléments récurrents sur une page, et les id (id="...") pour les éléments uniques. D'une part, ils sont conçus pour ça. et d'autre part, ça te facilitera la vie lorsque tu voudras ajouter un peu de javascript pour animer le tout Smiley cligne

Et tant que j'y pense, je ne suis pas sûr que tes tableaux soient très utiles ...

Bon courage Smiley cligne
Bonjour,

Sbizz a écrit :
Vous pouvez faire le test, et vous verrez que si vous remplacez par exemple tous les "em" par des "%" ça fera un site raplaplat Smiley murf

Heu... tu connais la différence entre ces deux unités?
Tu as lu quelque chose à ce sujet?
Tu as lu un cours HTML/CSS, une série de tutoriels pour débutants, ou quelque chose du genre?

Parce qu'il y a des choses qui ne s'inventent pas, et qui s'improvisent mal...
Bonjour.

@Thomas: Ah d'accord ! Justement, j'me souvenais avoir vu une fonction "min-height" mais j'la retrouvais plus Smiley decu Et merci pour les astuces.
Mais pourquoi mes tableaux ne sont pas utiles ? C'est justement eux qui font que le forum a un squelette "potable" (à mon gout). Sachant que chaque tableau aura une image à l'intérieur. Mais en même temps, le truc, c'est que grâce à table, je peux aligner 3 tableaux sur une ligne (donc 1 ligne composée de 3 colones). Or, avec les divs, je ne peux pas, ça fait comme si je fesais 1 colone composée de 3 lignes... Si tu pouvais éclairer ma lanterne Smiley smile

@Florent: Oui j'ai lu des tutos sur le HTML / CSS. Et je vois pas ce que tu dis. Je n'ai jamais dit que ces deux unités étaient mal adaptées ! J'ai dit que la fonction "em" != "%". Si je mets 100em, ça ne reviendra pas à 100% ! De plus, les "%" comparés au "em" s'adaptent plus facilement au navigateur (la résolution).

Merci, Sbizz.
Modifié par Sbizz (06 Dec 2007 - 18:04)
Sujet clos
Aller à