Discussion :

[Epica84]

Bonjour j'ai un problème d'alignement ... voici le code HTML

Code :

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

1
2
3
4
5
6
7
8
<table class="ligneDOUBLE">
 
        <tr> 
          <td>abc</td>
          <td> def</td>
          <td>ghi</td>
        </tr>
 </table>

ceci affiche abcdefghi sur une ligne.

Je voudrai savoir s'il serai possible de faire pareil mais avec un div .

Si oui, pouvez vous m'aidez svp

Voilà ce que j'avais fait avec un div

Code :

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

1
2
3
4
5
6
.ligneDOUBLE
{
border-collapse:collapse; /* Remplace : cellpadding="0" cellspacing="0"*/
border:0;
background-color:yellow;
}

Mais cela m'afficher
abc
def
ghi

MErci d'avance

[Erwan31]

Bonjour,
si cela s'affiche avec un retour chariot avant et aprés les lettres c'est que tu as encapsulé tes lettres dans un p li ... ou ajouté un br.

Avant de te répondre, pourrais tu nous dire ce que tu souhaites faire (que représente ces lettres et dans quel contexte elle s'affichent)

[Epica84]

Merci d'avoir répondu,

Ces lettres représente un exemple avant l'application à mon projet de stage.

Elle ne sont encapsuler dans rien ...

Hormis le body dont voici le code css

Code :

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

1
2
3
4
5
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6,img,a,ul,li, table
{  
  margin:0 0 0 0;  
  padding:0 0 0 0;
 }

Ces lettres vont s'appliquer pour un nom de domaine .mobi et comme les téléphones supporte mal les <table> je voudrai si possible les mettres dans un div ou autres ...

Cordialement

[Erwan31]

Code :

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

<p>ABCDEFG...</p>

devrait convenir.
Une div (division) n'est pas faite pour déterminer un morceau de texte mais pour diviser ton document en plusieurs blocs (fonctionnels le plus souvent) >
header, footer, content...

[Epica84]

Il me met quand même des retour chariots ...

Le <div class=""> N'est pas fait exprès pour faire des blocs dans "les sous code"?

Cordialement

[Erwan31]

Il me met quand même des retour chariots ...

C'est pas normal.
As tu des retours chariot à l'intérieur de ton code?
Une page en ligne permettrait d'identifier plus facilement le problème

Le <div class=""> N'est pas fait exprès pour faire des blocs dans "les sous code"?

Je ne sais pas ce que tu entends par "sous code".
Tu dois utiliser autant que nécessaire des éléments sémantiques (p,q, blockquote, ul....) pour caractériser un contenu, les éléments génériques (div et span) ne le permettent pas. Comme je te l'ai dis, tu dois t'en servir pour diviser ta structure en plusieurs blocs fonctionnels ou éventuellement comme réceptacle à l'application d'une règle de style CSS quand le "stylage" des éléments sémantiques ne permet pas d'aboutir à l'affichage que tu souhaites obtenir.

[polymorphisme]

Bonjour,

il n'existe pas de notion sous-code en (X)HTML ou CSS.

De plus, on utilisera de préférence des ids aux classes pour partitionner une page, vu qu'un élément div n'est utilisé qu'une fois.

[Erwan31]

De plus, on utilisera de préférence des ids aux classes pour partitionner une page, vu qu'un élément div n'est utilisé qu'une fois.

Je doute qu'il comprenne bien. Ce qu'il faut surtout préciser c'est qu'un ID ne s'applique qu'à un seul élément (il ne peut pas y avoir deux fois le même id dans un document) alors qu'une même classe peut s'appliquer à plusieurs éléments dans le doc.

[guilhem91]

Salut

si j'ai bien saisi ton problème, tu veux mettre "abc", "def", ... sur une seule ligne avec des balises <div> ?

Et pourquoi pas la propriété float ? Ça devrait donner quelque chose dans ce genre là :

Code :

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

1
2
3
4
5
6
7
8
9
.ligneDOUBLE
{
    float: left;
    width: 33%;
}
 
...
 
<div class="ligneDOUBLE>abc</div> ...

La largeur du bloc en pourcentage est à adapter selon le nombre d'éléments dans la ligne :

2 éléments -> 50%
3 éléments -> 33%
4 éléments -> 25%
...

Sinon, si tu n'as que du texte, utilise plutôt une liste <ul>, avec comme propriétés css :

Code :

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

1
2
3
4
{
    display: inline;
    list-style-type: none;
}

[Epica84]

Bonjour je reviens ici pour vous annoncez que je n'y suis toujours pas arriver ....

j'ai essayer le code proposer par guilhem91 mais marche toujours pas

voici le code complet (css et 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
 
.puceG
{    
float: left;
width: 10%;
}
 
.puceD
{
float: right;
width: 10%;
}
 
.donnee
{
float: center;
width: 80%;
}
 
.ligneDOUBLE {
	border-top: 1px solid #CCCCCC;
	border-right: none #FFFFFF;
	border-bottom: 1px solid #CCCCCC;
	border-left: none #FFFFFF;
}

Et

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
 
 
<html>
 
	<head>
	<link href="aide.css" rel="stylesheet" type="text/css">
	</head>
 
	<body>
		<div class="ligneDOUBLE">
			<div class="puceG">abcd</div>
			<div class="donnee">efgh</div>
			<div class="puceD">ijkl</div>
		</div>
	</body>
</html>

Vous pouvez constaté qu'il y a toujours un retour chariot ...

Merci d'avance de votre aide
Et merci de l'aide déjà proposer

[Erwan31]

Bonjour,
si on s'en tient au code HTML c'est normal, tu insères tes lettres dans un div (qui sont des élément de niveau block, c-a-d qu'ils génèrent ce qu'on appelle une boîte de bloc avec retour chariot avant et après l'élément)
Tu dois le baliser avec un élément inline (en-ligne et sans retour chariot donc) générique:

Code :

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

1
2
3
4
5
<p class="ligneDOUBLE">
			<span class="puceG">abcd</span>
			<span class="donnee">efgh</span>
			<span class="puceD">ijkl</span>
		</p

N'oublie pas de supprimer les float et déclarer un Dotcype au haut de ton document

[Epica84]

Bonjour,
si on s'en tient au code HTML c'est normal, tu insères tes lettres dans un div (qui sont des élément de niveau block, c-a-d qu'ils génèrent ce qu'on appelle une boîte de bloc avec retour chariot avant et après l'élément)
Tu dois le baliser avec un élément inline (en-ligne et sans retour chariot donc) générique:

Code :

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

1
2
3
4
5
<p class="ligneDOUBLE">
			<span class="puceG">abcd</span>
			<span class="donnee">efgh</span>
			<span class="puceD">ijkl</span>
		</p

N'oublie pas de supprimer les float et déclarer un Dotcype au haut de ton document

Merci de votre réponse si rapide .


Effectivement sa reste sur la même ligne mis ne respecte plus les % ... Une idée de la raison ?

Merci d'avance

[Erwan31]

Ah ok oui désolé je n'en ai pas tendu compte.
Dans ce cas on va revenir au point de départ

Tu ne peux pas dimensionner des élément inline comme les span...
Il fat d'abord en faire une boite de bloc pour cela (via un display:block).

Donc tu peux conserver le float (qui fait passer la valeur calculé du display:inline des span à block) mais pour le retour à la ligne je ne peux pas savoir d'ou ça vient avec si peu de code.
Tu dois fournir la totalité des codes ou mieux une page en ligne.

[Epica84]

Merci de prendre soin de me répondre

Voici la version en ligne
http://www.numerimages.mobi/swan/aide.php

J'enlèverai le lien dès que le problème sera résolu

MeRci encore de l'aide fourni

[Erwan31]

Tu as oublié de déclarer le doctype (en haut du code) ce qui faisait basculer les navigateurs graphique en mode non standard...
Mais sinon il n'y avait aucun problème.
N'oublie pas de préciser le titre (obligatoire) et le langage de ton doc ( <html lang="fr"> et <meta http-equiv="Content-Language" content="fr" /> )
La quasi totalité des attributs de présentation (width, hspace...)doivent être traduit en règle de style CSS sinon c'est invalide, réduit l'accessibilité et les perf, alourdit ton code HTML etc.
Mieux vaut éviter un % à 100% au total...
Overflow:hidden et height:1% permettent au conteneur d'englober ses enfants flottant.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>...</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Language" content="fr" />
<link href="aidphp_fichiers/aide.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css" media="all">
<!--
.puceG {
	float:left;
	width: 9%;
}
.puceD {
	float:left;
	width: 9%;
}
.donnee {
	float:left;
	width: 78%;
}
.ligneDOUBLE {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	overflow:hidden;
	height:1% /*IE6*/
}
-->
</style>
</head>
<body>
	<p class="ligneDOUBLE"> 
		<span class="puceG">abcd</span> <span class="donnee">efgh</span> <span class="puceD">ijkl</span> 
	</p>
</body>
</html>

[Epica84]

Merci pour cette aide précieuse

Résolu