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
CODE
<!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 og’oszenia</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">~ Pod’ogi</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 w’asne||</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 porz†dki</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 pomys’y</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">||Pe’ne 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">W’asny 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 ¦wi†teczny ~</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">||Pe’ne 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">W’asny 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 ¦wi†teczny ~</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">Pocz†tek 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">||Wi‘cej||</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
CODE
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 !!