Problème avec modification du thème Whitesummer

Aramina

Nouvelle étincelle

Messages : 2
Inscrit : 12 Janvier 2008

12 Janvier 2008, 13:40

Bonjour,
Voilà, j'ai un petit soucis sur la modification de la Barre de navigation, comme dans le skin d'origine, je voudrais une barre arrondie sur les bords, je fais donc trois images distinctes :
- nav_background.png (taille 1*35)
- nav-left (taille 15*35)
- nav-right (taille 15*35)

Mes nouvelles images sont donc de même dimention et même nom que celles du thème originel, normalement il ne devrait pas y avoir de soucis, mais dès que je place mes images à la place des anciennes l'image centrale ne se limite plus à sa place, elle passe sous les images des côtés, j'ai tenté plusieurs modifications dans le CSS sans succès, j'ai aucune idée de ce qui bug :

Voici le code d'origine, si vous avez une idée, n'hésitez pas, je sais plus quoi tenter

Citation

/* Barre de navigation */
.nav
{
background: url(img/layout/nav_background.png);
height: 35px;
line-height: 35px;
vertical-align: middle;
}

/* Bordure gauche de la barre de navigation */
.nav .left
{
background-image: url(img/layout/nav_left.png);
height: 35px;
width: 15px;
float: left;

}

/* Bordure droite de la barre de navigation */
.nav .right
{
background-image: url(img/layout/nav_right.png);
height: 35px;
width: 15px;
float: right;
}

Eagle

Volcan

Age : 31 ans
Messages : 1093
Inscrit : 22 Janvier 2005

12 Janvier 2008, 13:51

Tu as mis de la transparence à tes images left et right. Le principe du thème (comme il est codé) c'est d'avoir une division qui prend toute la largeur avec une image de fond répétée.

Il serait possible de sortir les éléments gauche et droite de cette division en changement le fichier html qui génère la barre de navigation, mais de mémoire ça posera des problèmes de jointure entre les images selon le navigateur utilisé ^^;
Tu peux tout de même essayer en changeant dans navigation.html

HTML (Sélectionner le code)

<div class="nav">
	<div class="left"></div>
	<div class="right"></div>
	<strong>
		<img src="{IMG_HOME}" alt="{LG_FORUM_INDEX}" title="{LG_FORUM_INDEX}"/> <a href="{U_INDEX}">{LG_FORUM_INDEX}</a>
		<block name="nav_link">
			&#187; <if content="$nav_link.URL"><a href="{nav_link.URL}" {nav_link.STYLE}>{nav_link.NAME}</a><else>{nav_link.NAME}</if>
		</block>
	</strong>
</div>[/html]

et de remplacer par:
[code=html]
	<div class="left"></div>
	<div class="right"></div>
<div class="nav">
	<strong>
		<img src="{IMG_HOME}" alt="{LG_FORUM_INDEX}" title="{LG_FORUM_INDEX}"/> <a href="{U_INDEX}">{LG_FORUM_INDEX}</a>
		<block name="nav_link">
			&#187; <if content="$nav_link.URL"><a href="{nav_link.URL}" {nav_link.STYLE}>{nav_link.NAME}</a><else>{nav_link.NAME}</if>
		</block>
	</strong>
</div>

Il faut évidemment touché aussi à la CSS pour régler les margin/padding et également enlever les .nav devant .left et .right...
Mais comme je l'ai dit, cette solution devrait te causer des soucis selon le navigateur utilisé, IE essentiellement ne respecte pas les normes avec les margin/padding...

Dans les hauteurs des cieux, par delà les nuages et les sommets enneigés, l'aigle majestueux survole la terre...

Kosmos & Eagle homepage ^^

Aramina

Nouvelle étincelle

Messages : 2
Inscrit : 12 Janvier 2008

12 Janvier 2008, 13:57

Ah, ok, j'y avais pas pensé, c'est tout bête, juste pas pratique le jour ou on voudra changer le thème. Je vais pas me risquer aux problèmes de jointure, c'est déjà compliqué d'avoir la même chose sur IE et les autres navigateurs, on va pas rajouter des obstacles

http://www.fire-soft-board.com/fsb/images/smileys/fsb2_smyle.gif

Merci beaucoup pour cette réponse claire et rapide.

Problème avec modification du thème Whitesummer