Recherche dans le forum:
Rechercher


« Voir le sujet précédent :: Voir le sujet suivant »  
Auteur Message
Message30/07/2008, 14 02 03 (UTC)    
Sujet du message: Ajoutez un menu horizontal a votre design Iceblue!

Voici un exemple de design pour iceblue avec menu horizontal!

Vous pouvez adapter ou modifier les codes selon votre désire !

Vous pouvez garder votre menu vertical originale de iceblue et rajouter un menu horizontal si vous voulez! !

Il ne pas recommandée aux débutantes!

Exemple avec 5 Pages: Accueil - Contact - Livre d'or - Test - Test11
et de sous pages.

Citation:
http://testpagefrgd.fr.gd/

<style type="text/css">

<!--
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;background-position:center;background-repeat:no-repeat;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}
td.edit_header_full{background-image: url();background-color: #002f00;}

td.nav{background-image: url();}

td.nav a{color: #ffffff;}
td.edit_below_nav{visibility: hidden;}
td.headline2{font-size:16px;color:#ffffff;}
td.headline{visibility:hidden;}
td.edit_rechts_cbg{background-image: url();width: 100%;}
td.edit_content{background-image:url();padding-top:80px}
td.edit_content_top{background-image:url();background-color: #;}
td.nav_heading{background-image: url();}
td.sidebar_heading{background-image: url();}



td.edit_content_bottom{background-image:url();}
td.edit_content_bottom2{background-image:url();}
td.edit_navi_headbg{background-image:url(URL);}



td.shouty{color:#ffffff;background-image: url(URL);background-color: transparent;}
td.shouty2{color:#ffffff;background-image: url(URL);background-color: transparent;}
td.shouty3{color:#ffffff;background-image: url(URL);background-color: transparent;}
td.shouty4{color:#ffffff;background-image: url(URL);background-color: transparent;}
td.shouty5{color:#ffffff;background-image: url(URL);background-color: transparent;}

td.edit_rechts_bottom{background-image: url();width: 15%;}
td.edit_rb_footer{background-image: url();}
body{background-image: url();background-color: #002f00;!important;}
td.edit_rechts_sbg{background-image: url();visibility: hidden;position: absolute;right: 0px;}
td.headline2{visibility:hidden;}
td.idcp{visibility:hidden;}
td#nav_Livredor{visibility:hidden;}
td#nav_Pagedaccueil{visibility:hidden;}
td#nav_Contact{visibility:hidden;}
td#nav_Test{visibility:hidden;}
td#nav_Test11{visibility:hidden;}
td#nav_Test12{visibility:hidden;}

</style>

<style type="text/css">
<!--
tr.checked_menu td{background-image:url();background-color: #009933;height:25px;border-right: 1px solid
#ff9900;border-bottom:1px solid #ffffff;border-top:1px solid #ffffff;margin:5px;padding-left:15px;}

-->
</style>
<style type="text/css">
a {color:#ffffff}
a:hover {color: #ADFF2F}
</style><br></FONT>


<body>
<FONT color="white"><div align="center">
<table border="0" width="100%">

<tr>
<td>
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana;
font-size: 14px;
overflow: auto;
padding: 0px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 1;
top: 130px;
left: 70px;
margin-left:0px;
width:900px;


}

.menu li
{
width:140px;

float: left;
}

.menu a
{
border: 1px solid ;
color:#ffffff;
background-color: #009933;
text-decoration: none;
text-align: center;
font-weight:normal;
cursor: pointer;
margin: 0px 0px;
display: block;
height:23px;

}

.menu a:hover
{color:#ffffff;
background-color:#000000;
background-image: url();
}
#smenu0,
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 140px;
height:40px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a,#smenu5 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

</head>
<body>

<div class="menu">

<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu0');" onmouseout="cache('smenu0');">Menu</a>
<ul id="smenu0" onmouseover="montre('smenu0');" onmouseout="cache('smenu0');">
</ul>
</li>



<ul>
<li><a href="http://testpagefrgd.fr.gd/" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Accueil</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<li><a href="URL da la page">Page1</a></li>
<li><a href="URL de la pege">Page2</a></li>
<li><a href="Url de la page">Page3</a></li>


</ul>
</li>

<li><a href="http://testpagefrgd.fr.gd/Contact.htm" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Contact</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="Url de la page">Test1</a></li>
<li><a href="Url de la page">Test2</a></li>


</ul>
</li>

<li><a href="http://testpagefrgd.fr.gd/Livre-d-h-or.htm" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Livre d'or</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="Url de la page">Page4</a></li>
<li><a href="Url de la page">Page5</a></li>
<li><a href="Url de la page">Page6</a></li>
<li><a href="Url de la page">Page7</a></li>


</ul>
</li>

<li><a href="http://testpagefrgd.fr.gd/Test.htm" onmouseover="montre('smenu4');"

onmouseout="cache('smenu4');">Test</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Url de la page">Page7</a></li>
<li><a href="Url de la page">Page 8</a></li>


</ul>
</li>



<li><a href="http://testpagefrgd.fr.gd/Test11.htm" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Test11</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Url de la page">Page4</a></li>
<li><a href="Url de la page">Page5</a></li>
<li><a href="Url de la page">Page6</a></li>
<li><a href="Url de la page">Page7</a></li>


</ul>
</li>


</div>

</body>
</html>



1.Créer les pages
2.Rouge=Les rendre invisible
3Vert= positionner le menu
4.Orange= apparence de bouton
5.Indigo= inserez les Url et les Titres de vos pages

5.Créer les sous pages
6Bleu= Insérer les URL et les Titre de sous pages

7.Violet= Bouton de Menu sans lien


Insérer le code dans "Text au dessus de design!
La réalisation demande de l'expérience!

Exemple page:

http://testpagefrgd.fr.gd/

Wink
______________

Visitez :
Message30/07/2008, 14 02 19 (UTC)    
Sujet du message:

un boncode qui mérite le post it , bravo erika continue à nous émerveiller
______________


FR.GD TEAMS


Message30/07/2008, 14 02 23 (UTC)    
Sujet du message:

Mdr Erika c est la reine des tutoriel. Vraiment BRAVO continue comme sa j attend encore de tes tutoriel Exclamation
______________
4 sites actuellement.





Message03/08/2008, 15 03 08 (UTC)    
Sujet du message:

dunet a écrit:
un boncode qui mérite le post it........


up Exclamation
______________

Visitez :
Message16/09/2008, 23 11 26 (UTC)    
Sujet du message: salut

moi je suis debutants et je voudrais avoir une barre horizontale je fais comment merci
Message16/09/2008, 23 11 39 (UTC)    
Sujet du message:

Écoute moi j'ai le menu horizontale ,, et je ne le conseil pas au débutant ,, car c'est tres difficile ensuite de gérer tout les codes !!! mais c'est seulement un conseil ,, Wink
______________
Au plaisir ...


Attention les cons ils sont partout ; ils reviennent comme un cheveux sur la soupe !!


Montrer les messages depuis:   


Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com