Recherche dans le forum:
Rechercher


« Voir le sujet précédent :: Voir le sujet suivant »  
Auteur Message
Message28/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 Very Happy


Dernière édition par webdesigncreator le 30.07.2008, 14:47; édité 1 fois
Message30/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
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

_________
Gruss Wolle
______________

Visitez :


Dernière édition par webmaster-shop le 24.08.2008, 08:44; édité 6 fois
Message30/07/2008, 13 01 22 (UTC)    
Sujet du message:

Merci Erika Vraiment Sympa De Ta Part Very Happy
Message01/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 Very Happy Merci Mille Fois Et Aid Mabrouke A Toi Very Happy
______________
Message01/10/2008, 11 11 19 (UTC)    
Sujet du message:

Pas de problème,tu peut l'utiliser sans modification aussi.
Wink
______________

Visitez :
Message01/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">&nbsp;</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>





Wink
______________

Visitez :
Montrer les messages depuis:   


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