Discussion :

[MichaelVDH]

Bonjour à tous,

J'ai un petit soucis, pour le design de mon site, j'utilise des layers, donc j'ai un tableau avec une image de fond sur lequel je superpose des calques, cela fonctionne magnifiquement bien en tout résolution à partir du moment ou le tableau n'est pas centré.

Si je centre le tableau et modifis la résolution d'ecran, tout le design foire...

Auriez-vous une solution pour positionner mes calques, par rapport à la position du tableau et pas de la page en elle-meme???

Merci à vous

[c_s_s]

Bonjour,

Tu peux metre ton tableau et les layers dans un bloc en position relative.

Ensuite positionne ce bloc comme tu le veux sur la page.

Tu as une page en ligne ou du code à nous montrer pour te donner un exemple plus concret ?!

[MichaelVDH]

Oui attend je te montre et merci de ta reponse :-)

Page index :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<table width="1024" height="768" border="0" align="center">
  <tr>
    <td nowrap="nowrap" background="img/fond.jpg" >
    <img src="img/logo.png" class="logo_affichage" />
    </td>
  </tr>
</table>

et pour le CSS correspondant au style logo_affichage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.logo_affichage
{
    position:absolute;
    top : 40px;
    left: 150px;
    z-index:1;
}

[c_s_s]

Tu peux faire quelque chose comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div style="content">
<table width="1024" height="768" border="0">
  <tr>
    <td nowrap="nowrap" background="img/fond.jpg" ><img src="img/logo.png" class="logo_affichage" /></td>
  </tr>
</table>
 
<!-- tes layers ici -->
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.content {
	width: 1024px;
	margin: 0 auto;
	position: relative;
}

Cela dit, as-tu vraiment besoin d'une table juste pour y mettre une image ?

Tu pourrais faire quelque chose du genre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div style="content">
<img src="img/logo.png" class="logo_affichage" />
 
<!-- tes layers ici -->
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.content{
	width: 1024px;
	height: 768px;
	background: url(img/fond.jpg) no-repeat left top;
	margin: 0 auto;
	position: relative;
}

[MichaelVDH]

Genial ta portion de code sans la <table> fonctionne nickel

Par contre, je suis pas une bête du CSS, donc je comprend comment dans la class "content" centre le <div>??

Sinon c'est super, merci beaucoup beaucoup beaucoup

[Erwan31]

Par contre, je suis pas une bête du CSS, donc je comprend comment dans la class "content" centre le <div>??

margin: 0 auto et plus précisement les marges latérales auto

[MichaelVDH]

Ok compris

En tout cas encore merci mille fois