Texte pour design extensible

**im-rainmaker** · 25/11/2008, 11h44

Bonjour,

Voila j'ai un petit problème, c'est que mon texte ne suis pas les mouvement de mon design lors du changement de résultion, pour faire simple lorsque je suis en 1280*1024 ( ma résolution ) le texte est placé ou je le souhaite et ça passe parfaitement, mais lorsque je change de résolution, le texte ce retrouve un peut n'importe ou donc si vous pouviez m'indiquer mon erreur, ce serais génial.

Voici mon html :

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
<html>
	<head>
	<link href="favicon.ico" rel="icon" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<title>
			Bienvenue chez Tailleur Jean
		</title>
	</head>
	<body>
 
		<div id="fond"><img src="fond.jpg" width="991px" height="1164px"></div>
		<center><img src="bandeg.jpg" width="50%" height="1164px"><img src="banded.jpg" width="50%" height="1164px"></center>
		<p>
			<b>Retouche</b><br><br>
			<b>Ourlet  :</b><br><br>
			- Robe de soirée<br>
			- Jeans<br>
			- Pantalon «ville»<br>
			- Revers<br>
			- Jupe doublée<br>
			- Manteau<br>
			- Bas de manche : chemisier, vestes<br><br>
			<b>Rétrécir ou Elargir :</b><br><br>
			- Pantalon (m.dos)<br>
			- Jupe doublée + couture<br><br>
			<b>Fermoirs :</b><br><br>
			- Robe de mariée, suite, soirée, bal...<br>
			- Jean, jupe<br>
			- Blouson<br>
			- Etole avec manches<br>
			- Bolêro manche longue en satin ou aut<br>
		</p>	
		<div id="prix">
			à partir de 10€/M<br>
			6,50€<br>
			8€<br>
			10€<br>
			à partir de 10€<br>
			18€<br>
			12€<br><br>
			<br><br>
			8€<br>
			12€<br><br>
			<br><br>
			20€<br>
			10€<br>
			20€<br>
			15€<br>
			50€<br>
		</div>
		<div id="lien">
			<ul>
				<center>
				<a href="index.html">::accueil::</a>
				<a href="retouche.html">::retouche::</a>
				<a href="contact.html">::contact::</a>
				<a href="index.html">::promotion::</a>
				</center>
			</ul>
		</div>
	</body>
</html>

et le css ( le texte ce trouve dans : p, #prix et ul)

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
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#fond {
position: absolute;
width : 991px;
height : 1164px;
left : 50%;
margin-left : -495px;
}
#prix{
position: absolute;
text-align: right;
font-size: 88%;
overflow: auto;
padding: 8px;
top: 80%;
margin-top: -250px;
left : 42%;
margin-left : -198px;
width : 396px;
height : 500px;	
}
p {
position: absolute;
text-align: justify;
font-size: 88%;
overflow: auto;
padding: 8px;
top: 72%;
margin-top: -250px;
left : 46%;
margin-left : -198px;
width : 396px;
height : 500px;	
}
ul {
position: absolute;
color: #424242;
font-size: 100%;
left: 60.8%;
top: 400px;
width : 112px;
height : 180px;	
}
a{
color:#424242;
text-decoration:underline;
}
a:hover{
color:#3c79a1;
}

Voilà, merci d'avance, cordialement Bazin Jérémy.

**c_s_s** · 25/11/2008, 11h53

Bonjour,

Sans voir les images ce n'est pas facile de se rendre compte du problème, mais l'utilisation abusive des position:absolute doit sûrement y être pour quelque chose.

Tu as une page en ligne ?

**im-rainmaker** · 25/11/2008, 12h58

Heu oui voila : tailleurjean.be

**c_s_s** · 25/11/2008, 13h57

Bon, il y a plusieurs erreurs sur la page.

- il manque un Doctype (tout en haut du code HTML)
- tu utilises des balises dépréciées (<center>)
- des balises sont mal placées (<center> n'a rien à faire après <ul>)
- des balises sont manquantes (<li> après <ul>)
- etc...

Globalement, et sans vouloir être méchant, on voit qu'il y a un manque de connaissances des bases du HTML.
Ensuite, la logique de construction de la page n'est pas forcément bonne, alors qu'il y a finalement peu d'éléments à placer (une liste à gauche, un menu à droite).

Un conseil, oublie les positions absolues dans tous les sens. Certes c'est pratique pour placer les éléments où on veut sur la page, mais ce n'est pas très souple (ça saute aux yeux quand on redimensionne la page).

Utilise plutôt les éléments flottants (float), les marges internes et externes (padding, margin), les listes à puces (ul, li), les listes de définitions (dl, dt, dd), les balises sémantiques pour les titres (h1, h2), etc...

Le code sera plus propre et la page s'affichera correctement quelle que soit le navigateur ou la résolution.

Si tu veux une aide pour modifier pas à pas la structure de ta page, fais moi signe.

PS : un dernier point, les fautes d'orthographe dans l'image qui sert de background gachent tout le sérieux qui pouvait se dégager du graphisme.

**devyan** · 25/11/2008, 14h24

Salut,

C'est tout à fait normal qu'elles ne bougent pas horizontalement de la même façon étant donné que tu les positionnes en pourcentage avec des valeurs différentes (50% pour le fond, 46% pour le texte et 42% pour les prix)

Ils ne démarrent donc pas de la même origine...

**devyan** · 25/11/2008, 14h31

Envoyé par c_s_s

PS : un dernier point, les fautes d'orthographe dans l'image qui sert de background gachent tout le sérieux qui pouvait se dégager du graphisme.

+++++1 Un petit passage des textes dans word (ou dans l'éditeur de post de CE forum

) ne serait effectivement pas du luxe pour l'image de sérieux de l'artisan.

**im-rainmaker** · 25/11/2008, 16h58

Salut,

Merci pour vos réponse, bon comme vous aurez pus le voir, je suis plus dans l'infographie que dans le codage, mais on m'a quant même demandé de le faire, donc bon j'apprends au fur et à mesure.

Alors c_s_s ta proposition m'est alors très intéressante

Si tu veux une aide pour modifier pas à pas la structure de ta page, fais moi signe.

Au faite, question surement très c** mais Doctype, qu'est-ce donc ?

Je vais essayé de voir pour le float principalement.

Edit : Oula, tu peux m'aider pour les float parce que ça me dépasse, j'ai essayé et j'ai des parties de mon design qui se découpe et dérive un peut n'importe ou.

Merci, cordialement Bazin Jérémy

Texte pour design extensible

CSS

Vue hybride

Discussions similaires

Partager

Partager