CSS et responsive design

Invité · 30/05/2013, 23h41

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 :

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 html :

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

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 :

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

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.

**rodolphebrd** · 31/05/2013, 10h07

Bonjour,

essayez avec des valeurs en pourcentage.

Invité · 31/05/2013, 10h10

C'est à dire ? 250% ? (ça ne fonctionne pas)

**rodolphebrd** · 31/05/2013, 10h13

commencez par 25% : http://codepen.io/seraphzz/pen/rvxGc

Invité · 31/05/2013, 10h33

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.

**rodolphebrd** · 31/05/2013, 11h08

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.

Invité · 01/06/2013, 16h55

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 :

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
 
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;
}

**rodolphebrd** · 01/06/2013, 17h52

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

Invité · 01/06/2013, 18h19

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 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
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>

Invité · 01/06/2013, 18h24

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.

**rodolphebrd** · 01/06/2013, 21h23

En fixant une largeur à votre titre celui-ci ne bougera pas par rapport au texte:http://codepen.io/seraphzz/pen/ABDwL

Invité · 01/06/2013, 21h46

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

**rodolphebrd** · 01/06/2013, 22h00

Vous voulez conservez le padding-left du paragraphe pour toutes les dimensions d'écran ?

**rodolphebrd** · 01/06/2013, 22h15

Essayez de fixer une largeur à votre content...

Invité · 01/06/2013, 22h15

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.

**rodolphebrd** · 01/06/2013, 22h23

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.

Invité · 01/06/2013, 22h31

Ça marche !!!!! Une width + une margin:auto et voilà !! Merci beaucoup pour votre aide précieuse, vraiment !

**Candygirl** · 01/06/2013, 22h44

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.

**rodolphebrd** · 01/06/2013, 22h51

Envoyé par Candygirl

Je ne voudrais pas jouer les trouble-fête

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

Je pense que le calage doit se faire par rapport au content qui a comme bg le parchemin.

**Candygirl** · 02/06/2013, 16h47

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

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.

CSS et responsive design

Responsive design en CSS

Discussions similaires

Partager

Partager