Superposition d'image
Pilou
-
Pilou -
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.
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
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Image gratuite - Guide
10 réponses
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;
}
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;
}
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
mon css
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
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 ?
T'es qu'il ya a pas quelque chose d'autre qui joue dans ton CSS ?
essai de mettre tes images dans une div
exemple :
html
...
css
exemple :
html
<div id="img">
<img src="images/1.jpg"/>
</a>
...
css
#img {
position: absolute;
}
