2 colonnes qui adaptent la hauteur de celle de milieu + une hauteur minimale

Spill · 22 Août 2006

Bonjour , je essaye de creer un site web en XHTML , CSS , PHP et MySQL . En fait c'est ma première fois que je fais les <div> en css.

Je suis en train de me casser la tête sur le sujet de colonnes et je voudrais vous demander de l'aide .

Voici le projet du site :

1 ère colonne (assez petite) - menu

2 ème colonne (moyenne) - contenu

3 ème colonne (assez petite) - encore un menu que j'appelle menu_2

Voici ce que je voudrais faire :

1.) Si il y a plus de contenu (en hauteur) dans 2 que dans 1 et 3 - les menus doivent rallonger la partie verte (qui est le fond du menu) a facon que entre le menu et le pied de la page le blanc n'appairaisse pas .

2.) Si il y a moins de contenu (en hauteur) ou pas du tout dans 2 - je veudrais que c'est les menus qui indiquent la hauteur ( en fait ce sera la hauteur minimale que doit prendre la page du site .

Pour les normes de XHTML , CSS et PHP (pas encore inclus) ne vous inquiétez pas - j'ai recamment appris le XHTML car avant et au debut de creation de cette page web je ne connaissais que du HTML alors je vais faire analyser par un vailidateur du code .

En fait avec les menus - je cherche un peu a faire comme ici --> http://www.simy.pl/

Voici le code :

index.htm


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  <meta name="author" content="Patrick Mazur" />
  <meta http-equiv="reply-to" content="patrick.mazur_AT_skynet.be" />
  <meta name="description" content="Sims Puissance - strona o grze The Sims 2 i jej dodatkach ." />
  <meta name="copyright" content="Patrick Mazur" />
  <meta http-equiv="content-language" content="pl" />
  <meta name="robots" content="ALL" />
  <meta name="distribution" content="GLOBAL" />

   </head>

   <title>Sims Puissance - tutaj wasze marzenia staj si realne !!!</title>
   <link rel="stylesheet" media="screen" type="text/css" title="Simowe lato 2006" href="css.css" />

   <body>

	   <!-- L'en-tete -->

	   <div id="en_tete">

	   </div>


			  <!-- Le top_panel -->

	   <div id="top_panel">

	   <img src="images/pole_reklama.PNG" width="250" height="100" border="0" alt="Reklama" title=""/>

	   <p>Google i banery .
	   </p>

	   </div>



	   <!-- Les menus -->

	   <div id="menu">
		   <div class="element_menu">


<table width="194">

<tr>
<td height="33" background="images/tlo_menu.png">
<center><img src="images/news.jpg" width="44" height="44" border="0" alt=""/> <img src="images/news.jpg" width="44" height="44" border="0" alt=""/>
<img src="images/stv.jpg" width="46" height="44" border="0" alt=""/></center>
</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_1.png" ></td>
</tr>


<tr>
<td height="32" background="images/tlo_menu.png" style="padding-left: 80; padding-right: 80; padding-top: 0; padding-bottom: 0">

					   <a href="page1.htm" class="dzial_menu">~ Strona G¢wna</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Chat</a>
				   <br><a href="page3.htm" class="dzial_menu"><font color="#009900"><b>~ FORUM</b></font></a>
				   <br><a href="page1.htm" class="dzial_menu">~ Ekipa strony</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Aktualne konkursy i akcje</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Aktualne ogoszenia</a>
				   <br><a href="page3.htm" class="dzial_menu">~ Historia strony</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Wspom¢rz stron za darmo</a>

</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_2.png" ></td>
</tr>

<tr>
<td height="32" background="images/tlo_menu.png">

					   <a href="page4.html" class="dzial_menu">~ Parcele</a>
				   <br><a href="page6.html" class="dzial_menu">~ Simy</a>
				   <br><a href="page4.html" class="dzial_menu">~ Podogi</a>
				   <br><a href="page5.html" class="dzial_menu">~ Tapety</a>
				   <br><a href="page6.html" class="dzial_menu">~ Ubrania</a>
				   <br><a href="page4.html" class="dzial_menu">~ Przedmioty</a>
				   <br><a href="page4.html" class="dzial_menu">~ Pokrycie terenu</a>
				   <br><a href="page5.html" class="dzial_menu">~ Geneotyp</a>
				   <br><a href="page6.html" class="dzial_menu">~ Cas!.package</a>
				   <br><a href="page4.html" class="dzial_menu">~ Zawody</a>
				   <br><a href="page6.html" class="dzial_menu">~ Panele do gry</a>

</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_3.png" ></td>
</tr>

<tr>
<td height="32" background="images/tlo_menu.png">

					  <span class="zestaw_menu">||Tw¢rz swoje wasne||</span>
				   <br><a href="page1.htm" class="dzial_menu">~ Ubrania</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Karnacje</a>
				   <br><a href="page3.htm" class="dzial_menu">~ Okolice</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Cas!.package</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Zawody</a>

				   <br><span class="zestaw_menu">||Zmie€ jak chcesz||</span>
				   <br><a href="page1.htm" class="dzial_menu">~ Muzyk w grze</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Programy telewizyjne</a>
				   <br><a href="page3.htm" class="dzial_menu">~ Gry w konsoli i automacie</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Kolor panelu w grze</a>

				   <br><span class="zestaw_menu">||Zbuduj co chcesz||</span>
				   <br><a href="page1.htm" class="dzial_menu">~ Gara§</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Most</a>
				   <br><a href="page3.htm" class="dzial_menu">~ Piwnic</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Piramid</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Domek na drzewie</a>
				   <br><a href="page2.htm" class="dzial_menu">~ Taras na drzewie</a>
				   <br><a href="page3.htm" class="dzial_menu">~ Pod og w mozaike</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Chi€ski dach</a>

				   <br><span class="zestaw_menu">||Po§yteczne sztuczki||</span>
				   <br><a href="page1.htm" class="dzial_menu">~ Sortowanie downloadu</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Wiosenne porzdki</a>

</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_4.png" ></td>
</tr>

<tr>
<td height="32" background="images/tlo_menu.png">

					   <a href="page2.htm" class="dzial_menu">~ Orginalne pomysy</a>
				   <br><span class="zestaw_menu">||Filmy||</span>
				   <br><a href="page3.htm" class="dzial_menu">~ ¡ycie marzen</a>
				   <br><span class="zestaw_menu">||My Sim Page||</span>
				   <br><a href="http://thesims2.ea.com/mysimpage/mysimpage.php?user_id=2011252" target="blank" class="dzial_menu">~ Spill Sim Page</a>
				   <br><span class="nieaktywne">~ Mtex Sim Page</span>
				   <br><span class="zestaw_menu">||Grafika||</span>
				   <br><a href="page3.htm" class="dzial_menu">~ Tapety na pulpit</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Ikony dla Windows</a>
				   <br><a href="page1.htm" class="dzial_menu">~ Tapety na kom¢rki</a>
				   <br><span class="zestaw_menu">||R¢§ne||</span>
				   <br><a href="page1.htm" class="dzial_menu">~ Sonda§e</a>

</td>
</tr>

</table>



		   </div>
		   </div>

	   </div>

	   <div id="menu_2">
		   <div class="element_menu_2">

<table width="194" >

<tr>
<td height="32" background="images/tlo_menu.png">
<center><img src="images/news.jpg" width="44" height="44" border="0" /> <img src="images/news.jpg" width="44" height="44" border="0" />
<img src="images/stv.jpg" width="46" height="44" border="0" /></center>
</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_5.png" ></td>
</tr>


<tr>
<td height="32" background="images/tlo_menu.png">

					   <span class="zestaw_menu_2">||Pene wersje||</span>
				   <br><a href="page1.html" class="dzial_menu_2">The Sims 2  ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">The Sims 3 ~</a>
				   <br><span class="zestaw_menu_2">||Dodatki do The Sims 2||</span>
				   <br><a href="page2.html" class="dzial_menu_2">Na Studiach ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Nocne ¡ycie ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Wasny Biznes ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Zwierzaki ~</a>
				   <br><span class="zestaw_menu_2">||Zestawy Akcesori||</span>
				   <br><a href="page1.html" class="dzial_menu_2">Zestaw Šwiteczny ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Rozrywka Rodzinna ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Glamour Life Stuff ~</a>

</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_6.png" ></td>
</tr>

<tr>
<td height="32" background="images/tlo_menu.png">

					  <span class="zestaw_menu_2">||Pene wersje||</span>
				   <br><a href="page1.html" class="dzial_menu_2">The Sims 2 ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">The Sims 3 ~</a>
				   <br><span class="zestaw_menu_2">||Dodatki do The Sims 2||</span>
				   <br><a href="page2.html" class="dzial_menu_2">Na Studiach ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Nocne ¡ycie ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Wasny Biznes ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Pets ~</a>
				   <br><span class="zestaw_menu_2">||Zestawy Akcesori||</span>
				   <br><a href="page1.html" class="dzial_menu_2">Zestaw Šwiteczny ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Rozrywka Rodzinna ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Glamour Life Stuff ~</a>

</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_7.png" ></td>
</tr>

<tr>
<td height="32" background="images/tlo_menu.png">

					   <a href="page2.html" class="dzial_menu_2">Ogr¢d Zosi ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">W drog po przygody ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Pocztek wszystkiego ~</a>

</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_8.png" ></td>
</tr>

<tr>
<td height="32" background="images/tlo_menu.png">

					   <a href="page2.html" class="dzial_menu_2">Muzyczny panel ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Pochodzenie ~</a>

</td>
</tr>

<tr>
<td height="32" background="images/plan_dzial_9.png" ></td>
</tr>

<tr>
<td height="32" background="images/tlo_menu.png">

					   <span class="zestaw_menu_2">||Kody||</span>
				   <br><a href="page2.html" class="dzial_menu_2">The Sims 2 + dodatki ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Sims City 4 + Rush Hour ~</a>
				   <br><span class="zestaw_menu_2">||Na Studiach||</span>
				   <br><a href="page1.html" class="dzial_menu_2">Granty ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Kierunki edukacji ~</a>
				   <br><a href="page2.html" class="dzial_menu_2">Szczeble pracy ~</a>
				   <br><span class="zestaw_menu_2">||Organizacja||</span>
				   <br><a href="page1.html" class="dzial_menu_2">Randki ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Przyj ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Urodzin ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Idealnego §ycia ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Przeprowadzki ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Wesela ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Imprezy Noworocznej ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Rocznicy lubu ~</a>
				   <br><span class="zestaw_menu_2">||Relacje||</span>
				   <br><a href="page1.html" class="dzial_menu_2">Przyjacielstwo ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Wrogo ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Milo ~</a>
				   <br><a href="page1.html" class="dzial_menu_2">Nienawi ~</a>
				   <br><span class="zestaw_menu_2">||Wicej||</span>
				   <br><a href="page3.html" class="dzial_menu_2">Wampiryzm ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">Zombie ~</a>
				   <br><a href="page3.html" class="dzial_menu_2">FAQ ~</a>

</td>
</tr>

</table>

		   </div>
	   </div>

	   <!-- Le rentrée corps -->

	   <div id="rentrée_corps">


	   </div>

	   <!-- Le corps -->

	   <div id="corps">

	   <p>

	   <b> Oto Zawartosc aktualnie oglodanej strony .</b>
	   <br>Linia nr°2
	   <br>Linia nr°3
	   <br>Linia nr°2<br /><br>Linia nr°2<br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br /><br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br /><br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2<br>Linia nr°2

	   </p>

	   </div>

	   <!-- La sortie du corps -->

	   <div id="sortie_corps">


	   </div>

	   <!-- Le pied de page -->

	   <div id="pied_de_page">

	   </div>

   </body>
</html>

css.css



body
{
   width: 990px;
   height: 1241px;
   margin: auto;
   margin-top: 2px;
   margin-bottom: 2px;
   background-image: url("images/fond.png");
}


/* L'en-tete */

#en_tete
{
   width: 990px;
   height: 251px;
   background-image: url("images/logo_top.png");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

/* Le panel de haut (qui se trouve en haut, espace de publicite) */

#top_panel
{
   padding: 10px;

   text-align: center;

   color: #000000;
   background-color: #FFFFFF;
   background-image: url("images/kolor_panel.png");
   background-repeat: repeat-100;

   border: 0px solid black;
}



/* Le menu */

#menu
{
   float: left;
   width: 194px;
   height: 890px;
}

.element_menu
{
   background-color:

   background-repeat: repeat-200;

   border: 0px solid black;

   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   padding-right: 0px;

   height: 900px;
}


/* Quelques effets sur les menus */


.element_menu h3
{
   font size="12";
   color: #006600;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   padding: 0px;
   padding-left: 0px;
   margin: 0px;
   margin-bottom: 0px;
}

#menu_2
{
   float: right;
   width: 194px;
   height: 890px;
   text-align: right;
   padding: 0px;
}

.element_menu_2
{
   background-color: #D9FFD9;

   background-repeat: repeat-200;

   border: 0px solid black;

   margin-bottom: 0px;

   height: 900px;

   padding-right: 0px;
}


/* Quelques effets sur les menus */


.element_menu_2 h3
{
   color: #000000;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;

}

.element_menu_2 ul
{
   padding: 0px;
   padding-left: 0px;
   margin: 0px;
   margin-bottom: 0px;
}

/* Le rentrée du corps */

#rentrée_corps
{
   width: 594px;
   height: 30px;

   margin-left: 193px;
   margin-right: 193px;
   margin-bottom: 0px;
   padding: 0px;
   color: #000000;
   background-color: #FFFFFF;
   background-image: url("");
   background-repeat: repeat-1;

   background-image: url("images/wejscie_strona.png");
   background-repeat: repeat-1;

   border: 0px solid black;
}

/* Le corps de la page */

#corps
{
   margin-left: 193px;
   margin-right: 193px;
   margin-bottom: 0px;
   padding: 25px;
   display: block;
   color: #000000;
   background-color: #FFFFFF;
   background-image: url("images/kolor_strona.png");
   background-repeat: repeat-10;

   border: 0px solid black;
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

   background-image: url("images/titre.png");
   background-repeat: no-repeat;

   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

/* La sortie du corps */

#sortie_corps
{
   width: 594px;
   height: 30px;

   margin-left: 193px;
   margin-right: 193px;
   margin-bottom: 0px;
   padding: 0px;
   clear: both;
   color: #000000;
   background-color: #FFFFFF;
   background-image: url("");
   background-repeat: repeat-1;

   background-image: url("images/wyjscie_strona.png");
   background-repeat: repeat-1;

   border: 0px solid black;
}

/* Le pied de page (qui se trouve tout en bas, en general pour les copyrights) */

#pied_de_page
{
   width: 990px;
   height: 60px;

   clear: both;

   text-align: center;

   color: #000000;

   background-image: url("images/copyright.png");
   background-repeat: repeat-1;

   border: 0px solid black;

}


	a {font-family: VERDANA;color: #000000;text-decoration: NONE;}
	body {font-family: TAHOMA;font-size: 11PX;text-decoration: NONE;}
	a:hover {font-family: VERDANA;font-size: 8;font-style: NORMAL;cursor: HAND;font-weight: 400;border-color: #000000;color: #339900;text-decoration: UNDERLINE;}
	a:link {font-family: VERDANA;color: #000000;text-decoration: NONE;}
	a:vlink {font-family: VERDANA;border-style: SOLID;color: #000000;text-decoration: NONE;}
	a:visited {font-family: VERDANA;font-size: 8;font-style: NORMAL;cursor: HAND;color: #000000;text-decoration: NONE;}



	table
{
   border-collapse: collapse;
   border: 0;
}



   .zestaw_menu
{
   padding-left: 7px;
   color: #009900;
   font-weight: bold;
}

   .zestaw_menu_2
{
   padding-right: 7px;
   color: #009900;
   font-weight: bold;
}



   .dzial_menu
{
   padding-left: 3px;
}

   .dzial_menu_2
{
   padding-right: 3px;
}


   .nieaktywne
{
   padding-left: 3px;
   text-decoration: line-through;
}

Edit modérateur : Merci d'utiliser la balise "codebox" pour les codes SUPER longs !!

ghost · 22 Août 2006

Bonjour,

Plutôt qu'un lon discours ... ://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Amuses toi bien

Connexion

2 colonnes qui adaptent la hauteur de celle de milieu + une hauteur minimale

Sujets conseillés

Spill

Lien vers le commentaire

Partager sur d’autres sites

ghost

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité