[CSS] positionnement d'une image
antic80
Messages postés
4785
Date d'inscription
Statut
Contributeur
Dernière intervention
-
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
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
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:
- Position image css
- Ma position - Guide
- Image iso - Guide
- Suivi position google - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
3 réponses
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 ?
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 ?
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 ????
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 ????
Ç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;”.
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;”.