[HTML] Position fixe tableau

Version imprimable

26/03/2009, 18h13
Anne73

[HTML] Position fixe tableau

Bonjour,
J'ai enfin réussi à ce qu'un calque garde sa position selon la résolution de l'écran... :yaisse2:
Par contre, j'aimerai imbriquer dans ce calque un tableau où j'écrirai des mots qui vont vers des liens. Or, dès que je passe par tableau, la mise en forme ne suit pas le calque dans lequel il est, et donc mon tableau se balade selon la résolution de l'écran.
Comment faire pour qu'un tableau ou autre ait les mêmes propriétés que ce calque, c'est-à-dire qu'il ait une position fixe?
Je sais pas si je me suis bien fait comprendre.. si oui, vos conseils sont les bienvenus, je galère!
Merci
27/03/2009, 08h38
blueice

Non pas compris, un lien ou le code de la page serait d'une aide précieuse.

voilà le code du calque où est inséré un tableau:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="comp">
  <div align="center">
    <table width="100%" height="100%" border="0" align="center" onMouseOver="MM_showHideLayers('comp','','show')" onMouseOut="MM_showHideLayers('comp','','hide')" id="tabcomp">
      <tr>
        <td height="18"><div align="left"><a href="#"> B&acirc;timent</a></div></td>
      </tr>
 
      <tr>
        <td height="18" scope="row"><div align="left"><a href="#">Terrassement</a></div></td>
      </tr>
      <tr>
        <td height="18" scope="row"><div align="left"><a href="#">R&eacute;seaux</a></div></td>
      </tr>
      <tr>
        <td height="18" scope="row"><div align="left"><a href="#">Ouvrages d'art</a> </div></td>
      </tr>
      <tr>
        <td height="18" scope="row"><div align="left"><a href="#">Location</a></div></td>
      </tr>
    </table>
  </div>
</div>

27/03/2009, 18h35
GihefBey

Bonjour,

Le peu de code que tu montres semble inutilement compliqué pour fabriquer ce qui ressemble à un menu.
Quel est l'intérêt de ces <div> sans identifiants qui ne servent qu'à aligner ? Les deuxièmes pour contrer la première.

Comme beaucoup d'autres, blueice préférerait le code complet de la page.
Tout son code HTML et, bien sûr, les CSS qui y sont liées.
Il préférerait encore un lien www vers cette page et sa feuille de styles.
Comme beaucoup.

-
28/03/2009, 15h49
HiRoN

Citation:

Envoyé par GihefBey

Tout son code HTML et, bien sûr, les CSS qui y sont liées.

+1... De plus, tu utilises pas mal de balises maintenant devenus obsolètes.
Si tu as une feuille de style, il sera bon de refaire une passe afin d'en externaliser bien plus... ;)

J'ai finalement fait autrement pour le menu, mais j'ai toujours ce problème de fixation de calque qui bouge selon la résolution de l'écran.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Plan</title>
<style type="text/css">
<!--
body {
        background-color: #0000FF;
}
#Layer1 {
        position:absolute;
        width:100%;
        height:380px;
        z-index:1;
        top: 25px;
        left: 8%;
}
#Layer2 {
        position:absolute;
        width:44%;
        height:85%;
        z-index:2;
        top: 8%;
        right: 10%;
}
.Style1 {font-size: small}
#Layer3 {
        position:absolute;
        width:40%;
        height:89%;
        z-index:1;
        top: 3%;
        left: 7%;
}
.Style2 {
        font-size: 18px;
        font-weight: bold;
}
#Layer4 {
        position:absolute;
        width:44%;
        height:85%;
        z-index:3;
        top: 8%;
        left: 10%;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>
 
<body>
<div align="center">
  <div id="Layer4">
    <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td><div align="left">Nos coordonn&eacute;es </div></td>
      </tr>
      <tr>
        <td><div align="left"></div></td>
      </tr>
      <tr>
        <td><div align="left">27 rue Jules Ferry </div></td>
      </tr>
      <tr>
        <td><div align="left">T&eacute;l:</div></td>
      </tr>
      <tr>
        <td><div align="left">Fax:</div></td>
      </tr>
      <tr>
        <td><div align="left">Mail:</div></td>
      </tr>
      <tr>
        <td><div align="left"></div></td>
      </tr>
      <tr>
        <td><div align="left"></div></td>
      </tr>
      <tr>
        <td><div align="left">St Julien </div></td>
      </tr>
      <tr>
        <td><div align="left">T&eacute;l</div></td>
      </tr>
	    <tr>
        <td><div align="left">Fax:</div></td>
      </tr>  <tr>
        <td><div align="left">Mail:</div></td>
      </tr>
    </table>
  </div>
<img src="../images/cadre.jpg" width="914" height="400" border="0" /></div>
<div id="Layer1"></div>
<div id="Layer2">
  <div align="center">
    <p><img src="../images/plan_modane2.gif" width="407" height="309" border="0" onclick="MM_openBrWindow('plan_centre.html','Plan','width=600,height=550')" /></p>
    <p class="Style1">Cliquez sur l'image pour agrandir </p>
  </div>
</div>
</body>
</html>

C'est surtout pour le calque layer4 qu'il y a problème: sur un grand écran, son contenu est trop à gauche, en dehors du cadre blanc, alors qu'il est dedans sur un écran de + petite taille. Et j'aimerai qu'il soit toujours à la même place...

30/03/2009, 11h23
Anne73

Mmmm ayé je crois avoir trouvé la solution: il faut mettre une valeur en pixel dans margin-left.
30/03/2009, 18h25
GihefBey
Si ça te convient et que ça fonctionne, ça marche.

Mais il serait plus simple que toutes les complications que tu as mises en œuvre soient évitées, de faire un peu plus logiquement tout en utilisant l'existant

J'obtiens un effet que j'imagine correct en remplaçant la <div align="center"> par <div id="conteneur"> et en lui appliquant
Code:

1 2 3 4 5 6 7 #conteneur { position: relative; margin : 0 auto; width : 904px; height : 400px; /* background: #00f url(../images/cadre.jpg) no-repeat center top;*/ }
Tu as remarqué que l'image de fond a été mise en commentaire.
Tu pourrais supprimer l'image du 2e tableau si tu lui donnais les bonnes dimensions à l'origine et si tu la plaçais en arrière-plan de ce bloc.

Et puis, donne des noms évocateurs à tes styles "#Layer1 .Style2..." ne sont pas parlants, on ne sait pas à quoi ça se réfère.
Et, comme tu utilises un tableau, tous ces blocs en absolute sont inutiles**.
Place tes données dans les <td> de ce tableau.

Ne laisse pas traîner ton adresse e-mail en clair comme ça.
Gare aux spams.

**
En fait, c'est le tableau qui est inutile.

-
31/03/2009, 16h44
Anne73

ok, merci beaucoup d'avoir pris le temps de me répondre!