Flux rss
Ils ont besoin de votre aide
Collection CommentÇaMarche.net
Rechercher : dans
Par : Mots clés Nom d'utilisateur
Messages sans réponse

[CSS] positionnement d'une image

antic80, le mercredi 28 septembre 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 »
Posez votre question Répondre

1

Gihef, le mercredi 28 septembre 2005 à 15:41:13
  • +1

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 mercredi 28 septembre 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 mercredi 28 septembre 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
Positionnement d'image en css.. Bonjour a tous, Alors voila j'ai tout simplement un problèeme de positionnement de mon image qui devrait être placer en haut au centre de ma page mais reste tout de même en haut a gauche... Voila mon code css : .baniere { background:... www.commentcamarche.net/forum/affich-2654520-positionnement-d-image-en-css
Positionner des éléments grâce aux CSS Il 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... www.commentcamarche.net/contents/css/cssposition.php3
Css / Positionner Du Texte bonjour, J'ai un probleme avec une page HTML avec CSS. J'ai une image d'arrière-plan, je dois positionner du texte precisement dans cette image, a un endroit défini. J'ai utilisé la propriété css "margin". Mais lorsque j'ouvre ma page html dans un... www.commentcamarche.net/forum/affich-1031307-css-positionner-du-texte
Javascript - Librairies d'effets pour vos imagesAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus... www.commentcamarche.net/faq/sujet-9314-javascript-librairies-d-effets-pour-vos-images
Les CSS pour présenter vos imagesPour 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... www.commentcamarche.net/faq/sujet-9100-les-css-pour-presenter-vos-images
Résultats pour [CSS] positionnement d'une image
[CSS] Associer image à menu (li:hover)Bonjour, J'essaye de créer un menu en html et css grâce au balises et . Je souhaiterais associer à la balise (donc à l'élément du menu) une image (list-style-image:url(images/soleil.gif)) lors du passage de la souris sur cet élément.... www.commentcamarche.net/forum/affich-3206347-css-associer-image-a-menu-li-hover
[css?/js?]Image au survol de sourisBonjour, je viens de réaliser un design, et je souhaiterais faire changer mon image au survol de la souris, mais je n'y arrive point! je ne sais pas si je doit m'orienter vers du css ou du JS! donc voilà Merci [voici mon code actuel :p] www.commentcamarche.net/forum/affich-5006850-css-js-image-au-survol-de-souris
[css] background imageBonjour, J'aurais juste besoin de savoir s'il est possible d' "obliger" une image de fond (background-image) à se proportionner de façon a remplir la totalité du fond de la page. Merci d'avance de vos réponses Isa www.commentcamarche.net/forum/affich-1277090-css-background-image
Résultats pour [CSS] positionnement d'une image
Les classes de style (CSS)Les classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des... www.commentcamarche.net/contents/css/cssclass.php3
CSS - Les couleursLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de... www.commentcamarche.net/contents/css/css-couleurs.php3
Résultats pour [CSS] positionnement d'une image