Bannière et Background du fofo, Police et Orientation des titres du menu accordéon

[gdumouli]

Afin d'obtenir une réponse rapidement, nous vous demandons de préciser dans votre sujet :
- http://cmc-airsoft.forumactif.org/forum
- phpBB2
- Administrateur non fondateur,
- si vous avez modifié des templates. NON
- si vous avez du CSS personnalisé, OUI
- FireFox, Chrome, Opéra.


Voilà, j'aimerais que l'image de fond et la bannière soit adapté à la taille de de l'écran.


J'ai essayé de rajouter width:100% dans :

Code:


body {  /* fond de votre forum */
   background-color: #000000;
   background-image: url("http://i43.servimg.com/u/f43/17/83/44/81/americ12.jpg");
   background-attachment: fixed;


Mais ca n'a rien fait


voici le code complet

http://cartholesjedi32.free.fr/AirSoft/fofo.txt

[Invité]

Salut, je peux redimensionner votre image, vous devez me donner la taille en pixel.

[gdumouli]

Bonjour,

Redimensionner l'image je sais le faire ...

Mais je veux que mon image s'adapte à la taille de l'écran.

Moi sur mon 18 pouces, je vois plus de détails (du fond) que sur un 15 pouces. Par contre sur mon 10 pouces je vois pratiquement rien

Redimensionner mon image pour mon 10 pouces, bé ca fera ridicule quand j'irais sur un 15 ou 18 pouces.


Je voudrais faire de même à la bannière sans toucher à l'image.

Merci pour ton aide

[Invité]

Salut , regarde ce tuto > https://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur#2531683

@++

[gdumouli]

Merciiiii.

Ca marche, mais au niveau des tailles c'est pas encore çà. Mais ca n'est plus qu'une question de taille donc ca va vite se régler


Si je veux faire la même chose pour le logo.

Donc, je fais un Javascript, avec le code suivant :

Code:


var bg= "logo1";

if(screen.width < 481) bg="logo2";
else if(screen.width < 801) bg="logo3";
else if(screen.width < 1025) bg="logo4";
else if(screen.width < 1281) bg="logo5";
else if(screen.width < 1601) bg="logo6";

document.body.style.backgroundImage="url(\""+bg+"\")";

});


En remplaçant tout les bg par header ?

Code:


var header= "logo1";

if(screen.width < 481) header="logo2";
else if(screen.width < 801) header="logo3";
else if(screen.width < 1025) header="logo4";
else if(screen.width < 1281) header="logo5";
else if(screen.width < 1601) header="logo6";

document.body.style.headerImage="url(\""+header+"\")";

});


Après, j'ai un autre soucis.
La largeur de mon forum, j'aimerais qu'elle s'adapte également à la résolution de l'écran.

dans mon CSS, j'ai ce code trouvé ici ( https://forum.forumactif.com/t304289-probleme-largeur-du-forum ) :

Code:


.bodylinewidth {
   width:900px !important}


et

Code:


#content-container #left {
   width: 0px;
   margin-right: px;
   }
#content-container #right {
   width: 0px;
   margin-left: px;


Puis dans PA> Config > Structure de Pages.

Largeur du forum : que je mette 1% ou 100%, mon forum ne s'adapte pas à mon écran.


Voilà le CSS complet : http://cartholesjedi32.free.fr/AirSoft/fofo.txt



Merci.

[gdumouli]

Un petit UP ...

[gdumouli]

Up ...

toujours à la recherche d'une aide et âme charitable ...

[MlleAlys]

le "900px" fixe une largeur absolue, le "!important" juste derrière fait passer cette règle avant tout autre, c'est donc normal que la largeur ne se modifie plus.
après... je ne m'y connais pas trop en résolution, et je n'ai pas bien compris à quoi servait le code suivant =S

[gdumouli]

Merciii pour ta réponse

Vais essayer en retirant important


Je vais donc continuer à attendre voir si autre chose doit changer dans mon CSS


Sinon pour ajuster la bannière (ou logo) comme le fond (le background), tu as une idée ?

Ou j'attends un pro du dimensionnement ?


edit : Ca ne fonctionne pas à retirant important

[MlleAlys]

ça ne marche pas quand tu fais quoi exactement ? si c'est quand tu indiques un autre pourcentage pour la largeur du forum dans le PA, c'est normal : tu viens de marquer dans le css une largeur absolue à 900 px, les deux se contredisent donc. Il faut que tu retires le code de ton css (en fait, je n'ai pas bien compris pourquoi l'avoir mis en premier lieu ^^").
=> dans le PA, mettre une largeur en % modifiera la largeur du forum en fonction de la résolution de l'écran. cependant, cela peut entrainer quelques soucis d'affichages (superpositions, etc) lorsque l'écran est plus petit (ce cas là https://forum.forumactif.com/t327002-peut-on-avoir-une-resolution-qui-s-adapte-a-chaque-membre?highlight=header+r%E9solution )
=> avec une largeur absolue, plus de problème de ce côté, mais une barre de défilement si la largeur de l'écran est plus petite que celle du forum.

Pour le cas header, je pense que cela sera effectivement sur le même principe que la résolution du fond, mais je ne pense pas que le nom de l'objet soit "header"...
(après, si la largeur du forum est fixe, il n'y a plus de problème de header... si ? ^^")

Voilà donc la limite de mes capacités en la matière, désolée ><"

[gdumouli]

Voilà donc la limite de mes capacités en la matière, désolée ><"

Toute aide est bonne à prendre il n'y a pas à être désolé.
Tu m'expliques, ca me fait progresser ... Merci à toi

Sinon :

J'ai retiré la ligne de code dans le CSS.

Dans le PA, j'ai essayé 85% puis même 900 px, 700 px, 2 px ... Le forum ne veux rien savoir la taille ne veux pas bouger.


Et là, je ne sais pas pourquoi, mais j'ai enlevé tout simplement la bannière.

Et j'ai pu donc régler la taille du forum.
Donc ce pourrait il que le header (logo) conditionne la taille du fofo ?



Donc, il me reste plus qu'à savoir comment régler la taille de mon header (logo) en fonction de la taille de l'écran de l'utilisateur. Et le tour sera joué.

Donc comment régler la taille du logo ? svp


Le code correspondant au logo c'est celui là ?
Mais si je fixe un px, ca sera pas adapté.
Donc c'est plutot un javascript qu'il me faut ?

Edit :

Code:


table.bodylinewidth img#i_logo,.browse-arrows,.noprint,.messaging,.post-options,.poster-profile,img.i_icon_online,table.bodylinewidth .mainmenu,table.bodylinewidth .nav,table.bodylinewidth .gensmall,span.postdetails img,table.bodylinewidth .sig,table.bodylinewidth .catbottom,#info_open {
   display:none;
   }


[MlleAlys]

ce qui est sûr, c'est que la taille de l'image de la bannière n'est pas modifiée lorsqu'on change la largeur du forum ^^
bon courage pour la suite en tout cas

[gdumouli]

Un petit UP, je n'arrive toujours pour ma bannière


Après, une autre petit question aussi toujours sur la résolution.


Quand un membre poste une image, si l'écran est trop petit il y a la barre horizontal de défilement qui apparait. Il n'y a t'il pas un moyen que malgré la résolution de la photo poster, celle-ci s'adapte à la taille du forum ( nb : forum qui s'adapte à la taille de l'écran)

[gdumouli]

Petit UP.

Même question sur mon précédent message ...

Merciiii

[gdumouli]

Tjs à la recherche d'aide ...

Merciii

[MlleAlys]

je ne pense pas...
ou alors en fait, ça reviendrait à un effet de zoom, ce que chaque utilisateur peut modifier lui-même ^^"

[gdumouli]

je ne pense pas...
ou alors en fait, ça reviendrait à un effet de zoom, ce que chaque utilisateur peut modifier lui-même ^^"

On sait jamais vu qu'on peux programmer plein de choses ... je me suis dit que c'était peu être faisable


En attendant, je bûche toujours sur ma bannière ...

J'ai trouvé un autre tuto sur votre fofo ( https://forum.forumactif.com/t329195-adapter-le-header-a-toutes-les-resolutions-d-ecrans?highlight=header ), j'ai testé ... marche pas ... Je vais essayer de voir si je l'ai bien fait.


https://forum.forumactif.com/t335456-resolution-et-logo?highlight=logo
Marche pas non plus ce tuto


https://forum.forumactif.com/t325519-changement-grandeur-logo-automatiquement?highlight=logo

Celui y'a du changement ... mais c'est pas çà ...
Mon logo fait 1240px par 322px.
J'ai collé ce code

Code:


#i_logo
{
width: 100%;
heigth: 100%;
margin: 10px;
}


Juste en dessous du body

Code:


body {
   background-color: #000000;
   background-position: top center;
        background-attachment: fixed;
      }
#i_logo
{
width: 100%;
heigth: 100%;
margin: 10px;
}

* html {
   scrollbar-face-color: #;
   scrollbar-highlight-color: #;
   scrollbar-shadow-color: #;
   scrollbar-3dlight-color: #;
   scrollbar-arrow-color: #;
   scrollbar-track-color: #;
   scrollbar-darkshadow-color: #;
   }


Donc ca me fait un rectangle noir minuscule ...
Voyez par vous même : http://cmc-test.forumactif.org

[gdumouli]

UP ...

[gdumouli]

Je comprends pas pourquoi cette bannière en 1024x322 soit si petite avec le code que j'ai rajouté (voir msg au dessus )

Je sèche complètement ... Toujours à la recherche d'une âme charitable. Je up donc.


Ps : j'ai essayé l'astuce de mettre la bannière sur l'image de fond. Mais sur Ipad et Iphone, je me trouvre bloqué car l'image de fond est en mode répétition.

[gdumouli]

Up

[gdumouli]

Up

[gdumouli]

up

[gdumouli]

Bonjour Bonjour !!

Toujours à la recherche d'aide pour ma bannière.


Et une autre petit demande :

http://cmc-test.forumactif.org/


Le menu en accordéon.

La police des différents menus (en blanc) : Comment la changer ? elle est en gras ( on dirait ) puis légèrement couper sur le haut. Et aussi peux t'on écrire verticalement ?

Sur ce même menu, j'ai une bande grise sur le haut, on dirait que les menus ne remplissent pas toute la hauteur ?


Merciiii beaucoup.

[gdumouli]

Tjs à le recherche d'aide

[MlleAlys]

Pour faire les modifications sur le code, il faudrait que tu donnes celui ci ^^
Sinon, on peut ajouter des corrections au css :

pour la marge en haut :

Code:

.accordion .slide > h2 {
margin-top: 0px;
}

pour décoller le texte du bord :

Code:

.rounded .slide > h2 span {
padding-right: 7px;
}

pour la police, je ne pense pas que cela soit possible de mettre l'inscription à la verticale, mais la modifier oui :

Code:

.accordion .slide > h2 {
font-size: 10px;    /*taille du texte*/
color: #XXXXXX;    /*code html ou nom de la couleur*/
font-weight: 100;  /*pour retirer le gras*/
font-family: verdana  /*police*/
}

etc. avec toutes les propriétés de style css.

Si tu veux augmenter la hauteur des "intercallaires" (la taille originale est 130 px) :

Code:

h2 {
width: 150px !important;
}
#accordeon-pa {
height: 150px !important;
}

[gdumouli]

Pour faire les modifications sur le code, il faudrait que tu donnes celui ci ^^

Bé, je m'excuse de ne pas le donner tout le temps ... mais il est sur mon tout premier post ... mais je vais le redonner le voilà ici sur mon FTP

Avec tes modifs.

http://cartholesjedi32.free.fr/AirSoft/fofo.txt


Tout fonctionne sauf le gras ( font-weight: 100; ), c'est toujours aussi gras ...



Merciii beaucoup en tout cas

[AenigmA]

Bonjour,
Pour ton logo :

Code:

#i_logo {
width: auto;
margin-left: auto;
margin-right: auto;
}

[gdumouli]

Bonjour,
Pour ton logo :

Code:

#i_logo {
width: auto;
margin-left: auto;
margin-right: auto;
}

Bonjour Bonjour
Avant tout : Merci.
La bannière est à la taille où elle a été uploader.

Donc maintenant elle est trop grande pour ma résolution d'écran ( je suis sur un 13 pouces)

Je pourrais régler directement la taille de l'image, mais de ce fait les autres utilisateurs auraient une bannière ridicule sur leur 15 pouces, 18 pouces ou 22 pouces

Je voudrais un "truc" qui fonctionne comme le background qui s'adapte à la résolution de l'écran du l'utilisateur.


Merci pour ton aide.

[gdumouli]

Petit UP

[gdumouli]

Bonjour,

Code:

#i_logo {
width: auto;
margin-left: auto;
margin-right: auto;
}

Merciii à toi avec ce que tu m'as donné j'ai bidouillé un peu et ca marche.

j'ai changé width par height
j'ai changé le auto par un %
Enlever les margin et ca marche nickel


merci à toi

Je pensais avoir déjà essayé ce code mais apparemment non.


Donc, j'ai bientôt fini de vous embêtez.

Je voudrais juste savoir si c'est possible d"écrire verticalement le titre des onglets du menu accordéon.

MlleAlys pense que c'est pas possible, mais j'aimerais d'autres avis ...

Merciiiiiii

Je redonne mon CSS au cas ou

http://cartholesjedi32.free.fr/AirSoft/fofo.txt


Merciiiii