Help pour décalage paragraphes !

Résolu/Fermé
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 - 22 janv. 2012 à 22:31
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 - 23 janv. 2012 à 13:59
Bonjour,
J'aimerai séparer les 2 paragraphes, actuellement ils sont comme ça :
http://img15.hostingpics.net/pics/391579Capture.png


mais le paragraphe de droite (en l'occurrence Services) et trop près du paragraphe gauche. Et donc j'aimerai le décaler vers la droite.
Mais étant débutant en web je ne maitrise pas énorment toute les balises ..

Code HTML

<h2 class="bienvenue">Bienvenue</h2>
			
			<p><img src="images/bg/quote.gif" alt="guillemets"/>Praesent urna risus, fermentum eget euismod eu, placerat id felis. In venenatis sapien et mauris dictum sodales ac et mi. Ut 											 			pulvinar, metus facilisis sodales pellentesque, arcu felis tempor ligula, eget dignissim dolor purus ut ante. Sed et risus non velit ornare condimentum ac eget risus.</p>



CODE CSS

h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; color:#111;}
h1 { font-size:30px; line-height:1; margin-bottom:0.5em; }
h2 {
	font-size:190%;
	font-weight: normal;
	margin-bottom:0.75em;
	letter-spacing: -0.5px;}

h2[title="services"] {
	text-align: left;
}
	
h3 { font-size:100%; line-height:1; margin-bottom:1em; }
h4 { font-size:1.2em; line-height:1.25; margin-bottom:1.25em; }
h5 { font-size:1em; margin-bottom:1.5em; }
h6 { font-size:1em; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0;}

/* Paragrafi */
p {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 4px 0 4px 0;
	line-height: 22px;
	font-size: 13px;
	color: #999;
	text-align: left;




6 réponses

olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
23 janv. 2012 à 13:29
Je viens d'aller voir le code, et me rends compte que maintenant qu'il s'agit du site sur lequel je t'avais déjà aidé l'autre jour pour un autre détail :) Désolé de ne pas avoir reconnu ton pseudo ;)

Donc, ton site.. Il faut ouvrir le fichier 960.css et y inclure n'importe où ça:
.coldroite{margin-left:100px;}


Et ouvrir le fichier index.html, trouver cette section:
<!-- START TESTIMONIAL SECTION -->
   		<div class="grid_4">
   		
	   		<h2 title="services">Services</h2>


et remplacer par ça:
<!-- START TESTIMONIAL SECTION -->
   		<div class="grid_4 coldroite">
   		
	   		<h2 title="services">Services</h2>

</code>

J'ai ajouté une deuxième classe à la div de droite, ainsi le CSS peut gérer la marge de ce bloc sans que ça affecte celui de gauche.

Pour modifier l'espace, il suffira ensuite de changer la valeur des 100px dans le CSS.
1
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
22 janv. 2012 à 23:19
Up s'il vous plait c'est compliqué :'(
0
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
23 janv. 2012 à 10:05
Rajoute un margin dans le css de ton p. C'est le même principe que padding, mais à l'extérieur de ton p. (je ne suis sûrement pas clair, mais teste et tu verras que tes paragraphes se sépareront plus).

Pour plus de compréhension, tu peux découper le margin (et le padding) de la même manière :
margin-right, margin-left, margin-top, margin-bottom
Comme ça, tu ne pourras l'appliquer que sur un seul côté de ton p.
0
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
Modifié par AnthraxProd le 23/01/2012 à 11:12
Non toujours pas, je sais ce que c'est un padding t'inquiete pas j'ai du le tester 14x xD
0
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
23 janv. 2012 à 11:29
Avec le code que tu nous as donné, je n'ai pas réussi à avoir le rendu de l'image que tu m'as donné...

Si tu veux trouver toi-même les problèmes de présentation, télécharge le plugin Firebug de Firefox.
0
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
23 janv. 2012 à 11:44
Je l'ai telechargé mais comment je fais pour savoir où il y a un erreur ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
23 janv. 2012 à 11:54
Bonjour,

Est-ce qu'on pourrait voir le code complet pour cette section?
<h2 class="bienvenue">Bienvenue</h2>
			
			<p><img src="images/bg/quote.gif" alt="guillemets"/>Praesent urna risus, fermentum eget euismod eu, placerat id felis. In venenatis sapien et mauris dictum sodales ac et mi. Ut 											 			pulvinar, metus facilisis sodales pellentesque, arcu felis tempor ligula, eget dignissim dolor purus ut ante. Sed et risus non velit ornare condimentum ac eget risus.</p>


Car le code ci-dessus ne représente que le premier titre et premier paragraphe.

Pour firebug, il suffit de l'activer et ensuite en haut à gauche (de la fenêtre firebug) il y a un rectangle. Clique sur le rectangle et ensuite passe la souris sur 'élément qui pose problème (donc le 2e paragraphe). Dans la fenêtre firebug le code CSS pour la section concernée apparaît, et tu peux y faire directement des changements et voir le résultat. Tu peux aussi voir les marges etc.
0
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
23 janv. 2012 à 11:55
Je vais tout mettre je crois car je m'y perds xD
0
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
23 janv. 2012 à 11:59
0
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
23 janv. 2012 à 11:59
ok :) Ce sera peut-être plus simple en effet.
0
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
23 janv. 2012 à 12:39
Toujours pas ? :/
0
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
23 janv. 2012 à 13:16
je suis allé manger, je vais jeter un oeil maintenant ;)
0
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
Modifié par AnthraxProd le 23/01/2012 à 13:42
Merci c'est Génial mon problème est réglé ! :D
Pour finaliser le tout j'aimerai y placer une barre verticale d'1 px comment pourrais faire ?
0
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
Modifié par olivierrobins le 23/01/2012 à 13:50
Je t'en prie :)

En ce qui concerne la barre verticale, le plus simple à mon avis est en fait de rajouter une bordure sur la div en question. C'est à dire rajouter ceci dans le fichier CSS, dans la section rajoutée plus haut :

.coldroite{ 
margin-left:100px; 
border-left:1px solid #000000; 
}

(le margin est en fait celui d'avant, pas la peine de le remettre, c'est juste pour situer le truc)

Le #000000 représente la couleur de la ligne, ici le noir, donc à remplacer par ce que tu veux. Ici tu en trouveras plein:
https://www.commentcamarche.net/contents/490-codes-couleur-html

Et si tu veux modifier l'espacement entre la bordure et le texte de droite, il suffira de modifier la valeur de padding (dans ce cas, rajouter padding-left:10px dans la section du CSS, et modifier 10px.)
0
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
Modifié par AnthraxProd le 23/01/2012 à 13:59
J'ai photoshop pour ça ça ira ^^
Je vais ajouter les propriétés
0