Menus avec trous, Fixer boutons , Barre nouveau message

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menus avec trous, Fixer boutons , Barre nouveau message

Message par Keenuts le Dim 27 Nov 2011 - 15:04

Bonjour Very Happy

Je me présente, Nathan, je gère depuis quelques temps un serveur Minecraft, et ai créé pour mes membres un piti forum. Mais le look de celui-ci a souvent été mis de côté. Ce week-end, j'ai décidé de m'y mettre. J'ai bidouillé 2/3 trucs, et ai réalisé la maquette principale de celui-ci.

le lien du Fofo >> http://serveur-sinan.forumgratuit.org/forum

Ma maquette :
Spoiler:

j'ai toutes les images sources, les boutons, une maîtrise correcte de Photoshop, mais pour ce qui est du Html, Php et css... Crying or Very sad

Voilà donc une petite liste de problèmes que je ne parviens pas à résoudre :

Problème n°1


Le menu contient des images, mais entre ces images, des trous... et les enlever je n'y suis point arrivé. j'ai testé pas mal de méthodes trouvées sur le net, mais rien de concluant... Aurais-je raté quelque chose ?


Problème n°2


Lorsque la largeur de la fenêtre est réduite, le boutons glissent l'un en dessous de l'autre... serait-il possible de le fixer ? de faire un design fixe et non extensible ?

Problème n°3


Le bouton message : Avant, était sous format texte, donc on pouvais voir lorsqu'il y avait un nouveau message >> "Messagerie [1 nouveau] mais maintenant, ce n'est plus possible, existe-il une manip a faire dans la CSS pour que ce bouton soit évolutif (comme le bouton connexion/deconnexion) ?

Problème réglé, il faudra que j'apprenne a lire correctement un tuto silent

Problème n°4


Est-il possible d'enlever la petite barre >>
Spoiler:

(ye sais, pas très doué pour surligner a la souris Razz )

Voilà, le tour est fait (pour le moment Mr. Green )
Merci beaucoup de votre aide,

Kee


Dernière édition par Keenuts le Dim 27 Nov 2011 - 16:42, édité 1 fois

Keenuts
Nouveau membre

Messages : 7
Inscrit(e) le : 27/11/2011

http://serveur-sinan.forumgratuit.org/forum
Keenuts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menus avec trous, Fixer boutons , Barre nouveau message

Message par Keenuts le Dim 27 Nov 2011 - 16:08


Je viens rajouter un petit problème : certains codes trouvés sur le net ne fonctionnent pas sur le forum... sans doute a cause d'un conflit...

Problème n°5

Le ' background-attachment: fixed; ' ne semble rien changer...

Voilà mon css
Spoiler:

#pun-title {
padding-left: 0px;
white-space: nowrap;
color: #dbdbdb;
font-family: Trajan Pro,Arial,Helvetica,sans-serif;
font-size: 20px;
}
body {
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;

}
.main .main-head .page-title {
font-size: 20px;
font-weight: normal;
}
/*IMAGE INDEX*/
#i_icon_mini_index{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Accueil.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_index:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Accueil_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - FAQ*/
#i_icon_mini_faq{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Faq.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_faq:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Faq_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - search*/
#i_icon_mini_search{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Rechercher.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_search:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Rechercher_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - MEMBRES*/
#i_icon_mini_members{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Membres.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_members:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Membres_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - GROUPES*/
#i_icon_mini_groups{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Groupes.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_groups:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Groupes_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - Profil*/
#i_icon_mini_profile{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Profil.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_profile:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Profil_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - MESSAGE*/
#i_icon_mini_message{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Messagerie.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_message:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Messagerie_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - Connexion*/
#i_icon_mini_login{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Connexion.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_login:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Connexion_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - DEConnexion*/
#i_icon_mini_logout{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Deconnexion.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_logout:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Deconnexion_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - Inscription*/
#i_icon_mini_register{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Inscription.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_register:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/Inscription_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - News*/
#bouton_News{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/News.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#bouton_News:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/News_S.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE - MessageEnvoye*/
#i_icon_mini_new_message{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/NouveauMessage.png'); /*image si la souris ne survole pas*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_new_message:hover{
background-image:url('http://www.studiopixl.com/Sinan/MenusForum/NouveauMessage.png'); /*image si la souris survole*/
width:150px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}

Toutes mes images sont hébergées sur mon nom de domaine de portfolio (raison donc pour les www.studiopixl.com/blabla... )

Bonne journée

Kee

Keenuts
Nouveau membre

Messages : 7
Inscrit(e) le : 27/11/2011

http://serveur-sinan.forumgratuit.org/forum
Keenuts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menus avec trous, Fixer boutons , Barre nouveau message

Message par Threax le Dim 27 Nov 2011 - 16:21

Bonjour,

Je vous rappelle qu'à l'avenir, un seul problème par sujet sera toléré, comme le demandent les règles... Wink

Pour votre premier problème (espace des boutons de la barre de navigation), ajoutez ceci à votre CSS (PA > Affichage > Couleurs > Feuille de style) :
Code:
#pun-navlinks li a.mainmenu {
  margin: 0!important;
}

Pour votre second problème, vous devriez déjà centrer le fond pour que ça colle à peu près pour les résolutions :
Code:
body {
  background-position: center top;
}
Vous pouvez forcer les boutons à s'afficher sur une seule ligne, mais ça risque de pas être très pratique pour les résolutions inférieures... à moins de réduire vos boutons.
Mais quoiqu'il en soit, voici le code :
Code:
#pun-navlinks ul {
  white-space : nowrap;
}

Pour votre 4ème problème :
Code:
#pun-visit {
  display: none;
}

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menus avec trous, Fixer boutons , Barre nouveau message

Message par Keenuts le Dim 27 Nov 2011 - 16:41


Merci beaucoup, tout fonctionne impeccablement Very Happy
Pour la taille des boutons je pensait les faire avec un script, le même que celui des fond de taille différentes afin de s'adapter aux résolutions.

Désolé pour les multi-problèmes, je ne voulais pas innonder le forum avec mes soucis Razz

Je change le titre et met résolu

Keenuts
Nouveau membre

Messages : 7
Inscrit(e) le : 27/11/2011

http://serveur-sinan.forumgratuit.org/forum
Keenuts a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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