Aller au contenu

DIV vs TABLE

euhkah

Par euhkah
dans Programmation et Lignes de code

Messages recommandés

euhkah Débutant

euhkah

Posté(e)
Posté(e)

Bonjour à tous !

Voilà, j'ai un petit problème.. On parle depuis longtemps maintenant de ne plus utiliser de TABLE pour la mise en forme d'un site web, et j'ai vraiment rien contre.. SAUF! que je ne trouve pas les DIV assez intelligents pour remplacer une pourtant IDIOTE TABLE..

C'est vrai, c'est plutôt courant non de faire plusieurs colonnes sur un site ? Existe-il une méthode que j'ignore je ne sais pas.. MAIS ça me gonfle de voir un DIV ENFANT plus grand qu'un DIV PARENT.. Pourquoi mes colonnes ne pourraient simplement pas prendre la même hauteur ? Suis-je obliger d'utiliser de vieilles combines pourries pour arriver à mes fins ? (fausses colonnes? colonnes dans un ordre différent que la logique..).. à la fin, j'ai autant de lignes de DIV dans d'autres DIV pour arriver à un résultat, qu'en TABLE j'en aurai moins.. C'est n'importe quoi..

Alors je m'en remet à vous.. Avez-vous la solution dont je n'ai pas connaissance ?

Merci

Lien vers le commentaire
Partager sur d’autres sites
Bdliet Apprenti

Bdliet

Posté(e)
Posté(e)

Bonjour :)

Oui moi j'ai la solution! Continue à utiliser TABLE :-D

Plus sérieusement je ne vois pas non plus l'intérêt d'utiliser les DIV qui sont à mon sens moins pratiques dans pareil cas... J'ai l'impression d'être obligé de bidouiller à chaque fois que j'en utilise...

Lien vers le commentaire
Partager sur d’autres sites
euhkah Débutant

euhkah

Posté(e)
  • Auteur
Posté(e)
J'ai l'impression d'être obligé de bidouiller à chaque fois que j'en utilise...

Moi aussi.. tout le temps en train de mettre les background sur des div parents pour que visuellement ça fasse un truc qui est pourtant ultra simple en table..

Qu'est ce que tu n'arrives pas à faire, une petite explication? (je rappelle que utiliser des tables n'est pas conformes à la W3C dans l'agencement d'un site ;) )

Je n'arrive pas à faire 3 colonnes côte à côte qui prennent la taille de la plus longue des 3.. que je puisse mettre sur chacune un fond coloré diffèrent, et qu'elles soient, dans le code dans un ordre logique ! je m'explique :

<div>colonne 1</div>
<div>colonne 2</div>
<div>colonne 3</div>

Pour :

| colonne 1 | colonne 2 | colonne 3 |

(Pour détailler le truc, je cherche à ce que les 3 colonnes fassent au total 1000px, et qu'elles soit centrées horizontalement.. mais ça, avec un "margin: 0 auto;" c'est bon !)

Je sais que ce n'est pas conforme, et justement, j'essaye de me soumettre à cela, autrement j'utiliserai "simplement" des tables !

J'ai vu que je pouvais faire un compromis avec des "display: table..." mais ce n'est pas compatible ie6 ie7.. donc j'essaye de trouver une autre solution !

Lien vers le commentaire
Partager sur d’autres sites
Fuinril Collaborateur

Fuinril

Posté(e)
Posté(e) 


   <style type='text/css'>
        div.parent {
           margin:0 auto;
           width:1000px;
           overflow: hidden;
           float:left;
        }

        div.parent div {
           float:left;
           width:333px;
           overflow:hidden;
        }
   </style>
   <div class='parent'>
       <div>colonne 1</div>
       <div>colonne 2</div>
       <div>colonne 3</div>
   </div>

Et oui les table c'est mega crade, ca fournit un code illisible, impossible à maintenir et ca prend 100 fois plus de temps à faire dans la majorité des cas.

Comme dit plus haut il suffit d'apprendre à utiliser le css.

Lien vers le commentaire
Partager sur d’autres sites
euhkah Débutant

euhkah

Posté(e)
  • Auteur
Posté(e)

Et oui les table c'est mega crade, ca fournit un code illisible, impossible à maintenir et ca prend 100 fois plus de temps à faire dans la majorité des cas.

Comme dit plus haut il suffit d'apprendre à utiliser le css.

Dans ton code là, si tu met un "float: left;" sur le div parent, ton "margin: 0 auto;" ne sert à rien non ? j'ai tapé ton code, et ça rend bien, oui c'est plus propre, je sais, sauf que ça résoue pas mon problème, si une colonne s'agrandit, les autres non :)

Le code que j'ai écris :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>layout - 3 colonnes</title>
<style type='text/css'>
<!--
* {
	margin: 0;
	padding: 0;
}
div#page {
	margin:0 auto;
	width:1000px;
	overflow: hidden;
}

div#page div#gauche {
	float:left;
	width:333px;
	overflow:hidden;
	background-color: #bababa;
}
div#page div#centre {
	float:left;
	width:334px;
	overflow:hidden;
	background-color: #cacaca;
}
div#page div#droite {
	float:left;
	width:333px;
	overflow:hidden;
	background-color: #dadada;
}
-->
</style>
</head>

<body>
<div id="page">
	<div id="gauche">colonne 1</div>
	<div id="centre">colonne 2<br /><br /><br /><br /><br /><br /></div>
	<div id="droite">colonne 3</div>
</div>
</body>
</html>

Lien vers le commentaire
Partager sur d’autres sites
euhkah Débutant

euhkah

Posté(e)
  • Auteur
Posté(e)

Je l'ai la, soit disant "super solution".. Mais elle est plus moche qu'un simple table ! 67 div les uns dans les autres tout ça juste pour faire ça ? Et "ça" c'est mieux ? sérieux ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>layout - 3 colonnes</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
.hauteur {
float:left;
position:relative;
overflow:hidden;
}
div#page {
margin:0 auto;
width:1000px;
overflow: hidden;
}
#content1 {
width: 1000px;
background: #bababa;
}
#content2 {
width: 1000px;
right: 300px;
background: #cacaca;
overflow: visible;
}
#content3 {
width: 1000px;
right: 515px;
background: #dadada;
overflow: visible;
}
#gauche, #centre, #droite {
left: 815px;
}
#gauche {
width: 185px;
}
#centre {
width: 515px;
}
#droite {
width: 300px;
}
-->
</style>
</head>
<body>
<div id="page">
	<div id="content1" class="hauteur">
		<div id="content2" class="hauteur">
			<div id="content3" class="hauteur">
				<div id="gauche" class="hauteur">Colonne 1</div>
				<div id="centre" class="hauteur">Colonne 2<br /><br /><br /><br /><br /><br /></div>
				<div id="droite" class="hauteur">Colonne 3</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

Je l'ai la, soit disant "super solution".. Mais elle est plus moche qu'un simple table ! 67 div les uns dans les autres tout ça juste pour faire ça ? Et "ça" c'est mieux ? sérieux ?

...  :fou:

Le problème là se situe plus chez toi que dans la technologie elle même...

La solution simple tu l'avais depuis le premier message : "fausses colonnes?"

Si tu ne veux pas l'appliquer c'est ton problème, mais ne viens pas nous ressortir des vieux trolls table/css. C'était à la mode il y a dix ans, maintenant c'est devenu du même niveau que de faire l'apologie des goto.

Oui, une div n'est pas un tableau, et non tu ne peut pas synchroniser leurs hauteurs. Il faut juste accepter que conceptuellement ce n'est pas la même chose. Ce qui ne veux pas dire que c'est pourri, il faut juste raisonner autrement. Tant que tu essaiera d'émuler des tables tu continuera à écrire des atrocités comme au dessus.

Lien vers le commentaire
Partager sur d’autres sites
Fuinril Collaborateur

Fuinril

Posté(e)
Posté(e)

Mouais, je comprend absolument pas ce que tu cherches à faire...

Mais j'ai l'impression que tu n'as pas compris quelque chose : si tu veux faire un tableau, table est là pour cela. Ce qu'il ne faut surtout pas faire c'est structurer sa page avec des tables (<table><tr><td><table>, etc... à l'ancienne mode quoi).

Lien vers le commentaire
Partager sur d’autres sites
Florent_ATo Nouveau

Florent_ATo

Posté(e)
Posté(e)

Bonjour euhkah,

Premièrement lorsqu'il s'agit de développer un site web amateur, deux choix s'offrent à toi.

Il y a celui de préférer la facilité et coder un truc des années 90', inmaintenable et inaccessible ou bien faire l'effort d'apprendre les bases du CSS et viser la validation W3C (XHTML 1.0 Strict / CSS2.1 si t'es motivé ^^).

Dans le cas classique d'un site divisé en trois colonnes, la procédure consiste effectivement à déclarer un wrapper qui enveloppe tes 3 colonnes comme tu l'as décrit précédemment. Par contre, la propriété overflow ne te sert à rien et tu peux factoriser tes background-color dans la div parent. Aussi, n'oublie pas que le <body> est une balise comme les autres qui peut te servir de wrapper.

Si tu veux un site de 1000px de large en trois parties tu vas avoir du mal à tomber juste... Solution: Le pourcentage tout simplement ! La gestion des pourcentages est certes un peu plus délicate qu'avec des valeurs absolues (comme avec les taille des polices, "em" only !) mais encore une fois, à toi de voir si tu veux produire quelque chose de correct ou non :)

Comme cela a été dit, la balise <table> sert à faire des tableaux. Et uniquement des tableaux. La sémantique est très importante pour le web et il ne s'agit pas d'utiliser "au pif" des balise en s'arrêtant à leur aspect graphique. Encore trop de monde fait l'erreur d'utiliser la balise <i> (valide XHTML 1.0 Strict) juste pour mettre du texte en italique, ce qui est désolant :(

Il est à mon humble avis impératif de connaitre globalement CSS et comprendre la sémantique des balises HTML avant de se lancer dans le développement.

Ceci étant si j'ai bien compris ton problème, tu souhaites avoir un site en trois colonnes et faire en sorte que la hauteur de celles-ci soit la même en fonction du remplissage de l'une d'elles.

C'est une problématique classique et il n'y a malheureusement pas (actuellement) de solution unique !

Je t'invite à lire ça :

http://www.couzinhub.com/mar-09/colonnes-de-m-me-hauteur-avec-css

http://www.alsacreations.com/astuce/lire/15-div-blocs-meme-hauteur.html'>http://www.alsacreations.com/astuce/lire/15-div-blocs-meme-hauteur.html

Aussi, je te recommande de jeter un oeil aux sites suivant:

Et en cadeau, une petite démo montrant l'importance d'utiliser de conteneurs adéquats:

http://hacks.mozilla.org/2009/07/media-queries-demo/ (à voir avec Firefox 3.5+)

Voilà, j'espère que ce message t'aura aidé et que tu es maintenant déterminé à produire un code de qualité ^^

Très bonne journée à toi !

Edit

@Fuinril

Ton exemple est globalement correct même si le margin:0 auto; est à mes yeux inutile du fait du float qui fait sortir la div parent de la structure du document. Egalement, je ne vois pas l'utilité des overflow. Tu m'expliques ? :)

@Yangzebul

Ce qui ne veux pas dire que c'est pourri, il faut juste raisonner autrement.

ite missa est.

Merci :chinois:

ps: Premier message après des années de lurkage intensif ! :D

Lien vers le commentaire
Partager sur d’autres sites
Fuinril Collaborateur

Fuinril

Posté(e)
Posté(e)

@Fuinril

Ton exemple est globalement correct même si le margin:0 auto; est à mes yeux inutile du fait du float qui fait sortir la div parent de la structure du document. Egalement, je ne vois pas l'utilité des overflow. Tu m'expliques ? :)

Effectivement le float sur le parent est en trop, de même que le overflow.

Par contre le overflow sur les enfants ca evite d'avoir une page qui pète sur un contenu de type mot (tres) long ou grosse image.

A noter que c'était fait rapidement et sans test et que je ne suis pas intégrateur, j'ai des bonnes notions en CSS mais c'est loin d'être parfait.

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...