Discussion :

[PoZZyX]

Hello all,

Je suis en train de faire un "tableau" de 2 colonnes avec une ligne de titre et j'ai un problème avec le border-collapse, il collapse pas :S

Bon on commence toujours par le code alors pour changer, commençons par le résultat pas collapsé :


Ensuite le code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="internet_favori">
	<div id="internet_favori_titre">
		Favoris
	</div>
	<div id="internet_favori_gauche">
		<img src="images/chargement.gif" alt="" />
	</div>
	<div id="internet_favori_droite">
		<img src="images/chargement.gif" alt="" />
	</div>
</div>

et finalement (le plus gros morceau) le code CSS :

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
 
#internet_favori
{
	width:410px;
	border-color:#000000;
	border-width:1px;
	border-style:solid;
	border-collapse:collapse;
}
#internet_favori_titre
{
	text-align:center;
	font-weight:bold;
	margin-top:0px;
	margin-left:0px;
	margin-bottom:0px;
	margin-right:0px;
	border-color:#000000;
	border-width:1px;
	border-style:solid;
	background-color:#6699FF;
	border-collapse:collapse;
}
#internet_favori_gauche
{
	border-width:1px;
	border-color:#000000;
	border-style:solid;
	float:left;
	width:150px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	border-collapse:collapse;
}
#internet_favori_droite
{
	border-width:1px;
	border-color:#000000;
	border-style:solid;
	width:250px;
	float:right;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	border-collapse:collapse;
}

Donc comme vous le constatez, j'ai essayé de mettre partout des border-collapse:collapse, mais il veut pas, alors j'ai essayé qu'à des endroits stratégiques, mais il veut pas non plus

Est-ce que quelqu'un peut m'aider ???

Merci d'avance pour votre aide !!!

[MasterOfChakhaL]

Salut,

Le border-collapse n'est sensé s'appliquer qu'à des tableaux.
Des vrais tableaux qui sont fait avec l'élément HTML table (ou alors un element avec un display:table; mais cette propriété n'est pas franchement bien supporté).

Apparement, tu as suivi le bon conseil qui indique de ne pas utiliser les tableaux dans un but de présentation. Cependant, tu sembles avoir penché du côté de l'autre extrème.
Si les tableaux sont déconseillés, c'est pour rendre a HTML sa valeur de langage structurant qui te permet de t'appuyer sur la sémantique des balises pour structurer ton contenu (des h1 pour les titres, des p pour les paragraphes).

En dehors de ces considérations et pour répondre à ta question, je pense qu'il serait plus simple de ne dessiner que les bordure nécessaires.

Par exemple, un cadre entier pour l'élément principal, une bodure basse pour favoris, une bordure droite pour la liste des répertoires et rien pour le contenu du répertoire. D'autres combinaisons de bordures sont certainement possibles, c'est la première qui me vient à l'esprit...

Si tu ne peux pas prédir laquelle des deux colonnes sera la plus longue, tu pourras t'en sortir je pense en créant un petit chevauchement avec tes deux colonnes.
Tu fais une bordure droite pour la colonne de gauche et une bordure gauche pour la colonne de droite. ensuite tu décales la colonne de droite avec un margin-left: -1px; (si ta bordure fait bien un 1px d'épaisseur)

[PoZZyX]

lol c'est vrai qu'on en oublie presque que la balise table a quand meme une utilité, je vais faire avec un tableau, étant donné que c'est pas que je les hais pas

Merci pour tes informations