Largeur du forum

[Nodark]

Salut!!


J'aimerai savoir comment faire pour avoir un forum de ce style

Phoenix Center

Topic dispo ici

http://www.mybb.fr/showthread.php?tid=1232&pid=7639#pid7639

Personne ne m'a répondu je redemande donc!

Comment faire la largeur du forum,ou le rendre 'plus lointain' la police moins grosse

j'avoue que c'est plus agréable à voir,je trouve que le mien est trop large et trop près :/

[Emilio]

Salut Nodark, va dans les paramètres de ton style par défaut et modifie la largeur dans "Page (Personnalisé dans ce style)"... met 75% sa devrait être pas mal.

Personnellement j'ai fais comme sa, sa va impec !

[Nodark]

Peux tu être plus précis?

Je ne trouve pas les mots que tu emplois

[spyto]

Salut,

Admin > Accueil > Thèmes.

Puis édite ton thème... édite ensuite 'global.css'.

Pour la largeur : sélecteur 'body' tape 75% ou xxx px dans le champ largeur, selon que tu veux un pourcentage de la fenêtre ou une largeur fixe adaptée par exemple à ton header.

Si le forum n'est pas centré (tout dépend du thème utilisé), sélecteur '#container' mets:
margin-left: auto;
margin-right: auto;

cf cette discussion :
http://www.mybb.fr/showthread.php?tid=1017

@+

[Nodark]

spyto a écrit :Si le forum n'est pas centré (tout dépend du thème utilisé), sélecteur '#container' mets:
margin-left: auto;
margin-right: auto;

cf cette discussion :
http://www.mybb.fr/showthread.php?tid=1017

@+

Salut!!
voila le problème pas centré!

http://om09fifa.free.fr/Forum/


je selectionne donc #containe et j'ai ceci!

Citation :margin-left: auto;
margin-right: auto;
&nbsp: ;
&nbsp: ;
&nbsp: ;
&nbsp: ;
&nbsp: ;
&nbsp: ;
&nbsp: ;
background-image: url(images/fondlogo.bmp);
&nbsp: ;
&nbsp: ;
&nbsp: ;
background-position: top left;
&nbsp: ;
&nbsp: ;
&nbsp: ;
background-repeat: no-repeat;
&nbsp: ;
&nbsp: ;
&nbsp: ;
border: 1px solid #000000;
&nbsp: ;
&nbsp: ;
&nbsp: ;
&nbsp: ;
&nbsp: ;
&nbsp: ;
margin: auto auto;
&nbsp: ;
&nbsp: ;
&nbsp: ;
padding: 20px;
&nbsp: ;
&nbsp: ;
&nbsp: ;
padding-top: 0px;
&nbsp: ;
&nbsp: ;
&nbsp: ;
text-align: left;
margin-left: auto;
margin-right: auto;

[spyto]

Quoi ? C'est quoi ce truc ?
C'est tout bogué ton CSS !
Vire-moi tous ces "&nbsp: ;" qui n'ont aucune raison d'être sinbon de polluer le code CSS.

Comment veux-tu que le navigateur s'y retrouve ?

Essaie ça:

Code :

#container {
    width: 95%;
    color: #000000;
    background-image: url(images/fondlogo.bmp);
    background-position: top left;
    background-repeat: no-repeat;
    border: 1px solid #000000;
    padding: 20px;
    padding-top: 0px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

Tu peux sans doute remplacer :

Code :

    margin-left: auto;
    margin-right: auto;

par

Code :

    margin: 0 auto;

Note :
width : 95%, ça me semble beaucoup... mais bon.

[Nodark]

Ca ne change rien

Je fais plus simple

Voici un screen en résumé

[spyto]

Si je regarde ta feuille de style, je vois ceci :

Code :

#container {
    width: 75%;
    color: #000000;
    width: 95%;
    color: #000000;
    background-image: url(images/fondlogo.bmp);
    background-position: top left;
    background-repeat: no-repeat;
    border: 1px solid #000000;
    padding: 20px;
    padding-top: 0px;
    text-align: left;
    margin: 0 auto;
}


}


}


}


}

soit 4 '}' inutiles qui perturbent le code CSS...

Edite la feuille de style depuis l'admin, onglet "Editer la feuille de tyle mode avancé" et vire ces '}' en trop !

Edit : dans ton screen de #container, à droite, il ne faut pas mettre le '}' final !

[Nodark]

Code PHP :

body {
    background: #72c3e7;
    width: 75%;
    color: #026CB1;
    text-align: center;
    line-height: 1.4;
    
    text-decoration: none;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

a:link {
    color: #026CB1;
    text-decoration: none;
}

a:visited {
    color: #026CB1;
    text-decoration: none;
}

a:hover, a:active {
    color: #000;
    text-decoration: underline;
}

#container {
    width: 75%;
    color: #000000;
    #container {
    width: 95%;
    color: #000000;
    background-image: url(images/fondlogo.bmp);
    background-position: top left;
    background-repeat: no-repeat;
    border: 1px solid #000000;
    padding: 20px;
    padding-top: 0px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

#content {
    /* FIX: Make internet explorer wrap correctly */
    width: auto !important;
}

.menu ul {
    color: #000000;
    font-weight: bold;
    text-align: right;
    padding: 4px;
} 


Ca me fait tout buggué mon design,pourtant j'ai suivi à la lettre

[spyto]

Non, regarde, tu as un sélecteur à l'intérieur d'un sélecteur !!!???
Et avec des largeurs différentes ?...
#container est répété. Why ???

Edite ton CSS en mode avavcé, ce sera plus facile !
Tu as :

Code :

#container {
    width: 75%;
    color: #000000;
    #container {
    width: 95%;
    color: #000000;
    background-image: url(images/fondlogo.bmp);
    background-position: top left;
    background-repeat: no-repeat;
    border: 1px solid #000000;
    padding: 20px;
    padding-top: 0px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

Tu devrais avoir :

#container {
width: 95%;
color: #000000;
background-image: url(images/fondlogo.bmp);
background-position: top left;
background-repeat: no-repeat;
border: 1px solid #000000;
padding: 20px;
padding-top: 0px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

ou

#container {
width: 95%;
color: #000000;
background-image: url(images/fondlogo.bmp);
background-position: top left;
background-repeat: no-repeat;
border: 1px solid #000000;
padding: 20px;
padding-top: 0px;
text-align: left;
margin: 0 auto;
}

[Nodark]

Code PHP :

#container {
width: 95%;
color: #000000;
background-image: url(images/fondlogo.bmp);
background-position: top left;
background-repeat: no-repeat;
border: 1px solid #000000;
padding: 20px;
padding-top: 0px;
text-align: left;
margin: 0 auto;
} 


J'ai utilisé ceci

Mais ce n'est toujours pas centré!

Par rapport à http://www.phoenix-center.c4.fr/ je crois c'est aussi la taille de la police qui est différente non?

[spyto]

Je pense que c'est parce que ton #container n'a pas de largeur fixe que 'margin: 0 auto' n'a aucun effet !

Essaie en donnant une largeur en pixels, par exemple :

Code :

#container {
    width: 900px;
    color: #000000;
    background-image: url(images/fondlogo.bmp);
    background-position: top left;
    background-repeat: no-repeat;
    border: 1px solid #000000;
    padding: 20px;
    padding-top: 0px;
    text-align: left;
    margin: 0 auto;
}

J'ai mis 900 au pif, à toi d'adapter...

[pedro]

Il faut enlever le 75% au body, c'est la taille du #container que tu dois changer.

[Nodark]

J'abandonne,ca me fait tout buggué,et au pire si j'enleve le 75% au body ca me le centre presque :/

EDIT : J'ai remit tout à 0. Ca marche DONC J'ai juste perdu mon design que je re-ferai


Sinon,d'après vous,quel police ou taille John Smith a utilisé sur son forum? http://www.phoenix-center.c4.fr/

[spyto]

Pourquoi abandonner ?

C'est ton width: 72% dans body qui fausse tout !
En effet, tu demandais à 'body' d'occuper 75% de la fenêtre, donc les 75% à gauche, puis tu demandais à ton container de se centrer sur ce body de 75% ! Il ne risquait pas d'être au centre de la fenêtre !

A mon avis ça c'est bon :
(mais édite en mode avancé pour éviter les '}' en trop et autres bugs.)

Code :

body {
    background: #72c3e7;
    color: #026CB1;
    text-align: center;
    line-height: 1.4;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

#container {
    width: 900px;
    color: #000000;
    background-image: url(images/fondlogo.bmp);
    background-position: top left;
    background-repeat: no-repeat;
    border: 1px solid #000000;
    padding: 20px;
    padding-top: 0px;
    text-align: left;
    margin: 0 auto;
}

Pour body, je ne précise aucune largeur pour prendre toute la fenêtre. Tu peux essayer d'y mettre 100% ce sera pareil.

Et pour container, je mets 900 px au pif (à adapter pour la largeur que tu veux).
Tu peux mettre aussi 85 % par exemple : dans ce cas ton container sera proportionnel à la taille de le fenêtre.

A toi de voir si tu le veux proportionnel à la taille de la fenêtre du navigateur ou de largeur fixe.

Quant à la police c'est la même ! Peut-être en 12px ou 11px par endroits ?...

@+

Edit:
Pour info, voilà tes valeurs actuelles, avec ton forum centré :

Citation :body {
background: #5db1e6;
color: #000;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
text-align: center;
line-height: 1.4;
}
#container {
width: 85%;
background: #fff;
border: 1px solid #e4e4e4;
color: #000000;
margin: auto auto;
padding: 20px;
text-align: left;
}
Tu vois bien qu'il n'y a pas de "width dans "body" et que tu as "margin: auto auto" pour centrer le container.

Essaie donc une dernière fois ce que je te propose au début de ce message.

[Nodark]

Ce matin,j'ai mis ca


#container {
width: 85%;
background: #fff;
border: 1px solid #e4e4e4;
color: #000000;
margin: auto auto;
padding: 20px;
text-align: left;
}


Donc a marché sans tout faire buggué !

Pour la police,j'ai réduit de 13px,à 12,aucun changement -.-'

[spyto]

Oui, j'ai vu, mais ce n'est pas le même design !
Et puis ça a centré parce qu'aucune largeur n'est spécifiée dans 'body' !

Ce que je te propose c'est pour le design d'hier...

Quant à la taille de la police, il ne suffit pas de la modifier dans 'body' !
Il faut la modifier dans les sélecteurs CSS où tu veux la réduire.
La taille globale dans 'body' n'est appliquée que si aucune autre taille n'est précisée dans un autre sélecteur !

[Nodark]

Donc pour réduire la taille de la police des sous titres (qui correspond au texte en dessous des différentes sections) c'est dans menu?

[spyto]

Nodark a écrit :Donc pour réduire la taille de la police des sous titres (qui correspond au texte en dessous des différentes sections) c'est dans menu?

Pour le texte de description des sections c'est le sélecteur 'smalltext'.

[Nodark]

Et pour les titres des sections?


Merci pour les aide à tous