Discussion :

[Invité]

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]

Bonjour,

essayez avec des valeurs en pourcentage.

[Invité]

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

[rodolphebrd]

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

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

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