Layer + Position & résolution d'ecran

Version imprimable

21/11/2008, 11h57
MichaelVDH

Layer + Position & résolution d'ecran

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 :)
21/11/2008, 12h05
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 ?!

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

Page index :

Code:

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:

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

Tu peux faire quelque chose comme ça :

Code:

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:

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:

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

Code:

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;
}

21/11/2008, 13h20
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
21/11/2008, 13h33
Erwan31

Citation:

Envoyé par MichaelVDH

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 ;)
21/11/2008, 13h45
MichaelVDH

Ok compris

En tout cas encore merci mille fois :king: