Problème saut de lignes !

**lami_dta_femme** · 29/04/2008, 11h44

Bonjour à tous,
Je début en HTML, et pour m'entrainer je suis entrain de faire mon CV.
Le problème c'est que les espace entre mes textes sont trop importants, et je voulais savoir comment éviter cela ?
Pour mieux comprendre mon soucis, voici mon code :

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
<html>
 
    <head>
 
      <meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
    <title>Curriculum Vitae</title>
 
    </head>
 
    <body>
 
    <p>blabala</p>
    <p>581 blabalabla</p>
    <p>blabla blabla</p>
    <p>XX XX XX XX XX</p>
    <a href="mailto:thomas.boubault@gmail.com">thomas.boubault@gmail.com</a>
    <p></p>
    <p>07/05/1896</p>
    <p>Permis B</p>
    <p></p>
    <p style="color:3366CC;">FORMATION</p>
    <hr/>
 
    </body>
 
</html>

Merci d'avance !

**Erwan31** · 29/04/2008, 12h54

Bonjour et bienvenue,
pour commencer je te suggère d'aller lire ce message

Ajoutes cette ligne (la déclaration du Doctype) avant html:

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Cela permet d'éviter certaines différences d'affichage entre navigateurs.

Les élément p (paragraphes) ont des marges par default.

Tu dois les supprimer via une déclaration CSS.
Ce code est à placer dans le head:

Code :

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

1
2
3
4
5
<style type="text/css" media="screen">
<!--
p  {margin:0;}
-->
</style>

**Barsy** · 29/04/2008, 17h11

remplace tes par des et ça devrait marcher.

**Gaillac** · 29/04/2008, 18h24

Je te fais le résumé des 2, avec les explications:

Entre "" et "" tu défini un paragraphe.
Chaque paragraphe à des valeur par défaut comme la marge que tu peux changer, soit directement dans la balise :

Code html :

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

<p style="margin-bottom:2px; margin-left: 45px; border: 1px">

soit dans une style css que tu pourra utiliser dans toute ta page (l'exemple de Erwan31)

Code html :

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

1
2
3
4
5
<style type="text/css" media="screen">
<!--
p  {margin:0;}
-->
</style>

soit encore mieux dans une feuille de style externe que tu pourras utiliser dans toutes les pages de ton site.
(la feuille s'écrit comme précédemment, et tu l'importe comme ça: )

Code html :

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

1
2
3
4
 
<HEAD>
<LINK rel=stylesheet type="text/css" href="styles.css">
<HEAD>

Mais dans ton exemple tu abuse des paragraphes.

Tu pourrais en faire un seul pour toutes les données personnelles (non, prénom, adresse, tel, mail, permis) et entre chaque info tu te contenterais de sauter revenir à la ligne, en utilisant la balise " " (pour break je crois).

**Erwan31** · 29/04/2008, 19h57

Envoyé par Gaillac

Tu pourrais en faire un seul pour toutes les données personnelles (non, prénom, adresse, tel, mail, permis) et entre chaque info tu te contenterais de sauter revenir à la ligne, en utilisant la balise " " (pour break je crois).

Pas trop d'accord, à mon avis il est préférable de "séquencer" le contenu pour éviter un flux de données ininterrompus sans mises en exergue ou hiérarchisation.

Donc en ce qui me concerne je l'écrirais soit comme ceci:

Code :

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

1
2
3
4
5
6
7
8
<h1>Prénom NOM</h1>
<h2>Adresse/h2>
<p>20 rue Riquet...</p>
<h2>Téléphone</h2>
<p>05 XX XX XX XX</p>
<h2>E-mail</h2>
<p>XX@XXXXX.fr</p>
...

En masquant éventuellement certains titres via une règle CSS.

Ou alors

Code :

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

1
2
3
4
5
6
7
8
9
10
<h1>Prénom NOM</h1>
<dl>
    <dt>Adresse/dt>
    <dd>20 rue Riquet...</dd>
    <dt>Téléphone</dt>
    <dd>05 XX XX XX XX</dd>
    <dt>E-mail</dt>
    <dd>XX@XXXXX.fr</dd>
...
</dl>

**Gaillac** · 29/04/2008, 20h04

Ben après c'est une question de vision personnelle du CV.
Pour moi le bloc données personnelles, c'est un bloc, et un bloc à minimiser vu qu'il n'apporte rien.

Ceci dit, quoi qu'il arrive je te conseille de préciser au maximum les options de tes balises, parce que tout ce qui est par défaut tu ne le maîtrise pas et du coup ton CV ne ressemblera pas forcement sur l'écran du RH à ce que tu voyais sur le tien.

**Erwan31** · 29/04/2008, 20h11

Oui en effet c'est aussi bien sûr une question de choix.

Envoyé par Gaillac

Ceci dit, quoi qu'il arrive je te conseille de préciser au maximum les options de tes balises, parce que tout ce qui est par défaut tu ne le maîtrise pas et du coup ton CV ne ressemblera pas forcement sur l'écran du RH à ce que tu voyais sur le tien.

Pas compris, qu'entends tu par "options de tes balises"?

**Gaillac** · 29/04/2008, 20h16

Envoyé par Erwan31

Pas compris, qu'entends tu par "options de tes balises"?

style divers, couleurs de font et de fontes, marges, bordures, etc...
Mais c'est à "lami_dta_femme" que je parlais

**Erwan31** · 29/04/2008, 20h43

Envoyé par Gaillac

style divers, couleurs de font et de fontes, marges, bordures, etc...
Mais c'est à "lami_dta_femme" que je parlais

Ah d'accord! Disons qu'il est toujours utile de connaître les styles par defaut des principaux navigateurs.

**Gaillac** · 29/04/2008, 21h01

Sympa !!

PS : ça me fait mal de dire ça, mais des fois ie à l'air un poil plus logique que firefox...

exemples :

. . . . . . . . . .| . ie . | . . . ff . . .
h5 : font-size | 13px | 13.2667px
h6 : font-size | 10px | 10.7333px

**Erwan31** · 29/04/2008, 21h27

Envoyé par Gaillac

Sympa !!

PS : ça me fait mal de dire ça, mais des fois ie à l'air un poil plus logique que firefox...
exemples :
. . . . . . . . . .| . ie . | . . . ff . . .
h5 : font-size | 13px | 13.2667px
h6 : font-size | 10px | 10.7333px

Non c'est justement préférable.

Explications:
le 13.2667 et tous chiffres avec une virgule (et tos chiffre qui varie quand la taille de la police est modifiée) signifie que la valeur par défaut du moteur de rendu du navigateur est exprimée en em. C-à-d que 13.2667 correspond en faite
à 0.87em, ce qui est plus judicieux : la taille des marges verticales croit avec
celle du texte (Ctrl+molette puis F5 pour tester les différentes valeurs)

**Gaillac** · 29/04/2008, 21h36

Effectivement.
Et ça ne varie pas chez ie.

Bien joué le panda roux, et désolé d'avoir douté de toi.
Je ferais pénitence

**lami_dta_femme** · 29/04/2008, 22h02

Merci à tous pour vos réponses !
Je viens de tout lire, j'avoue que j'ai pas tout compris, mais bon ya beaucoup de bonnes infos c'est cool.
Allé je m'y met !

**lami_dta_femme** · 29/04/2008, 22h47

Bon maintenant j'ai d'autres petites questions. Par exemple je tire des traits sous mes titres avec la balise <hr>, mais j'aimerai que ce trait soit collé à mon titre ?
Quelle est la marche à suivre ??

Et ensuite je voulais savoir si c'est possible de définir la taille de la page ? par exemple définir une taille standard de 21-29,7cm ?

Voila j'espère que je suis clair dans mes explications... !

**Gaillac** · 29/04/2008, 23h28

pour <hr> tu as 3 attributs possibles:

color : couleur du trait
size : épaisseur du trait (en pixel par défaut)
width : longueur (absolue ou en pourcentage)

Mais, avec Firefox, il y a un plus :
<hr style="margin-top:0">
par contre avec ie, ça marche pas...

**Erwan31** · 29/04/2008, 23h50

Ajouter ce code dans le head

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
<style type="text/css" media="screen">
<!--
h1 {
	margin:0; 
	line-height: 0.65em;
	}
hr {margin:0;}
-->
</style>
<!--[if lte IE 8]>
<style type="text/css" media="screen">
hr {
    display:block;
    margin: -7px 0;
}
</style>
<![endif]-->

le 0.65em du line-height est une valeur arbitraire qui dépend du niveau de titrage (h1,h2...) et de la police mais en générale elle s'en rappoche.

J'ai ajouté des commentaire conditionnelles dont le contenu ne s'applique qu'à IE8 et inférieure.
Des explications

**Gaillac** · 29/04/2008, 23h53

edit:

grillé pour le "_margin: -7px 0"

**Erwan31** · 30/04/2008, 00h05

Envoyé par Gaillac

edit:

grillé pour le "_margin: -7px 0"

Sorry Gallac

J'ai ajouté un lien expliquant les déclarations pour IE.

L'underscore hack n'est plus une méthode robuste étant donné qu'IE7 ne lit plus ce qui suit l'underscore contrairement aux versions antérieures.
D'une manière général mieux vaut utiliser les commentaires conditionnels

Problème saut de lignes !

Tableau en CSS

Discussions similaires

Partager

Partager