Cum pot adauga un meniu vertical pe marginea forumului?

Rezumarea primului mesaj :

Cum spune şi titlu aş vrea să pun un meniu vertical pe marginea forumului. Sau meniul obişnuit să îl pun pe marginea forumului......

Folosesc versiunea de forum phpbb2.

Cu placere

Am gasit un topic cu aceasta imagine (pe un alt forum de suport)




Vedeti acel meniu pe marginea dreapta? Pe acela il caut.

Mda..... nu ma ajuta nimeni???? Chiar nu stie nimeni???

R@zv@n a scris:

Cod:

 <style type="text/css">
#navigationMenu{
   position:fixed;
        top: 10px;
        left: 0px;
}
 
#navigationMenu li{
   list-style:none;
   height:39px;
   padding:2px;
   width:40px;
}
 
#navigationMenu span{
   width:0;
   left:38px;
   padding:0;
   position:absolute;
   overflow:hidden;
 
   font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
   font-size:18px;
   font-weight:bold;
   letter-spacing:0.6px;
   white-space:nowrap;
   line-height:39px;
   
   /* CSS3 Transition: */
   -webkit-transition: 0.25s;
   /*-o-transition: 0.25s;*/
   
   /* Future proofing (these do not work yet): */
   -moz-transition: 0.25s;
   transition: 0.25s;
}
 
#navigationMenu a{
   background:url('http://img52.imageshack.us/img52/3637/navigationf.jpg') no-repeat;
 
   height:39px;
   width:38px;
   display:block;
   position:relative;
}
 
/* General hover styles */
 
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
   text-decoration:none;
   
   /* CSS outer glow with the box-shadow property */
   -moz-box-shadow:0 0 5px #9ddff5;
   -webkit-box-shadow:0 0 5px #9ddff5;
   box-shadow:0 0 5px #9ddff5;
}
 
/* Green Button */
 
#navigationMenu .home {   background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
   background-color:#7da315;
   color:#3d4f0c;
   text-shadow:1px 1px 0 #99bf31;
}
 
/* Blue Button */
 
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
   background-color:#1e8bb4;
   color:#223a44;
   text-shadow:1px 1px 0 #44a8d0;
}
 
/* Orange Button */
 
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
   background-color:#c86c1f;
   color:#5a3517;
   text-shadow:1px 1px 0 #d28344;
}
 
/* Yellow Button */
 
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
   background-color:#d0a525;
   color:#604e18;
   text-shadow:1px 1px 0 #d8b54b;
}
 
/* Purple Button */
 
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
   background-color:#af1e83;
   color:#460f35;
   text-shadow:1px 1px 0 #d244a6;
}
 
 
a, a:visited,a:active {
   color:#0196e3;
   text-decoration:none;
   outline:none;
}
 
a:hover{
   text-decoration:none;
}
 
a img{
   border:none;
}
 
</style>
 
<ul id="navigationMenu">
    <li>
       <a class="home" href="forum.htm">
            <span>Home</span>
        </a>
    </li>
   
    <li>
       <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
   
    <li>
       <a class="services" href="/profile.forum?mode=editprofile">
            <span>Profile</span>
        </a>
    </li>
   
    <li>
       <a class="portfolio" href="portal.htm">
            <span>Portal</span>
        </a>
    </li>
   
    <li>
       <a class="contact" href="/contact.forum">
            <span>Contact us</span>
        </a>
    </li> 
</ul>

o pui tu cum vrei mai aproape in mesaj pe pagina de start o adaugi

cum pot face sa apara lipit de margine?

Mda.... este posibil ca nimeni sa nu stie sau doar faceti misto de mine???

O saptamana si nimic........ mda.......

frate poate nu stie lumea la ce te referi. incearca sa fi pe acest forum cat mai explicit. asa lumea te ajuta. dar daca nu sti limbajul web si nu explici cum trebe de unde sa stie lumea ce vrei?

hegedusu a scris:frate poate nu stie lumea la ce te referi. incearca sa fi pe acest forum cat mai explicit. asa lumea te ajuta. dar daca nu sti limbajul web si nu explici cum trebe de unde sa stie lumea ce vrei?

Mda... ce este asa greu? Am pus si imagini sa intelegeti mai bine -_-"

Cod:

<ul class="meniuvert">
   <li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/woothemesiconset/32/home.png" border="0"/></a></li>
   <li><a href="#"><img src="http://cdn4.iconfinder.com/data/icons/woothemesiconset/32/warning.png" border="0"/></a></li>
   <li><a href="#"><img src="http://cdn4.iconfinder.com/data/icons/woothemesiconset/32/search_button.png" border="0"/></a></li>
   <li><a href="#"><img src="http://cdn4.iconfinder.com/data/icons/woothemesiconset/32/comment.png" border="0"/></a></li>
</ul>

Adaugi in mesajul de pe pag. de start. (PA > afisare > Generalitati)
Si asta in CSS (PA > Afisare > Culori > Foaie de stil CSS) :

Cod:

ul.meniuvert{
  list-style: none;
  margin:0px;
  padding:0px;
  position:fixed;
  left:0px;
  top:250px;
}
ul.meniuvert li{
  padding-bottom:4px;
  padding-left:2px;
}
ul.meniuvert li img{
  opacity:0.5;
  transition-duration:0.5s;
  -moz-transition-duration:0.5s;
  -webkit-transition-duration:0.5s;
  -o-transition-duration:0.5s;
}
ul.meniuvert li img:hover{
  opacity:1.0;
}

Anonimu' a scris:

Cod:

<ul class="meniuvert">
   <li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/woothemesiconset/32/home.png" border="0"/></a></li>
   <li><a href="#"><img src="http://cdn4.iconfinder.com/data/icons/woothemesiconset/32/warning.png" border="0"/></a></li>
   <li><a href="#"><img src="http://cdn4.iconfinder.com/data/icons/woothemesiconset/32/search_button.png" border="0"/></a></li>
   <li><a href="#"><img src="http://cdn4.iconfinder.com/data/icons/woothemesiconset/32/comment.png" border="0"/></a></li>
</ul>

Adaugi in mesajul de pe pag. de start. (PA > afisare > Generalitati)
Si asta in CSS (PA > Afisare > Culori > Foaie de stil CSS) :

Cod:

ul.meniuvert{
  list-style: none;
  margin:0px;
  padding:0px;
  position:fixed;
  left:0px;
  top:250px;
}
ul.meniuvert li{
  padding-bottom:4px;
  padding-left:2px;
}
ul.meniuvert li img{
  opacity:0.5;
  transition-duration:0.5s;
  -moz-transition-duration:0.5s;
  -webkit-transition-duration:0.5s;
  -o-transition-duration:0.5s;
}
ul.meniuvert li img:hover{
  opacity:1.0;
}

Acesta este cel pe care il cautam, multumesc ! Puteti inchide topicul !