une reproduction d'image

**aertys** · 20/09/2013, 19h20

bonsoir, j'ai une image à reproduire qui ressemble à ce qu'on ob'tient avec ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/authentification.css" />
	<meta charset="UTF-8">
	<title>Web site</title>
</head>	
<body>
	<div class="g"></div>
	<div class="c">
		<a href="#" title="aller à l'accueil">accueil</a><hr />
		<a href="#" title="contacter l'administrateur">contacter l'administrateur</a>
	</div>
	<div class="d"></div>
	<section>
		<article>
			<form>
				<fieldset>
					<legend>Merci de bien vouloir vous identifier</legend>
					<hr /><br />
					<label for="nom">Identifiant : </label>
					<input type="text" name="nom" maxlength="20" placeholder="Votre nom?" /> <br />
					<label for="pass">Mot de passe : </label>
					<input type="password" name="pass" maxlength="10" placeholder="motpasse" />
				</fieldset> <br />
				<input type="submit" value="Envoyer" align="right"/>
			</form>
		</article>
		<aside>
			<h3>Notes</h3>
			<p>Cette page permet à l'utilisateur de s'identifier pour accéder à l'application. Seuls les utilisateurs "administrateurs" peuvent accéder au service.</p>
                </aside>
	</section>
</body>
</html>

et le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.g { background : url("../images/left.jpg") no-repeat fixed center; }
.c { background : url("../images/center.jpg") repeat-x fixed center; }
.d { background : url("../images/right.jpg") no-repeat fixed center; }
body { width : 90% }
article { width : 60%; }
article,aside { display : inline-block; }      
aside { width : 30%; 
background-color : #cccccc;
vertical-align : top; }
a { text-transform : uppercase;
color : white;
text-decoration : none; }
ul { list-style-type : none }
hr { color : white; }
form hr { color : red }
div { width : 30%;
height : 160px; }
p { text-align : justify; }

Le souci c'est que mes images ne s'affichent pas!

**thelvin** · 20/09/2013, 20h41

Un peu léger pour vérifier si les images existent, on s'en sortirait mieux avec une URL.

Mais je pense que tu as recopié fixed dans background sans savoir ce que ça veut dire. Mauvaise idée, le retour de bâton a été immédiat.

**aertys** · 21/09/2013, 14h14

Mais je pense que tu as recopié fixed dans background sans savoir ce que ça veut dire. Mauvaise idée, le retour de bâton a été immédiat.

Je pense que t'as raison parce que je n'ai pas compris ce que tu veux dire.
Pour moi, il y a scroll (l'image se déplace avec l'ascenseur) ou fixed (l'image ne se déplace pas).

**thelvin** · 21/09/2013, 14h43

Ma foi c'est bien ça.
Mais si l'image ne se déplace pas, ça veut dire qu'elle est à un endroit et un seul. Et qu'elle n'est visible que quand l'élément dont elle est le background passe au-dessus d'elle.

Pour g et d, qui sont de hauteur et largeur nulle, ça ne peut pas arriver. Et pour c, qui est petit, ça n'arrivera que par hasard.

**aertys** · 21/09/2013, 15h21

il n'y a rien écrit dessus mais vu que j'ai écrit cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
div { width : 30%;
height : 160px; }

elles ne devraient pas avoir de largeur et de hauteur non nulles?

**thelvin** · 21/09/2013, 17h37

Ah, en effet.

Donc comme avec le c, c'est juste une question de chance. Pas ce qu'il faut, donc.

**aertys** · 21/09/2013, 20h29

Mais le souci c'est que sous aucun de mes navigateurs on ne peut voir les images, sauf Chrome qui m'affiche un bout de l'image du centre...
est-ce que je ne devrais pas tout simplement retirer le fixed?

**rodolphebrd** · 21/09/2013, 20h48

Bonjour,

je pense que fixed pourrait être en effet retiré...

Fixed est plutôt utilisé pour une image de fond du Body et celle-ci se positionnera par rapport à la fenêtre d'affichage.

C'est plus problématique quand vous donnez cette valeur à un élément. Car en effet l'image se positionnera quant même par rapport à la fenêtre d'affichage.

Donc center fixed place l'image au centre de la fenêtre d'affichage c'est pourquoi elle est invisible dans vos éléments placés à gauche et donc excentrés par rapport à cette fenêtre.

http://www.w3.org/TR/CSS2/colors.htm...und-properties

**aertys** · 21/09/2013, 22h33

merci ça marche maintenant

une reproduction d'image

CSS

Discussions similaires

Partager

Partager