PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

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

xTG
GrandGourou
Inscription : 18-06-2009
Messages : 1 127
Site Web

Remplacer un tableau par des DIV

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 ?

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Remplacer un tableau par des DIV

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


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

xTG
GrandGourou
Inscription : 18-06-2009
Messages : 1 127
Site Web

Re : Remplacer un tableau par des DIV

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

Hors ligne

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

xTG
GrandGourou
Inscription : 18-06-2009
Messages : 1 127
Site Web

Re : Remplacer un tableau par des DIV

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 ? hmm

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

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Remplacer un tableau par des DIV

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

xTG
GrandGourou
Inscription : 18-06-2009
Messages : 1 127
Site Web

Re : Remplacer un tableau par des DIV

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.

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 629
Site Web

Re : Remplacer un tableau par des DIV

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

<div class="tableau_col">....</div>

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)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

Pied de page des forums