Probleme mise en page sous tableau par Shadowmoz - page 1

bonjour a tous, donc d'abord voila mon site (pour le moment aucun lien je travaille sur la mise en page).
<lien url="http://www.tech-shad.info/site/"></lien>

Donc mon probleme comme on peu le voir c'est le pied de page qui se continue sur la droite.
Au depart j'avais le pied de page a droite du menu et en dessous du corps mais je voulais qu'il soit placer sous le menu et qu'il fasse toute la page.

J'ai donc fait un tableau avec la premiere ligne qui englober la quasi totalité de la page et une deuxieme ligne pour le pied de page. Le pied de page c'est donc bien positionner mais se repete sur la droite..

Je vous laisse le code pour y voir plus clair :

<!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>
<title>Blacksin : La communauté francophone multi-jeux!</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
   <script type="text/javascript" src="png.js"></script>
   <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="css.css" />
</head>

<body>
<div>
<table class="c1" border="0" cellpadding="0" cellspacing="0" width="1000">
<tr>
<td>

<!–– L'en–tête ––>

<div id="en_tete">

</div>

<!–– Les menus ––>

<div id="menu">
   <table class="menu" border="0" cellpadding="0" cellspacing="0">
            <tr background="image/haut_cadre_menu.png" height="69" width="250">
            <td>
<h4 class="liste_menu1">BLACKSIN</h4>
</td>
            </tr>
            <tr background="image/milieu_cadre_menu.png" width="250" height="200">
     <td width="200" height="140">
<ul class="liste_menu">
<li>News</li>
<li>Forum</li>
<li>Nous Rejoindre</li>
<li>Votez pour nous</li>
<li>Lien n°5</li>
<li>Lien n°6</li>
</ul>
   </td>
            </tr>
<tr background="image/barre_cadre_menu.png" width="250" height="25">
     <td >
</td>
            </tr>
<tr background="image/milieu_cadre_menu.png" width="250" height="200">
     <td >
<h3 class="liste_menu1">Lineage 2</h3>
<ul class="liste_menu">
<li>Equippements</li>
<li>Quetes</li>
<li>Classe</li>
<li>Races</li>
<li>Conseil pour debuter</li>
<li>Lien n°6</li>
</ul>
</td>
            </tr>
<tr background="image/barre_cadre_menu.png" width="250" height="25">
     <td >
</td>
            </tr>
<tr background="image/milieu_cadre_menu.png" width="250" height="200">
     <td >
<h3 class="liste_menu1">SilkRoad</h3>
<ul class="liste_menu">
<li>Equippements</li>
<li>Quetes</li>
<li>Classe</li>
<li>Races</li>
<li>Conseil pour debuter</li>
<li>Lien n°6</li>
</ul>
</td>
            <tr background="image/bas_cadre_menu.png" width="250" height="25">
     <td >
</td>
            </tr>
</table>
</div>

<!–– Le corps ––>

<div id="corps">
<table class="corps" border="0" cellpadding="0" cellspacing="0">
            <tr background="image/haut_corps.png" height="88" width="700">
            <td>
</td>
            </tr>
            <tr background="image/milieu_corps.png" width="700" height="200">
     <td width="700">
<p class="contenu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl.
Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet,
adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna
luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue.
Quisque interdum felis eu diam.<br/>
Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl. Aenean aliquam,
odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet neque ante vitae tortor. In
hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo. Curabitur erat
mi, congue ut, volutpat vel, semper ac, wisi. Sed non metus vel massa pharetra euismod.
Nunc quis quam. Curabitur non libero a libero semper tincidunt. Mauris vehicula dui a
wisi. Quisque nisl dolor, tempus nec, tristique vitae, eleifend eget, nunc. Duis dapibus,
lectus eget egestas consectetuer, nibh metus pharetra nisl, vitae rutrum mi tellus
placerat nulla. Praesent sed libero non enim suscipit aliquet. Proin tincidunt pede sit
amet eros.</p>

</td>
            </tr>
            <tr background="image/bas_corps.png" width="700" height="24">
     <td >
</td>
            </tr>
</table>
   </div>
   </td>
   </tr>


<!–– Le pied de page ––>

            <tr class="pdp1" background="image/haut_pdp.png">
            <td width="941">
</td>
            </tr>
            <tr class="pdp2" background="image/milieu_pdp.png">
     <td class="pied_de_page" width="941">
Copyright "Blacksin" 2006, Tout droits réservés, Admin : Shadowmoz. <a href="mailto:Dhalgrave@hotmail.fr">Contact Webmaster</a>
</td>
            </tr>
            <tr class="pdp3" background="image/bas_pdp.png">
     <td width="941">
</td>
            </tr>
</table>
</div>

</body>
</html>

Et le code CSS

body
{
width: 1000px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background: black;
color: white;
}

/* L'en-tête */

#en_tete
{
width: 1000px;
background-image: url("image/banniere.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-left: 20px;
height: 175px;
}

/* Le menu */

.menu
{
width: 250px;
float: left;
margin-top: 6px;
}

.liste_menu
{
margin-left: 10px;
margin-top: 0px;
color: white;
padding-top: 0px;
}

.liste_menu1
{
margin-left: 30px;
margin-top: 15px;
color: white;
padding-top: 0px;
}

/* Le corps de la page */

#corps
{
margin-left: 270px;
margin-bottom: 10px;
margin-top: 0px;
padding-left: 0px;
width: 941px;
}

#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;
}

.contenu
{
padding-left: 30px;
padding-right: 30px;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

.pied_de_page
{
padding: 0px;
text-align: center;
width: 941px;
}

.pdp1
{
height: 32px;
width: 941px;
background: url("image/haut_pdp.png");
}

.pdp2
{
height: 25px;
width: 941px;
background: url("image/milieu_pdp.png");
}

.pdp3
{
height: 25px;
width: 941px;
background: url("image/bas_pdp.png");
}

Me demander pas pk y a des taille identique dans le HTML ET dans le CSS c'est parce que je testé un peu partout pour redimensionner et au final j'ai oublier de les enlever.

Shadowmoz

21 avril 2006 à 18:46:39

djkori

21 avril 2006 à 19:02:46

ouhlala... :-°

mise en place en tableaux... compliqué, pas beau, lourd, peu flexible... o_O

petit conseil, mets toi qu xhtml/css...

21 avril 2006 à 20:25:36

je sais mais si tu a la technique pour pour que mon pied de page se mette en bas sous le menu, je prend

joe.tgg

21 avril 2006 à 20:32:47

Je suis passé voir le site. L'utilisation des tableaux n'est vraiment pas utile et justifiée. Alors je te donne quelques conseils.
1. Mise en page : div "header", div "menu" en float, div "corps", div "footer" (avec un clear: both dans les propriétés CSS pour le placer en bas de ton menu). En fait ta mise en page ressemble assez à l'exemple proposé dans le cours sur ce présent site.
2. Change ta déclaration de Doctype XHTML 1.1 pour une XHTML 1.0 Strict (vu que ton contenu est du text/html).
Tout devrait aller

21 avril 2006 à 21:13:02

oui oui j'avais deja fais un site que j'avais baser sur cette exemple et j'avais repris mon site pour faire le nouveau

merci

Probleme mise en page sous tableau

Probleme mise en page sous tableau

Supprimer

Modérer

Signaler le message aux modérateurs