réduction/changement de position des éléments lors du recadrage de la fenetre

**emirdagli** · 18/11/2008, 15h43

Bonjour,

je suis débutant en conception de pages web et j'ai un petit souci que je n'arrive pas à régler: j'aimerai que mes éléments ne changent pas de place lorsque je redimensionne ma fenêtre, mais je ne sais pas comment faire!
Chqaue élément placé d'une certaine façon diminue, s'agrandit ou change de place quand je redimensionne ma fenêtre!

Je suis dans une école d'infographie et mon prof nous donne des exercices à faire avec ses correctifs mais même avec ceux-cis, je ne trouve pas la solution!

Merci d'avance!

**mdr_cedrick** · 18/11/2008, 16h37

peux-tu nous donner le code qui te fait défaut de manière à ce que l'on puisse t'aider
(penses aux balises accessible par le bouton #)

**emirdagli** · 18/11/2008, 18h59

Salut, merci de ta réponse!

Mais en fait je ne parle pas d'un code en particulier, meme quand j'ouvre un document vierge et que je lui ajoute une image, quand je redimensionne la fenetre de mon navigateur cette image en question retrécit, s'agrandit en fonction...

Mais si tu souhaites un exemple (avec du texte seulement):

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
	xml:lang="en" lang="en">
 
 
 
<head>
 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
	<title>Beautiful flowers of my garden</title>
 
	<style media="screen" type="text/css">
	@import "styles/flowers.css";
	</style>
 
 
</head>
 
 
 
<body>
 
 
 
<h1>Beautiful flowers of my garden</h1>
 
 
<ul>
 
	<li id="tulip">
		<h2>Purple Tulip</h2>
 
		<em>10.00€ per stem</em>
		<p>
			<strong>Turkey's national flower and tulip motifs feature prominently.</strong>
		</p>
		<ul>
			<li><img src="images/fleurs/tulip1.png" alt="" /></li>
			<li><img src="images/fleurs/tulip2.png" alt="" /></li>
		</ul>
 
		<p>The tulip is actually also Iran's national flower. The European name for the flower comes from the Persian word for turban, a origin probably originating in the common Turkish custom of wearing flowers in the folds of the turban.</p>
	</li>
 
	<li id="lily">
		<h2>Lily</h2>
		<em>18.00€ per bunch</em>
		<p>
			<strong>Martagons appreciate some shade &amp; are decorative in the garden.</strong>
 
		</p>
		<ul>
			<li><img src="images/fleurs/lily1.png" alt="" /></li>
			<li><img src="images/fleurs/lily2.png" alt="" /></li>
		</ul>
		<p>Along with the earliest of the asiatics, blooms another entirely different group called the martagons, or martagons hansonii hybrids. These are tall lilies with many little down-facing flowers.</p>
	</li>
 
	<li id="pear">
 
		<h2>Pear Blossom</h2>
		<em>6.00€ per stem</em>
		<p>
			<strong>Pears are native to temperate regions of the Old World.</strong>
		</p>
		<ul>
			<li><img src="images/fleurs/pear1.png" alt="" /></li>
 
			<li><img src="images/fleurs/pear2.png" alt="" /></li>
		</ul>
		<p>The flowers are white, rarely tinted yellow or pink, 2-4 cm diameter, and have five petals. Like that of the related apple, the pear fruit is a pome, in most wild species 1-4 cm diameter.</p>
	</li>
 
	<li id="sunflower">
		<h2>Sunflower</h2>
		<em>4.00€ per stem</em>
 
		<p>
			<strong>The vibrant sunflower's recognized worldwide for its beauty.</strong>
		</p>
		<ul>
			<li><img src="images/fleurs/sunflower1.png" alt="" /></li>
			<li><img src="images/fleurs/sunflower2.png" alt="" /></li>
		</ul>
		<p>Sunflower oil is a valued and healthy vegetable oil and sunflower seeds are enjoyed as a healthy, tasty snack and nutritious ingredient to many foods.</p>
 
	</li>
 
</ul>
 
 
 
</body>
 
</html>

Voila, comment faire pour que rien ne bouge quand on modifie la taille de la fenetre??

**GihefBey** · 18/11/2008, 19h45

Bonjour,

Utilise la balise Code pour présenter ton code.
Tu peux effacer les lignes vides.

Et donne aussi le code CSS.

Sinon, un moyen simple d'y remédier est de regrouper l'ensemble de cette page dans un bloc qui recevra des dimensions.

Code html :

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

1
2
3
4
5
6
<div id="conteneur>

... le code actuel dans le body ...

</div>

-

**HiRoN** · 18/11/2008, 19h50

Salut,

Comment gères-tu la taille de tes éléments ?
En CSS ? Tailles en pixels ? % ?

**emirdagli** · 20/11/2008, 10h58

Salut, je gère la taille toujours en pixels.
Mais est-on obligé de définir des dimensions pour que les éléments ne bougent plus? Parce que dans le css qui accompagne le code html ci dessus, je n'en vois pas... et pourtant rien ne bouge à part la barre horizontale:

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
* {margin:0; padding:0; border:none; font-size:100%; font-weight:normal; font-style:normal;}
 
 
body {font:13px georgia, serif; color:#002F2F; padding-top:100px; background:url('../images/fond_header.png') repeat-x;}
 
ul {list-style:none;}
 
p {line-height:130%;}
 
 
h1 {text-align:center; padding:10px 0; text-transform:uppercase; color:#fff; background:#014A61 url('../images/bandeau_titre.png') repeat-x 0 0; top:240px; font-size:180%; letter-spacing:3px; position:absolute; width:100%; z-index:1;}
 
h2 {font-style:italic; color:#002F2F; border-bottom:2px solid #fff; padding-bottom:5px; text-align:center; font-size:170%; margin-bottom:20px;}
 
 
body > ul {width:960px; margin:0 auto 50px; position:relative; padding-top:200px; background:url('../images/colonnes.png') repeat-y;}
 
body > ul > li {width:200px; padding:20px;}
 
body > ul > li + li {position:absolute; top:200px;}
 
#lily {right:50%;}
 
#pear {left:50%;}
 
#sunflower {right:0;}
 
 
img[src="images/fleurs/tulip1.png"],
img[src="images/fleurs/lily1.png"],
img[src="images/fleurs/pear1.png"],
img[src="images/fleurs/sunflower1.png"] {position:absolute; top:-280px;}
 
img[src="images/fleurs/tulip1.png"] {top:-80px;}
 
 
em + p {font-size:17px; text-align:center;}
 
ul ul li+li {margin:20px 0;}
 
ul ul li+li img {background:#fff; border:1px solid #C4BF99; padding:14px;}
 
 
em {position:absolute; border:2px solid #A7A37E; padding:5px; background:#fff; font:bold 90% "trebuchet ms", sans-serif; color:#046380; z-index:1;}
 
#tulip em {top:-50px; left:10px;}
 
#lily em {top:-140px; left:110px;}
 
#pear em {top:-210px; left:-10px;}
 
#sunflower em {top:-100px; left:35px;}

réduction/changement de position des éléments lors du recadrage de la fenetre

HTML

Vue hybride

Discussions similaires

Partager

Partager