Problème d'affichage du thème!

[Xeem]

Bonjour j'ai un problème d'affichage avec mon thème.

Voilà j'ai créer mon thème, il est très beau tout va bien.. le problème sait quand j'augmente le zoom de mon navigateur:

100%(Aucun problème):


110%(Menu qui dépasse):


Voilà est-ce qu'il y aurais une solution pour arranger cela? ca va être très gênant pour mes futurs visiteurs.

[exdiogene]

Basé sur les images j'imaginais que dans la page de style CSS la barre décorative grise foncée doit avoir une largeur en "%" et le reste est d'une largeur fixe en "px".

Mais c'est le contraire, l'image de la barre "http://veenforum.comli.com/images/classicblue/bas_menu.png" est fixe et ne s'ajustera pas à la page. Il faudra la faire en deux section, la partie gauche et la partie droite, afin qu'elle s'ajuste...

Je trouve assez curieux que cette barre pointe vers "http://veenforum.comli.com/web/20110609060058/http://habboretroweb.net/v5/forum/#"

[Xeem]

Oui en effet, Je me suis basé un peux sur HabboRetroWeb POUR LE DESIGN en sachant que je vais changer tout les couleurs.
Sache que mon forum ne parlera aucunement de Habbo.

Bref est-ce qu'il y a une solution? comment faire pour séparer cette section en deux partie?

[exdiogene]

Par exemple, avoir ceci dans le fichier de style CSS :

Code :

.table_bulle{
  background-color : transparent;
  padding:0;
  margin:0;
  spacing:0;
  border: none;
}
.table_bulle_centre_gauche{
  background : transparent url(bas_menu.png) left top;
  height: 34px;
}
.table_bulle_centre_droit{
  background : transparent url(bas_menu.png) right top;
  height: 34px;
  width: 40px;
}

Et ceci dans le template :

Code :

<table class="table_bulle" cellpadding="0" cellspacing="0">
<tr>
  <td  class="table_bulle_centre_gauche">
   Vous pouvez avoir une longue ligne de texte affichée dans l'image...
  </td>
  <td class="table_bulle_centre_droit"></td>
</tr>
</table>

[Xeem]

(01-03-2014, 17:06)exdiogene a écrit :  Par exemple, avoir ceci dans le fichier de style CSS :

Code :

.table_bulle{
  background-color : transparent;
  padding:0;
  margin:0;
  spacing:0;
  border: none;
}
.table_bulle_centre_gauche{
  background : transparent url(bas_menu.png) left top;
  height: 34px;
}
.table_bulle_centre_droit{
  background : transparent url(bas_menu.png) right top;
  height: 34px;
  width: 40px;
}

Et ceci dans le template :

Code :

<table class="table_bulle" cellpadding="0" cellspacing="0">
<tr>
  <td  class="table_bulle_centre_gauche">
   Vous pouvez avoir une longue ligne de texte affichée dans l'image...
  </td>
  <td class="table_bulle_centre_droit"></td>
</tr>
</table>

D'accord je vais essayer merci de t'on aide!

---

---

Regarde qu'est-ce que sa donne exdiogene.
Est-ce que tu peux m'aider à le faire?

[exdiogene]

Il y avait une accolade fermante en trop dans le style ainsi que deux fermetures de DIV en trop dans le code...

[Xeem]

Est-ce que tu peux regarder encore? regarde quand tu zoom le background et le bas menu ne fite plus ensemble.

[exdiogene]

Le problème vient du fait que "l'entête" a 64.4% de la largeur et "le container" lui en a 61.1%.

En zoomant, la disparité de 3.3% augmente...

[Xeem]

J'y comprend rien j'ai tout essayer --'

[exdiogene]

Il faut que les deux largeurs soient identiques, si nous voulons un agrandissement linéaire de ces deux items...

[Xeem]

C'est impossible de les mettre au même pourcentage car sinon le container et le bas_menu ne seront plus égale.

[exdiogene]

Il faudra alors ajuster les espacements et non le pourcentage...

[Xeem]

Sans trop être soûlante, tu peux me rappeler comment ajouter des espacements? un simple exemple me suffit.

[exdiogene]

Il serait utile d'apprendre le CSS...

padding-left: 30px;

Donne un espace intérieur de 30 pixels à gauche et serait ce qui doit être utilisé ainsi qu'à droite.