Aller au contenu

Mettre mon tableau en CSS

damien.rif

Par damien.rif
dans (X)HTML et CSS

 Partager

Sujets conseillés

damien.rif

damien.rif

Posté
Posté

Bonjour

Je possèdes un tableau en HTML que je voudrais convertir en CSS

Mon tableau possède 6 lignes et 7 colonnes, et des cellules de 100 pixels de largeur sur 100 pixels de hauteur, ce qui fait 42 cellules

Et il possède une 7e ligne tout en haut avec les 7 cellules fusionnées

Ca fait des heures que je suis sur le Net et que j'essayes, et je m'arraches les cheveux

Quelqu'un peut m'aider s'il vous plait?

Merci beaucoup beaucoup :wub:

Voilà ce que je voudrais:

adc4mg.jpg

captain_torche

captain_torche

Posté
Posté

Pour commencer : que comptes-tu mettre dans ton tableau ?

Si ce sont des données tabulaires (et ça en a fichtrement l'air, vue la structure) , je ne vois pas du tout l'intérêt de se passer de la balise table.

captain_torche

captain_torche

Posté
Posté

Effectivement, dans ces conditions, l'utilisation d'une liste me semblerait plus appropriée (Car sémantiquement, il s'agit bel et bien d'une liste de photos).

Le code est relativement simple :

<ul id="liste_photos">
<li><a href="image1.html"><img src="image1.jpg"></a></li>
<li><a href="image2.html"><img src="image2.jpg"></a></li>
[...]
<li><a href="image42.html"><img src="image42.jpg"></a></li>
</ul>

Pour que l'affichage soit correct, il va falloir que tous tes éléments aient la même taille (largeur et hauteur). Pour éviter les débordements, qui casseraient totalement le design, tout contenu qui sera trop grand dans un élément de la liste (li), sera masqué. Il faudra utiliser pour cela la méthode "overflow:hidden;".

De plus, pour contourner l'affichage par défaut des listes (chaque élément est placé sous l'élément précédent), nous allons devoir leur préciser de "flotter" les uns à la suite des autres.

#liste_photos {
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid #000;
}

#liste_photos li {
text-align: center;
border: 1px solid #000;
width: 100px;
height: 100px;
margin: 2px;
float: left;
overflow: hidden;
}

Je ne l'ai pas testé, mais ça devrait marcher.

damien.rif

damien.rif

Posté
  • Auteur
Posté

Ca ressemble à ce que je veux, mais y'a quelques petits soucis:

-j'ai 4 lignes de 9 cellules et en dessous, 1 ligne de 6 cellules

-je n'ai pas mes 7 cellules d'origine fusionnées en haut du tableau d'origine

-les lignes 2,3 et 4 semblent englobées dans 'je ne sais pas quoi'

Une image vaut mieux que de longues explications

Voilà ce que ça me donne:

6o09xu.jpg

Le code:

<style type="text/css">
#liste_photos {
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid #000;
}

#liste_photos li {
text-align: center;
border: 1px solid #000;
width: 100px;
height: 100px;
margin: 2px;
float: left;
overflow: hidden;
}
</style>

</head>

<body>

<ul id="liste_photos">
<li><a href="image1.html"><img src="image1.jpg"></a></li>
<li><a href="image2.html"><img src="image2.jpg"></a></li>
<li><a href="image3.html"><img src="image3.jpg"></a></li>
<li><a href="image4.html"><img src="image4.jpg"></a></li>
<li><a href="image5.html"><img src="image5.jpg"></a></li>
<li><a href="image6.html"><img src="image6.jpg"></a></li>
<li><a href="image7.html"><img src="image7.jpg"></a></li>
<li><a href="image8.html"><img src="image8.jpg"></a></li>
<li><a href="image9.html"><img src="image9.jpg"></a></li>
<li><a href="image10.html"><img src="image10.jpg"></a></li>
<li><a href="image11.html"><img src="image11.jpg"></a></li>
<li><a href="image12.html"><img src="image12.jpg"></a></li>
<li><a href="image13.html"><img src="image13.jpg"></a></li>
<li><a href="image14.html"><img src="image14.jpg"></a></li>
<li><a href="image15.html"><img src="image15.jpg"></a></li>
<li><a href="image16.html"><img src="image16.jpg"></a></li>
<li><a href="image17.html"><img src="image17.jpg"></a></li>
<li><a href="image18.html"><img src="image18.jpg"></a></li>
<li><a href="image19.html"><img src="image19.jpg"></a></li>
<li><a href="image20.html"><img src="image20.jpg"></a></li>
<li><a href="image21.html"><img src="image21.jpg"></a></li>
<li><a href="image22.html"><img src="image22.jpg"></a></li>
<li><a href="image23.html"><img src="image23.jpg"></a></li>
<li><a href="image24.html"><img src="image24.jpg"></a></li>
<li><a href="image25.html"><img src="image25.jpg"></a></li>
<li><a href="image26.html"><img src="image26.jpg"></a></li>
<li><a href="image27.html"><img src="image27.jpg"></a></li>
<li><a href="image28.html"><img src="image28.jpg"></a></li>
<li><a href="image29.html"><img src="image29.jpg"></a></li>
<li><a href="image30.html"><img src="image30.jpg"></a></li>
<li><a href="image31.html"><img src="image31.jpg"></a></li>
<li><a href="image32.html"><img src="image32.jpg"></a></li>
<li><a href="image33.html"><img src="image33.jpg"></a></li>
<li><a href="image34.html"><img src="image34.jpg"></a></li>
<li><a href="image35.html"><img src="image35.jpg"></a></li>
<li><a href="image36.html"><img src="image36.jpg"></a></li>
<li><a href="image37.html"><img src="image37.jpg"></a></li>
<li><a href="image38.html"><img src="image38.jpg"></a></li>
<li><a href="image39.html"><img src="image39.jpg"></a></li>
<li><a href="image40.html"><img src="image40.jpg"></a></li>
<li><a href="image41.html"><img src="image41.jpg"></a></li>
<li><a href="image42.html"><img src="image42.jpg"></a></li>
</ul>

</body>
</html>

libelinfo

libelinfo

Posté
Posté

dans ce cas il suffit d'ajouter une l'argeur fixe à ton ul de cette façon :

#liste_photos {

width : largeur px

}

damien.rif

damien.rif

Posté
  • Auteur
Posté
As tu au moins mis une bonne largeur pour ta liste photo

Ce sont des petites vignettes photo, qui ne dépassent jamais 100x100 pixels

--> captain_torche: tu étais bien parti :P Tu n'as pas la solution (toi aou un autre hein ;) ). J'ai passé l'après-midi et la soirée là-dessus :wacko:

yuston

yuston

Posté
Posté

Pour enlever le cadre qui englobe tes lignes 2 à 4, il faut enlever le border de ton ul:

#liste_photos {
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid #000;
}

-j'ai 4 lignes de 9 cellules et en dessous, 1 ligne de 6 cellules

Je pense qu'il est impossible de changer cela si on le fait avec des listes si le nombre de photos ne correspond pas aux dimensions de ta liste.

Et pour ta première ligne de cellule fusionnée, c'est pour mettre quoi dedans? Car si c'est un titre, il faut utiliser un hn et ensuite le décorer avec une bordure (et changer ses marges internes et externes)...

Voilà.

Dadou

Dadou

Posté
Posté
J'ai mis 960 pixels

Bah c'est normal alors que tu en ai plus de 7 sur une ligne, la c'est des maths :

un li de 100 plus les marges de 2 ça fait 104 par li fois 7 ça fait 728

Soit tu fais un ul de 728 soit tu fais des li de 134

Leonick

Leonick

Posté
Posté

au lieu de s'embetter avec des ul li (qu'on mets ensuite en float pour l'effet escompté), des div peuvent suffire (en ajoutant un div d'encapsulation).

Dadou

Dadou

Posté
Posté

Non Leonick c'est pas propre, c'est même très moche, puisque ne correspondant pas à la sémantique.

Et puis de toute manière le résultat final est le même puisque le ul encapsule les li regarde et donne moi la différence entre ces deux codes :

<div id="liste_photos">
		<div><a href="image1.html"><img src="image1.jpg"></a></div>
		<div><a href="image1.html"><img src="image1.jpg"></a></div>
		<div><a href="image1.html"><img src="image1.jpg"></a></div>
		<div><a href="image1.html"><img src="image1.jpg"></a></div>
		<div><a href="image1.html"><img src="image1.jpg"></a></div>
		<div><a href="image1.html"><img src="image1.jpg"></a></div>
</div>

et celui la :

<ul id="liste_photos">
		<li><a href="image1.html"><img src="image1.jpg"></a></li>
		<li><a href="image1.html"><img src="image1.jpg"></a></li>
		<li><a href="image1.html"><img src="image1.jpg"></a></li>
		<li><a href="image1.html"><img src="image1.jpg"></a></li>
		<li><a href="image1.html"><img src="image1.jpg"></a></li>
		<li><a href="image1.html"><img src="image1.jpg"></a></li>
</div>

On s'embête autant il me semble, l'avantage du ul li ici c'est qu'il est plus sémantique la en lisant le code on sait tout de suite que c'est une liste de photos...

libelinfo

libelinfo

Posté
Posté

d'autant plus dans les ceux cas il faut définir une taille pour les li et le ul aussi bien qu'avec les div, enfin surtout pour les balises englobantes, càd dire le ul dans notre exemple.

donc autant faire les choses proprement comme indiqué plus haut ^^

Leonick

Leonick

Posté
Posté
Non Leonick c'est pas propre, c'est même très moche, puisque ne correspondant pas à la sémantique.
sémantiquement parlant, une balise li est-elle prévue pour contenir un élément img (même si cet élément est du type inline ?). D'autant plus qu'avec une image, on ajoute aussi, en général, une légende.
Dadou

Dadou

Posté
Posté

Mais bien sûr qu'une balise li peut contenir une image, et cela est sémantiquement correct. Ici c'est le cas type ou c'est justifié l'usage d'un li : C'est une liste de photos, donc un ul avec li il n'y a pas a tergiverser!!

Quand à mettre une légende à une image, ce n'est pas une obligation, mais il est vrai qu'il faut au moins un alt à l'image.

Dudu

Dudu

Posté
Posté
au lieu de s'embetter avec des ul li (qu'on mets ensuite en float pour l'effet escompté), des div peuvent suffire (en ajoutant un div d'encapsulation).

Oui ben dans ce cas, autant mettre des <table>.

Avec des <font> c'est encore plus sympa: comme ça on peut écrire en Comic Sans MS.

Miséricorde :shutup: ce qu'il ne faut pas lire des fois.

PS: d'ailleurs, merci de m'expliquer pourquoi on "s'embête" avec des <ul>. On "s'embête" moins avec des <div> ?

Question subsidiaire: avec quelle balise "s'embête"-t-on le moins ? Car je n'ai pas très envie de "m'embêter", merci.

captain_torche

captain_torche

Posté
Posté
sémantiquement parlant, une balise li est-elle prévue pour contenir un élément img (même si cet élément est du type inline ?). D'autant plus qu'avec une image, on ajoute aussi, en général, une légende.

Dans le principe, une balise de type inline (non auto-fermante, comme img ou br, peut contenir n'importe quelle autre balise inline. Une balise de type block peut contenir des balises de type block ou de type inline.

La balise li est de type block, elle peut donc contenir tout type de balise : des images, des paragraphes, des titres, des listes ... Il n'y a donc pas de souci de ce côté là.

Quant à l'utilisation de balises divs plutôt qu'une liste, il ne faut pas oublier que la balise div a une valeur sémantique nulle (div = diviseur). Ici, nous avons clairement affaire à une liste d'images, l'utilisation d'une liste est toute appropriée.

Pour finir, un petit moyen mnémotechnique à tout intégrateur web atteint de divite (= qui abuse de l'utilisation du div fourre-tout, au détriment de balises sémantiquement plus appropriées) :

Un div est un esprit maléfique [...] qui aime causer la douleur et la destruction.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...