28220 sujets

CSS et mise en forme, CSS3

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">
               
       <!-- L'en-tête -->

       <div id="en_tete">
       
       </div>

       <!-- Les menus -->

       <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&eacute;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&egrave;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>

       
       
                <!-- infos rapides -->

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

       <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>

          
          
       <!-- Le pied de page -->

       <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 &eacute;v&egrave;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&egrave;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;

}

Modifié par ptitvincou (05 Jan 2006 - 12:32)
En fait c'est reglé !!

mon contenu etait trop large pour entrer entre le menu et le bord de droite !!

et oui simplement !