Question CSS

27 réponses

Page 1 2

Auteur	Message
krucial \| Administrateur Inscrit le : 09/03/2005	# Le 27/08/2008 à 23:16 Salut Imaginons : J'ai un bloc A qui englobe 2 blocs, B et C. B est a gauche, C a droite. B et C ont une hauteur variable (suivant leur contenu). Vous suivez ?. Comme vous faites pour que B et C aient la même hauteur (comme ca le ferait si c'etait un tableau de 2 cellules) ? JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
caaptusss \| Jérémy Membre Inscrit le : 25/09/2007	# Le 27/08/2008 à 23:24 B et C en height à 100 % et limité ainsi par la hauteur de A qui les englobe, non ? FirstHeberg.com
jdelire \| Lilian Membre Inscrit le : 14/05/2005	# Le 27/08/2008 à 23:25 J'ai également beaucoup cherché comment faire dans ce cas la, et je n'ai trouvé qu'une solution javascript assez crade : var y=document.getElementById('blocB').offsetHeight; if(y<document.getElementById('blocC').style.height){ document.getElementById('blocC').style.height=y+"px"; } en sachant que cela ne fonctionne pas si la div contient que des images si quelqu'un a une autre solution Slwo.fr
Zalex14 \| Alexandre Modérateur Inscrit le : 09/05/2005	# Le 27/08/2008 à 23:29 entre var y=document.getElementById('blocB').offsetHeight; if(y<document.getElementById('blocC').style.height){ document.getElementById('blocC').style.height=y+"px"; } et <table><tr><td>coucou</td><td>c'est moi</td></tr></table> Je choisi le table Mieux vaut s'attendre au prévisible que d'être surpris par l'inattendu.
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 27/08/2008 à 23:47 c'est ce que j'allais dire lol Non clairement il y a pas de solutions dans ce cas là (du moins à ma connaissance). Par contre visuellement, il y a souvent moyen de faire le même effet ... mais pour ça faut nous faire une capture d'écran pour qu'on voit si c'est faisable (notamment avec des images de fond etc...) Mais toujours pareil, c'est peut-etre plus clean en tableau comme le dit Zalex. PS : height:100%; n'est pas fait pour ça ;)
caaptusss \| Jérémy Membre Inscrit le : 25/09/2007	# Le 28/08/2008 à 00:08 tonguide a dit : PS : height:100%; n'est pas fait pour ça ;) Ouai mais ça marche FirstHeberg.com
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 28/08/2008 à 00:16 euh bah non justement lol
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 28/08/2008 à 00:36 Ca va se finir en tableau ! JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 28/08/2008 à 00:43 les tableaux ne sont pas recommandés pour de la présentation, mais ça reste une balise utile et valide si c'est pour présenter des données par exemple.
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 28/08/2008 à 01:28 CSS 3 ... faut attendre (et longtemps, le temps que tous les navigateurs soient équipés et qu'ils représentent la majorité). "Dans A après B et C, tu rajoute un clear: both et tu applique le style à A." ça permet juste de rendre le cadre A à la même dimension que le cadre B et C, mais c'est le B et C qu'il veut qu'il soit identique .
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 28/08/2008 à 08:45 Les table sont infiniment plus pratiques pour la mise en page. Aucune surprise entre les générations de navigateurs. J'ai choisi mon camp Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f
Geo 113 \| Geoffrey Modérateur Inscrit le : 04/05/2005	# Le 28/08/2008 à 10:10 devtribu a dit : Les table sont infiniment plus pratiques pour la mise en page. Aucune surprise entre les générations de navigateurs. J'ai choisi mon camp merci dev, je me sentais seul Cosmix Rendez imprévisible l'Economie; Mentez aux sondages
caaptusss \| Jérémy Membre Inscrit le : 25/09/2007	# Le 28/08/2008 à 10:25 Et moi alors FirstHeberg.com
studcrea \| Cyril Modérateur Inscrit le : 09/05/2005	# Le 28/08/2008 à 10:55 c'est du joli ! ^^ DA / Développeur Web : )
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 28/08/2008 à 11:06 devtribu a dit : Les table sont infiniment plus pratiques pour la mise en page. Aucune surprise entre les générations de navigateurs. J'ai choisi mon camp Oui et non, les tableau c'est bien pour certains trucs, les blocs a positionner, c'est genial pour d'autres... Il y a des trucs que tu galererais a mettre en page avec les tableaux, et qui prennent 2 secondes en div+css. Il n'y a pas de regles. J'ai pas choisi mon camp, je choisis en fonction du besoin et de la facilité à l'exécuter. Je suis actuellement en train de reprendre un vieux phpBB, fait tout en tableaux. Sur certaines pages, je vire 70% du html, c'est quand meme plus propre. Enfin, sur ce coup, je vais utiliser les tableaux. JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 28/08/2008 à 11:44 devtribu a dit : Les table sont infiniment plus pratiques pour la mise en page. Aucune surprise entre les générations de navigateurs. J'ai choisi mon camp quand tu vois la différence de code entre un site fait en tableau et un site fait en "div", c'est convaincant tout de même. Le nombre de fois où j'ai passé un design de tableau à CSS, le code est divisé par 5, au chargement, ça se voit quand même. Après, je ne sais pas si ça joue sur le référencement, c'est possible. En dehors de quelques petits trucs manquants (comme celui cité là), généralement c'est beaucoup plus simple et rapide en CSS. Il faut être très rigoureux c'est tout.
Julgates \| Julien Administrateur Inscrit le : 09/03/2005	# Le 28/08/2008 à 11:53 Purée un forum sans avatar c'est quand même bien moche Shopping Time Network - Founder / CTO
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 28/08/2008 à 14:03 tonguide a dit : Le nombre de fois où j'ai passé un design de tableau à CSS, le code est divisé par 5, au chargement, ça se voit quand même. Après, je ne sais pas si ça joue sur le référencement, c'est possible. Si ton code est divisé par 5, c'est qu'il y a pas des masses de contenu... Quelques balises tables ca ne change pas grand chose Il faut etre rigoureux et gérer les différences entre IE6, IE7 et bientot IE8 Meme entre ff2 et ff3, il y a des différences (en particulier avec les proprietes float) Pour moi, la technologie n'est pas prete : trop de contraintes et de temps à passer par rapport aux tableaux. Je prefererai aussi des div, mais c'est trop d'emmerdements Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 28/08/2008 à 14:08 C'est pas rare de voir des <table> avec des <tr> et des <td> pour chaque ligne ou presque (découpe automatique en particulier je pense). Et dans ces cas là, le code peut très facilement faire des kilomètres de long. Après c'est un choix, et c'est sûr que ça peut prendre un poil plus de temps si le design est particulièrement difficile à intégrer.
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 28/08/2008 à 14:12 Oui, c'est vrai qu'on arrive vite a des imbrications presque infinies. Remarque que ca peut aussi etre le cas avec des div L'objectif dans mon intégration c'est de faire une decoupe facile a maintenir et a modifier. Tant que des avantages concrets (réferencement, universalité, ...) de l'abandon des tables pour la mise en page ne seront pas prouvés, je garde ma methode de barbare. Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

Auteur

Message

krucial |
Administrateur

Inscrit le : 09/03/2005

# Le 27/08/2008 à 23:16

Salut

Imaginons :

J'ai un bloc A qui englobe 2 blocs, B et C.

B est a gauche, C a droite.

B et C ont une hauteur variable (suivant leur contenu). Vous suivez ?.

Comme vous faites pour que B et C aient la même hauteur (comme ca le ferait si c'etait un tableau de 2 cellules) ?

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

caaptusss | Jérémy
Membre

Inscrit le : 25/09/2007

# Le 27/08/2008 à 23:24

B et C en height à 100 % et limité ainsi par la hauteur de A qui les englobe, non ?

FirstHeberg.com

jdelire | Lilian
Membre

Inscrit le : 14/05/2005

# Le 27/08/2008 à 23:25

J'ai également beaucoup cherché comment faire dans ce cas la, et je n'ai trouvé qu'une solution javascript assez crade :

var y=document.getElementById('blocB').offsetHeight;
if(y<document.getElementById('blocC').style.height){
document.getElementById('blocC').style.height=y+"px";
}

en sachant que cela ne fonctionne pas si la div contient que des images

si quelqu'un a une autre solution

Slwo.fr

Zalex14 | Alexandre
Modérateur

Inscrit le : 09/05/2005

# Le 27/08/2008 à 23:29

entre



var y=document.getElementById('blocB').offsetHeight;

if(y<document.getElementById('blocC').style.height){

document.getElementById('blocC').style.height=y+"px";

}



<table><tr><td>coucou</td><td>c'est moi</td></tr></table>

Je choisi le table

Mieux vaut s'attendre au prévisible que d'être surpris par l'inattendu.

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 27/08/2008 à 23:47

c'est ce que j'allais dire lol

Non clairement il y a pas de solutions dans ce cas là (du moins à ma connaissance).

Par contre visuellement, il y a souvent moyen de faire le même effet ... mais pour ça faut nous faire une capture d'écran pour qu'on voit si c'est faisable (notamment avec des images de fond etc...)

Mais toujours pareil, c'est peut-etre plus clean en tableau comme le dit Zalex.

PS : height:100%; n'est pas fait pour ça ;)

caaptusss | Jérémy
Membre

Inscrit le : 25/09/2007

# Le 28/08/2008 à 00:08

tonguide a dit :
PS : height:100%; n'est pas fait pour ça ;)

Ouai mais ça marche

FirstHeberg.com

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 28/08/2008 à 00:16

euh bah non justement lol

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 28/08/2008 à 00:36

Ca va se finir en tableau !

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 28/08/2008 à 00:43

les tableaux ne sont pas recommandés pour de la présentation, mais ça reste une balise utile et valide si c'est pour présenter des données par exemple.

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 28/08/2008 à 01:28

CSS 3 ... faut attendre (et longtemps, le temps que tous les navigateurs soient équipés et qu'ils représentent la majorité).

"Dans A après B et C, tu rajoute un clear: both et tu applique le style à A." ça permet juste de rendre le cadre A à la même dimension que le cadre B et C, mais c'est le B et C qu'il veut qu'il soit identique .

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 28/08/2008 à 08:45

Les table sont infiniment plus pratiques pour la mise en page.
Aucune surprise entre les générations de navigateurs.

J'ai choisi mon camp

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

Geo 113 | Geoffrey
Modérateur

Inscrit le : 04/05/2005

# Le 28/08/2008 à 10:10

devtribu a dit :
Les table sont infiniment plus pratiques pour la mise en page.
Aucune surprise entre les générations de navigateurs.

J'ai choisi mon camp

merci dev, je me sentais seul

Cosmix
Rendez imprévisible l'Economie; Mentez aux sondages

caaptusss | Jérémy
Membre

Inscrit le : 25/09/2007

# Le 28/08/2008 à 10:25

Et moi alors

FirstHeberg.com

studcrea | Cyril
Modérateur

Inscrit le : 09/05/2005

# Le 28/08/2008 à 10:55

c'est du joli ! ^^

DA / Développeur Web : )

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 28/08/2008 à 11:06

devtribu a dit :
Les table sont infiniment plus pratiques pour la mise en page.
Aucune surprise entre les générations de navigateurs.

J'ai choisi mon camp

Oui et non, les tableau c'est bien pour certains trucs, les blocs a positionner, c'est genial pour d'autres... Il y a des trucs que tu galererais a mettre en page avec les tableaux, et qui prennent 2 secondes en div+css. Il n'y a pas de regles. J'ai pas choisi mon camp, je choisis en fonction du besoin et de la facilité à l'exécuter.

Je suis actuellement en train de reprendre un vieux phpBB, fait tout en tableaux. Sur certaines pages, je vire 70% du html, c'est quand meme plus propre.

Enfin, sur ce coup, je vais utiliser les tableaux.

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 28/08/2008 à 11:44

devtribu a dit :
Les table sont infiniment plus pratiques pour la mise en page.
Aucune surprise entre les générations de navigateurs.

J'ai choisi mon camp

quand tu vois la différence de code entre un site fait en tableau et un site fait en "div", c'est convaincant tout de même.

Le nombre de fois où j'ai passé un design de tableau à CSS, le code est divisé par 5, au chargement, ça se voit quand même. Après, je ne sais pas si ça joue sur le référencement, c'est possible.

En dehors de quelques petits trucs manquants (comme celui cité là), généralement c'est beaucoup plus simple et rapide en CSS. Il faut être très rigoureux c'est tout.

Julgates | Julien
Administrateur

Inscrit le : 09/03/2005

# Le 28/08/2008 à 11:53

Purée un forum sans avatar c'est quand même bien moche

Shopping Time Network - Founder / CTO

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 28/08/2008 à 14:03

tonguide a dit :
Le nombre de fois où j'ai passé un design de tableau à CSS, le code est divisé par 5, au chargement, ça se voit quand même. Après, je ne sais pas si ça joue sur le référencement, c'est possible.

Si ton code est divisé par 5, c'est qu'il y a pas des masses de contenu... Quelques balises tables ca ne change pas grand chose

Il faut etre rigoureux et gérer les différences entre IE6, IE7 et bientot IE8
Meme entre ff2 et ff3, il y a des différences (en particulier avec les proprietes float)

Pour moi, la technologie n'est pas prete : trop de contraintes et de temps à passer par rapport aux tableaux.
Je prefererai aussi des div, mais c'est trop d'emmerdements

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 28/08/2008 à 14:08

C'est pas rare de voir des <table> avec des <tr> et des <td> pour chaque ligne ou presque (découpe automatique en particulier je pense). Et dans ces cas là, le code peut très facilement faire des kilomètres de long.

Après c'est un choix, et c'est sûr que ça peut prendre un poil plus de temps si le design est particulièrement difficile à intégrer.

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 28/08/2008 à 14:12

Oui, c'est vrai qu'on arrive vite a des imbrications presque infinies. Remarque que ca peut aussi etre le cas avec des div

L'objectif dans mon intégration c'est de faire une decoupe facile a maintenir et a modifier.
Tant que des avantages concrets (réferencement, universalité, ...) de l'abandon des tables pour la mise en page ne seront pas prouvés, je garde ma methode de barbare.

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

Page 1 2

Répondre

Vous ne pouvez pas participer au forum, car votre inscription n'a pas été validée. Pour vous faire valider en tant que Membre, cliquez ici.