Help pour décalage paragraphes !
Résolu
AnthraxProd
Messages postés
423
Date d'inscription
Statut
Membre
Dernière intervention
-
AnthraxProd Messages postés 423 Date d'inscription Statut Membre Dernière intervention -
AnthraxProd Messages postés 423 Date d'inscription Statut Membre Dernière intervention -
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
CODE CSS
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;
A voir également:
- Help pour décalage paragraphes !
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit les textes ne doivent pas être en retrait à droite et à gauche après ces modifications, sur quelle page se trouve le titre « la cheminée » dans le chapitre « informations diverses » ? - Guide
- Décalage son image tv orange fibre ✓ - Forum Cinéma / Télé
- Décalage audio vlc android - Forum Lecteurs et supports vidéo
- Decalage son disney plus - Forum Audio
- Recaler le son d'une vidéo avec VLC. - Astuces et Solutions
6 réponses
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:
Et ouvrir le fichier index.html, trouver cette section:
et remplacer par ça:
</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.
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.
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.
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.
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.
Si tu veux trouver toi-même les problèmes de présentation, télécharge le plugin Firebug de Firefox.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour,
Est-ce qu'on pourrait voir le code complet pour cette section?
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.
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.
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 ?
Pour finaliser le tout j'aimerai y placer une barre verticale d'1 px comment pourrais faire ?
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 :
(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.)
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.)
