Jump to content
Sign in to follow this  
damien.rif

Mettre mon tableau en CSS

Rate this topic

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

#liste_photos {

width : largeur px

}

Share this post


Link to post
Share on other sites

As tu au moins mis une bonne largeur pour ta liste photo

Share this post


Link to post
Share on other sites
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:

Share this post


Link to post
Share on other sites

tu as mis quelle largeur pour le ul???

Share this post


Link to post
Share on other sites

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à.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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 ^^

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...