[Résolu] Div recalcitrante verticalement par ptitvincou - page 1

Bonjour a tous !

Alors voila je refais entierement mon site de maniere a virer tous les tableaux !! oui je sais il etait temps !!!

juste un soucis : firefox ça roule IE ça merde, comme d'hab!
Sauf que la je pense que c'est simple mais je n'ai pas de soluce

Voila pour ceux qui ont les deux explorateurs je vous en prie tester:
ma page

pour les autres je vous explique en deux mots : j'ai mon contenu qui se barre sous le niveau du bas du menu mais quand meme a coté, du coup sur IE j'ai un grand espace blanc et le contenu bien en bas.

voici les codes:
page index:

<?
// initialisation du site, introduction d'acces a la base sql, reconnaissance du visiteur et choix du skin

session_start();
include 'includes/pages/connect_db.php';//connexion a la db

// reconnaissance du visiteur
if (isset ($_COOKIE['nom']))
{
mysql_query("UPDATE site_users SET last_visite='" . time() . "' WHERE nom='" . $_COOKIE['nom'] . "'");
}

// enregistrement du skin voulu par le visteur dans la session
if (isset ($_GET['choix_skin']))
{
$_SESSION['skin'] = $_GET['choix_skin'];
}
?>

<!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>ACHG</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="normal" href="testbase.css" />
</head>

<body>

<div id="page">



<div id="en_tete">

</div>



<div id="menu">

<div class="element_menu">

<h3>Accueil</h3>
<ul>

<li><a href="../index.php?page=0">News</a></li>

<li><a href="../index.php?page=1">Mot du président</a></li>

<li><a href="../index.php?page=2">Devenir Pilote</a></li>

<li><a href="../index.php?page=3#nous_rencontrer">Nous rencontrer</a></li>

<li><a href="../index.php?page=30">Nous contacter</a></li>

</ul>

<h3>Aéroclub</h3>
<ul>

<li><a href="../index.php?page=3">Infos du club</a></li>

<li><a href="../index.php?page=4">La flotte</a></li>

<li><a href="../index.php?page=15">Les tarifs</a></li>

<li><a href="../index.php?page=5">Evènements</a></li>

<li><a href="../index.php?page=6">Sortie Club</a></li>

<li><a href="../index.php?page=13">La plateforme</a></li>
</ul>

<h3>Pilote</h3>
<ul>

<li><a href="http://www.achg.asso.fr/Adherents/FrIdentAdherents.htm">Compte en ligne</a></li>

<li><a href="../index.php?page=9&redir=pilote">Coin du pilote</a></li>
</ul>

<h3>Bonus</h3>
<ul>

<li><a href="http://toitot.vincent.free.fr/galerie/">Photos</a></li>
<li><a href="../index.php?page=12">Guillaumet</a></li>
<li><a href="../index.php?page=110">Changer le skin</a></li>
<li><a href="../index.php?page=50">Livre d'or</a></li>
</ul>

<h5><a href="/includes/pages/admin/admin_index.php?redir=admin">Administration</a></h5>

</div>

</div>



<div id="infos">
<? include 'includes/test_infos.php';?>
</div>



<div id="corps">

<?
$page = $_GET['page'];

switch ($page) { // on indique sur quelle variable on travaille

case 0:
include 'includes/pages/accueil.php';
break;

case 1:
include 'includes/pages/president.php';
break;

case 2:
include 'includes/pages/construction.php';
break;

case 3:
include 'includes/pages/infos_club.php';
break;

case 4:
include 'includes/pages/flotte.php';
break;

case 5:
include 'includes/pages/evenements.php';
break;

case 6:
include 'includes/pages/sorties_club.php';
break;

case 7:
include 'includes/pages/index_compte.php';
break;

case 8: // page reserver un vol
include 'includes/pages/construction.php';
break;

case 9: // page docs vol
include 'includes/pages/pilotes.php';
break;

case 12: // page guillaumet
include 'includes/pages/guillaumet.php';
break;

case 13: // page plateforme
include 'includes/pages/plateforme.php';
break;

case 14: // page guillaumet2
include 'includes/pages/guillaumet2.php';
break;

case 15: // page tarifs
include 'includes/pages/construction.php';
break;

case 16: // page sorties suivantes
include 'includes/pages/sorties_suivantes.php';
break;

case 20: //description du robin
include 'includes/pages/avions/dr400.php';
break;

case 21: //description du cadet
include 'includes/pages/avions/cadet.php';
break;

case 22: //description du archer
include 'includes/pages/avions/archer.php';
break;

case 27: // devis dr400
include 'includes/pages/avions/devis_dr400.php';
break;

case 30: // page nous contacter
include 'includes/pages/contact.php';
break;

case 40:
include 'includes/pages/compte/compte.php';
break;

case 50:
include 'includes/pages/livredor.php';
break;

case 80: //formulaire liens pilote
include 'includes/pages/gest_pilotes/form_liens.php';
break;

case 81: //formulaire docs prepa vol
include 'includes/pages/gest_pilotes/form_docs.php';
break;

case 82: //formulaire modif pilote
include 'includes/pages/gest_pilotes/form_annuaire.php';
break;

case 90: //formulaire docs_pilote
include 'includes/pages/pilotes/docs_pilote.php';
break;

case 91: //formulaire liens_pilote
include 'includes/pages/pilotes/liens_pilote.php';
break;

case 92: //formulaire liens_pilote
include 'includes/pages/pilotes/annuaire.php';
break;

case 100: //archive news
include 'includes/pages/archive_news.php';
break;

case 110: //skin
include 'includes/pages/skin.php';
break;

case 120: // centrage graphique
include 'graphique/mes_graphs/centrage.php';
break;

default:
include 'includes/pages/accueil.php';
}

?>
</div>





<div id="pied_de_page">
<p>Conception Vincent TOITOT pour L'Aéroclub Henry Guillaumet</p>
</div>


</div>

</body>
</html>

page test_infos:

<div class="infos">
<h3>Prochain évènement:</h3>

<h4><? //affichage titre de la sortie
$reponse_evenements = mysql_query ("SELECT * FROM site_page_evenements ORDER BY id DESC LIMIT 0,1");
while ($donnees_evenements = mysql_fetch_array($reponse_evenements))
{ echo $donnees_evenements['titre']; } ?>
</h4>

<a href="../index.php?page=5">en savoir plus</a>
</div>

<div class="infos">
<h3>Dernière news:</h3>

<h4><? //affichage titre de la news
$reponse_news = mysql_query ("SELECT * FROM site_news ORDER BY id DESC LIMIT 0,1");
while ($donnees_news = mysql_fetch_array($reponse_news))
{ echo $donnees_news['titre']; } ?>
</h4>

<a href="../index.php?page=0">en savoir plus</a>
</div>

<div class="infos">
<h3>Prochaine sortie club:</h3>

<h4> <? //affichage titre de la sortie
$timestamp_actuel = time();
$reponse_sortie = mysql_query ("SELECT * FROM site_page_sortie WHERE date_timestamp > '" . $timestamp_actuel."' ORDER BY date_timestamp LIMIT 0,1");
while ($donnees_sortie = mysql_fetch_array($reponse_sortie))
{ echo $donnees_sortie['titre']; } ?>
</h4>

<a href="../index.php?page=6">en savoir plus</a>
</div>

et le css:

body
{
width: 793px;
margin: auto;
margin-top: 5px;
margin-bottom: 20px;
background-color: #666666;
}

#page
{
background-image: url("images/Themes/background/fond_page.gif");
background-repeat: no-repeat;
}

/* L'en-tête */

#en_tete
{
width: 793px;
height: 100px;
background-image: url("images/Themes/background/head_guillaumet.png");
background-repeat: no-repeat;
}

/* Le menu */

#menu
{
float: left;
width: 182px;
margin-left: 2px;
}

.element_menu
{
background-image: url("images/Themes/menu/menu.gif");
background-repeat: no-repeat;
margin-bottom: 20px;
height: 720px;
}

/* Quelques effets sur les menus */

.element_menu
{
padding-top: 60px; /* descendre le texte par rapport au background*/
margin-bottom: 0px;
}

.element_menu h3 /* Tous les titres de menus */
{

padding-left: 20px;
color: white;
font-family: "Comic Sans MS", "Arial Black", "Times New Roman", Times, serif;
font-size: 0.95em;
margin-bottom: 5px;
}

.element_menu h5 /* administration */
{

text-align: center; /* Pour centrer le titre */
color: grey;
margin-bottom: 0px;
}

.element_menu h5 a /* Tous les liens se trouvant dans un menu */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
font-size: 10px;
color: grey;
text-decoration: none; /* Les liens ne seront plus soulignés */
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/images_creations/head_guillaumet/puce_horizon.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 40px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */

margin-left: 10px;
margin-bottom: 0px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
text-decoration: none; /* Les liens ne seront plus soulignés */
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
/*background-color: #B3B3B3;*/
color: white;
}

/* Les infos rapides */

#infos
{
width: 440px;
height: 73px;
margin-left: 275px;
margin-top: 20px;
margin-bottom: 20px;
}

.infos
{
float: left ;
width: 33%;
height: 70px;
margin: 0px;
background-image: url("images/Themes/background/infos.gif");
text-align: center;
}

.infos h3 /*Derniere news, evenement, sortie*/
{
font-size: 0.8em;
color: white;
margin: 0px;
padding: 0px;
margin-bottom: 0px;
margin-top: 5px;
padding-top: 0px;

}

.infos h4 /*Derniere les infos */
{
font-size: 1em;
color: black;
margin: 0px;
padding: 0px
margin-top: 0px
}

.infos a /* Tous les liens se trouvant dans les infos */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
font-size: 0.6em;
color: #000000;
margin: 0px;
padding: 0px;
}

/* Le corps de la page */

#corps
{
clear: none;
margin-left: 192px;
margin-bottom: 20px;
padding: 25px;
padding-top: 35px; /* pour decaler par rapport au background*/
width: 600px;
background-image: url("images/Themes/background/contenu.gif");
background-repeat: no-repeat;
}

/* Le pied de page */

#pied_de_page
{

padding: 5px;
text-align: right;
font-size: 0.7em;
color: black;
background-color: #9999FF;

}

merci pour votre aide

ptitvincou

4 janvier 2006 à 20:56:12

henichi

4 janvier 2006 à 21:01:28

J'ai le meme souci

mort à IE

Margous

4 janvier 2006 à 21:03:35

Salut !

Je saurais pas répondre à ton problème en revanche je te félicite pour ton site... et oui ce chère Guillaumet est le cousin de ma grand-mère. Elle m'a beaucoup parlé de lui et je suis assez admiratif des hommes comme lui !
voilà pour l'anécdote...

4 janvier 2006 à 21:12:27

et ben si j'avais su !!
Un de mes plus grand reve serait d'avoir le meme courage et la meme passion de l'aventure que lui !

si tu veux en discute un jour n'hesite pas !

En fait j'ai reussi !!! mon corps etait simplement trop large pour entrer entre le menu et le bord de droite !! (margin padding ...)

alors j'ai diminuer un peu la largeur du contenu a 580 et le tour et joué !

Div recalcitrante verticalement

Div recalcitrante verticalement

Supprimer

Modérer

Signaler le message aux modérateurs