Aide pour taille du forum

[k78370]

Bonjour à tous et à toutes,

Si j'ai posté ce sujet au mauvais endroit, je m'en excuse (je me suis inscrit aujourd'hui).

J'ai crée mon forum cette après-midi. Il a bien avancé mais un problème se pose.

Voilà mon problème:

Donc, j'aimerais (si c'est possible) réduire la taille du forum pour qu'il puisse "entrer" ou se "coordonner" avec le fond du forum.

J'ai pris un screen:

Voilà, je voudrais que tous les textes puissent être rétrécis et qu'ils ne dépassent pas sur les cotés du fond.

Si cela est possible, si vous pourriez m'expliquer, sa serrais sympa. Si ce n'est pas possible, je changerais de thème (dernier recourt)

Voilà, j'espère m'avoir bien exprimé. Si vous ne comprenez pas quelque chose, demandez-moi et n'hésitez pas.

C'est vraiment sympa ce que vous faîtes.
Merci à vous

[Automne]

Bonsoir,

Essayer de voir dans pa << général << forum << configuration, régler Structure des pages

Largeur du forum (nombre ou %) : 80%

Amicalement

[k78370]

Merci beaucoup, j'ai trouvé, ça à marché.

Mais en changeant cela, ça à décalé ma bannière vers la droite et maintenant elle n'est plus centré.
Je suis allé dans: P.A->Affichage->page d'accueil->en tête et navigation->position du logo: centré.
Mais ça ne marche pas.
Voici un screen:
Les rectangles rouges montrent le décalage.

Donc je ne trouve pas la solution.
Si vous pouviez m'aider.

[Automne]

bonjour,

je pense que la largeur de la bannière est trop grande, 800px × 178px, vous pouvez la rétrécir, avec un logiciel comme photofiltre par exemple.

Attendez, je vais demander confirmation a une amie, parce qu'apparemment il n'y a pas que la bannière de décalé, je vous tiens au courant.

[k78370]

J'ai réduis la bannière à 775*173.

Voici un screen:

La bannière est trop petite sur la gauche. ET quand j'augmente la taille de la bannière, elle dépasse sur la droite.

Je vous remercie pour votre aide.

[quierra]

Coucou, Ne réduit pas ton image ! Il suffit de mettre dans ton css :

Affichage --> Couleurs --> Onglet feuille de style css

.headerbar { padding: 0pt 0px; }

Et tu n'auras plus d'écart.

Par contre si tu veux une largeur fixe et que tous voit la même chose, je te conseille de mettre 800px en largeur de forum et non "80% !

Regarde de quelle façon je vois ton forum sur un écran 24pouces :



80% d'un écran 24 ne sera pas la même chose que 80% d'un écran 17 pouces, par contre 800px sera la même chose sur toutes les résolutions.

Il faudrait centrer ton image :

body{
background-position: top center;
}

Mais le gros problème est qu'elle est beaucoup trop petite ! Tu dois avoir un petit écran donc chez toi ça passe, mais les autres
n'auront sans doute pas le même affichage que toi !
Pour un fond qui ne doit pas se répéter, je le fait en 1900px (minimum) mais en général en 2200px de large et 1300px de haut.

Bonne journée.

[k78370]

Merci de ta réponse. Dans le css, j'efface tout ? puis je met ça .headerbar { padding: 0pt 0px; } ?

[quierra]

Mais non, n'efface pas tout, tu en as sans doute besoin.
Rajoute le tout à la fin...

[k78370]

Ceci, j'y met ou ?
body{
background-position: top center;
}

[quierra]

Idem, dans ton css.

[k78370]

J'ai redimensionné le fond en 2200*1300.

J'ai inséré dans le css les 2 codes que vous m'avez donné.
Un problème apparaît, le fond est tout noir.
Les nom des sujets du forum sont aussi décalés vers la droite.

Comment faire et qu'est ce qu'il faut que je fasse ?

[quierra]

Tu n'as pas modifié la largeur de ton forum

Général --> Affichage -->à largeur du forum, tu mets 800 .

Pour moi c'est parfait pour le fond !



Pour le nom des sujets, ça n'a aucun rapport avec ces codes... Essais déjà de bien régler ta largeur.

[k78370]

Où est ce que je règle la largeur du forum?

[quierra]

ha je vois ! Tu as redimensionnée ton image sans tenir compte des 800px de la partie du centre.

Ben attend quelques minutes, j'essaie de te refaire ton fond à la bonne largeur et en tenant compte de la partie centrale de 800px.

[quierra]

Général --> Affichage -->à largeur du forum, tu mets 800 .

[quierra]

voila c'est fait :



https://i.servimg.com/u/f68/11/48/82/15/fond3110.jpg

Reste plus qu'à remplacer ton image.

[k78370]

Je te remercie franchement.

Pour redimensionner la largeur du forum, tu me dis: Général --> Affichage -->à largeur du forum, tu mets 800

Mais quand je vais dans général, je ne trouve pas affichage. A moins que c'est directement dans l'onglet Affichage.

Puis, la bannière n'est toujours pas centrer au milieu du fond.

[quierra]

OUps ! pardon ! C'est :

Général --> Configuration -->

Le décalage vient de ton fond ! Tu n'as pas centré la partie centrale... Je te l'ai refait en centrant cette partie :



https://i.servimg.com/u/f68/11/48/82/15/fond3111.jpg

[k78370]

Un grand merci à toi. Tu a résolu mon problème.

Un dernier truc:

Voici mon forum: http://freddesign.fr-bb.com

Est-il possible de remonter le menu pour qu'il soit collé à la bannière et qu'il fasse la même taille que la bannière?

[k78370]

Un petit up

[quierra]

Coucou, pour remonter la navigation :

.headerbar .navbar{
margin-top: -15px;
background-image: url('https://i.servimg.com/u/f68/11/48/82/15/p110.jpg');
backgournd-repeat: repeat-x;
}

A placer tout à la fin de ton css.

Le plus logique aurait été de faire ta navigation de la même largeur que ton header, là j'ai mis une image de fond à "navbar" qui n'est qu'un ptit bout pris sur un bouton et qui va se répéter horizontalement.

Bonne journée.

[k78370]

Merci,
J'ai ajouté le code au CSS toute à la fin mais ça n'a rien changé.
Je ne sais pas pourquoi.
Auriez-vous une idée?

[quierra]

Alors essaie :

#page-header .navbar{
margin-top: -15px;
background-image: url('https://i.servimg.com/u/f68/11/48/82/15/p110.jpg');
backgournd-repeat: repeat-x;
}

[k78370]

Merci ça à marché.

Mais ça a fait un truc bizarre:

[quierra]

Ouai, ben au moins là je vois mieux.

Tu supprimes les codes que je t'ai donné aujourd'hui et tu les remplace par :

ul.navlinks {
border-bottom: 0px solid rgb(38, 38, 38);
padding: 0px;
margin: -4px 0px 0px;
}


.headerbar {
margin-bottom: 0px;
}

#page-header .navbar { background-image: url("https://i.servimg.com/u/f68/11/48/82/15/p110.jpg");
background-repeat: repeat-x;
padding-top: 0pt;
margin-top: 0px;
}

Ce devrait être pile poil :

[k78370]

Oh super!
Tu gère !

Euh le seul truc, c'est que quand j'ai mis dans le CSS un code que tu m'a donné, ça a centré les sujets:


Et un dernier truc (désolé dans demander autant):
Est ce que tu pourrais me donné le code CSS pour que quand on passe la souris sur un bouton du menu, le bouton deviennent bleu (j'ai déjà le bouton bleu)?

[quierra]

Euh le seul truc, c'est que quand j'ai mis dans le CSS un code que tu m'a donné, ça a centré les sujets:

Aucuns des codes remis, n'ont de rapport avec le titre de tes forums ! Donc non, l'erreur n'est pas là.

Par contre en regardant avec Firebug, j'ai l'impression que tu as mis une largeur à ton icône de "255px" ! Car c'est elle qui pousse le texte.

Alors revérifie tes réglages dans :

Général --> Configuration --> Largeur de la cellule image catégorie/forum

Et mets une valeur normale, à peut prêt 10px de plus que ton icône, mais pas 255px !

Il y a plusieurs moyens pour avoir un effet au survol.

Je conseille les boutons doubles qui ont l'avantages de ne pas faire de "blanc" entre les deux états.

Je te colle un tuto que j'ai fait sur mon forum :

On commence par créer le bouton...

Exemple d'images à créer :

A l'aide du code, seul un état sera visible, l'avantage est qu'une seule image est chargée par le navigateur, il n'y a donc pas de "blanc possible" entre les deux états.

Ensuite nous allons placer une image "vide" dans le tableau image à la place de ces boutons :

Affichage--> Gestion des images --> Mode Avancé --> Onglet, Général navigation

Coller cette image "vide" de Index à Déconnexion : https://2img.net/i/fa/empty.gif

Maintenant on va placer toutes les images de la navigation dans le css

Affichage--> Couleurs --> Onglet Feuille de style css

#i_icon_mini_index{width:85px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_gallery{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_calendar{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_portal{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_faq{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_search{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_members{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_groups{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_profile{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_message{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_new_message{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_logout{width:41px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_register{width:86px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

#i_icon_mini_login{width:41px; height:32px; background:url(adresse de l'image) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(adresse de l'image) no-repeat 0 -32px;}

Explication du code :

#i_icon_mini_index ==> Identifiant du bouton
width:85px; ==> la largeur du bouton

height:32px; ==> la hauteur du bouton, ATTENTION ! ce n'est que la partie visible ! donc la moitié de la hauteur du bouton, un bouton de 60px de haut, sera marqué à 30px de hauteur.

background:url(adresse de l'image) ==> Adresse de l'image, la même bien sur.

no-repeat 0 0; ==> La position de l'image.

Au hover (survol) :

#i_icon_mini_index:hover ==> Identifiant du bouton survolé.

background:url(adresse de l'image) ==> la même image vue que c'est le même bouton.

no-repeat 0 -32px; ==> La position au survol, le -32 correspond à la hauteur de la partie devant être affiché.

Sinon tu as le simple hover, donc une autre image qui s'affiche au survol, je te recolle une partie d'un tuto fait à cet effet :

On commence par créer deux boutons différent, l'un à l'état normal et l'autre à l'état survolé...

Exemple d'images à créer :

Ensuite nous allons placer une image "vide" dans le tableau image à la place de ces boutons :

Affichage--> Gestion des images --> Mode Avancé --> Onglet, Général navigation

Coller cette image "vide" de Index à Déconnexion : https://2img.net/i/fa/empty.gif

Maintenant on va placer toutes les images de la navigation dans le css

Affichage--> Couleurs --> Onglet Feuille de style css

#i_icon_mini_index{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_calendar{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_gallery{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_portal{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_groups{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_members{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_profile{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_faq{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_search{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}
#i_icon_mini_logout{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_login{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_message{
background-image: url('adresse de l'image');
width: 95px;
height: 35px;
}

#i_icon_mini_new_message{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_register{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

On reprend le tout en rajoutant un &quot;:hover&quot; modifier l'adresse de l'image par celle représentant l'état au survol !

#i_icon_mini_register:hover{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

#i_icon_mini_new_message:hover{
background-image: url('adresse de l'image');
width: largeur;
height: hauteur;
}

etc.... bref ce n'est pas bien compliqué !

Tu peux aussi faire des boutons avec trois état et même plus... Enfin, là tu as déjà de quoi faire.

[k78370]

Donc voilà, j'ai bien suivi ton tutoriel qui m'a vraiment beaucoup aidé.

Le seul petit problème. C'est que quand je passe la souris sur le bouton, le bouton disparaît.

Et le truc le plus bizarre: quand je met ma souris en-dessous du bouton, le bouton disparaît aussi.

Voici 2 screens:





Si tu pourrais m'aider, merci.

[k78370]

Je fais un petit up

[peki]

Bonjour, tous le monde.

Je me permet de poste mon message ici parsque je crois que j ai le meme probleme K78370 un peu point complexe je crois,j ai aussi un decalage sa fait 4h que j essaye de regle mais j arrive pas,et en plus j ai ajouter les deux css pour centre tout mais sa fait rien.


Voici mon forum:http://fifa-online-gaming.starac9.net


Please si vous pouvez m aider sa serait cool.


Merci.