Les Dimensions des Tableaux

**AimStar** · 09/11/2012, 12h56

Bonjour a tous,

Je suis actuellement en train de créer une page dans laquelle se trouvera une pétition.
Pour faciliter la présentation j'y ais inséré un tableau mais mon problème est que quoi que je fasse je n'arrive pas a modifier les dimensions du tableau que ce soit dans le code html ou bien le css.

Pourriez vous m'éclairer s'il vous plait ?

Voici mon code html :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
 
<title>
Petition vegetaliseurs
</title>
 
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo">
<meta name="robots" content="index, follow">
 
<!-- CSS -->
<link href="css/structure.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
 
<!-- JavaScript -->
<script src="scripts/wufoo.js"></script>
 
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
 
<body id="public">
 
<div id="container" class="ltr">
 
<h1 id="logo">
<a href="http://les-vegetaliseurs.com" title="Rejoignez-nous">vegetaliseurs</a>
</h1>
 
<form id="form64" name="form64" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
action="">
 
<header id="header" class="info">
<h2>Nom de la petition</h2>
<!-- <div><a href="">Voir le nombre de signatures</a></div> -->
</header>
 
 
<!-- TABLEAU 3X3 -->
 
<table>
   <tr>
       <td class="img-intro"></td>
       <td><div class="img-signez"> 
 
	   <!-- Formulaire tableau -->
		<!-- prenom -->
<nav>
 
 
<span>
<input id="Field1" name="Field1" placeholder="Prenom" type="text" class="field text fn" value="" size="20" tabindex="1" required />
<label for="Field1"></label>
</span>
 
		<!-- nom -->
<span>
<input id="Field2" name="Field2" placeholder="Nom" type="text" class="field text ln" value="" size="15" tabindex="2" required />
<p id="foli3" class="notranslate"></p>
 
<!-- email -->
<div>
<input id="Field3" name="Field3" type="email" placeholder="e-mail" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" required /> 
</div>
 
<div class="buttons ">
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Envoyer"/>	
</div>
 
</nav>
</td>
</tr>
 
       <!-- fin formulaire tableau -->
 
 
   <tr>
       <td>nombre de signature/date publication</td>
       <td class="img-lastsignataires"></td>
 
   </tr>
   <tr>
       <td>la petition</td>
       <td><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fvegetaliseurs&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></td>
 
   </tr>
</table>
 
 
 
 
 
 
 
 
 
</form> 
 
</div>
 
 
 
</a>
</body>
</html>

et voici mon code css:

Code css :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
html{
background:#eee
	}
 
body {
	margin:17px 0 15px 0;
	padding:0;
	text-align:center;
	font-size:small;
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif
	}
 
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object,output{
	display:block
	}
 
#container{
	text-align:left;
	background:#fff;
	border:1px solid #ccc;
	-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 5px
		  }
 
#container{
	margin:0 auto 10px auto;
	width:810px;
	height:750px;
		  }
 
form.wufoo{
	margin:20px 14px 0 14px;
	padding:0 0 20px 0;
	position:relative
		}
 
#logo{
	margin:0;
	padding:0;
	min-height:0;
	background-color:#dedede;
	text-indent:-9000px;
	text-decoration:none
	}
 
#logo a{
	min-height:40px;
	height:50px;
	display:block;
	background:url(../images/wflogo.png) no-repeat left top;
	overflow:hidden
	}
 
* html 
#logo a{
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop")
	}
 
img,a img{
	border:none;-ms-interpolation-mode:bicubic
		}
 
.hide,.cloak div,.cloak span,.likert.cloak tbody,.likert.cloak thead{
	display:none !important
	}
 
.likert.cloak table{
	border:none
	}
 
 
 
.img-intro {
   background: url("petrole.png");
   background-repeat: no-repeat; 
   background-position: top-left;
   width:80px;
   height:80px;
 
	   }
 
 
.img-signez {
   background: url("signez.png");
   background-repeat: no-repeat; 
   background-position: top-right;
   width:990px;
   height:400px;
 
	   }  
 
.img-lastsignataires {
	background: url("lastsignataires.png");
	background-repeat: no-repeat; 
	background-position: top-right;
	width:300px;
	height:150px;
	}
 
 
table
{
    border-collapse: collapse;
	width:80px;
	height:730px;
	margin-left: auto; 
	margin-right: auto;
	margin-top:-10px;	
	}
 
td, th  Mettre une bordure sur les td ET les th 
{
    border: 1px solid black;
	width:500px;
	height:200px;
}
 
nav {
	position:absolute;
	margin-left: -450px;
	width: 900;
	top:320px;
	left:100%;
}

**v1cent** · 09/11/2012, 14h08

Pour faciliter la présentation j'y ais inséré un tableau mais mon problème est que quoi que je fasse je n'arrive pas a modifier les dimensions du tableau

Si tu n'y arrive pas en quoi ça facilite la présentation ?

De simples blocs les uns sous les autres c'est prévu pour...

Sinon pour t'aider il faudrait savoir ce que tu souhaite dimensionner et comment

il y a déjà quelques erreurs, tu devrait utiliser un validateur

**AimStar** · 09/11/2012, 14h37

Je ne connais pas les blocs. Quel est le terme au niveau balise, s'il te plait ?

Quand tu parles de validateur, tu parles d'applications comme dreamweaver ?

Je souhaite afficher en header le titre de la pétition, en dessous à gauche une image, à droite une image avec un formulaire par dessus et du texte ainsi qu'un module de facebook like box en dessous.

**Kaamo** · 09/11/2012, 15h14

Je ne connais pas les blocs. Quel est le terme au niveau balise, s'il te plait ?

Fais un tour dans les tutoriels de mise en page de developpez.com

Quand tu parles de validateur, tu parles d'applications comme dreamweaver ?

Oui et non. En effet, ce type d'IDE valide à la volée le code HTML (dans le sens détection de la syntaxe, grammaire) mais pour valider au niveau W3C, i lfaut utiliser leur validateur dispo sur leur site.

**v1cent** · 09/11/2012, 15h38

je vois quelques erreurs dans ton code comme un commentaire qui n'est pas signalé comme un commentaire ou une balise qui se ferme sans s'ouvrir.

Avec soit un environnement de développement (dreamweaver, eclipse, je-sais-pas-quel-autre), soit un programme qui analyse ton fichier pour te donner une erreur (style le validateur du w3c), tu pourra déjà te débarrasser de ce genre de soucis sans trop d'efforts.

Après je pense qu'il faut que tu simplifie ta structure, quitte à faire un peu plus de css.

**momo_m** · 09/11/2012, 15h39

Bonjour,

Essayez avec ce code corrigé :

HTML

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<!DOCTYPE html>
<html>
<head>
 
<title>
Petition vegetaliseurs
</title>
 
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo">
<meta name="robots" content="index, follow">
 
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css.css" >
 
 
<!-- JavaScript -->
<script src="scripts/wufoo.js"></script>
 
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
 
<body id="public">
<div id="container" class="ltr">
 
<h1 id="logo">
<a href="http://les-vegetaliseurs.com" title="Rejoignez-nous">vegetaliseurs</a>
</h1>
 
<form id="form64" name="form64" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="">
 
<header id="header" class="info">
<h2>Nom de la petition</h2>
<!-- <div><a href="">Voir le nombre de signatures</a></div> -->
</header>
 
 
<!-- TABLEAU 3X3 -->
 
<table>
 
   <tr>
       <td class="img-intro"></td>
       <td><div class="img-signez"> 
 
     <!-- Formulaire tableau -->
    <!-- prenom -->
<nav>
 
 
<span>
<input id="Field1" name="Field1" placeholder="Prenom" type="text" class="field text fn" value="" size="20" tabindex="1" required />
<label for="Field1"></label>
</span>
 
    <!-- nom -->
<span>
<input id="Field2" name="Field2" placeholder="Nom" type="text" class="field text ln" value="" size="15" tabindex="2" required />
<p id="foli3" class="notranslate"></p>
 
<!-- email -->
<div>
<input id="Field3" name="Field3" type="email" placeholder="e-mail" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" required /> 
</div>
 
<div class="buttons ">
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Envoyer"/> 
</div>
 
</nav>
</td>
</tr>
 
       <!-- fin formulaire tableau -->
 
 
   <tr>
       <td>nombre de signature/date publication</td>
       <td class="img-lastsignataires"></td>
 
   </tr>
   <tr>
       <td>la petition</td>
       <td><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fvegetaliseurs&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></td>
 
   </tr>
</table>
 
 
</table>
 
</form> 
 
</div>
 
 
</body>
</html>

et CSS

Code css :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
html{
background:#eee
	}
 
body {
	margin:17px 0 15px 0;
 
	text-align:center;
	font-size:small;
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif
	}
 
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object,output{
	display:block
	}
 
#container{
	text-align:left;
	background:#fff;
	border:1px solid #ccc;
	-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 5px
		  }
 
#container{
	margin:0 auto 10px auto;
	width:810px;
	height:750px;
		  }
 
form.wufoo{
	margin:20px 14px 0 14px;
	padding:0 0 20px 0;
	position:relative
		}
 
#logo{
	margin:0;
	padding:0;
	min-height:0;
	background-color:#dedede;
	text-indent:-9000px;
	text-decoration:none
	}
 
#logo a{
	min-height:40px;
	height:50px;
	display:block;
	background:url(../images/wflogo.png) no-repeat left top;
	overflow:hidden
	}
 
* html 
#logo a{
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop")
	}
 
img,a img{
	border:none;-ms-interpolation-mode:bicubic
		}
 
.hide,.cloak div,.cloak span,.likert.cloak tbody,.likert.cloak thead{
	display:none !important
	}
 
.likert.cloak table{
	border:none
	}
 
 
 
.img-intro {
   background: url("petrole.png");
   background-repeat: no-repeat; 
   background-position: top-left;
   width:80px;
   height:80px;
 
	   }
 
 
.img-signez {
   background: url("signez.png");
   background-repeat: no-repeat; 
   background-position: top-right;
   width:600px;
   height:300px;
 
	   }  
 
.img-lastsignataires {
	background: url("lastsignataires.png");
	background-repeat: no-repeat; 
	background-position: top-right;
	width:300px;
	height:150px;
	}
 
 
table
{
        border-collapse: collapse;
	width:400px;
	height:500px;
	margin-left: auto; 
	margin-right: auto;
	margin-top:-10px;	
	}
 
 
 
td, tr
{
    border: 1px solid black;
	width:100px;
	height:50px;
}
 
nav {
	position:absolute;
	margin-left: -500px;
	width: 900;
	top:160px;
	left:100%;
}

et dites moi après si c'est la solution que vous cherchez ou non.

**momo_m** · 09/11/2012, 15h41

Faut faire attention avec la balise de CSS :

Faut que vous la changer :

Code :

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

<link rel="stylesheet" type="text/css" href="css/Le_nom_de_ votre_fichier.css" >

**aurelien3030** · 10/11/2012, 16h44

Bonjour, tu peux essayer de mettre un attribut width et height dans ta balise TD.

Bonne chance.

**NoSmoking** · 11/11/2012, 10h09

Bonjour,

Envoyé par aurelien

...tu peux essayer de mettre un attribut width et height dans ta balise TD.

même en cas d'utilisation de TABLE, vraiment pas nécessaire sur ce coup, il convient de prendre l'habitude de placer la mise en forme dans la partie STYLE du document ou dans la feuille CSS externe.

**AimStar** · 12/11/2012, 11h08

Merci pour vos nombreuses réponses.

Momo vous avez modifier le code et le tableau s'affiche effectivement comme je le souhaite mais je n'arrive pas à modifier les images dans les cellules :s

Sinon à la place des balises de tableau j'ai utiliser les balises de blocs comme suggérer, j'ai utilisé la balise <span> en effet c'est plus simple et plus maniable mais demeure un problème;

entre ma photo d'introduction nommée "pétrole" et "Blablabla ici la pétition...." j'ai un trop grand espace et n'arrive à le réduire j'ai insérer un bouton j'aime de facebook mais l'écart s'agrandit je vous transmet mon code modifier pour que vous puissiez m'orienter.

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 
<title>
Petition vegetaliseurs
</title>
 
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
<!-- CSS -->
<link href="css/structure.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
 
<!-- JavaScript -->
<script src="scripts/wufoo.js"></script>
 
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
 
<body id="public">
 
<div id="container" class="ltr">
 
<h1 id="logo">
<a href="http://les-vegetaliseurs.com" title="Rejoignez-nous">vegetaliseurs</a>
</h1>
 
<form id="form64" name="form64" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
action="">
 
<header id="header" class="info">
<h2>NON au pétrole dans la nature</h2>
<!-- <div><a href="">Voir le nombre de signatures</a></div> -->
</header>
 
 
<!-- Donnees -->
<p>
<span>
<img title="img-intro" src="images/petrole.png" width="400" align="top">
 
<img title="signez" src="images/signez.png" width="350" height="350" align="right"
 
<nav>
<p class="pkoisigner" text align="justify">A l'attention de monsieur le président de la république française.</br>Il faut absolument signer cette pétition car c'est la meilleure et elle est très importante pour notre cause.</p>
<!-- FORMULAIRE -->
<!-- prenom -->
<div class="formulaire"><span>
<input id="Field1" name="Field1" placeholder="Nom" type="text" class="field text fn" value="" size="21" tabindex="1" required />
<label for="Field1"></label>
</span>
 
		<!-- nom -->
<span>
<input id="Field2" name="Field2" placeholder="Prenom" type="text" class="field text ln" value="" size="20" tabindex="2" required />
<p id="foli3" class="notranslate"></p>
 
<!-- email -->
<div>
<input id="Field3" name="Field3" type="email" placeholder="e-mail" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" required /> 
</div>
 
<div class="buttons ">
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Envoyer"/>	
</div>
</div>
</nav>
</span>
</p>
 
<p>
<span>
Publié le 10/10/12</br>
Déjà 12 876 signatures
</p><p><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fvegetaliseurs&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=361146867310680" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</p>
 
 
<p>
<img title="last signataires" src="images/lastsignataires.png" width="350" align="right">
 
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
Blablabla ici la pétition..................................................................</br>
 
</span>
<!--
*****************************************************</br></br>
*   -- Module de partage Facebook, Twitter, g+ --   *</br></br>
*****************************************************-->
<p><a class="facebook" href="http://www.facebook.com" title="facebook"><IMG src="images/facebook.png" border="0" alt="facebook" width="150"></a>
</p>
 
<p><a class="twitter" href="http://www.twitter.com" title="twitter"><IMG src="images/twitter.png" border="0" alt="twitter" width="150"></a>
</p>
 
<p align="center">
 
 
</span>
 
 
 
 
 
 
 
 
</form> 
 
</div>
 
 
 
<!--container
 
<a class="powertiny" href="http://www.les-vegetaliseurs.com" title="Rejoignez-nous"
style="display:block !important;visibility:visible !important;text-indent:0 !important;position:relative !important;height:auto !important;width:95px !important;overflow:visible !important;text-decoration:none;cursor:pointer !important;margin:0 auto !important">
<span style="background:url(./images/vg-popup.png) no-repeat center 7px; margin:0 auto;display:inline-block !important;visibility:visible !important;text-indent:-9000px !important;position:static !important;overflow: auto !important;width:600px !important;height:130px !important">VG</span>
<b style="display:block !important;visibility:visible !important;text-indent:0 !important;position:static !important;height:auto !important;width:auto !important;overflow: auto !important;font-weight:normal;font-size:9px;color:#777;padding:0 0 0 3px;">Designed</b>-->
</a>
</body>
</html>

**v1cent** · 12/11/2012, 12h08

Encore un peu le fouilli, mais ça s'améliore

Tes balises p et span sont mal utilisées. Une balise p sers à définir un paragraphe, une balise div un bloc qui n'a pas de valeur sémantique, à priori il n'y a pas de raisons pour qu'une balise p ait des div à l'intérieur, et la plupart de ce que tu as défini comme des paragraphes devraient être des div.
span sers plutôt à définir un élément en ligne qui n'a pas de sens particulier (contrairement à em qui sers à mettre en avant un élément par exemple), évite de mettre un élément bloc dans un élément en ligne...

Dans l'idéal, on ne devrait avoir ni span ni div, et que des éléments ayant un sens (surtout depuis HTML5 et les nombreux éléments qu'ils ont ajouté), mais en pratique on en a toujours besoin pour définir de l'affichage par exemple.

Exemple d'utilisation :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<div id="simple_bloc">
<p id="un_paragraphe">
Ton paragraphe. <br />
Un retour à la ligne.
</p>
<p id="un_autre_paragraphe">
<span id="element_en_ligne">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo felis, pellentesque sit amet scelerisque venenatis, dapibus eget tortor.</span> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
</p>
</div>

Fait gaffe, tu as toujours des balises croisées qui traînent, essaie dans la mesure du possible de simplifier ton code HTML.