28173 sujets

CSS et mise en forme, CSS3

Bonjour,
je commence a apprendre doucement le CSS et j' envisage une refonte graphique de mon site.
cependant j' ai un dilemme car j' ai vu à pusieurs reprises que l' on déconseillait d' utiliser les tableaux:
est-ce que je dois garder la mise en forme à l' aide de tableau ou dois-je supprimer ces tableaux ?
PAGE D ACCUEIL DE MON SITE
oui, j' avais vu.
Mais dans mon cas, on vois clairement une présentation répétitive.
est-ce que je dois garder les tableaux ou peut-on faire la même chose en CSS facilement ?
exle:
html

<div class="cellulea">code</div>

css

#celllulea
{
color: white;
}

ne marche pas.

EDIT:
je vois qu' ils conseillent d' utiliser les listes pour remplacer un tableau.
le problème est que les cellules de mon tableau sont toutes identiques, je souhaite donc qu' elles est le même id.
mais je crois savoir qu' on peut pas avoir le même id sur une page.
J' ai remplacé id par class sur mon html mais le changement graphique ne se fait plus.
Modifié par krsytof (10 Jul 2007 - 22:36)
a écrit :
J' ai remplacé id par class sur mon html mais le changement graphique ne se fait plus.

C'est normal, essaie :
.celllulea
{
color: white;
}
avec un point avant cellulea

En effet, le # sert à pointer les id et le . les class
merci de la précision.
Par contre, je constate que j' ai de nombreuses fois les mêmes id sur ma page html et ça fonctionne très bien.
exple:
<div id="cellulea">blablabla</div>

Pourquoi déconseille t' on alors d' utiliser plusieurs id identique ?
krsytof a écrit :
Pourquoi déconseille t' on alors d' utiliser plusieurs id identique ?
Tout simplement parce que ce n'est pas valide... Les classes, par contre, sont là pour ça.
Administrateur
krsytof a écrit :

Pourquoi déconseille t' on alors d' utiliser plusieurs id identique ?

C'est notamment utile pour faire des ancres dans la page... or une ancre qui mènerait à plusieurs endroits serait bien gênante Smiley ohwell
krsytof a écrit :
Pourquoi déconseille t' on alors d' utiliser plusieurs id identique ?

Comme dit Benjamin, ça n'est pas valide. Ce qui signifie:
- que certains navigateurs se dépatouilleront peut-être avec, car ils font parfois l'effort de corriger les erreurs des créateurs de pages web;
- que d'autres navigateurs auront peut-être plus de mal;
- qu'il y a des situations où ce type de construction, non prévu par les spécifications, peut être mal pris en compte ou tout simplement ignoré;
- que les outils développés à l'avenir ne feront peut-être pas l'effort de corriger les erreurs des créateurs de pages web, ou alors juste une partie.

Si un automobiliste roule à gauche en France, les autres l'éviteront autant qu'ils le peuvent, mais ça n'est pas le mode de conduite le plus sûr. Smiley cligne
ok, merci à tous pour ces explications.
merci pierre pour la correction de mon erreur.
je vais continuer à utiliser des tableaux car je pense que ça doit être difficile de faire sans dans mon cas.
je vais donc utiliser des class au lieu des div.
merci.
krsytof a écrit :
je vais continuer à utiliser des tableaux car je pense que ça doit être difficile de faire sans dans mon cas.

Si je peux me permettre, avant de se poser la question tableau/pas tableau, il y aurait pas mal de choses à revoir du point de vue de l'ergonomie dans cette liste de tutoriels.

Le lien devrait être sur le titre du tutoriel (qui est d'ailleurs souligné...). On supprime au passage tous les liens dont l'intitulé est à chaque fois le même, mais qui pointent vers des pages différentes (cf. cet article pour en savoir plus sur la rédaction des liens).
Ensuite, le nom des logiciels utilisés ne devrait pas être souligné, c'est trompeur (on croit que ces sont des liens, mais en fait non), surtout que les liens sur la même ligne ont exactement la même mise en forme.

Je ferais donc pour ma part un tableau, avec trois colonnes : titre (portant le lien vers le tutoriel) | descriptif | logiciels utilisés.
Chaque groupe serait alors sur une seule ligne de tableau.

Ou alors sur deux colonnes, avec titre (lien) + descriptif à la ligne | logiciels utilisés.
Florent V. a écrit :

Si je peux me permettre, avant de se poser la question tableau/pas tableau, il y aurait pas mal de choses à revoir du point de vue de l'ergonomie dans cette liste de tutoriels.


alors là, tu crois pas si bien dire.
Je suis à l' écoute de tous les commentaires et tous les conseils.

a écrit :
Le lien devrait être sur le titre du tutoriel (qui est d'ailleurs souligné...). On supprime au passage tous les liens dont l'intitulé est à chaque fois le même, mais qui pointent vers des pages différentes


très bonne idée, je suis en train de refaire le site avec du CSS.
Je crois que je vais faire ce que tu me conseilles, je galèrais pour ça.
j' avais initialement fait un lien sur le nom du tuto et sur le "tutoriel animé".
et effectivement, sur la version CSS, les logiciels ne sont plus soulignés.
Si vous avez d' autres conseils, je prends !
merci.
krsytof a écrit :


alors là, tu crois pas si bien dire.
Je suis à l' écoute de tous les commentaires et tous les conseils.

Le lien devrait être sur le titre du tutoriel (qui est d'ailleurs souligné...). On supprime au passage tous les liens dont l'intitulé est à chaque fois le même, mais qui pointent vers des pages différentes


très bonne idée, je suis en train de refaire le site avec du CSS.
Je crois que je vais faire ce que tu me conseilles, je galèrais pour ça.
j' avais initialement fait un lien sur le nom du tuto et sur le "tutoriel animé".
et effectivement, sur la version CSS, les logiciels ne sont plus soulignés.
Si vous avez d' autres conseils, je prends !
merci.


EDIT:
j' ai essayé ceci:
http://chrisllers.free.fr/traitement-video.html
je n' ai pas mis la description à côté car la cellule aurait dû être grande également et ça manque de place.
Florent V. a écrit :

Le lien devrait être sur le titre du tutoriel (qui est d'ailleurs souligné...). On supprime au passage tous les liens dont l'intitulé est à chaque fois le même, mais qui pointent vers des pages différentes Ensuite, le nom des logiciels utilisés ne devrait pas être souligné, c'est trompeur (on croit que ces sont des liens, mais en fait non), surtout que les liens sur la même ligne ont exactement la même mise en forme.


je fais remonter ce sujet, j' ai globalement suivi tes conseils, ça donne ça
si il y a des problèmes d' affichage ou des critiques, n' hésitez pas et merci du conseil Florent. Smiley cligne