Aller au contenu

calage de menus et héritage des liens

bigoudi

Par bigoudi
dans (X)HTML et CSS

 Partager

Sujets conseillés

bigoudi

bigoudi

Posté
Posté (modifié)

Bonsoir,

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

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

Le menu central en css



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


.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

Modifié par bigoudi
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...