Tableau à largeur en pourcentage avec une position fixe

[alv]

Bonsoir,
J'ai créé ce tableau en position fixe et avec une largeur de 75% :

Code:

<table width="75%" height="95" cellspacing="0" cellpadding="0" border="0" style="position: fixed">
   <tr>
      <td>
         Texte
      </td>
   </tr>
</table>

Le problème est que quand je met "position: fixed", la largeur de 75% n'est pas à 75% alors que quand j'enlève "position: fixed", la largeur est bien à 75%.
Comment y remédier ?
Merci d'avance.

[[Nihil]]

Quand on met un élément en position: fixed et la largeur en pourcentage, la largeur va se mettre par rapport à 75% de la largeur de l'écran et non plus de son parent il me semble

[alv]

Bonjour,
comme on se retrouve

Il n'y a pas moyen d'y remédier ? En fixant le tableau autrement qu'avec "position fixed" pour que la largeur de 75% soit bonne ?

[[Nihil]]

Eh bien... Ca dépend de ce que tu veux faire précisément

Pourrais tu nous donner le lien de ton forum ainsi que nous préciser quel tableau tu veux fixer (et comment il doit se positionner) pour qu'on puisse t'aiguiller s'il te plait ?

[alv]

Alors,
Voici le forum test où je... teste : lien
Voici le code que j'ai fait :

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" height="95" cellspacing="0" cellpadding="0" border="0" style="position: fixed; min-width: 728px; background-color: #efefef; font-size: 16px; font-family: 'Source Sans Pro','Segoe UI',Helvetica,sans-serif">
   <tr>
      <td valign="middle">
         <a href="{U_INDEX}"><img src="LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
      </td>
   </tr>
</table>

Ce code correspond au tableau en haut de la page qui est figé.

[[Nihil]]

Attention, en invité, ton forum test redirige vers ton autre forum, et il est construction en plus, ce qui nous empêche d'y avoir accès.

[alv]

Bonjour,
Il n'est pas en construction. L'adresse que je t'ai donné donne sur une page HTML qui redirige vers le forum de mon ami.
Voici l'adresse qui dirige au bon endroit : lien

[alv]

Up

[[Nihil]]

Alors directement avec un width je ne vois pas trop comment régler cela simplement, mais on peut tricher un peu :

On remplace le code du tableau par ceci :

Code:

<div style="position: fixed; left: 0; right: 0; padding-left: 210px;">
    <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" height="95" cellspacing="0" cellpadding="0" border="0" style="background-color: #efefef; font-size: 16px; font-family: 'Source Sans Pro','Segoe UI',Helvetica,sans-serif">
        <tr>
            <td valign="middle">
                <a href="{U_INDEX}"><img src="LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
            </td>
        </tr>
    </table>
</div>       

Et ensuite pour ton tableau qui se trouve à gauche (celui qui fait 210px), on remplace :

Code:

<table width="210" height="100%" cellspacing="0" cellpadding="0" border="0" style="position: fixed; top: 0px; left: 0px">

Par

Code:

<table width="210" height="100%" cellspacing="0" cellpadding="0" border="0" style="position: fixed; top: 0px; left: 0px; z-index:1;">

Comme ça, cela devrait fonctionner !

[alv]

Bonsoir,
Merci pour ton aide.
Mon ordi a une résolution de 1600x900. Avec cette résolution, c'est nickel.
Mais quand je réduis le navigateur, le tableau se réduit également et un vide se crée à droite, comme ici :

[[Nihil]]

Pourrais tu laisser la modification en place visible sur ton forum test pour qu'on puisse regarder ce qui ne va pas s'il te plait :p ?

[alv]

Désolé, j'avais oublié de valider le template.

[Invité]

Salut alv et [Nihil],
désolé de m'incruster .
Le padding-left suit le côté gauche dans la div:

Code:

<div style="position: fixed; left: 0; right: 0; padding-left: 210px;">

Remplaces par:

Code:

<div style="position: fixed; left: 210px; right: 0; ">

a++

[alv]

Bonsoir Milouze14,
Ton code n'a rien changé à mon problème

[Nihil] voulait voir ce qu'il ne va pas avec son code, donc j'ai remis ce qu'elle me proposait.

[Invité]

Re,

Bonsoir Milouze14,
Ton code n'a rien changé à mon problème
[Nihil] voulait voir ce qu'il ne va pas avec son code

Tu parles du bandeau SERVACTIF ?

a++

[alv]

Oui, je parle de ça.

[Invité]

Re,
donc ta position étant fixe le left à 210px doit te permettre quelque soit a résolution d'être toujours positionné au même endroit à moins que je comprenne pas ta question.

a++

[[Nihil]]

Ton tableau contenant ton forum a une largeur de 75%. Mais à cause de la publicité Forumactif, il fera toujours au minimum 730px.
Ton tableau fixé en haut lui n'a pas la publicité, il faut donc rajouter cette largeur minimale comme ça :

On passe de :

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" height="95" cellspacing="0" cellpadding="0" border="0" style="background-color: #efefef; font-size: 16px; font-family: 'Source Sans Pro','Segoe UI',Helvetica,sans-serif">

A

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" height="95" cellspacing="0" cellpadding="0" border="0" style="background-color: #efefef; font-size: 16px; font-family: 'Source Sans Pro','Segoe UI',Helvetica,sans-serif; min-width: 730px">

Normalement ça devrait être bon !

[alv]

Merci [Nihil], ça marche nickel
J'ai fusionné le code de Milouze14 et de [Nihil] :

Code:

<div style="position: fixed; left: 210px; right: 0px">
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" height="95" cellspacing="0" cellpadding="0" border="0" style="background-color: #efefef; font-size: 16px; font-family: 'Source Sans Pro','Segoe UI',Helvetica,sans-serif; min-width: 728px">
      <tr>
         <td valign="top" style="padding: 10px 30px 0px 30px">
            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" width="100%" height="100%" style="max-width: 800px; max-height: 70px" /></a>
         </td>
      </tr>
   </table>
</div>

Merci à vous deux pour votre aide.