Remplacer un tableau par des DIV

xTG · 30-06-2009 13:42:40

Bonjour à toutes et à tous,

je souhaiterais remplacer mon actuel design par des DIV plutôt que les tableau qui sont lourd à charger.
J'ai eu beau chercher sur le net je n'ai trouvé aucun exemple ou piste me permettant de remplacer un tableau de plus de trois colonnes par des div.
Ils utilisaient deux float, un pour celui de gauche avec l'attribut left et celui tout à droite avec l'attribut right.
J'ai bien tenté de rajouter au milieu en me disant qu'il me les alignerais peut être mais sans résultat...
J'ai aussi tenté avec des margin-left se déplaçant au fur et à mesure des divs mais il ne me les alignent pas verticalement me les remettant à la ligne à chaque nouveau div après le second.

Auriez-vous une idée ou un site pouvant me dépatouiller dans mon problème ?

Maljuna Kris · 30-06-2009 14:10:26

Saluton,
Un site oui,Alsacréations ou l'OpenWeb Group, une idée non, des dizaines, dont sûrement quelques unes de très mauvaises.
En tout cas, je te félicite pour cette entreprise. Tout le temps que tu vas investir dans cette démarche te sera rendu au centuple dans un très proche avenir. C'est un excellent investissement.
Amike.

xTG · 01-07-2009 10:11:12

Merci beaucoup pour ce lien si riche en explications !
Pour ceux qui ont le même soucis que moi voici la page que je suis en train de lire pour résoudre mon problème :
http://www.alsacreations.com/tuto/lire/ … leaux.html

xTG · 07-07-2009 08:27:11

En fait j'en revient à venir demander de l'aide à tout utilisateur de CSS averti...
Pour règler mon soucis ces sites me renvoient sur l'utilisation de la balise <span>, or on perds énormément d'attributs et cela ne me convient pas (dont l'attribut background-image).

Détaillons mon problème. J'ai actuellement un tableau contenant 7 colonnes de 1 ligne.
Dans chaque colonne se trouve 2 div imbriqués. Le premier gérant un background propre à la case (que j'aurais pu mettre dans les propriétés du TD sois dit en y réfléchissant...) et un div gérant le positionnement en relatif d'un texte dans ce TD.
Bref le fait d'utiliser ces deux div me fait des retours à la ligne si je les sors du tableau, c'était le soucis.
Le fait de remplacer mon tableau par des span n'a pas régler le soucis, j'ai le même problème que si je n'en mettais pas car il fait un retour à la ligne dans le span dû aux div.

Une idée ?

Dernière modification par xTG (07-07-2009 08:27:42)

Maljuna Kris · 07-07-2009 08:51:16

C'est sûrement très clair pour toi, mais, vu d'ici, c'est plutôt abscons.

La balise <span> est un élément en ligne, pas un élément de type bloc comme <div> ou <p>.

Je crois qu'il faut abandonner, dans ta tête aussi, l'approche mise en page par tableau.

Les balises html, doivent servir, quasi exclusivement, à structurer le document du point de vue sémantique.

La mise en page par les propriétés CSS des composants html se fait ensuite plus naturellement.

En résumé, on s'attache d'abord à l'articulation et à la cohérence du contenu et de sa structure.

Le rendu (la mise en page qu'elle est belle) est appliquée, ensuite, au dit contenu, éventuellement en fonction du média, et non l'inverse.

xTG · 07-07-2009 16:54:46

Oui tu as raison, c'est pas vraiment facile vu qu'on doit pas raisonner pareil.

Je cherche toujours mais à part avec des position:absolute je n'ai trouvé aucune personne résolvant mon soucis autrement...
Je pense que je vais finir par utiliser un simple position:relative puis tout positionner au pixel près...

C'est la porte de sortie ce genre de manipulation pour ce que j'ai pu en voir...

En gros pour résumer ce que je dois faire :
Aligner 8 blocs, chacun de ses blocs doit pouvoir avoir un background-image et contenir un champs pouvant être décalé verticalement.
En gros pour l'alignement horizontal pas de soucis avec les span, mais les span ne gèrent pas l'alignement vertical (padding-top par exemple, pas essayé avec un position:relative par contre m'en vais aller tester cela).
Et pour les div pas de soucis pour le vertical mais impossibilité de faire de l'horizontal.

Jc · 15-04-2010 22:37:39

Bonjour,

Je viens de passer sur le forum, et pour répondre à xTG (même si depuis le temps je pense que vous avez du trouver la solution à votre problème) voici comment régler votre problème.

Le soucis viens du fait que vous essayez de d'imbriquer des div dans vos colonnes (représentées par des div) alors que les styles CSS sont la pour résoudre votre problème.. je m'explique:
il suffit pour chaque div représentant une colonne d'utiliser les attributs css suivant

CSS
.tableau_col{
background-image: url('../img/puces/blue2.gif'); // Ceci sert a déclarer votre image en arriere plan de votre div
background-repeat: no-repeat; // Pour n'avoir qu'une seule copie de l'image présente dans votre div
background-position: 0px center; // Pour indiquer où placer votre image dans votre div. premier paramètre x et deuxieme y ("center" sur y va centrer votre image verticalement)
text-align: center; // pour centrer votre texte dans votre div ou "right" pour le justifier à droite
}

Ainsi vous n'aurez plus de problème d'espacement dans votre div. Restera juste à adapter la taille de votre div au contenu.

Edit : Si vous voulez connaitre la liste de tous les paramètres de style allez sur www.w3schools.com

Dernière modification par Jc (15-04-2010 23:12:12)

PHP|Débutant :: Forums

Advertisement

#1 30-06-2009 13:42:40

Remplacer un tableau par des DIV

#2 30-06-2009 14:10:26

Re : Remplacer un tableau par des DIV

#3 01-07-2009 10:11:12

Re : Remplacer un tableau par des DIV

#4 07-07-2009 08:27:11

Re : Remplacer un tableau par des DIV

#5 07-07-2009 08:51:16

Re : Remplacer un tableau par des DIV

#6 07-07-2009 16:54:46

Re : Remplacer un tableau par des DIV

#7 15-04-2010 22:37:39

Re : Remplacer un tableau par des DIV

Pied de page des forums