Superposition d'image

[Fermé]
Signaler
-
 Pilou -
Bonjour,

J'aimerai avoir un code CSS ou peu importe sous quel language, qui me permetterais de superposer TOUTES les images du site les unes sur les autres sans avoir besoin de mettre dans le code l'url de l'image je veux superposer...

Par exemple si il y a trois images sur le site, j'aimerai qu'elles se superposent automatiquement entre elles.

Voilà j'espère avoir été clair, si ce n'est pas le cas je réepliquerai avec plaisir !

Merci.

10 réponses

Messages postés
99
Date d'inscription
samedi 17 janvier 2009
Statut
Membre
Dernière intervention
30 juillet 2012
121
Que elle ce mettent comme une forme de calque ? si c'est pas sa j'ai pas compris alors ;p
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Oui c'est ça en superposition avec leur transparence
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49
Bon a essayer sur ta balise img

code css

img {
     position: absolute
}

Ca marche pas ton code, mes images restent toujours eparpillé sur le site
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49
Tu as mis le ; apres le absolute ?
Je viens d'essayer ça marche toujours pas :'(
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49
Ton CSS est t-il bien lier à ton html ou php ?
>
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010

Oui bien sur.

Ma feuille CSS :

/* styles.css for template #123
spyka.net Webmaster */
body {
margin:30px auto;
padding:0;
width:100%;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#795344;
}
/* Global */
a {
font-weight:bold;
text-decoration:underline;
color:#333;
}
a:hover {
color:#79BCFF;
} h1 {
font-size:20px;
margin:20px 0 15px 0;
} h2 {
font-size:1.2em;
font-family:Verdana, Arial, Helvetica, sans-serif;
border-bottom:1px solid #CCC;
color:#000000;
} h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
border-bottom:3px solid #795344;
}
p {
margin-left:20px;
font-size:0.8em;
}
blockquote {
border:1px solid #ddd;
background-color:#eee;
padding:4px;
font-size:0.9em;
font-style:italic;
}
blockquote p {
margin:3px;
padding:0;
}
/* Layout */
div#container {
margin:auto;
width:60%;
}
div#border {
border-left:10px solid #fff;
border-right:10px solid #fff;
}
/* Header */
div#header {
background-color:#fff;
padding:1px 0 30px 0;
}
div#header h1 {
font-family:Arial, Helvetica, sans-serif;
color:#795344;
font-size:1.6em;
padding:0;
margin:30px 0 0 20px;
font-weight:bold;
}
div#header h2 {
font-family:Arial, Helvetica, sans-serif;
color:#333333;
font-size:1.0em;
padding:0;
margin:0 0 0 20px;
font-weight:bold;
border-bottom:0;
}
/* Navigation menu */
div#menu {
height:32px;
background-color:#795344;
}
div#menu ul {
padding:0;
list-style-type:none;
margin:0 0 0 10px;
}
div#menu ul li {
float:left;
display:inline;
padding:0 4px 0 4px;
margin:0;
}
div#menu ul li a {
display:block;
float:left;
font-size:0.7em;
font-weight:bold;
padding:8px 8px 0 8px;
height:22px;
color:#fff;
text-decoration:none;
border:1px solid #795344;
}
div#menu ul li a:hover {
text-decoration:underline;
}
div#menu ul li a.current:hover {
text-decoration:none;
}
div#menu ul li a.current {
position:relative; /* for IE6 */
color:#795344;
margin-top:-5px;
padding-top:12px;
height:24px;
border:1px solid #795344;
border-bottom:none;
background-color:#fff;
}
/* Content */
div#content {
background-color:#fff;
padding:5px;
}
div#content ul {
list-style-type:square;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-left:30px;
margin-left:30px;
font-size:13px;
}
/* Footer */
div#footer {
font-size:9px;
text-align:center;
padding:2px 0 0 0;
}
div#footer p {
padding:0;
margin:0;
font-size:1em;
text-align:left;
}
div#footer p a {
color:#FFF;
font-weight:normal;
text-decoration:underline;
}

body {
height: 100%;
text-align: center;
font: 0.75em/1.33 Tahoma, Verdana, sans-serif;
color: #252525;
background: #404040 url("image/1062.GIF") left top repeat-x;
background: #404040 url("image/1050.GIF") left top repeat;

}

img {
position: absolute;
}
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49 > Pilou
Parce que je viens de faire un test chez moi ça fonctionne ce que je t'ai donné.

Sur 4 images je vois qu'une seule.

mon html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="text.css"/>
	</head>
	<body>
		<img src="images/1.jpg"/>
		<img src="images/2.jpg"/>
		<img src="images/3.jpg"/>
		<img src="images/4.jpg"/>
	</body>
</html>


mon css
img {
position: absolute;
}

Moi je viens de vérifier ça ne marche toujours pas... Voici le code qui génére les images :

<?php 

foreach($xml_api->data->city->building as $building)
	  {
	  echo '<img src="images/'.$building->attributes()->id.'.GIF" alt="'. $building->attributes()->name.'"/>';
	  }

	 
?>
Je viens de tester avec ton code html, ça ne marche pas non plus...
T'es qu'il ya a pas quelque chose d'autre qui joue dans ton CSS ?
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49
Bah moi ça marche alors je ne sais pas
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49
essai de mettre tes images dans une div

exemple :

html

<div id="img">
     <img src="images/1.jpg"/>
</a>

...

css

#img {
    position: absolute;
}
Je ne peux pas mes images sont dans un code en php...
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49
...

Tu peux pas faire ça ?

foreach($xml_api->data->city->building as $building)
	  {
	  echo '<div id="img"><img src="images/'.$building->attributes()->id.'.GIF" alt="'. $building->attributes()->name.'"/></div>';
	  }

Le php l'accepte mais ça ne marche toujours pas !
:(
Messages postés
551
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
30 mars 2010
49
Bizarre ton affaire...
Effectivement ...