Problème affichage barre de liens dans header [Réglé]
bricodx Membre non connecté
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :
j'ai découvert PHPBOOST depuis peu et je compte l'utiliser pour faire un site concernant la fabophilie.
Dans ce but je prépare un thème, mais je rencontre un problème concernant l'affichage de la barre de liens dans le header :
L'écart à gauche est présent sur IE mais pas sur FIREFOX. Par contre pour le décalage de droite, le problème est identique sur IE et sur FIREFOX.
Voilà ce que j'ai mis dans header.tpl :
Code HTML :
<div id="sub_header"> <div id="sub_header_left"></div> <div id="sub_header_centre"> <h1 style="display:none;font-size:9px;">{SITE_NAME}</h1> <a href="../news/news.php" title="Accueil du site" class="button">Accueil</a> <a href="../forum/index.php" title="Forum" class="button">Forum</a> <a href="../articles/articles.php" title="Articles" class="button">Articles</a> <a href="../gallery/gallery.php" title="Galerie" class="button">Galerie</a> <a href="../download/download.php" title="Téléchargements" class="button">Téléchargements</a> </div> <div id="sub_header_right"></div> </div>
et dans design.css :
Code CSS :
div#sub_header{ height:40px; } div#sub_header_left{ height:40px; width:15px; background:url("images/sub_header_left.gif") no-repeat; float:left; } div#sub_header_centre{ height:40px; background:url("images/sub_header_centre.gif") repeat-x; } div#sub_header_right{ height:40px; width:15px; background:url("images/sub_header_right.gif") no-repeat; float:right; }
Comme vous l'avez remarquez j'ai 3 images : 1 pour le gauche en 40x15, 1 pour le centre en 40x1 qui se répète, et enfin 1 pour la droite en 40x15.
Pouvez vous m'aider à régler ce tout petit problème ?? Par avance merci.
KONA Membre non connecté
-
Booster Fusée
- Voir le profil du membre KONA
- Inscrit le : 21/05/2006
- Site internet
Symbioz Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Symbioz
- Inscrit le : 11/05/2008
Sinon, pour le soucis du côté droit, essaies de passer en float: left ; div#sub_header_left et div#sub_header_centre et ne met pas de flottement à div#sub_header_right .
Si tu as une adresse où l'on puisse tester le fonctionnement...
Lehan Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Lehan
- Inscrit le : 13/09/2008
Config XXAMP :
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
bricodx Membre non connecté
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :
@SYMBIOZ :
- si je supprime le float:right dans le header_right, l'image n'est plus à droite donc je le passe à left
- si je mets un float:left dans le header_centre, l'image de droite se met bien en ligne avec les header, mais l'image central ne couvre plus que les liens et non pas toute la largeur de la page. en plus il y a plus d'écart à gauche. donc je l'ajoute
Donc maintenant je n'ai plus de déformation, la barre apparaît complète mais à gauche.
maintenant je vais chercher comment faire en sorte qu'elle remplisse toute la largeur de la page.
Si je mets width:100% dans le header_centre, la partie centre rempli bien toute la largeur mais les bouts sont poussés au dessus etn en dessous.
Concernant un lien je n'en ai pas car je suis sur mon serveur local (un vieux P3 600Mhz, sous FREE-EOS)
Lehan Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Lehan
- Inscrit le : 13/09/2008
Il te suffit de créer un compte, de choisir ton DNS et de télécharger leur petit logiciel de mise à jour et hop... ton DNS pointe sur ta machine.
( pense à ouvrir ton port 80 et a configurer un NAT vers ta machine )
Courage !
Config XXAMP :
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
Lehan Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Lehan
- Inscrit le : 13/09/2008
Code CSS :
div#sub_header{ height:40px; background:url("images/sub_header_centre.gif") repeat-x; } div#sub_header_left{ height:40px; width:15px; background:url("images/sub_header_left.gif") no-repeat; float:left; } div#sub_header_centre{ height:40px; } div#sub_header_right{ height:40px; width:15px; background:url("images/sub_header_right.gif") no-repeat; float:right; }
Par contre, faut que tu enlèves la transparence de tes 2 gif arrondis pour que ça marche avec ce code
Config XXAMP :
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
bricodx Membre non connecté
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :
Il me sert de serveur de domaine, serveurs impressions, serveur de partage fichiers, serveur web local ....... Je me débrouille pas trop mal en réseau mais pas suffisamment pour sécuriser un serveur, et je ne veux pas prendre le risque de compromettre toutes mes données et mon réseau (6 PC)
Désolé.Et bien non, cela ne fonctionne pas non plus !!!
A gauche il n'y plus d'écart mais à droite l'image est toujours en dessous
Édité par bricodx Le 17/09/2008 à 00h09
Symbioz Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Symbioz
- Inscrit le : 11/05/2008
J'aurais bien testé ça pour ma part :
Code CSS :
div#sub_header{ height:40px; width: 100%; } div#sub_header_left{ height:40px; width:15px; background:url("images/sub_header_left.gif") no-repeat; float:left; } div#sub_header_centre{ height:40px; background:url("images/sub_header_centre.gif") repeat-x; float: left; } div#sub_header_right{ height:40px; width:15px; background:url("images/sub_header_right.gif") no-repeat; }
Avec disparition du float:right; et deux flottements à gauche (j'ai pas compris si tu avais essayé ou pas désolé
). As-tu touché aux margin /padding au final?Quoi qu'il en soit, la largeur sur divx#sub_header pourrait fonctionner.
bricodx Membre non connecté
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :
- sur IE, la barre fait la largeur des liens et il y a un écart entre la barre et l'image de droite
- sur firefox, la barre fait la largeur des liens et l'image de droite n'apparaît même plus
J'avais aussi essayé de mettre le width:100% sur header mais cela ne change rien.
Concernant les float, j'ai travaillé selon un tableau binaire pour être sur de n'oublier aucune solution et j'ai testé toutes les possibilités.
Le mieux que j'ai réussi à obtenir :
avec ce code :
Code CSS :
div#sub_header{ height:40px; margin-top:0px; padding-top:0px; } div#sub_header_left{ height:40px; width:15px; background:url("images/sub_header_left.gif") no-repeat left; float:left; } div#sub_header_centre{ height:40px; background:url("images/sub_header_centre.gif") repeat-x; float:left; } div#sub_header_right{ height:40px; width:15px; background:url("images/sub_header_right.gif") no-repeat right; float:left; }
mais j'ai pas touché au margin ni au padding
Édité par bricodx Le 17/09/2008 à 00h49
KONA Membre non connecté
-
Booster Fusée
- Voir le profil du membre KONA
- Inscrit le : 21/05/2006
- Site internet
Code HTML :
<div id="sub_header"> <div id="sub_header_left"> <h1 style="display:none;font-size:9px;">{SITE_NAME}</h1></div> <div id="sub_header_right"> <a href="../news/news.php" title="Accueil du site" class="button">Accueil</a> <a href="../forum/index.php" title="Forum" class="button">Forum</a> <a href="../articles/articles.php" title="Articles" class="button">Articles</a> <a href="../gallery/gallery.php" title="Galerie" class="button">Galerie</a> <a href="../download/download.php" title="Téléchargements" class="button">Téléchargements</a> </div> </div>
Code CSS :
div#sub_header{ height:40px; background:url("images/sub_header_centre.gif") repeat-x; } div#sub_header_left{ height:40px; width:15px; background:url("images/sub_header_left.gif") no-repeat left; float:left; } div#sub_header_right{ height:40px; width:15px; background:url("images/sub_header_right.gif") no-repeat right; float:right; }
bricodx Membre non connecté
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :
Sous IE, les liens sont alignés à la verticale à droite, et le bouton de droite est à la deuxième ligne à droite.
Je suis absent pendant 2 jours, alors je vous tiendrai au courant de mes recherches vendredi soir.
Merci pour l'aide déjà apportée.
Fred
Symbioz Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Symbioz
- Inscrit le : 11/05/2008
Lehan Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Lehan
- Inscrit le : 13/09/2008
Config XXAMP :
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
APACHE 2.2.6
PHP 5.2.5
MySQL 5.0.51
sous Vista et oui
bricodx Membre non connecté
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :
J'ai le résultat souhaité avec :
Code CSS :
div#sub_header{ height:40px; background:url("images/sub_header_centre.gif") repeat-x; } div#sub_header_left{ height:40px; width:15px; background:url("images/sub_header_left.gif") no-repeat left; float:left; } div#sub_header_right{ height:40px; width:15px; background:url("images/sub_header_right.gif") no-repeat right; float:right; }
Code HTML :
ce qui donne cela :
exactement ce que je voulais. Merci pour votre aide
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie