Image fixed à la page

Question

jimmyplant

6 Sep 2010 à 16:07

bonjour,je fais un nouveau site pour une guilde Aion et j n'arrive pas à insérer une image fixed.
Je voudrais que celle ci reste fixée en bas de l'écran et au dessus du reste !
Comment faire ?

exemple : http://aion-guard.fr/home.php
comme la case recherche à droite

Raphael Lardy

6 Sep 2010 à 17:10

Bonjour,


/* image 1 : position fixed en bas à gauche */
#image1{
  left:0;
  bottom:0;
  position:fixed;
}
/* image 2 : position fixed centré en bas */
#image2{
  bottom:0;
  left:0;
  position:fixed;
  width:100%;
}
#image2 p{
  margin:0 auto;
  width:200px;
}

<p id="image1">
  <img src="images/image1.png" alt="mon image en bas à gauche"/>
</p>

<div id="image2">
  <p>
    <img src="images/image2.png" alt="mon image centrée en bas"/>
  </p>
</div>

Modifié par Raphael Lardy (06 Sep 2010 - 17:13)

jimmyplant

6 Sep 2010 à 18:09

J'ai copié collé ton code dans mon php mais la première partie du code ne marche pas je te donne tout mon code :

a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equilibre - Légion Elyséenne - Aion Evolution</title>
<style type="text/css">
body {
background-image: url(bgl.png);
background-repeat: no-repeat;
background-position : center top;
background-color:#878e98
}

body {
background-attachment: fixed;
background-color: #FFF;
background-image: url(bgl.png);
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
body table tr td table tr td table tr td {
}
</style>
</head>

<body>

<table width="800" border="0" bordercolor="#FF0000"align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="logoaion.png" width="200" height="77" /></td>
</tr>
</table>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="175" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img src="zone_top.png" width="175" height="15" /></td>
</tr>
</table>
<table width="175" border="0" cellspacing="0" cellpadding="0" background="zone_bg.png" align="center">
<tr>
<td><table width="170" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="evolution.png" width="170" height="68" /></td>
</tr>
</table>
<p>

</p>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
</table>
<table width="175" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img src="zone_bot.png" width="175" height="15" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="175" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="zone_top.png" width="175" height="15" /></td>
</tr>
</table>
<table width="175" border="0" cellspacing="0" cellpadding="0" background="zone_bg.png" align="center">
<tr>
<td><table width="175" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>Gladiateur</td>
</tr>
<tr>
<td><img src="recruvert.png" width="135" height="34" /></td>
</tr>
<tr>
<td>Templier</td>
</tr>
<tr>
<td><img src="recrurouge.png" width="135" height="34" /></td>
</tr>
<tr>
<td>Rôdeur</td>
</tr>
<tr>
<td><img src="recrurouge.png" width="135" height="34" /></td>
</tr>
<tr>
<td>Assassin</td>
</tr>
<tr>
<td><img src="recrurouge.png" width="135" height="34" /></td>
</tr>
<tr>
<td>Sorcier</td>
</tr>
<tr>
<td><img src="recrurouge.png" width="135" height="34" /></td>
</tr>
<tr>
<td>Spiritualiste</td>
</tr>
<tr>
<td><img src="recruorange.png" width="135" height="34" /></td>
</tr>
<tr>
<td>Clerc</td>
</tr>
<tr>
<td><img src="recrurouge.png" width="135" height="34" /></td>
</tr>
<tr>
<td>Aède</td>
</tr>
<tr>
<td><img src="recrurouge.png" width="135" height="34" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="175" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="zone_bot.png" width="175" height="15" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="175" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img src="zone_top.png" alt="g" width="175" height="15" /></td>
</tr>
</table>
<table width="175" border="0" cellspacing="0" cellpadding="0" background="zone_bg.png" align="center">
<tr>
<td> </td>
</tr>
</table>
<table width="175" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img src="zone_bot.png" alt="g" width="175" height="15" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<table width="185" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="90" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://www.gowonda.com/vote.php?server_id=108" target="_blank"><img src="vote.gif" width="90" height="60" border="0" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="90" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://www.rpg-paradize.com/?page=vote&vote=6859" target="_blank"><img src="vote2.gif" alt="g" width="90" height="60" border="0" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="600"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<img src="logo.png" width="600" height="81" />
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="body_top.png" width="600" height="50" /></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" background="body_bg.png">
<tr>
<td><table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left">10.09.2010</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" background="body_bot.png">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="10">
<tr>
<td><a href="http://www.evolution-fr.com/"><img src="evolution2.png" alt="g" width="122" height="66" border="0" /></a></td>
<td><a href="http://fr.aiondatabase.com/"><img src="aiondatabase.png" alt="g" width="122" height="66" border="0" /></a></td>
<td><a href="http://eu.ncsoft.com/fr/"><img src="ncsoft.png" alt="g" width="122" height="66" border="0" /></a></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><object type="application/x-shockwave-flash" data="dewplayer-rect.swf" width="240" height="20" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="dewplayer-rect.swf" />
<param name="flashvars" value="mp3=ost.mp3|ost2.mp3&autostart=1&autoreplay=1&nopointer=1|ost2.mp3&autostart=1&autoreplay=1&nopointer=1" />
</object></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

/* image 1 : position fixed en bas à gauche */

#image1{

left:0;

bottom:0;

position:fixed;

}

/* image 2 : position fixed centré en bas */

#image2{

bottom:0;

left:0;

position:fixed;

width:100%;

}

#image2 p{

margin:0 auto;

width:200px;

}

<p id="image1">

<img src="images/image1.png" alt="mon image en bas à gauche"/>

</p>

<div id="image2">

<p>

<img src="images/image2.png" alt="mon image centrée en bas"/>

</p>

</div>

</body>
</html>

jimmyplant

6 Sep 2010 à 18:12

Ok désolé j'ai pas bien regardé ^^ j'ai copier le début du code dans la feuille css et tout marche nickel !!! Je te remercie, c'est parfait Smiley biggrin

Sujet clos

Questions générales et questions de débutants

Image fixed à la page