Auteur
Message
webdesigncreator
28/07/2008, 21 09 49 (UTC) Sujet du message: [resolu] menu horizontal a la place du menu iceblu
SAlut à Tous Y a t il un moyen de remplacer le menu de iceblue en le mettant en haut c est a dire une menu horizontal,si oui dites le moi
Dernière édition par webdesigncreator le 30.07.2008, 14:47; édité 1 fois
↑
webmaster-shop
Support-Team
Localisation: Budapest /Alger
30/07/2008, 12 12 22 (UTC) Sujet du message:
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
3
Vert = positionner le menu
4.
Orange = apparence de bouton
5.I
ndigo = inserez les Url et les Titres de vos pages
5.Créer les sous pages
6
Bleu = 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/
_________
Gruss Wolle
______________
Visitez :
Dernière édition par webmaster-shop le 24.08.2008, 08:44; édité 6 fois
↑
webdesigncreator
30/07/2008, 13 01 22 (UTC) Sujet du message:
Merci Erika Vraiment Sympa De Ta Part
↑
webdesigncreator
01/10/2008, 10 10 50 (UTC) Sujet du message:
Salut Erika J'aimerais Si tu est d accord , Avoir Le Code De Ton Design du site Testpagefrgd.fr.gd , est je modifirais tous je te promet c est jusque que le menu me plait avec l ensemble du design
Merci Mille Fois Et Aid Mabrouke A Toi
______________
↑
webmaster-shop
Support-Team
Localisation: Budapest /Alger
01/10/2008, 11 11 19 (UTC) Sujet du message:
Pas de problème,tu peut l'utiliser sans modification aussi.
______________
Visitez :
↑
webmaster-shop
Support-Team
Localisation: Budapest /Alger
01/10/2008, 11 11 57 (UTC) Sujet du message:
Code de design:
Citation:
<style type="text/css"><!--
td.edit_content_top {width:100%;display:none; background-image:url(BILD-URL Top); background-color:#XXXXXX}
td.edit_content {background-repeat:repeat;width:100%;height:100%;background-image:url(BILD-URL Content); background-color:#ffffff;position:absolute;left:50px;background:repet;}
td.edit_content_bottom{width:100%; background-image:url(BILD-URL Footer 1); background-color:#XXXXXX}
td.edit_content_bottom2{width:100%; display:none;background-image:url(BILD-URL Footer 2); background-color:#XXXXXX}
td.edit_rechts_cbg {width:100%;background-image:url(BILD-URL Hintergrund); background-color:#XXXXXX}
table.edit_rechts_tabelle{width:100%;background-image:url()}
td.edit_rechts_sbg {display:none}
td.edit_rechts_bottom {display:none}
table.edit_main_table {width:100%}
td.edit_main_tr {width:100%}
table.edit_second_table {width:100%}
td.edit_header_full {width:0%; background-position:center; background-repeat:no-repeat}
table.edit_third_table {width:100%}
table.edit_rechts_tabelle {width:100%}
td.edit_header_full table {display:none}
-->
</style>
<style type="text/css"> <! --
table.edit_rechts_tabelle (width: 100%; background-image: url ())
td.edit_rechts_sbg (display: none)
td.edit_rechts_bottom (display: none)
table.edit_main_table (width: 100%)
td.edit_main_tr (width: 100%)
table.edit_second_table (width: 100%)
td.edit_header_full (width: 0%; background-position: center; background-repeat: no-repeat)
table.edit_third_table (width: 100%)
table.edit_rechts_tabelle (width: 100%)
td.edit_header_full table (display: none)
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:#484848;}
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_top{background-image:url();background-color: #;}
td.nav_heading{background-image: url();}
td.sidebar_heading{background-image: url();}
td.edit_content{widht:100%;background-image:url();background-color: #000000;padding-top:80px;;}
td.edit_content_bottom{background-image:url();}
td.edit_content_bottom2{background-image:url();}
td.edit_navi_headbg{background-image:url(URL);}
td.edit_rechts_bottom{background-image: url();width: 15%;}
td.edit_rb_footer{background-image: url();}
body{background-image: url();background-color: #484848;!important;}
td.edit_rechts_sbg{background-image: url();visibility: hidden;position: absolute;right: 0px;}
td.headline2{visibility:hidden;}
td.idcp{visibility:hidden;}
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#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;}
td#nav_MenuRolleover{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%">
<div style="float: left">
<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: 3;
top: 130px;
left: 50%;
margin-left:-405px;
width:905px;
}
.menu li
{
width:160px;
float: left;
}
.menu a
{
border: 1px solid ;
color:#ffffff;
background-image: url(http://img.webme.com/pic/w/webmaster-shop/button0150.gif);
background-color: #;
text-decoration: none;
text-align: center;
font-weight:normal;color:#000000;
cursor: pointer;
margin: 0px 0px;
display: block;
height:28px;
}
.menu a:hover
{color:#ffffff;
background-color:#;
background-image: url(http://img.webme.com/pic/w/webmaster-shop/button0150.gif);
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 160px;
height:28px;
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>
<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/Test11.htm" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Test11</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<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('smenu3');"
onmouseout="cache('smenu3');">Test</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<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/Contact.htm" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Contact</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<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('smenu5');" onmouseout="cache('smenu5');">Livre d'or</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>
Code pour la page d'accueil:
Citation:
<style type="text/css"><!--
td.edit_content {background-repeat:repeat;width:900px;height:800px;border: 3px solid ;
color:#;background-image:url(BILD-URL Content);
-->
</style>
<div align="center"> </div>
<br />
<div align="center"><font color="#cccccc"><em><strong><font size="6">Example page with horizontal menu for Iceblue!<br />
<font size="2">(by webmastershop.page.tl)</font></font></strong></em></font></div>
<br />
<br />
<center><object class="dm_videowall" width="710" height="414"><param name="movie" value="http://www.dailymotion.com/videowall/featured&rows=6&brand=top"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param><embed width="710" height="414" wmode="transparent" allowscriptaccess="always" src="http://www.dailymotion.com/videowall/featured&rows=6&brand=top" type="application/x-shockwave-flash"></embed></object> <br />
<br />
<br />
<div align="center"><embed height="250" width="750" flashvars="xml_input=http://demo.clansandguilds.ca/modules/ja_header/ja.headerxml.php" wmode="transparent" quality="high" bgcolor="#FFFFFF" name="ja_header_flash" id="ja_header_flash" src="http://demo.clansandguilds.ca/modules/ja_header/ja.header.swf" type="application/x-shockwave-flash"></embed></div>
</center>
↑