Superposition d'image

Fermé

Pilou - 10 févr. 2009 à 23:04
Pilou - 11 févr. 2009 à 15:05

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.

A voir également:

Superposition d'image
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Image iso windows 10 - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama
Comment agrandir une image - Guide

10 réponses

Réponse 1 / 10

Palagniouf Messages postés 99 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 30 juillet 2012 121
10 févr. 2009 à 23:32

Que elle ce mettent comme une forme de calque ? si c'est pas sa j'ai pas compris alors ;p

Réponse 2 / 10

Pilou
11 févr. 2009 à 11:58

Oui c'est ça en superposition avec leur transparence

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
11 févr. 2009 à 12:00

Bon a essayer sur ta balise img

code css

img {
     position: absolute
}

Réponse 3 / 10

Pilou
11 févr. 2009 à 12:03

Ca marche pas ton code, mes images restent toujours eparpillé sur le site

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
11 févr. 2009 à 12:04

Tu as mis le ; apres le absolute ?

Réponse 4 / 10

Pilou
11 févr. 2009 à 12:06

Je viens d'essayer ça marche toujours pas :'(

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
11 févr. 2009 à 12:08

Ton CSS est t-il bien lier à ton html ou php ?

Pilou > Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010
11 févr. 2009 à 12:09

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;
}

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51 > Pilou
11 févr. 2009 à 12:15

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;
}

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

Pilou
11 févr. 2009 à 12:21

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.'"/>';
	  }

	 
?>

Réponse 6 / 10

Pilou
11 févr. 2009 à 12:28

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 ?

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
11 févr. 2009 à 13:44

Bah moi ça marche alors je ne sais pas

Réponse 7 / 10

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
11 févr. 2009 à 14:11

essai de mettre tes images dans une div

exemple :

html

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

...

css

#img {
    position: absolute;
}

Réponse 8 / 10

Pilou
11 févr. 2009 à 14:21

Je ne peux pas mes images sont dans un code en php...

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
11 févr. 2009 à 14:27

...

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>';
	  }

Réponse 9 / 10

Pilou
11 févr. 2009 à 14:45

Le php l'accepte mais ça ne marche toujours pas !
:(

Psyk974 Messages postés 551 Date d'inscription lundi 2 février 2009 Statut Membre Dernière intervention 30 mars 2010 51
11 févr. 2009 à 15:03

Bizarre ton affaire...

Réponse 10 / 10

Pilou
11 févr. 2009 à 15:05

Effectivement ...

Discussions similaires

Impossible de télécharger photos messenger

PIX

Comment recadrer une image avec Inkscape

Comment enlever le rouge sur la photo svp ?