CSS et responsive design

Version imprimable

30/05/2013, 23h41
Invité

CSS et responsive design
Bonsoir à tous,
Je sollicite votre aide suite à un petit problème que je rencontre concernant le responsive design d'un élément texte. Ci-joint une capture d'écran du début de site :

http://u.jimdo.com/www15/o/s349256f2.../std/image.jpg

J'ai réussi à configurer l'intégralité du site pour que, quel que soit la taille de l'écran, les éléments se trouvent toujours au même endroit. Pour le tittre "Accueil", par exemple, il restera toujours au centre du parchemin. Pour ce faire, je n'ai fait qu'utiliser un padding:auto.
En revanche, ce code ne fonctionne pas pour les h2 et h3 dans la mesure où j'ai configuré pour ceux-ci un padding-left: 250px :
Code:

1 2 3 4 5 6 7 8 9 <section class="wrapper"> <div class="content"> <center><h1>ACCUEIL</h1></center></br> <h2><u>TITRE 2</u></h2> <p></p><br/> <h3><i>TITRE 3</i></h3> </div> </section>
Code:

1 2 3 h2, h3, p, form { padding-left: 250px; }
Pour l'instant, donc, lorsque je réduit ou agrandit la fenêtre, le texte bouge en même temps, ce qui fait que sur un écran plus grand, il débordera du parchemin.
Savez-vous comment remédier à cela ?
Merci par avance.
31/05/2013, 10h07
rodolphebrd

Bonjour,

essayez avec des valeurs en pourcentage.
31/05/2013, 10h10
Invité

C'est à dire ? 250% ? (ça ne fonctionne pas)
31/05/2013, 10h13
rodolphebrd

commencez par 25% : http://codepen.io/seraphzz/pen/rvxGc
31/05/2013, 10h33
Invité

Merci pour votre réponse mais, malheureusement, c'est toujours la même chose : lorsque je diminue ou agrandit la taille de la fenêtre, le texte bouge indépendamment du parchemin.
31/05/2013, 11h08
rodolphebrd

Apparemment vous cherchez à définir une page fluide.

Il vous faudra pour cela que les valeurs de l'ensemble de vos blocs soit en pourcentage.

Vous pouvez postez plus de code ou une page en ligne.

Bonjour,
Je vous avoue être complètement perdu. J'ai tout essayé : margin:auto, margin:100%... rien n'y a fait. Ci-dessous plus de code :

Code:

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
 
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
	font-family: 'Lucida Grande', helvetica, arial, sans-serif;
	font-size: 12px;
	text-align: justify;
    color: white;
    background-image: url(photos/background.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
 
#foreground {
	position: fixed;
	right: -250px;
	top: -25px;
	display: block;
	z-index: 2;
}
 
#logo {
	margin-left: auto;
	margin-right: auto;
	width: 560px;
	z-index: 1;
}
 
 
h1 {
	margin: auto;
	color: black;
	font-size: 28px;
}
 
h2, h3, p, form {
	margin-left: 250px;
	width: 300px;
	color: black;
}
 
.content {
	padding-top: 200px;
	color: red;
	background-image: url(photos/parchemin.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 962px;
}
 
.wrapper{
	margin:auto;
	background-size: cover;
}

01/06/2013, 17h52
rodolphebrd

Pouvez-vous envoyer le code Html et éventuellement une version zippée de votre site.

Pour la version zippée ça risque d'être compliquée c'est un foutoir pas possible :) Si vous en avez vraiment besoin je pourrais essayer de réorganiser ça.
Voici cependant en attendant l'intégralité du html pour une des pages (la structure reste la même entre les différentes pages dans l'ensemble) :

Code:

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
<head>
<title>L'attraction</title>
 
<link rel="icon" 
      type="image/png" 
      href="http://www.disneylandparis.fr/FR/FR/Distant/Images/favicon.ico">
 
 
	<style type="text/css">
@import "css.css";
 
        </style>
</head>
 
<body>
 
<div id="foreground"><img src="photos/foreground.png" alt="home" title="HOME"></div>
<div id="logo"><img src="photos/logo.png" alt="home" title="HOME"></div>
 
<nav>
	<ul class="fancyNav">
		<li id="accueil"><a href="1_accueil.html" class="homeIcon">Home</a></li>
		<li id="attraction"><a href="2_attraction.html">L'ATTRACTION</a></li>
		<li id="galerie"><a href="3_galerie.html">GALERIE</a></li>
		<li id="billeterie"><a href="4_tarifs.html">TARIFS/ACCÈS</a></li>
		<li id="contact"><a href="5_contact.html">ACCÈS/CONTACT</a></li>
    </ul>
</nav>
 
 
<section class="wrapper">
<div class="content">
	<center><h1>L'ATTRACTION</h1></center></br>
	<h2><u>Caractéristiques</u></h2><br/>
 
 
</div>
</section>
 
</body>
</html>

01/06/2013, 18h24
Invité

Pour être sûr d'avoir bien décrit mon problème, je vous joins deux screenshots qui montrent que, contrairement aux autres éléments (y compris h1) le texte ne reste pas à sa place selon que l'on change la taille de la fenêtre.

http://u.jimdo.com/www15/o/s349256f2.../std/image.jpg

http://u.jimdo.com/www15/o/s349256f2.../std/image.jpg
01/06/2013, 21h23
rodolphebrd

En fixant une largeur à votre titre celui-ci ne bougera pas par rapport au texte:http://codepen.io/seraphzz/pen/ABDwL
01/06/2013, 21h46
Invité

Bonsoir et merci pour votre aide,
Malheureusement, je pense m'être mal exprimé en oubliant de préciser certains détails. De base, j'ai besoin que le texte (h2, h3... sauf h1) soit aligné à gauche mais avec un margin/padding (je ne sais pas trop). Or, sauf incompréhension de ma part, votre code me "bloque" mon texte à l'extrême gauche.
En fait, je voudrais obtenir quelle que soit la taille d'écran le même résultat que sur la première image que je vous ai jointe dans mon précédent message. Ici, le dernier tiers du mot "Caractéristiques" est situé au niveau de la première fissure du parchemin. Mais quand je change de taille d'écran, il ne reste pas en place, contrairement au titre "ACCUEIL" qui, lui, n'a pas bougé par rapport à la deuxième fissure sous laquelle il se trouve. En conséquence, si je consulte mon site sur un écran plus grand, il est très probable que le texte (hormis h1) soit partiellement en dehors du parchemin (c'est le cas sur un 1920x1080). Sur on notebook, il a même des chances de finir derrière le personnage de Jones :)
01/06/2013, 22h00
rodolphebrd

Vous voulez conservez le padding-left du paragraphe pour toutes les dimensions d'écran ?
01/06/2013, 22h15
rodolphebrd

Essayez de fixer une largeur à votre content...
01/06/2013, 22h15
Invité

Exactement, le problème c'est que, autant pour le h1 il n'y a pas de définition de pixels, seulement un margin:auto, autant pour les h2 & Co il y en a. Or, ce nombre varie inévitablement en fonction des tailles d'écran. Sur mon fixe, par exemple (1280x1024), un margin-left: 250px est parfait. Mais sur mon portable (1920x1080), même si le margin-left reste à 250px, étant donné que la taille d'écran est plus grande, le texte est plus proche du bord de l'écran et décalé par rapport au parchemin.
Je cherche donc à faire en sorte que, malgré un margin/padding (je ne sais pas quel est le mieux dans mon cas), le texte reste au même endroit par rapport au parchemin, quelle que soit la taille d'écran.
01/06/2013, 22h23
rodolphebrd

Comme je vous l'ai dit en fixant une largeur au conteneur des éléments auxquels vous donnez un padding.

De cette manière, ils "s'appuieront" sur leur parent direct au lieu de se caler par rapport au body.
01/06/2013, 22h31
Invité

Ça marche !!!!! Une width + une margin:auto et voilà !! Merci beaucoup pour votre aide précieuse, vraiment !
01/06/2013, 22h44
Candygirl

Je ne voudrais pas jouer les trouble-fête mais mais il me semble que, si l'image de fond est bien celle sur le Body, soit avec le background-size: cover; cela ne fonctionnera pas correctement si le ratio hauteur/largeur de la fenêtre de visualisation ne correspond pas à celle prise comme référence pour le positionnement.
01/06/2013, 22h51
rodolphebrd

Citation:

Envoyé par Candygirl

Je ne voudrais pas jouer les trouble-fête

au contraire ça élève le débat :D

Je pense que le calage doit se faire par rapport au content qui a comme bg le parchemin.
02/06/2013, 16h47
Candygirl

Oui, je n'avais pas pris le temps d'observer dans le code que le parchemin était indépendant, sans background cover et donc de taille figée :rouleau:
Après, pour maîtriser tous les paramètres, il faudrait encore savoir de quelle manière Indiana Jones est intégré jusqu'à quel point il peut empiéter sur l'espace à disposition.