Discussion :

[jokooo]

Bonjour,

je suis en train de faire un site internet pour ma famille (regroupement de photos...) et je suis en face d'un problème que je n'arrive pas à résoudre :
- j'ai une image que je veux mettre en haut de page et qui prend toute la largeur de ma page avec 4 éléments aux coins de l'image et un logo central
- je veux ajouter des liens par dessus l'image qui entourent le logo
- j'ai utilisé pour ca des positions relatives pour l'emplacement de chaque lien
Mon code fonctionne très bien sous Firefox et IE7 mais tous les liens sont décalés vers le bas sous IE6 ce qui rend ma page illisible.

Voici mon code HTML :

<div id="header">
<p style="position: relative; top: 30px; left: 243px; width: 300px; height: 1px;"><a href="../src/page1.html">Titre 1</a></p>
<p style="position: relative; top: 29px; left: 580px; width: 300px; height: 1px;"><a href="../src/page2.html">Titre 2</a></p>
<p style="position: relative; top: 55px; left: 199px; width: 300px; height: 1px;"><a href="../src/page3.html">Titre 3</a></p>
<p style="position: relative; top: 54px; left: 600px; width: 300px; height: 1px;"><a href="../src/page4.html">Titre 4</a></p>
<p style="position: relative; top: 80px; left: 160px; width: 300px; height: 1px;"><a href="../src/page5.html">Titre 5</a></p>
<p style="position: relative; top: 79px; left: 620px; width: 300px; height: 1px;"><a href="../src/page6.html">Titre 6</a></p>
<p style="position: relative; top: 105px; left: 198px; width: 300px; height: 1px;"><a href="../src/page7.html">Titre 7</a></p>
<p style="position: relative; top: 104px; left: 620px; width: 300px; height: 1px;"><a href="../src/page8.html">Titre 8</a></p>
<p style="position: relative; top: 130px; left: 230px; width: 300px; height: 1px;"><a href="../src/page9.html">Titre 9</a></p>
<p style="position: relative; top: 129px; left: 600px; width: 300px; height: 1px;"><a href="../src/page10.html">Titre 10</a></p>
<p style="position: relative; top: 155px; left: 240px; width: 300px; height: 1px;"><a href="../src/page11.html">Titre 11</a></p>
<p style="position: relative; top: 154px; left: 580px; width: 300px; height: 1px;"><a href="../src/page12.html">Titre 12</a></p>
</div>

Et voici la balise CSS :

.modele #header {
height: 230px;
background-color: #FFFFFF;
background-image: url(../i/logo.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

Savez vous comment résoudre mon problème ?
Merci pour votre aide.
Cdt.

[c_s_s]

Bonjour,

Peut-être qu'une position absolue fonctionnerait mieux qu'une position relative.


Au passage, tu pourrais simplifier ton code HTML et mettre toutes les propriétés communes dans le CSS.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="header">
<p style="top: 30px; left: 243px;"><a href="../src/page1.html">Titre 1</a></p>
<p style="top: 29px; left: 580px;"><a href="../src/page2.html">Titre 2</a></p>
<p style="top: 55px; left: 199px;"><a href="../src/page3.html">Titre 3</a></p>
<p style="top: 54px; left: 600px;"><a href="../src/page4.html">Titre 4</a></p>
<p style="top: 80px; left: 160px;"><a href="../src/page5.html">Titre 5</a></p>
<p style="top: 79px; left: 620px;"><a href="../src/page6.html">Titre 6</a></p>
<p style="top: 105px; left: 198px;"><a href="../src/page7.html">Titre 7</a></p>
<p style="top: 104px; left: 620px;"><a href="../src/page8.html">Titre 8</a></p>
<p style="top: 130px; left: 230px;"><a href="../src/page9.html">Titre 9</a></p>
<p style="top: 129px; left: 600px;"><a href="../src/page10.html">Titre 10</a></p>
<p style="top: 155px; left: 240px;"><a href="../src/page11.html">Titre 11</a></p>
<p style="top: 154px; left: 580px;"><a href="../src/page12.html">Titre 12</a></p>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.modele #header p {	
	position:absolute;
	width:300px;
	height:1px;
}
.modele #header {
	height: 230px;
	background-color: #FFF;
	background-image: url(../i/logo.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

[jokooo]

Merci pour cette réponse.
J'avais aussi pensé à utiliser une position absolue mais la largeur de ma page (et donc la largeur de mon image de base) ne correspond pas à la largeur de la fenêtre, il me semble qu'en utilisant une position absolue pour les liens, la position initiale de référence est le coin en haut à gauche de la fenêtre et donc lorsque l'on réduira la taille de la fenêtre tous les liens seront décalés et ne seront plus centrés autours du logo.
Je me trompe ?

[c_s_s]

Lorsque tu réduis la fenêtre, la partie gauche ne bouge pas, donc l'origine de référence des positions absolues ne bouge pas non plus.

Au passage, la position absolue est liée au premier parent positionné.
Par défaut, c'est la fenêtre du navigateur, mais si tu ajoutes un position:relative à ton #header, alors les positions absolues des paragraphes se feront par rapport à ton header, et plus par rapport à la fenêtre.

[jokooo]

J'ai fait ces modifications et ca marche trs bien sour IE6 comme sous IE7 et Firefox.
Merci beaucoup pour ton aide !