Bine ai venit pe DesignART !
-Forumul DesignART ofera servicii gratuite in domeniile Graphic Design si Coding !
-Pentru a beneficia de aceste servicii trebuie doar sa va INREGISTRATI si/sau sa va CONECTATI
-Innainte de a incepe sa postati,va sfatuim sa cititi REGULAMENTUL forumului !

Tutorial - Simple Green Menu.

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial - Simple Green Menu.

Mesaj Scris de Vizitato la data de Sam Apr 30, 2011 9:51 am

Tutorial - Simple Green Menu.






Instalare:

1. CSS
Adaugati codul urmator in CSS:





Cod:




* {margin: auto;padding: 0;}

:focus{outline:none;}
 
a img{border: 0px;}
 
a {text-decoration: none;cursor:pointer;}
 
.main_body {width:960px;color:#d4d7da;font-size:12px;margin-top:50px;}

.menu_division{clear:both;padding-top:30px;}
 

.menu_body1{float:left;width:948px;text-align:left;background:url(http://img218.imageshack.us/img218/2412/menubg4.gif) left repeat-x;height:38px;}

.menu_left_part1{float:left;width:6px;height:38px;background:url(http://img651.imageshack.us/img651/2229/menuleftimg4.gif) no-repeat;}

.menu_right_part1{float:right;width:6px;height:38px;background:url(http://img148.imageshack.us/img148/8387/menurightimg4.gif) no-repeat;}

.menu_content1{padding:6px 5px 0px 5px;font-weight:bold;}
.menu_content1 ul{list-style-type:none;}
.menu_content1 li{float:left;margin-right:5px;}
.menu_content1 li:hover{background:#ffffff;margin-right:5px;float:left;color:#2b2f32;}
.menu_content1 a{color:#d4d7da;padding:5px 20px 5px 20px;display:block;}
.menu_content1 a:hover{color:#2b2f32;padding:5px 20px 5px 20px;}
li.menu_content1_active{background:#ffffff;margin-right:5px;float:left;color:#2b2f32;}
.menu_content1_active a{color:#2b2f32;padding:5px 20px 5px 20px;}

 /* Search Part Starts Here */
 .search_body1{margin-top:2px;color:#2b2f32;width:220px;height:20px;float:right;background:url(http://img511.imageshack.us/img511/540/searchinputbg4.gif) no-repeat;}
 .search_body1 a{padding:0px;display:inline-block;}
 .search_body1 a:hover{padding:0px;display:inline-block;}
 .search_body1 input[type="text"]{margin:1px 0px 0px 3px;width:180px;color:#2b2f32;background:none;border:none; vertical-align:top;}
 .search_body1 input[type="image"]{margin:1px 0px 0px 8px;}
 /* Search Part Ends Here */
 








2.HTML
Adaugati codul urmator in in template-ul overall_header dupa codul
Cod:
   <!-- END hitskin_preview -->

Continutul codului.

   <!-- BEGIN switch_login_popup -->






Cum ajungem la template-uri ?

Panou de administrare > Afisare > Template-uri > General > overall_header.

Cod Meniu






Cod:

<div class="main_body">
<div>
<div class="menu_left_part1"></div>
<div class="menu_body1">

<div class="menu_content1">
<ul>
<li class="menu_content1_active">
<a href="www.SiteulTau.org">HOME</a>
</li>
<li>
<a href="www.SiteulTau.org">HOME</a>
</li>
<li>
<a href="www.SiteulTau.org">HOME</a>
</li>
<li>
<a href="www.SiteulTau.org">HOME</a>
</li>
<li>
<a href="www.SiteulTau.org">HOME</a>
</li>
<li>
<a href="www.SiteulTau.org">HOME</a>
</li>
</ul>

<div class="search_body1">
<input type="text" name="search" /><a href="www.SiteulTau.org"><input style="margin-top:1px;" type="image" src="http://img844.imageshack.us/img844/1585/searchbtnt.gif" name="Search" /></a>
</div>


</div>
</div>
</div>
</div>







Tutorial realizat de Emanuel | DesignART

***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !

avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Simple Green Menu.

Mesaj Scris de Aleku la data de Sam Apr 30, 2011 10:03 am

O mică previzualizare ar fi fost de ajutor.
avatar
Aleku
Gold Member
Gold Member

Mesaje Mesaje : 325
Credite Credite : 304
Reputatie : 0
Varsta Varsta : 22

http://edtutorials.forumz.ro/

Sus In jos

Re: Tutorial - Simple Green Menu.

Mesaj Scris de Vizitato la data de Sam Apr 30, 2011 11:29 am

Am sa adaug maine Wink
avatar
Vizitato
Vizitator


Sus In jos

Re: Tutorial - Simple Green Menu.

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum