Toolbar - Choisir sa largeur

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

Résolu Toolbar - Choisir sa largeur

Message par Ejayremy le Lun 14 Juil 2014 - 12:24

Bonjour,

J'ai une question à propos de la Toolbar.
Est-il possible de choisir sa largeur afin que les logo par exemple ne soit pas collé sur la droite ? Par exemple choisir la même largeur que son forum ?

La barre ferait bien entendu la totalité de la largeur de la page mais les textes et logo de notre toolbar serait en adéquation avec la largeur que nous avons choisis pour notre forum.

J'espère avoir été clair, ce n'est pas facile a expliquer.
Merci de votre aide.


Dernière édition par Ejayremy le Sam 2 Aoû 2014 - 7:45, édité 1 fois

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 le Lun 14 Juil 2014 - 20:53

Tentez avec ce css

Code:
#fa_toolbar {
width: XXpx;
margin-left: auto;
margin-right: auto;
}

demeter1
+ Hyperactif +

Masculin
Messages : 8232
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par *Henry* le Lun 14 Juil 2014 - 21:48

Bonsoir ...
comme vous avez déjà personnalise votre Toolbar, il y des changements multiples à effectuer dans votre CSS :
Code:
.fa_toolbar_XL_Sized {
  margin-left: auto;   /* nouvelle */
  margin-right: auto;   /* nouvelle */
  min-width: 970px;    /* ancien valeur 980px */
  width: 970px;         /* ancien valeur 100% */
}
#fa_toolbar {
  background-color: #353535;
  color: #ffffff;
  font-family: Helvetica,Verdana,Arial;
  font-size: 10px;   /* ancien valeur 16px */
  height: 30px;
  left: 0;
  z-index: 20002;
}
#fa_search #fa_textarea {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-bottom-color: -moz-use-text-color;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-style: none;
  border-bottom-width: 0;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  border-image-slice: 100% 100% 100% 100%;
  border-image-source: none;
  border-image-width: 1 1 1 1;
  border-left-color-ltr-source: physical;
  border-left-color-rtl-source: physical;
  border-left-color-value: -moz-use-text-color;
  border-left-style-ltr-source: physical;
  border-left-style-rtl-source: physical;
  border-left-style-value: none;
  border-left-width-ltr-source: physical;
  border-left-width-rtl-source: physical;
  border-left-width-value: 0;
  border-right-color-ltr-source: physical;
  border-right-color-rtl-source: physical;
  border-right-color-value: -moz-use-text-color;
  border-right-style-ltr-source: physical;
  border-right-style-rtl-source: physical;
  border-right-style-value: none;
  border-right-width-ltr-source: physical;
  border-right-width-rtl-source: physical;
  border-right-width-value: 0;
  border-top-color: -moz-use-text-color;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top-style: none;
  border-top-width: 0;
  height: 24px;
  line-height: 24px;
  margin-top: 3px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  text-indent: 30px !important;
  width: 120px;      /* ancien valeur 200px */
}
Résultat calcule :


Cordialement
Henry

*Henry*
+ Hyperactif +

Masculin
Messages : 2418
Inscrit(e) le : 11/04/2008

http://ww0.topp-henry.com
*Henry* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Lun 14 Juil 2014 - 23:14

Merci de votre aide mais ça ne fait rien. Neutral 

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 le Lun 14 Juil 2014 - 23:19

Un "ça ne fait rien" ne fera pas avancer la problématique.
Quel css avez vous essayé??

demeter1
+ Hyperactif +

Masculin
Messages : 8232
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Lun 14 Juil 2014 - 23:22

@demeter1 a écrit:Un "ça ne fait rien" ne fera pas avancer la problématique.
Quel css avez vous essayé??
En premier lieu j'ai essayé le second CSS donné puis en actualisant en F5 et ne voyant pas de modification j'ai testé le premier mais pareil.

EDIT : Le premier code est sympa mais la barre ne va pas de part en part de la page. Elle ne s'arrête qu'à 960px que je lui ai indiqué.
Ya t'il un moyen de la faire continuer mais que je texte commence bien comme il faut a 960px ?  Smile 

Merci à vous.

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par *Henry* le Lun 14 Juil 2014 - 23:46

Ré Bonsoir ...
Veuillez bien poster votre CSS personnalise pour une vérification s'il vous plaît.

Cordialement
Henry

*Henry*
+ Hyperactif +

Masculin
Messages : 2418
Inscrit(e) le : 11/04/2008

http://ww0.topp-henry.com
*Henry* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Lun 14 Juil 2014 - 23:49

@*Henry* a écrit:Ré Bonsoir ...
Veuillez bien poster votre CSS personnalise pour une vérification s'il vous plaît.

Cordialement
Henry
Ajout de votre code CSS en place.

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 le Lun 14 Juil 2014 - 23:51

Je viens de faire un essai avec le code que je vous ai foruni et il fonctionne sur ce forum :
http://crevettes-passion.forumgratuit.org/

1/ avez vous mis une valeur à la place de XX dans cette partie ??
Code:
width: XXpx;

2/ tentez acvec celui-ci
Code:
#fa_toolbar {
width: 500px !important;
margin-left: auto!important;
margin-right: auto!important;
}

faites varier le 500px à la valeur que vous souhaitez
Ps : comme vous l'a signalé Henrie, il faudra modifier la taille des écritures dans votre css initial pour éviter un retour à laligne automatique des infos.

demeter1
+ Hyperactif +

Masculin
Messages : 8232
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Lun 14 Juil 2014 - 23:53

@demeter1 a écrit:Je viens de faire un essai avec le code que je vous ai foruni et il fonctionne sur ce forum :
http://crevettes-passion.forumgratuit.org/

1/ avez vous mis une valeur à la place de XX dans cette partie ??
Code:
width: XXpx;

2/ tentez acvec celui-ci
Code:
#fa_toolbar {
width: 500px !important;
margin-left: auto!important;
margin-right: auto!important;
}

faites varier le 500px à la valeur que vous souhaitez
Ps : comme vous l'a signalé Henrie, il faudra modifier la taille des écritures dans votre css initial pour éviter un retour à laligne automatique des infos.
Merci, votre est bon mais la barre est "courte", elle ne fait pas la largeur de la page. En fait le texte de votre code commence comme il faut (pour ma part j'ai mis 960px, largeur de mon cadre forum), j'aurais aimés en plus garder la barre à droite et à gauche (de part en part de la page).

merci Wink

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 le Lun 14 Juil 2014 - 23:58

Vous modifiez tout simplement le
Code:
width: 500px !important;
par
Code:
width: 100% !important;

Ps : faites varier le 100% si vous souhaitez avoir un écart à gauche et à droite .

demeter1
+ Hyperactif +

Masculin
Messages : 8232
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Mar 15 Juil 2014 - 0:08

Je comprends mais ce qui je souhaite c'est avoir également les barres de chaque cotés que je n'ai plus du coup :


Le rendu devrait être comme ça :


Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 le Mar 15 Juil 2014 - 0:13

Votre image ne s'affiche pas.

demeter1
+ Hyperactif +

Masculin
Messages : 8232
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Mar 15 Juil 2014 - 0:15

@demeter1 a écrit:Votre image ne s'affiche pas.
Bizarre, elles sont bien uploadé sur le serveur :

https://i39.servimg.com/u/f39/09/01/05/17/captur13.jpg

https://i39.servimg.com/u/f39/09/01/05/17/captur14.jpg

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 le Mar 15 Juil 2014 - 0:35

Essayez avec
Code:
#fa_toolbar.content{
width: XX !important;
margin-left: auto!important;
margin-right: auto!important;
}

xx valeur en px ou en %

demeter1
+ Hyperactif +

Masculin
Messages : 8232
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Mar 15 Juil 2014 - 7:40

Je ne vois pas de changement même en 960px.

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Ven 18 Juil 2014 - 7:51

UP.

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Mar 22 Juil 2014 - 7:12

up

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA le Mar 22 Juil 2014 - 7:37

Bonjour,
Rentrer la totalité en 960px hum !

#fa_toolbar {
background-color: #5c5c5c;
color: #ffffff;
font-family: Helvetica,Verdana,Arial;
font-size: 13px !important;
height: 30px;
left: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 999;
}
#fa_right {
float: none !important;
font-size: 13px !important;
}
#fa_share {
font-size: 13px !important;
line-height: 30px !important;
margin-left: 20px;
}

Le code d'Henry est plus correct, moi c'est du bidouillage


Dernière édition par AenigmA le Mar 22 Juil 2014 - 18:52, édité 2 fois (Raison : Il manquait les !important)

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Sam 26 Juil 2014 - 7:33

@AenigmA a écrit:Bonjour,
Rentrer la totalité en 960px hum !

#fa_toolbar {
background-color: #5c5c5c;
color: #ffffff;
font-family: Helvetica,Verdana,Arial;
font-size: 13px !important;
height: 30px;
left: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 999;
}
#fa_right {
float: none !important;
font-size: 13px !important;
}
#fa_share {
font-size: 13px !important;
line-height: 30px !important;
margin-left: 20px;
}

Le code d'Henry est plus correct, moi c'est du bidouillage
Merci pour ton code, ça fonctionne très bien comme il faut. Cependant, le logo de la toolbar se situe après les infos membres.
Ya t'il moyen de laisser l'ordre de la toolbar par défaut ?

Merci encore Wink

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA le Sam 26 Juil 2014 - 8:13

Bonjour,
Comme je te dis c'est du bidouillage, mais j'ai une idée bien plus simple.
Je repasse dans un moment

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Sam 26 Juil 2014 - 8:18

@AenigmA a écrit:Bonjour,
Comme je te dis c'est du bidouillage, mais j'ai une idée bien plus simple.
Je repasse dans un moment
OK merci, je verrais ton message ce soir en rentrant du travail.
Merci Wink

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA le Sam 26 Juil 2014 - 8:40

J'ai refait ton image du haut du body
Maintenant il suffit de remplacer

body {
background-color: #bbb;
background-image: url("https://i39.servimg.com/u/f39/09/00/15/94/bg08h110.jpg");
background-position: center top;
background-repeat: repeat-x;
margin-top: 32px !important;
}
#fa_toolbar {
background-color: transparent !important;
color: #ffffff;
font-family: Helvetica,Verdana,Arial;
font-size: 16px;
height: 30px;
left: 0;
margin-left: auto;
margin-right: auto;
z-index: 20002;
width: 970px !important;
box-shadow: none;
}
.fa_toolbar_XL_Sized {
min-width: 970px !important;
width: 100%;
}

Ca doit être proche de ce que tu veux
Nul besoin de ce que j'ai mis précédemment
Laurent

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Dim 27 Juil 2014 - 0:57

Une idée intéressante mais qui ne "fonctionne" pas vraiment. en effet, mon BG est en scrolling et, quand on descend la page, le fond monte mais la toolbar en 960px reste ... du coup les côtés de celle-ci redeviennent "coupé"  Crying or Very sad 

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA le Dim 27 Juil 2014 - 5:44

Bonjour,
En rajoutant cette ligne à la partie body peut être

background-attachment: fixed;

Sinon je ne pense pas que cela soit possible en l'état vu que c'est géré par un javascript. Seul un vrai codeur peut ... peut être.

Bon dimanche
Laurent

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Dim 27 Juil 2014 - 12:20

OK Laurent, merci pour toutes vos astuces et aides, c'est super sympa.  Wink 

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA le Dim 27 Juil 2014 - 13:16

As tu essayé ?

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy le Dim 27 Juil 2014 - 13:19

@AenigmA a écrit:As tu essayé ?
Je ne souhaite pas fixer mon BG. De plus en essayant, l'ombre de ma toolbar qui est du coup rétrécie se voit sur les cotés et donc, le fond coïncide bien mais on vois la délimitation droite/gauche a cause de cette ombre

Ejayremy
*****

Masculin
Messages : 948
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy 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