[CSS] Aide class et table sur le forum Création de sites web - 17-12-2014 07:30:09

Liste des sujets

[CSS] Aide class et table

boku_no_pico

Niveau 6

17 décembre 2014 à 07:30:09

Bonjour,

voila depuis quelques jours que j'essaye de faire un tableau en CSS, mais avec des class différentes selon les colonnes.

Cependant j'ai un probleme que je ne comprend pas j'ai une différence d'affichage alors que c'est la même chose.

Exemple avec ce code :

<!DOCTYPE html>
<html>
<head>
<style>
f   {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 15px;
	margin: 0px;
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	font-weight: normal;
	padding: 3px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
}
p   {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 15px;
	margin: 0px;
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	font-weight: normal;
	padding: 3px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<table>
<tr>
<th><f>5515151</f></th>
<th><f>5515151</f></th>
<th><p>5515151</p></th>
<th><p>5515151</p></th>
<th><p>5515151</p></th>
<th><p>5515151</p></th>
<th><f>5515151</f></th>
<th><f>5515151</f></th>
<th><f>5515151</f></th>
<th><f>5515151</f></th>
<th><p>5515151</p></th>
<th><p>5515151</p></th>
<th><f>5515151</f></th>
<th><f>5515151</f></th>
</tr>
</table>

</body>
</html>

testez le ici http://htmledit.squarefree.com/

Vous verrez que ya un decalage au niveau des bordure, pourtant .p = .f

Une idée?

je vous remercie d'avance.

Pseudo supprimé 17 décembre 2014 à 08:34:11

Je ne connais pas ton niveau en HTML/CSS, mais ton problème est logique.

Tu n'as déclaré aucune 'class' dans ton code, et tu n'en utilises aucune d'ailleurs.

En CSS, une 'class' se présente comme ceci:

.maclass{
...
}

Et en HTML on l'utilisera comme cela:

<th class="maclass">5515151</th>

Dans ton code tu as défini les propriétés de la balise <p>, c'est à dire des paragraphes, et de la balise <f>, qui n'existe pas, et en aucun cas tu n'as défini ou utilisé de 'class'.

Message édité le 17 décembre 2014 à 08:35:10 par Pseudo supprimé

Mowe

Niveau 7

20 décembre 2014 à 12:36:32

C'est parce que la balise p est réservée pour les paragraphe, et a donc un style par défaut sur la plupart des navigateurs (par exemple une valeur de padding ou margin), ce qui crée ce décalage
Si tu remplace "p" par "g" dans ton code, ça sera bien aligné

Argonalacon

Niveau 5

20 décembre 2014 à 13:21:11

n'écoute pas mowe, tu ne peux pas utiliser des balises qui n'existent pas, le seul moyen de le faire c'est par un framework javascript mais je doute que tu es le niveau

+1 basicpixel

Mowe

Niveau 7

20 décembre 2014 à 14:59:27

Evidemment qu'il est possible d'utiliser des balises non prédéfinies...

Plus d'infos ici : http://www.w3.org/TR/20144/WD-custom-elements-20141216/

Mowe

Niveau 7

20 décembre 2014 à 15:08:26

(et il est bien sûr possible de sélectionner ces éléments en CSS, après tout CSS est pensé pour être utilisé avec de simples documents XML)

Guklam

Niveau 10

20 décembre 2014 à 21:07:09

Le 20 décembre 2014 à 12:36:32 mowe a écrit :
C'est parce que la balise p est réservée pour les paragraphe, et a donc un style par défaut sur la plupart des navigateurs (par exemple une valeur de padding ou margin), ce qui crée ce décalage
Si tu remplace "p" par "g" dans ton code, ça sera bien aligné

au pire, tu mets margin:0; au body, et c'est tout problème réglé.

Message édité le 20 décembre 2014 à 21:07:25 par Guklam

[WoL]DreamBios

Niveau 6

20 décembre 2014 à 21:15:11

Salut, tu en as marre de respawn ?
Viens sur

http://oldjv.tk/

Cliques sur le Hapoel pour acceder aux forums et t'inscrires.

http://oldjv.tk/

Aide à l'achat Mac
Macintosh
Création de Jeux
Programmation
Création de sites web
Linux
Internet
Steam Deck
Hardware

La vidéo du moment

News jeu

284 139 spectateurs

Zelda : sans Breath of the Wild, Ocarina of Time n'aurait jamais vendu 5 millions de copies sur Switch 2

Pendant plus de 30 ans, Zelda a incarné l'une des licences les plus prestigieuses du jeu vidéo. Pour autant, elle n'a jamais été celle qui se vendait le mieux parmi les franchise de Nintendo. Loin des raz-de-marée provoqués par Mario ou Pokémon, la saga restait cantonnée à des scores honorables, mais plafonnés. L'arrivée du remake intégral d'Ocarina of Time sur Switch 2 vient rebattre les cartes avec un succès commercial qui vient confirmer que la saga est entré dans une nouvelle ère depuis 2017 et la sortie d'un certain opus.

Toutes les news jeu