Discussion :

[loicper]

Bonjour,

j'aimerai savoir s'il est possible de faire apparaitre un calque à un endroit précis, peut importe la résolution de l'écran du visiteur du site.

Explication:

A cette adresse vous verrez en haut une photo en grand avec en dessous le titre de la rubrique dans laquelle apparait cette photo:

http://www.myfunpics.com/dojoalreen/accueil.php

J'ai placer à gauche du rectangle blanc le logo du club et à droite le sponsor.

Le problème c'est que j'utilise ce code pour placer les logos:

Code html :

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

1
2
3
4
5
6
<div id="Layer1" style="position:absolute; left:215px; top:300px; width:64px; height:58px; z-index:2">
<img name="yyy" src="images/LOGO-DA.gif" width="100" height="100" alt="">
</div>
<div id="Layer2" style="position:absolute; left:950px; top:300px; width:64px; height:58px; z-index:2">
<img name="yyy" src="images/LCDESIGN.jpg" alt="">
</div>

du coups vu que c'est placer par rapport au coin supérieur gauche de l'écran les logos se retrouvent décaler en fonction de la résolution du visiteur

J'aimerai plutôt dire aux 2 calques de se placer par rapport à la grande image ou par exemple décaler un à X pixel du centre de la page sur la gauche et l'autre sur la droite ?

Merci de m'aider

[Invité]

Bonjour,
c'est possible, en mettant tes 2 div DANS le div contenant la grande image.
Le div conteneur doit être en position:relative;

Comme ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div align="center" style="position:relative;">
	<a href="javascript:up(78683)">
	<img src="images/upload/12-12-10-eq-cad-jun/P1090488.jpg" width="900" height="350" alt="" border="0"></a>
	<div id="Layer1" style="position:absolute; bottom:-20px; left:0px; width:64px; height:58px; z-index:2">
		<img name="yyy" src="images/LOGO-DA.gif" width="100" height="100" alt="">
	</div>
	<div id="Layer2" style="position:absolute; bottom:-20px; right:34px; width:64px; height:58px; z-index:2">
		<img name="yyy" src="images/LCDESIGN.jpg" alt="">
	</div>
</div>

A noter :
bottom:-20px; : on positionne par rapport au BAS du conteneur.
left:0px; : par rapport au bord gauche du conteneur.
right:34px; : par rapport au bord droit du conteneur.

[loicper]

cela ne change rien

voici mon code:

Code html :

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

1
2
3
4
5
6
7
8
9
<div align="center" style="position:relative;">
<? include "imgaleatoire-grande.php.inc"; ?>
	<div id="Layer1" style="position:absolute; bottom:-20px; left:150px; width:64px; height:58px; z-index:2">
		<img name="yyy" src="images/LOGO-DA.gif" width="100" height="100" alt="">
	</div>
	<div id="Layer2" style="position:absolute; bottom:-20px; right:150px; width:64px; height:58px; z-index:2">
		<img name="yyy" src="images/LCDESIGN.jpg" alt="">
	</div>
</div>

"imgaleatoire-grande.php.inc" est une page qui prend une photo aléatoirement dans la base de donnée mais j'ai essayé de mettre les coordonnées d'une photo comme toi pour le test et cela fait pareil...

J'ai l'impression qu'il me met le logo a 150px du bord gauche de la page et non de la photo principale
et
J'ai l'impression qu'il me met l'autre logo a 150px du bord droit de la page et non de la photo principale

va faire un tour à l'adresse http://www.myfunpics.com/dojoalreen/accueil.php , et redimensionne la fenêtre, tu verras que les logos reste à égale distance des côtés de la fenêtre et non de la grande photo


merci de m'aider.

[Invité]

Normal, tu t'es trompé d'endroit.

Il faut revoir ta fonction d'affichage aléatoire....

Code :

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

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
<div align="center">
 
<table width='25%' height='25%' border='0' align='center' bgcolor='90A086'>
<tr><td>
 
<div align='center' style="position:relative;">
	<a href='javascript:up(115759)'>
	<img src="http://www.myfunpics.com/dojoalreen/images/upload/20-11-11-tournoi-ploermel/DSC00350.jpg" width='900' height='350' alt='' border='0'></a>
 
	<!-- C'EST ICI QU'IL FAUT LES METTRE !!! -->
	<div id="Layer1" style="position:absolute; bottom:-20px; left:150px; width:64px; height:58px; z-index:2">
		<img name="yyy" src="images/LOGO-DA.gif" width="100" height="100" alt="">
	</div>
	<div id="Layer2" style="position:absolute; bottom:-20px; right:150px; width:64px; height:58px; z-index:2">
		<img name="yyy" src="images/LCDESIGN.jpg" alt="">
	</div>
 
</div>
</td></tr>
</table>
 
<table width="72%" height="10" border="0" align="center" valign="top" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="FFFFFF">
<tr>
<td class="TXTdouzeBlack">
	&nbsp;&nbsp;&nbsp;<a href='galerie.php?deb=0&categorie=20-11-11-tournoi-ploermel'><font color='#000000'>20-11-2011 - Tournoi de Ploermel</font></a>
</td>
</tr>
</table>
 
</div>

Cela dit, tu as un autre problème :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

[...]

</head>
<body bgcolor="333333">

<html>
<head>
<link href="css/style" rel="stylesheet" type="text/css">
</head>
<body>

[...]

[loicper]

ok parfait çà marche:

http://www.myfunpics.com/dojoalreen/accueil.php


Par contre l'autre problème que tu évoques c'est les 2 body ?

c'est parce que j'utilise des fonctions includes de pages. mais cela ne présente pas de bug d'affichage, je pense que je vais laisser comme çà sauf si tu me dis en quoi çà peut être génant.

Merci

[Invité]

2 body, 2 head,... ce n'est pas comme ça qu'on construit une page "propre".
C'est aussi une question de compatibilité avec les différents navigateurs.

- Les pages "include" ne doivent pas comporter ces balises, qui sont la structure même d'UNE page.

Et ce n'est pas le seul problème...

Essaie de passer ta page au validateur : http://validator.w3.org/
76 Errors, 4 warning(s) ... ça fait beaucoup, surtout en "HTML 4.01 Transitional".

- Tu mélanges aussi allègrement les '...' et les "..."
- ainsi que les <div> (c'est bien) et les <table> (c'est obsolète) pour ta mise en page,
- les balises fermantes doivent être fermées,
- pour les images : <img src="........." alt="....." /> (l'attribut alt="..." est obligatoire pour passer la validation)
- les scripts : enlever/remplacer language="JavaScript" par type="text/javascript"
- ....
- Concernant le référencement naturelle, faut-il en parler ?
Aucune balises <h1>, <h2>,... qui sont bien utiles aux moteurs de recherche !
(marquer "Bienvenue sur notre site, bonne visite !" dans le bandeau supérieur n'a aucun intérêt...),
alors qu'un <h1>Judo Club d' Auray</h1> s'imposerait.

Ton code fait penser à du code poussiéreux, écrit au siècle dernier, et "re-bidouillé" et "re-re-bidouillé"...

BREF : nettoie tes fichiers, écris-les "proprement.