re Salut,
je brasse tellement le code que j'ai réussi a dégrader la situation meme ds ffox ! ! !
Je veux une coloration differente entre les liens du menus et ceux floattant a droite ds le texte, mais elle reste la meme...
Merci de m'aider. Je met tout au cas où...j'ai néttoyé un peu le texte pour la longueur.
J'en suis là :
Pour voir la page en question
CSS
div#header {
background-position: center top;
width:100% ; padding: 2px 5px 0px 0px;
height:145px; background-repeat:no-repeat;
background: url(./images/header.jpg) ;
}
div#motor img{
position: relative;
padding: 0;
margin: 0;
width: 222px; height:136px;
float:right ;
}
div#headergal { background-position: center top;
width:100% ;
height:92px;
background: url(./images/header_galerie.jpg) ;
margin: 0;
padding: 0;
}
div#menugeneral {border:0px ;
position : relative;
text-align:center;
padding:0;
margin:0px 0px 5px 245px;}
div#bloctexte {
width:760px ;
margin: 0 auto 0 auto;
padding: 10px 5px 10px 5px;
background-color:#00FFFF;}
/* CLASSES*/
.floatleft {float:left;border:0; margin:5px 10px 0px 0px;}
.floatright0 {float:right;border:0; margin:0;}
.floatright {float:right;border:0; margin:5px 0px 0px 10px;}
.floatleftbottom {border:0; margin:11px 0px 0px 0px;}
.align {text-align:center;}
.justify {text-align:justify; margin:0px 10px 0px 15px; padding:0;}
.inline {display:inline;}
.inlineright{display:inline;float:right;}
.bloc {display:inline;font-size: 1.5em;
font-family:Arial, Helvetica, Verdana, Univers, "MS Trebuchet"; }
.gall2005 img {margin:2px; padding:0;}
.spacer {clear:both; visibility:hidden;}
.citation { position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
left:190px;top:0px;
margin:2px 0px 2px 0px;
padding:0;}
.citationterme { position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
left:190px;
top:0px;
margin:0px 0px 6px 0px;
padding:0;}
.pheight {font-size:0.7em;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:15px 20px 26px 15px;
padding:0px 0px;
line-height:1.2em;}
.img2 {border:0px ;
text-align:justify;
margin-top:20px;}
.centrer {text-align:center;
font-size:0.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;}
.italic { font-style:italic;}
/* BALISES*/
body {border:0; margin:0 ; padding:0; width:100%; height:100%;}
p {font-size:0.7em; font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 0px 15px;}
#intro {font-size:0.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:15px 10px 26px 15px;
text-align:center;}
h1 {font-size:1em; font-family:Verdana, Arial, Helvetica, sans-serif;
margin:16px 15px 5px 15px;}
strong {color:black ;
background-color:transparent;
font-size:11px ;}
img {border:0px ;
margin:5px 5px 5px 5px;}
/* liens du menu*/
a { color: #13bc47; /* lien non-visité */
text-decoration: none;
font: 0.9em Georgia, serif ;
font-variant:small-caps ; }
a:visited { color: #13bc47 ; /* de base */
text-decoration: none;
font: 0.9em Georgia, serif ;
font-variant:small-caps ; }
a:hover { color: #1a6c33; /* lien survolé */
text-decoration: underline;
font: 0.9em Georgia, serif ;
font-variant:small-caps ; }
a:active { color: #996633; /* lien activé */
text-decoration: none;
font: 0.9em Georgia, serif ;
font-variant:small-caps ; }
/* LIENS justifié a droite ( ou pour page suivante...)*/
a.lienpageb :link {margin-right:20px; /* lien non-visité */
font-family:Georgia, Times, serif;
color:#735f0e;
text-decoration: none;
float:right;
background:transparent;}
a.lienpageb :visited { margin-right:20px; /* de base */
font-family:Georgia, Times, serif;
color: #1a6c33;
text-decoration: none;
float:right;
background:transparent; }
a.lienpageb :hover { margin-right:20px; /* lien survolé */
font-family:Georgia, Times, serif;
color: #13bc47 ;
text-decoration: underline;
float:right;
background:transparent;}
a.lienpageb :active { margin-right:20px; /* lien activé */
font-family:Georgia, Times, serif;
color: #1a6c33;
text-decoration: none;
float:right;
background:transparent;}
a.lienpageb { font-style: italic; font-size: 0.7em;}
/* P O P U P */
#popcarte {
display: none;
position: absolute;
top: 1100px;
left:50%;
margin-left:-237px;
z-index: 500;
cursor: pointer;
}
#pop a :link {font-size: 0.7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #5b4607;
text-decoration: none;
background: transparent;}
#pop a :visited { }
#pop a :hover { font-family: Georgia, Times, serif; /* lien survolé */
color: #a78009;
font-size: 0.7em;
text-decoration: underline;
background: transparent;}
#pop a :active { font-family: Georgia, Times, serif; /* lien activé */
color: #996666;
font-size: 0.7em;
text-decoration: none;
background:transparent;}
#popcarte h1 {font-size:1em;
font-family:Arial, Helvetica, Verdana, Univers, "MS Trebuchet";
margin:5px 5px 5px 5px;
background-color:transparent;}
HTML
<body>
<div id="header">
<div id="menugeneral"><a href="../index.html">.:: Accueil </a>
| <a href="photos.html"> Galerie photos </a>
| <a href="inscription.html"> Inscription ballade </a> |
<a href="mailto:mailcourroies@yahoo.fr"> Contactez-nous ::.</a>
</div>
</div>
<div id="bloctexte">
<div class="floatright">
<a class="lienpageb" href="#a04">2004</a>
<a class="lienpageb" href="#a05">2005</a>
</div><h1 id="a98">Année 1998 :</h1>
<p class="justify">
<img class="floatright" src="../images/histo98.jpg" alt="98" />
blablabla
</p>
<hr class="spacer" />
<div class="floatright">
<a class="lienpageb" href="#a03">2003</a>
<a class="lienpageb" href="#a04">2004</a>
</div>
<h1 id="a99">Année 1999 :</h1>
<p class="justify"><img class="floatright" src="../images/histo99.jpg" alt="98" />
Ainsi, en 1999 naquit la première « Balade des Pétochons du Sausseron »,
accunciennes. Dont acte !
</p>
<hr class="spacer" />
<div class="floatright">
<a class="lienpageb" href="#a04">2004</a>
<a class="lienpageb" href="#a05">2005</a>
</div>
<h1 id="a00">Année 2000 :</h1>
<p class="justify">
<img class="floatright" src="../images/histo00_vero.jpg" alt="Véro."/>
Pour l'année 2000, le groupe « d'origine » Bethemfert à chaque exposant.
</p>
<hr class="spacer" />
<div class="floatright">
<a class="lienpageb" href="#a98">Haut de page</a>
<a class="lienpageb" href="#a05">2005</a>
</div>
<h1 id="a01">Année 2001 :</h1>
<p class="justify">
<img class="floatright" src="../images/histo03c.jpg" alt="is" />
L'année 2001,
</p>
<hr class="spacer" />
<h1 id="a02">Année 2002 :</h1>
<p class="justify">
Malheureusement, en 2002, des « éléments
</p>
<hr class="spacer" />
<div class="floatright">
<a class="lienpageb" href="#a98">Haut de page</a>
</div>
<h1 id="a03">Année 2003 :</h1>
<p class="justify">
<img class="floatright" src="../images/histo03.jpg" alt="isto03" />
Le 27 avril 2003, s’est déroulée la « 1ère Bourse-Expo des courroies de carnelle » <a class="pop" href="#popcarte">à Presles</a> (Val d’Oise).
Un petit groupe de « joyeux » motards de Béte;tat de conservation exceptionnel.
</p>
<p class="citation">Citons néanmoins :</p>
<ul class="citationterme">
<li>Terrot Motorette N°1 de 1906, N° 2 de 1911, N° 3 de 1913.</li>
<li>Peugeot Paris-Nice de 1913, Fabrique Nationale de 1913.</li>
<li>Motobécane MB1 de 1923, New Map Anzani arbre à cane en tête de 1926. </li>
</ul>
<p class="justify"> <img class="floatleft" src="../images/histo033.jpg" alt="hito03" />
Ainsi que tant d’autres hélas disparues telles que
mieux faire le 25 avril 2004... Rendez-vous est donc pris…
</p>
<hr class="spacer" />
<div class="floatright">
<a class="lienpageb" href="#a98">Haut de page</a>
<a class="lienpageb" href="#a99">1999</a>
<a class="lienpageb" href="#a02">2002</a>
</div>
<h1 id="a04">Année 2004 :</h1>
<p class="justify">
<img class="floatright" src="../images/histo04big2.jpg" alt="bigone" />
<img class="floatright" src="../images/histo044.jpg" alt="histo042" />
blablablablablabla
</p>
<h1 id="a05">Année 2005 :</h1>
<p class="justify">
<img class="floatright" src="../images/histo05didier.jpg" alt="" />
Que de changement pour cette édition 2005 !
avons donc largué les « bielles » mère
</p>
<hr class="spacer" />
<p class="align">
<img class="align" src="../images/hidto05grichard.jpg" alt="" />
</p>
<a class="lienpageb" href="#a98">Haut de page</a>
</div>
<div id="popcarte">
<p><img src="../images/carte_presles.gif" alt="Localisation de Presles" /></p>
</div>
</body>
</html>
Modifié par Hum (05 Feb 2006 - 20:05)
