[CSS] positionnement d'une image

Fermé

antic80 Messages postés 4785 Date d'inscription lundi 30 mai 2005 Statut Contributeur Dernière intervention 9 septembre 2009 - 28 sept. 2005 à 15:29
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 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

A voir également:

[CSS] positionnement d'une image
Image iso - Guide
Comment agrandir une image - Guide
Acronis true image - Télécharger - Sauvegarde
Légender une image - Guide
Telecharger une image disque windows 10 fichier iso - Guide

3 réponses

Réponse 1 / 3

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
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 ?

Réponse 2 / 3

antic80 Messages postés 4785 Date d'inscription lundi 30 mai 2005 Statut Contributeur Dernière intervention 9 septembre 2009 1 159
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 ????

Réponse 3 / 3

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
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;”.

Discussions similaires

Dechiffrer une image caché

Retrouver moi l'original

PIX

image ?

Comment enlever le rouge sur la photo svp ?