High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

[CSS] positionnement d'une image

Dernière réponse le 28 sep 2005 à 23:42:26 antic80, le 28 sep 2005 à 15:29:56 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [CSS] positionnement d'une image » dans :
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
[Webmaster] Adapter un site à toutes les résolutions, le centrer VoirUne question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?" Pas besoin de se compliquer la vie pour ça ! Comment faire Il suffit d'appliquer une largeur relative (=qui change selon...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
DHTML - La notion de couche VoirQu'est-ce qu'une couche? Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des...
Posez votre question Répondre

1

Gihef, le 28 sep 2005 à 15:41:13

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épondre à Gihef

2

antic80, le 28 sep 2005 à 16:01:49

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épondre à antic80

3

 Gihef, le 28 sep 2005 à 23:42:26

Ç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;”.

   
Répondre à Gihef
Posez votre question Répondre
Ils ont besoin de votre aide