[CSS] positionnement d'une image

Fermé
antic80
Messages postés
4751
Date d'inscription
lundi 30 mai 2005
Statut
Contributeur
Dernière intervention
9 septembre 2009
- 28 sept. 2005 à 15:29
Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
- 28 sept. 2005 à 23:42
bonjour a tous

voila je suis en train de réaliser une présentation de page html avec les css

j'ai pour commencer une bande sur toute la largeur

ensuite en dessous une bande composé de 2 parties de meme longueur

en dessous j'ai une colonne a gauche pour mettre un menu et une cadre a droite pour le contenu

j'ai réaliser tout ca avec la propriété position:absolue



ma question est comment je dois pour placer une image en haut a gauche qui puisse a la fois etre superposer aux 2 bandes du haut et a la colonne de gauche

j'arrive a placer mon image en haut a gauche mais elle est coupé au niveau de la 1ere bande

merci pour vos conseils a venir

3 réponses

Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
2 767
28 sept. 2005 à 15:41
Bonjour,
As-tu essayé sans “position:absolue” ?
Ne t'est-il pas possible de ne superposer ton image aux bandes ? Simplement de la caler entre les bandes et la colonne. À l'aide de “margin-left” pour les bandes et d'une “margin-top” pour la colonne avec les dimensions de l'image ? Et des marges à 0 pour l'image.
“z-index” pourrait peut-être aussi venir à ton aide ?
1
antic80
Messages postés
4751
Date d'inscription
lundi 30 mai 2005
Statut
Contributeur
Dernière intervention
9 septembre 2009
1 174
28 sept. 2005 à 16:01
j'avouerai que je galère un peu

j'ai une question aussi

voici le code dans ma page html

<div class="footer">
<table border="1" bgcolor="" width="100%" height="100">
<tr>
<td width="80%">
<DIV ID="1" STYLE="position:absolute;visibility:hidden" onmouseout="cache(1)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(1).style.visibility = 'visible';controle(1)">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="" STYLE="color:#ffffff">Lien</a><br>
<a href="" STYLE="color:#ffffff">Lien</a><br>
<a href="" STYLE="color:#ffffff">Lien</a><br>
</td></tr></table>
</DIV>

<DIV ID="2" STYLE="position:absolute;visibility:hidden" onmouseout="cache(2)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(2).style.visibility = 'visible';controle(2)">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</a></b>
</td></tr></table>
</DIV>

<DIV ID="3" STYLE="position:absolute;visibility:hidden" onmouseout="cache(3)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(3).style.visibility = 'visible'">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
</td></tr></table>
</DIV>

<DIV ID="4" STYLE="position:absolute;visibility:hidden" onmouseout="cache(3)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(3).style.visibility = 'visible'">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
</td></tr></table>
</DIV>

<DIV ID="5" STYLE="visibility:hidden" onmouseout="cache(3)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(3).style.visibility = 'visible'">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="" STYLE="position:absolue;color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
<a href="" STYLE="color:#ffffff"><b>Lien</b></a><br>
</td></tr></table>
</DIV>

<table width="600" cellpadding=3 border=1 bordercolor="#FFFFFF" bgcolor="#FFFFFF" cellspacing=0 bordercolorlight="#000000" bordercolordark="#C0C0C0">

<td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(1);controle(1)"><font face=verdana size=1><img border="0" src="hiver.jpg" widht="100" height="50" alt="">Nos produits</font></td></a>

<td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(2);controle(2)"><font face=verdana size=1>Notre personnel</font></td></a>

<td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(3);controle(3)"><font face=verdana size=1>Nos clients</font></td></a>

<td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(4);controle(4)"><font face=verdana size=1>Situation géographique</font></td></a>

<td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(5);controle(5)"><font face=verdana size=1>Présentation de l'entreprise</font></td></a>

</table>


</td>
</tr>
</table>


</div>


et voici le code du bas de page en css

.footer{
border-style:solid;
border-top-style:none;
border-width:1px;
border-color:black;
background-color:silver;
width:980px;
height:100px;
position:absolute;
top:915px;
left:10px;
}

dans mon bas de page j'ai 5 images. quand on passe sur chaque image un menu apparait.

si je laisse pour chaque image position:absolue mon menu apparait tout en bas de la page et pas en dessous de l'image

si je retire position:absolue chaque menu apparait au dessus de la 1ere image

pourquoi ????
0
Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
2 767
28 sept. 2005 à 23:42
Ça devient ardu pour moi qui suis débutant.
Je ne peux que te proposer des pistes.
Dans quel(s) navigateur(s) as-tu testé ton code ?
IExplorer a tendance à ne pas respecter la norme et affiche certains éléments de manière fantaisiste.
Avant ton footer, essaye d'insérer une <div> avec “clear: both;” et une hauteur dedans, pour lui rendre service.
Si ça ne suffit pas, “clear: both;” aussi dans le footer. Ou encore “display: block;”.
0