[CSS][Debutant] position d'image et repetition verticale

**Pepito** · 31/03/2006, 01h52

Ami(e) du jour, bonjour

Je me suis enfin decidé à faire un site sans tableau !! (c'est pas trop tot

)
voici l'adresse de mon site : http://lepsydexavier.free.fr

Mais j'ai 2 petits problemes que je n'arrive pas a résoudre.

1 - sous Internet Explorer, le bureau en bois (sous le livre) est decalé sur la droite !! Meme avec un margin-left:0, ca marche pas. Pourtant le bureau est sa place sous FF et Opera !!

2 - le deuxieme probleme, c'est que si l'ecran est grand verticalement, je n'arrive pas a repeter l'image du bureau. Par contre si je donne une valeur superieur à celle de l'image pour la hauteur, l'image se repete automatiquement, mais j'aimerai qu'elle se repete seulement si l'ecran est plus grand que l'image. (vous comprenez ??

)

Je vous passe mon code (qui est tres simple (enfin je pense)
HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
<body>
	<div id="bureau"></div>
	<div id="global">
		<div id="bibliotheque"></div>
		<div id="calendrier"></div>
		<div id="fenetre"></div>	
		<div id="journal"></div>
 
	</div>
</body>

Feuille de style 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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
body { 
	background: url("images/tapisserie.jpg") repeat-x; 
	background-color: #993300;
	margin: 0px;
	text-align: center;  /* pour corriger le bug de centrage IE */
	padding: 0px; /* ca, c'est pour Opera !! */
}
 
#global {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	height: 100%;
	text-align: left;   /* on rétablit l'alignement normal du texte (toujours a cause d'IE) */
}
 
#bureau {
	background: url("images/bureau.jpg");
	position: absolute;
	width: 100%;
	height: 300px;
	margin-top: 432px;
	margin-left: 0px;
}
 
#bibliotheque {
	background: url("images/bibliotheque.jpg") no-repeat;	
	position: absolute; 
	width: 232px;
	height: 445px;
	margin-left: 35px;
	margin-top: 10px;
}
 
#calendrier {
	background: url("images/calendrier.jpg") no-repeat;	
	position: absolute; 
	width: 168px;
	height: 168px;
	margin-left: 305px;
	margin-top: 55px;
}
 
#fenetre {
	background: url("images/janvier.jpg") no-repeat; 
	position: absolute; 
	width: 250px;
	height: 250px;
	margin-left: 515px;
	margin-top: 2px;
} 
 
#journal {
	background: url("images/livre.gif") no-repeat; 
	position: absolute; 
	width: 800px;
	height: 477px;
	margin-left: 0px;
	margin-top: 255px;	
}

Voili, voilo. je vais continuer mes recherches mais si vous avez des idées, elles sont le bienvenue.
Merki pour tout.

Pepit'

**Sayrus** · 31/03/2006, 11h52

background-repeat: repeat-y;

essai ça.

**Pepito** · 31/03/2006, 14h29

oui j'avais pensé à faire ca, mais ca ne change rien du tout.
Ca peut aussi provenir de la hauteur je pense.
Si je met height:300px; (qui est la taille de l'image) ca m'affiche l'image qu'une seule fois, ce qui est normal,
mais si je met height: 100%; (avec un repeat-y), ca m'affiche deux fois l'image meme quand une seule fois suffirait pour recouvrir tout l'ecran. ce qui fait que j'ai un ascenceur vertical pour rien !!

**Sayrus** · 03/04/2006, 09h03

Rajoute height:auto;

+ la ligne du repeat-y

ca devrait passer, désolé pour le temps écoulé entre les réponses.

[CSS][Debutant] position d'image et repetition verticale

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager