Centre le logo :: Fire Soft Board

DDril

Brasier

Messages : 727
Inscrit : 03 Janvier 2005

18 Janvier 2008, 18:39

Il me semblait qu'il y avait quelque chose sur le forum sur cela, mais finalement rien.

Sur un fsb2 Final, comment centrer le logo ? Je peine à m'en tirer avec tout ces div... merci !

Webmaster de l'Organisation Très Secrète

SH!NRA

Flammeche

Age : 16 ans
Messages : 80
Inscrit : 11 Janvier 2008

Message édité 1 fois, dernière édition par SH!NRA, 18 Janvier 2008, 19:43

18 Janvier 2008, 19:43

Tu peux faire à la barbare (non valide W3C), tu prend le div du logo tu fais :

HTML (Sélectionner le code)

<center></center>

Ou, valide W3C :
Tu cherche la class tu logo, et tu fais :*

CSS (Sélectionner le code)

background-position:center;

Je n'ai pas le nom du div de tête, mais c'est assez simple en perspective

*dans le fichier main.css à la racine de ton template

http://bestutorial.free.fr/creation/signature.png

Nobuo Uematsu

Spark

Volcan

Messages : 1904
Inscrit : 24 Juin 2006

Message édité 3 fois, dernière édition par Spark, 18 Janvier 2008, 20:03

18 Janvier 2008, 19:47

Dans ~/tpl/WhiteSummer/files/header.html

#--Chercher :--#

HTML (Sélectionner le code)

	<a href="{U_INDEX}" id="header_left"><img src="{IMG_LOGO}" alt="{SITE_NAME}" title="{SITE_NAME}" /></a>

#--Remplacer par :--#

HTML (Sélectionner le code)

	<!--<a href="{U_INDEX}" id="header_left"><img src="{IMG_LOGO}" alt="{SITE_NAME}" title="{SITE_NAME}" /></a>-->

#--Chercher :--#

HTML (Sélectionner le code)

	<h1>{SITE_NAME}</h1>
	<h2>{SITE_DESCRIPTION}</h2>

#--Remplacer par :--#

HTML (Sélectionner le code)

	<!--<h1>{SITE_NAME}</h1>-->
	<h2>{SITE_DESCRIPTION}</h2>
	<a href="{U_INDEX}" id="header_left"><img src="{IMG_LOGO}" alt="{SITE_NAME}" title="{SITE_NAME}" /></a>

Dans ~/tpl/WhiteSummer/main.css :

#--Chercher :--#

CSS (Sélectionner le code)

/* Boite contenant le header */
#header
{
	background-image: url(img/layout/top_background.png);
	height: 140px;
}

#--Remplacer par :--#

CSS (Sélectionner le code)

/* Boite contenant le header */
#header
{
	background-image: url(img/layout/top_background.png);
	height: 140px;
	text-align: center;/*Ajouté pour center le logo*/
}

#--Chercher :--#

CSS (Sélectionner le code)

/* Description du forum */
#header h2
{
	font-size: 1.2em;
	text-align: center;
	font-weight: normal;
}

#--Remplacer par :--#

CSS (Sélectionner le code)

/* Description du forum */
#header h2
{
	font-size: 1.2em;
	text-align: center;
	font-weight: normal;
	display: none;/*Ajouté pour center le logo*/
}

#--Chercher :--#

CSS (Sélectionner le code)

/* Zone du logo */
#header_left
{
	float: left;
	width: 300px;
}

#--Remplacer par :--#

CSS (Sélectionner le code)


/* Zone du logo */
#header_left
{
	/*float: left;*//*Supprimé pour center le logo*/
	width: 300px;
}

#--Chercher :--#

CSS (Sélectionner le code)

/* Zone à droite du header contenant la recherche rapide le profil et la deconnexion */
#header_right
{
	float: right;
	width: 300px;
	height: 105px;
	text-align: right;
}

#--Remplacer par :--#

CSS (Sélectionner le code)

/* Zone à droite du header contenant la recherche rapide le profil et la deconnexion */
#header_right
{
	position: absolute;/*Ajouté pour center le logo*/
	right: 20px;/*Ajouté pour center le logo*/
	/*float: right;*//*Supprimé pour center le logo*/
	width: 300px;
	height: 105px;
	text-align: right;
}

Mon site de jeux en réseau Hamachi :
http://www.jeux-reseau.fr
Le forum : http://forum.jeux-reseau.fr

http://img100.imageshack.us/img100/4097/voegelpc3jk2jx2kw4xg6.gif

StyphaX

Etoile

Age : 20 ans
Messages : 2624
Inscrit : 09 Octobre 2004

18 Janvier 2008, 19:56

Citation (SH!NRA, 18 Janvier 2008, 19:43)

Tu peux faire à la barbare (non valide W3C), tu prend le div du logo tu fais :

HTML (Sélectionner le code)

<center></center>

Ou, valide W3C :
Tu cherche la class tu logo, et tu fais :*

CSS (Sélectionner le code)

background-position:center;

Euuu ya plus simple pour être valide... <div align="center"> est tout a fait valide

Articles WIKI FSB: Créer/Configurer/Utiliser votre 1er forum || Guide de la bidouille

Spark

Volcan

Messages : 1904
Inscrit : 24 Juin 2006

18 Janvier 2008, 20:00

Les deux codes ont surtout rien à voir, dans le 1er on centre des élément html (ce qui n'est pas complètement faut), alors que dans le 2ème on centre une image de fond en CSS.

Mon site de jeux en réseau Hamachi :
http://www.jeux-reseau.fr
Le forum : http://forum.jeux-reseau.fr

DDril

Brasier

Messages : 727
Inscrit : 03 Janvier 2005

18 Janvier 2008, 20:24

Ha voila exactement ce que je souhaitais. Merci Spark !

Merci aussi pour Shinra... Mais j'ai déjà essayer et ca déforme pas mal le forum.

Webmaster de l'Organisation Très Secrète

FumSteph

Nouvelle étincelle

Age : 32 ans
Messages : 21
Inscrit : 14 Février 2008

Message édité 1 fois, dernière édition par FumSteph, 31 Mars 2008, 11:34

31 Mars 2008, 11:10

Bonjour tout le monde,

Merci Maxi de m'avoir orienté vers ce Topic.

Je viens d'appliquer les instruction à la lettre pour centrer mon logo mais j'ai un souci encore.

Il semble qu'une ou deux lignes s'insèrent entre les liens en haut du header et le logo, du coup il déborde, que puis-je faire, sans augmenter la hauteur du header ?

Pour info mon logo est une ban de 642x92.

Merci d'avance

Edit : J'ai viré le h1 et le h2 dans le header.html, vu que je n'en ai pas besoin et c'est bon, j'ai juste "rechercher" qui est sur la fin de mon logo.

Spark

Volcan

Messages : 1904
Inscrit : 24 Juin 2006

Message édité 1 fois, dernière édition par Spark, 31 Mars 2008, 13:48

31 Mars 2008, 13:46

Citation (FumSteph, 31 Mars 2008, 11:10)

Edit : J'ai viré le h1 et le h2 dans le header.html, vu que je n'en ai pas besoin et c'est bon

Si tu as vraiment suivis à la lettre la procédure c'est inutile puisque le h1 est déjà supprimé (mis en commentaire) et h2 est masqué en CSS.

Mon site de jeux en réseau Hamachi :
http://www.jeux-reseau.fr
Le forum : http://forum.jeux-reseau.fr

FumSteph

Nouvelle étincelle

Age : 32 ans
Messages : 21
Inscrit : 14 Février 2008

Message édité 1 fois, dernière édition par FumSteph, 31 Mars 2008, 14:25

31 Mars 2008, 14:24

Ben j'ai re vérifié et si j'ai bien tout suivi à la lettre http://www.fire-soft-board.com/fsb/images/smileys/sad.gif Bizarre, m'enfin c'est pas grave, ça marche !

Centre le logo