|
Pages: 1
|
Membre
|
Bonjour.
Question 1 :
Je veux faire une barre de navigation avec les liens qui apparaissent sous l'image au survol (comme les menus web 2.0, mais avec des boutons en fait). J'ai essayé avec des info-bulles, mais ça n'a pas marché.
J'ai tapé un code comme ça :
<a href="http://assoss-annuaire.xooit.com/index.php" title="<a href="http://assoss-annuaire.xooit.com/index.php">Index</a><a href="http://assoss-annuaire.xooit.com/portal.php">Portail</a>">Forum</a>
Mais ça n'a pas marché.
Question 2 :
Je veux mettre des ancres qui mènent vers le haut et le bas de la page.
Mais je veux que ces ancres se déplacent en même temps que l'utilisateur du site : il descend, les boutons descendent (comme les ribbons web 2.0 position fixe).
Merci d'avance pour votre aide.
|
Admin
|
Bonjour,
pour ta première question, il suffit d'utiliser du CSS, en utilisant le selecteur :hover (survol).
Donc voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barre de navigation</title>
</head>
<body>
<style tyle="text/css">
img
{
border:0px;
}
a
{
color:#222222;
text-decoration:none;
}
a:hover
{
color:#444444;
}
.barre_navig
{
float:left;
}
.barre_navig, .links, .links a
{
width:200px;
text-align:center;
}
.links
{
display:none;
background:#007ce6;
position:absolute;
}
.barre_navig:hover .links
{
display:block;
}
.links a:hover
{
background:#32a1ff;
}
</style>
<div class="barre_navig">
<a href="lien0.html"><img src="bouton1.png" alt="Bouton 1" /></a><br />
<div class="links">
<a href="lien1.html">Mon lien1</a><br />
<a href="lien2.html">Mon lien2</a><br />
<a href="lien3.html">Mon lien3</a><br />
</div>
</div>
<div class="barre_navig">
<a href="lien2_0.html"><img src="bouton2.png" alt="Bouton 2" /></a><br />
<div class="links">
<a href="lien2_1.html">Mon lien1 - 2</a><br />
<a href="lien2_2.html">Mon lien2 - 2</a><br />
<a href="lien2_3.html">Mon lien3 - 2</a><br />
</div>
</div>
</body>
</html>
Maintenant, il ne te reste plus qu'à l'adapter, en ajustant les tailles les couleurs, en mettant l'image du bouton...
Pour ta deuxième questions.
Voici comment:
<div style="position:fixed;bottom:0px;right:0px;"><a href="#bas"><img src="http://img5.xooimage.com/files/8/9/2/bas-a2d5c1bis-a2d6ab.png" alt="Bas" /></a><a href="#"><img src="http://img5.xooimage.com/files/8/9/2/bas-a2d5c1bis-a2d6ab.png" alt="Haut" /></a></div>
Merci
|
Membre
|
Merci.
Question 3 : (j'espère que je ne vous embête pas)
Dans ma feuille de style CSS, j'ai mis cette propriété pour avoir les angles de mes inputs, de mes textarea et de mes select arrondis :
border-radius:9px 9px;
-moz-border-radius:9px;
Mais le W3C me dit que ces propriété n'existent pas en CSS2, mais en CSS3, et quand je teste ma page en CSS3, il me dit qu'elles n'existent pas en CSS3.
Par quoi dois-je les remplacer ?
|
Admin
|
Bonjour,
Effectivement, mais c'est la propriété -moz-border-radius qui n'existe pas, border-radius elle existe et ne provoque aucun problème de validation en CSS3 mais le problème c'est que -moz-border-radius n'est pas valide, mais c'est le seul moyen de faire des bordures arrondies en CSS sous Firefox.
mais si tu tien à ce que ça fonctionne sous tout les navigateurs(même IE6), et que ce soit valide, le support du web propose un service permettant d'obtenir ce que tu veut:
Générateur de coins arrondis en (X)html/css
Merci
|
Membre
|
border-radius fonctionne sous firefox (et sous Google Chrome), et est accepté par le W3C.
Le problème, c'est que je viens d'ouvrir ma page sous firefox, et les inputs, le bouton et le textarea ne sont pas bleu, et ne deviennent pas argenté au survol.
<style type="text/css3" media="screen">
<!-- INPUT
{ color:#000;
font:11px verdana,Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
background-color:#5da0fb;
background-position:top;
border-radius:9px 9px;
border-radius:9px;}
SELECT
{ color:#000;
font:11px verdana,Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
background-color:#EEE;
border-radius:9px 9px;
border-radius:9px;}
TEXTAREA
{ color:#000;
font:11px verdana,Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
background-color:#5da0fb;
border-radius:9px 9px;
border-radius:9px;}
textarea:hover
{ background-color:#d9e5f5;
background-position:top; }
.txterror
{ color:black;
font:11px Verdana,Arial,Helvetica,Geneva,Swiss,SunSans-Regular; }
.txtform
{ color:black;
font:12px Verdana,Arial,Helvetica,Geneva,Swiss,SunSans-Regular; }
input:hover
{ background-color:#d9e5f5;
background-position:top; }
--></style>
Les codes qui devraient changer les couleurs et les couleurs de survol fonctionnent pourtant sur mon autre site avec FF, et fonctionnent parfaitement sur mon formulaire de contact avec Google Chrome. Quand à IE, je n'ai pas testé (je suis sous Linux) et j'ai peur du résultat...
Qu'est ce qui ne va pas dans ce code ?
Merci pour votre aide.
|
Membre
|
J'ai trouvé l'erreur qui a détruit le CSS.
Mais comment déclarer que son CSS est du CSS3 ? Le W3C ne m'a pas signalé d'erreur quand j'ai mis <style type="text/css3" media="screen"> mais le CSS ne marchait plus. Comment déclarer au W3C que l'on utilise du CSS3 ?
Help please !
Merci.
|
Admin
|
bonjour,
après plusieurs vérifications, je maintient mon point, border-radius ne fonctionne pas sous Firefox, du moins la version 3.5.5, si ça fonctionne chez toi, peut-être que tu utilise une bêta non-officielle.
Donc au fond, voici ce que je voulais dire:
Sous firefox:
-moz-border-radius fonctionne, border-radius ne fonctionne pas
-moz-border-radius est invalide CSS3, border-radius est valide CSS3
Sinon, pour que le W3C teste la validité CSS dans sa version 3, tu doit aller à:
http://jigsaw.w3.org/css-validator/
et dans les Options supplémentaires, tu doit indiquer que c'est du CSS3.
Mais j'imagine que toi tu veut le lien référer qui permet de valider en CSS3, donc le voila:
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
Donc tu ne peut pas comme le (X)html déterminer directement dans le code source la version(strict, transitionnel...), tu doit le déterminer dans la validation ou dans le lien referer.
Sinon, si j'ai pas bien compris, peut tu préciser ta question?
Merci
|
Membre
|
C'était bien ce que je cherchait.
Merci.
|
Membre
|
Bonjour.
j'ai finalement utilisé le javascript pour afficher/masquer la barre de navigation. Mais j'ai un problème pour la centrer.
Voici le code de la barre de navigation :
<div style="text-align:center">
<!-- BEGIN switch_user_logged_out -->
<div class="barre_navig" align="center">
<a href="http://assoss-annuaire.xooit.com/index.php"><img src="http://assoss-annuaire.hebfree.org/images/forum.jpg" alt="Forum" onmouseover="affCache('pr11');"></a>
<div class="links" id="pr11" style="display:none">
<table border="0" align="center" width="134">
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/index.php"><center>Index</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/portal.php"><center>Portail</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/faq.php"><center>FAQ</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/search.php"><center>Rechercher</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/profile.php?mode=register"><center>S'enregistrer</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/login.php"><center>Connection</center></a></td></tr></table>
</div>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/toplist/index.php"><img src="http://assoss-annuaire.hebfree.org/images/topliste.jpg" alt="Topliste" onmouseover="affCache('pr12');"></a>
<div class="links" id="pr12" style="display:none">
<table border="0" align="center" width="134">
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php"><center>Topliste</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?a=join"><center>S'inscrire</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?a=user_cpl"><center>Se connecter</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?a=stats"><center>Statistiques</center></a></td></tr></table>
</div>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat="><img src="http://assoss-annuaire.hebfree.org/images/annuaire.jpg" alt="Annuaire" onmouseover="affCache('pr13');"></a>
<div class="links" id="pr13" style="display:none">
<table border="0" align="center" width="134">
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat="><center>Toutes <br>catégories</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Association%20humanitaire"><center>Associations <br>Humanitaires</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Don%20d%27organes"><center>Don d'organes</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Recherche"><center>Recherche <br>Médicale</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Animaux"><center>Animaux</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Ecologie"><center>Protection de <br>de la nature</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Sports%20et%20loisirs"><center>Sports et loisirs</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Divers"><center>Divers</center></a></td></tr></table>
</div>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/livre.php"><img src="http://assoss-annuaire.hebfree.org/images/livre.jpg" alt="Livre d'Or"></a>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/contact.php"><img src="http://assoss-annuaire.hebfree.org/images/contact.jpg" alt="Nous contacter"></a>
</div>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="barre_navig" align="center">
<a href=http://assoss-annuaire.xooit.com/index.php"><img src="http://assoss-annuaire.hebfree.org/images/forum.jpg" alt="Forum" onmouseover="affCache('pr21');"></a>
<div class="links" id="pr21" style="display:none">
<table border="0" align="center" width="134">
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/index.php"><center>Index</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/portal.php"><center>Portail</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/faq.php"><center>FAQ</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/search.php"><center>Rechercher</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/memberlist.php"><center>Membres</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/groupcp.php"><center>Groupes</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/profile.php?mode=editprofile"><center>Profil</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/privmsg.php?folder=inbox"><center>Messagerie</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.xooit.com/login.php?logout=true"><center>Déconnection</center></a></td></tr></table>
</div>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/toplist/index.php"><img src="http://assoss-annuaire.hebfree.org/images/topliste.jpg" alt="Topliste" onmouseover="affCache('pr12');"></a>
<div class="links" id="pr12" style="display:none">
<table border="0" align="center" width="134">
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php"><center>Topliste</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?a=join"><center>S'inscrire</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?a=user_cpl"><center>Se connecter</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?a=stats"><center>Statistiques</center></a></td></tr></table>
</div>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat="><img src="http://assoss-annuaire.hebfree.org/images/annuaire.jpg" alt="Annuaire" onmouseover="affCache('pr13');"></a>
<div class="links" id="pr13" style="display:none">
<table border="0" align="center" width="134">
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat="><center>Toutes <br>catégories</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Association%20humanitaire"><center>Associations <br>Humanitaires</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Don%20d%27organes"><center>Don d'organes</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Recherche"><center>Recherche <br>Médicale</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Animaux"><center>Animaux</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Ecologie"><center>Protection de <br>de la nature</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Sports%20et%20loisirs"><center>Sports et loisirs</center></a></td></tr>
<tr bgcolor="#0c79f4" onmouseover="this.style.backgroundColor='#0cc0f4';" onmouseout="this.style.backgroundColor='#0c79f4';"><td><a href="http://assoss-annuaire.hebfree.org/toplist/index.php?method=pv&cat=Divers"><center>Divers</center></a></td></tr></table>
</div>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/livre.php"><img src="http://assoss-annuaire.hebfree.org/images/livre.jpg" alt="Livre d'Or"></a>
</div>
<div class="barre_navig">
<a href="http://assoss-annuaire.hebfree.org/contact.php"><img src="http://assoss-annuaire.hebfree.org/images/contact.jpg" alt="Nous contacter"></a>
</div>
</div>
<!-- END switch_user_logged_in -->
Et mon CSS :
<!-- link rel="stylesheet" href="http://img6.xooimage.com/files/b/f/a/ogame-15602d3.css" type="text/css" -->
<style type="text/css">
<!--
/*
The original subSilver Theme for phpBB version 2+
Created by subBlue design
http://www.subBlue.com
NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
theme administration centre. When you have finalised your style you could cut the final CSS code
and place it in an external file, deleting this section to save bandwidth.
*/
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: {T_BODY_BGCOLOR};
scrollbar-face-color: {T_TR_COLOR2};
scrollbar-highlight-color: {T_TD_COLOR2};
scrollbar-shadow-color: {T_TR_COLOR2};
scrollbar-3dlight-color: {T_TR_COLOR3};
scrollbar-arrow-color: {T_BODY_LINK};
scrollbar-track-color: {T_TR_COLOR1};
scrollbar-darkshadow-color: {T_TH_COLOR1};
background-image: url("http://assoss-annuaire.hebfree.org/images/background-forum.jpg");
background-attachment: fixed;
}
/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
hr { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}
/* This is the border line & background colour round the entire page */
/* .bodyline { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }*/
/* This is the outline round the main forum tables */
.forumline { background-color: {T_TD_COLOR2}; border:0; }
/* Main table cell colours and backgrounds */
td.row1 { background-color: {T_TR_COLOR1}; }
td.row2 { background-color: {T_TR_COLOR2}; }
td.row3 { background-color: {T_TR_COLOR3}; }
/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: {T_TD_COLOR2};
background-image: url(http://img5.xooimage.com/files/c/e/cellpic2-30da7.jpg);
background-repeat: repeat-y;
}
/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(http://img2.xooimage.com/files/c/e/cellpic3-30da8.gif);
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(http://img2.xooimage.com/files/c/e/cellpic1-30da9.gif);
background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}
/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}
th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }
/* The largest text used in the index page title and toptic title etc. */
.maintitle {
font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}
/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: {T_BODY_HLINK}; text-decoration: underline; }
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu { text-decoration: none; color : {T_BODY_LINK}; }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }
/* Forum category titles */
.cattitle { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle { text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink { text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav { text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover { text-decoration: underline; }
/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
/* Location, number of posts, post date etc */
.postdetails { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }
/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link { text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}
/* Quote & Code blocks */
.code {
font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
.quote {
font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
/* Copyright and bottom info */
.copyright { font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright { color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}
/* Form elements */
input,textarea, select {
color : {T_BODY_TEXT};
font: normal {T_FONTSIZE2}px {T_FONTFACE1};
border-color: {T_BODY_TEXT};
}
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : {T_TD_COLOR2};
border-width:1px;
}
input { text-indent : 2px; }
/* The buttons used for bbCode styling in message post */
input.button {
background-color : {T_TR_COLOR1};
color : {T_BODY_TEXT};
font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}
/* The main submit button option */
input.mainoption {
background-color : {T_TD_COLOR1};
font-weight : bold;
border-width:1px;
}
/* None-bold submit button */
input.liteoption {
background-color : {T_TD_COLOR1};
font-weight : normal;
border-width:1px;
}
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }
/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("http://img10.xooimage.com/files/e/d/5/formie-30d7c.css");
.barre_navig
{
float:left;
margin-left: 39px;
}
.barre_navig, .links, .links a
{
width:108px;
text-align:center;
}
.links
{
width:140px;
display:none;
background:6583ff;
position:absolute;
}
.barre_navig:hover .links
{
display:block;
}
.links a:hover
{
color:#000000;
text-decoration:none;
}
.links a
{ color:#000000;
text-decoration:none;
}
-->
</style>
J'ai tout essayé pour la centrer : tableaux, div align="center", div style="text-align="center", même chose dans le CSS de .barre_navig...
Je ne comprends pas pourquoi ça marche pas...
Je suppose que vous avez une solution.
Merci d'avance.
|
Admin
|
Bonjour,
premièrement, div style="text-align="center" n'existe pas, c'est plutôt <div style="text-align:center;">
dieuxièmement, c'est normal que ça ne fonctionne pas, car c'est un menu en forme de tableau(ce qui n'est nullement fait pour ça), donc pour centrer les tableaux, tu dois faire:
<table style="margin:auto;">
</table>
Merci
|
Membre
|
Euh, j'ai fait quelques essais, et je n'ai pas réussi. Il faut le placer où le code ? J'ai essayé de le placer dans le premier tableau, ça n'a pas marché; dans un tableau contenant la barre de navigation, elle ne marchait plus; dans le code de la première image, ça n'a pas fonctionné non plus...
Quote: Ybouane c'est un menu en forme de tableau
Je dirais plutôt que c'est un menu en images contenues dans des div et contenant des tableaux...
Help, please !
Merci
|
Admin
|
Bonjour,
finalement, je dirait qu'il faudrait mettre le style="margin:auto;width:735px;" au div parent du menu.
Donc:
<div style="text-align:center">
<div class="barre_navig">
[...]
</div>
</div>
Deviendra:
<div style="margin:auto;width:735px;">
<div class="barre_navig">
[...]
</div>
</div>
Vous remarquerez aussi que j'ai mis un width:735; c'est la taille du menu, donc c'est 147(la taille d'un bouton)*5.
Merci
|
Membre
|
Ça marche, merci !
|
|
Pages: 1
|
