Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Lun 30 Avr 2012 - 4:10
coucou

Pour avoir un rendu optimal, il va falloir connaitre la taille de vos boutons et la position
de ces derniers: à droite, à gauche hinhin .

Rappel de la gestion des images:

Affichage/Images et couleurs/Gestion des images/Mode avançé






Pour le tuto, on partira avec une image de 130 px de large et une hauteur de 30px
que l'on placera à gauche sur l'index avec les bordures droites arrondies clin oeil .

On laisse apparaitre que 30px dans ce cas sur tous les boutons figurant à
gauche puis on place à partir du haut avec un espace de 40 px clin oeil chaque boutons.
sauf le premier qui sera placé à 5px du haut puis le suivant à 45 px puis le suivant à 90px
puis le suivant à 135px etc etc.

Allez c'est parti tape la .

Dans ta feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style



Pour l’accueil

Code:

#i_icon_mini_index
{
 position:fixed;
 top:5px;
 left:-100px;
 -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}


Le portail

Code:
 
#i_icon_mini_portal
{
position:fixed;
top:45px;
left:-100px;
 -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}


La F.a.q
Code:
 
#i_icon_mini_faq
{
position:fixed;
top:90px;
left:-100px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}


Rechercher
Code:
 
#i_icon_mini_search
{
  position:fixed;
  top:135px;
 left:-100px;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}



Membres

Code:
 
#i_icon_mini_members
{
position:fixed;
top:180px;
left:-100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}


Groupes

Code:
 
#i_icon_mini_groups
{
 position:fixed;
top:220px;
left:-100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}


Profil

Code:
 
#i_icon_mini_profile
{
position:fixed;
top:260px;
left:-100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

}


Calendrier ( si activé)

Code:
 
#i_icon_mini_calendar
{
position:fixed;
top:300px;
left:-100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}



Galerie ( si activée )

Code:
 
# i_icon_mini_gallery
{
position:fixed;
top:340px;
left:-100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}


Messages Privés et Nouveaux Messages Privés devront être placés
au même endroit.


Code:
 
#i_icon_mini_message ,#i_icon_mini_new_message
{
position:fixed;
top:380px;
left:-100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

}


Connexion et Déconnexion devront eux aussi être placés au même endroit :


Code:
 
#i_icon_mini_logout , #i_icon_mini_login
{
position:fixed;
top:420px;
left:-100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}



S'enregistrer

Code:
 
#i_icon_mini_register
{
position:fixed;
top:440px;
left:-100px;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}





Voilà les codes pour tous les boutons de navigation présents sur forumactif.

Bon ben voilà c'est fini moqueur
ben c'est pas très chouette comme çà MDR ...

Il va falloir donner l'effet pour que chaque bouton lors du survol se déplace à droite
pour voir la totalité de l'image hinhin .


on reprend tous et on ajoute :hover à la fin hinhin

Code:

#i_icon_mini_index:hover ,
#i_icon_mini_portal:hover ,
#i_icon_mini_faq:hover ,
#i_icon_mini_search:hover ,
#i_icon_mini_members:hover ,
#i_icon_mini_groups:hover ,
#i_icon_mini_profile:hover ,
#i_icon_mini_calendar:hover ,
#i_icon_mini_gallery:hover ,
#i_icon_mini_logout:hover ,
#i_icon_mini_login:hover ,
#i_icon_mini_message:hover ,
#i_icon_mini_new_message:hover ,
#i_icon_mini_register:hover
{
left:0px;
}



Pour mettre les boutons à droite il vous suffira de modifier dans chaque class le left par right
et pour le survol changer left par right.




Voilà c'est tout pour le moment.
coucou








Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  • © PunBB | Signaler un abus