Je fais bénévolement le site du club de la presse de Nantes... et je cale. Je connais les bases du css, mais jusqu'à présent je me contentais encore des tableaux. :blush: J'ai donc parcouru les tuto par ci par là pour tenter d'aller plus loin en css.
Après des heures a tenté de caler un de mes deux menus et deux liens dans le "copyright", je craque !
Voilà l'adresse temporaire du site Club de la presse de nantes Atlantique
Ca va être un peu long, désolée.
Le code de ma page index.php
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Club de la Presse Nantes Atlantique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="copyright" content="Valerie Bonneau">
<meta name="keywords" content="Nantes, pays de la loire, pressclub, club presse, journaliste, photographe, Saint Nazaire, pigiste">
<meta name="description" content="">
<meta name="robots" content="index,follow,all">
<link rel="stylesheet" type="text/css" href="/index.css" media="all">
<link href="/index.css"rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/menuone.css" type="text/css">
<link rel="stylesheet" href="/menubas.css" type="text/css">
<!-- DEBUT DU SCRIPT -->
<script language="javascript" type="text/javascript">
/*
SCRIPT TROUVE SUR WEBJS
*/
<!-- CE SCRIPT EST EDITE PAR EDITEUR JAVASCRIPT -->
MaDate = new Date;
heure = MaDate.getHours();
function MessageParDate()
{
if (heure>=0 && heure<=5)
{
MessageB = 'Insomniaque, merci de penser au club de la prese Nantes Atlantique';
}
if (heure>5 && heure<12)
{
MessageB = 'Bienvenue et bonne matinée';
}
if (heure>=12 && heure<14)
{
MessageB = 'La pause déjeuner est idéale pour remplir le formulaire d\'adhesion';
}
if (heure>=14 && heure<=17)
{
MessageB = 'Le club de la presse Nantes Atlantique vous souhaite un bon après-midi';
}
if (heure>17 && heure<=19)
{
MessageB = 'La journée touche à sa fin, n\'avez-vous rien oublié';
}
if (heure>19 && heure<=23)
{
MessageB = 'A vos plumes les rédacteurs !';
}
return MessageB;
}
// -->
</SCRIPT>
<!-- FIN DU SCRIPT -->
</head>
<body>
<div class="conteneur">
<div class='header'><img src="logo.jpg" alt="logo" border="0"></div>
<div class="phrase"><!-- DEBUT DU SCRIPT -->
<!--
SCRIPT TROUVE SUR WEBJS
-->
<!-- CE SCRIPT EST EDITE PAR EDITEUR JAVASCRIPT -->
<script language="javascript" type="text/javascript">
document.write(MessageParDate());
</SCRIPT>
<!-- FIN DU SCRIPT -->
</div>
<div class="gauche"><?php include("menu-index.php");?></div>
<div class="frame">
<div class='colC'>
<?php
$atpage=strtoupper($atpage); /* On met en majuscule le paramêtre page= passé à index.php3 */
$Aff_Date=False;
Switch ($atpage):
Case "STATUTS" : include("statuts.php"); break;
Case "MEDIA" : include("medias.php"); break;
Case "AGENDA" : include("agenda.php"); break;
Case "ANNUAIRE" : include("annuaire.php");break;
Case "CLUB" : include("club.php");break;
break;
Case "NEWS-SUITE":
Case "NEWS":
default :
/********** Inclure les News/Suite ou Archives ********************/
$chemin = "freenewsphp";
Switch ($atpage):
Case "NEWS-SUITE" :
$what_aff = "suite";break;
Case "NEWS":
default: $atpage="NEWS";
$Aff_Date=True;
$what_aff = "grand_format";
EndSwitch;
echo "<div style='margin-left:10pt;margin-right:10pt;'>";
echo "<br>";
/*** Affiche la date seulement pour la page principale des news***/
IF ($Aff_Date==True):
$LANG="fr";
$TAILLE="TXTS";
echo "<div class='DATE'>"; include('calendrier.php'); echo "</div>";
Endif;
_AT_include ("$chemin/aff_news.php");
/**************************************************************/
Endswitch;
?>
</div> <!-- fin du la colonne centrale -->
<h1>Bientôt les actualités du club de la presse</h1>
<p>Dans l'attente du logo</p>
<p>De l'hébergement</p>
<p>Vous pouvez juste donner votre avis sur la mise en page</p>
<p>Critiquer le dessin de Frap</p>
<p>Vous taire si vous n'avez rien à dire et adhérer si ce n'est déjà fait.</p>
<p>Réfléchir aux futurs actions du club</p>
<p>Vous voulez devenir partenaire ? Contactez le président !</p>
<p>Blablabal</p>
</div>
<br>
<div class="menubas">
<table width="500" height="36"
<tr>
<td><a href="contactclub.php" name="menubas1" title="Contact" id="menubas1">Contacts</a></td>
<td><a id="menubas2" title="Adhésion" href="#">Adhésion</a></td>
<td><a id="menubas3" title="Partenaires" href="#">Partenaires</a></td>
<td><a id="menubas4" title="Statuts" href="statuts.php">Statuts</a></td>
</tr>
</table>
</div>
</div>
<div class="bas">
<div align="center"><?php include("copyright.php");?>
</div></div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Club de la Presse Nantes Atlantique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="copyright" content="Valerie Bonneau">
<meta name="keywords" content="Nantes, pays de la loire, pressclub, club presse, journaliste, photographe, Saint Nazaire, pigiste">
<meta name="description" content="">
<meta name="robots" content="index,follow,all">
<link rel="stylesheet" type="text/css" href="/index.css" media="all">
<link href="/index.css"rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/menuone.css" type="text/css">
<link rel="stylesheet" href="/menubas.css" type="text/css">
<!-- DEBUT DU SCRIPT -->
<script language="javascript" type="text/javascript">
/*
SCRIPT TROUVE SUR WEBJS
*/
<!-- CE SCRIPT EST EDITE PAR EDITEUR JAVASCRIPT -->
MaDate = new Date;
heure = MaDate.getHours();
function MessageParDate()
{
if (heure>=0 && heure<=5)
{
MessageB = 'Insomniaque, merci de penser au club de la prese Nantes Atlantique';
}
if (heure>5 && heure<12)
{
MessageB = 'Bienvenue et bonne matinée';
}
if (heure>=12 && heure<14)
{
MessageB = 'La pause déjeuner est idéale pour remplir le formulaire d\'adhesion';
}
if (heure>=14 && heure<=17)
{
MessageB = 'Le club de la presse Nantes Atlantique vous souhaite un bon après-midi';
}
if (heure>17 && heure<=19)
{
MessageB = 'La journée touche à sa fin, n\'avez-vous rien oublié';
}
if (heure>19 && heure<=23)
{
MessageB = 'A vos plumes les rédacteurs !';
}
return MessageB;
}
// -->
</SCRIPT>
<!-- FIN DU SCRIPT -->
</head>
<body>
<div class="conteneur">
<div class='header'><img src="logo.jpg" alt="logo" border="0"></div>
<div class="phrase"><!-- DEBUT DU SCRIPT -->
<!--
SCRIPT TROUVE SUR WEBJS
-->
<!-- CE SCRIPT EST EDITE PAR EDITEUR JAVASCRIPT -->
<script language="javascript" type="text/javascript">
document.write(MessageParDate());
</SCRIPT>
<!-- FIN DU SCRIPT -->
</div>
<div class="gauche"><?php include("menu-index.php");?></div>
<div class="frame">
<div class='colC'>
<?php
$atpage=strtoupper($atpage); /* On met en majuscule le paramêtre page= passé à index.php3 */
$Aff_Date=False;
Switch ($atpage):
Case "STATUTS" : include("statuts.php"); break;
Case "MEDIA" : include("medias.php"); break;
Case "AGENDA" : include("agenda.php"); break;
Case "ANNUAIRE" : include("annuaire.php");break;
Case "CLUB" : include("club.php");break;
break;
Case "NEWS-SUITE":
Case "NEWS":
default :
/********** Inclure les News/Suite ou Archives ********************/
$chemin = "freenewsphp";
Switch ($atpage):
Case "NEWS-SUITE" :
$what_aff = "suite";break;
Case "NEWS":
default: $atpage="NEWS";
$Aff_Date=True;
$what_aff = "grand_format";
EndSwitch;
echo "<div style='margin-left:10pt;margin-right:10pt;'>";
echo "<br>";
/*** Affiche la date seulement pour la page principale des news***/
IF ($Aff_Date==True):
$LANG="fr";
$TAILLE="TXTS";
echo "<div class='DATE'>"; include('calendrier.php'); echo "</div>";
Endif;
_AT_include ("$chemin/aff_news.php");
/**************************************************************/
Endswitch;
?>
</div> <!-- fin du la colonne centrale -->
<h1>Bientôt les actualités du club de la presse</h1>
<p>Dans l'attente du logo</p>
<p>De l'hébergement</p>
<p>Vous pouvez juste donner votre avis sur la mise en page</p>
<p>Critiquer le dessin de Frap</p>
<p>Vous taire si vous n'avez rien à dire et adhérer si ce n'est déjà fait.</p>
<p>Réfléchir aux futurs actions du club</p>
<p>Vous voulez devenir partenaire ? Contactez le président !</p>
<p>Blablabal</p>
</div>
<br>
<div class="menubas">
<table width="500" height="36"
<tr>
<td><a href="contactclub.php" name="menubas1" title="Contact" id="menubas1">Contacts</a></td>
<td><a id="menubas2" title="Adhésion" href="#">Adhésion</a></td>
<td><a id="menubas3" title="Partenaires" href="#">Partenaires</a></td>
<td><a id="menubas4" title="Statuts" href="statuts.php">Statuts</a></td>
</tr>
</table>
</div>
</div>
<div class="bas">
<div align="center"><?php include("copyright.php");?>
</div></div>
</body>
</html>
Le menu central en css
CODE
.conteneur ul{
position:absolute;
list-style:none;
padding: 0px;
margin: 0px;
width:540px;
height:400px;
background: url(dessin10.gif) no-repeat;
}
.conteneur a{
position:absolute;
display:block;
width:76px;
height:20px;
text-decoration:none;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
.conteneur a:hover{
font-size:18px;
color:#CC3300;
width:169px;
height:45px;
}
#menu1{
top: 340px;
left: 4px;
padding: 5px 0px 0px 20px;
background: #6699FF url(g05/ptm1.gif) no-repeat;
}
#menu1:hover{
top:330px;
left:1px;
padding: 14px 0px 0px 15px;
width:135px;
background: url(g05/m1.jpg) no-repeat;
}
#menu2{
top:340px;
left:112px;
background: #FFCC00 url(g05/ptm2.gif) no-repeat;
padding: 5px 0px 0px 20px}
#menu2:hover{
top:330px;
left:74px;
padding: 10px 0px 0px 48px;
background: url(g05/m2.jpg) no-repeat;
}
#menu3{
top:340px;
left:222px;
padding: 5px 0px 0px 20px;
background: #CC3333 url(g05/ptm3.gif) no-repeat;
}
#menu3:hover{
top:330px;
left:185px;
padding: 10px 0px 0px 48px;
background: url(g05/m3.jpg) no-repeat;
}
#menu4{
top:340px;
left:334px;
padding: 5px 0px 0px 20px;
background: #9966FF url(g05/ptm4.gif) no-repeat;
}
#menu4:hover{
top:330px;
left:328px;
padding: 10px 0px 0px 48px;
width:135px;
background: url(g05/m4.jpg) no-repeat;
}
#menu5{
top:1px;
left:400px;
padding: 5px 0px 0px 20px;
background: #33CC00 url(g05/ptm5.gif) no-repeat;
}
#menu5:hover{
top:1px;
left:380px;
padding: 14px 0px 0px 48px;
background: url(g05/m5.jpg) no-repeat;
}
#menu6{
top:1px;
left:2px;
padding: 5px 0px 0px 20px;
background: #00CCFF url(g05/ptm6.gif) no-repeat;
}
#menu6:hover{
top:0px;
left:0px;
padding: 10px 0px 0px 48px;
background: url(g05/m6.jpg) no-repeat;
}
Le code css du"menubas"
CODE
.conteneur menubas{
margin:0;
}
.conteneur menubas a{
width:100px;
height:15px;
float:left;
color:#0066FF;
font-size:10px;
text-align:center;
text-decoration:none;
margin-left:2px;
}
.conteneur #menubas a:hover{
background-color:#333366;
color:#ffffff;}
Merci à tous et à toutes qui auraient une (bonne) idée, pour me sortir du tunnel. :wub: et exelente soirée aux autres ;)
Val