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:
page test_infos:
et le css:
Modifié par ptitvincou (05 Jan 2006 - 12:32)
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é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>
<!-- 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 é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;
}
Modifié par ptitvincou (05 Jan 2006 - 12:32)