28173 sujets

CSS et mise en forme, CSS3

Hauteur d'un div s'adaptant à l'hauteur d'un autre !

Pages :
Bonjour,

Voila, je me lance aux divs CSS mais je doit avouer que contrairement aux tableaux, les divs, c'est la galère ! Les navigateurs ne peuvent-ils pas se mettre d'accord ? Smiley bawling De plus, j'ai beau essayer plein d'options css, sa marche pas...

Bon bref, j'essaye de faire une design CSS donc avec les fameux DIVs et à un endroit de mon design, il y a un DIV à gauche et deux autres à droites. Ce que j'aimerai c'est que le deuxième à droite s'adapte à la hauteur du gaucher ! J'ai essayer en donnant des tailles, avec les margins... sa donne des trucs bizarre ou sinon, sa fait rien !

Je pense que c'est peut être une question stupide mais voila, je n'y arrive pas.

Aussi, j'en profite pour vous dire, que pour pouvoir mettre les deux divs à la droite du gauche, j'ai été obligé de les mettres dans un autre div ! Car sinon, avec le float:left;, il me l'ai métai les uns a coté des autres. Y'a t'il mieux ?

Enfin, voici mon code :
<body style="margin:0px; padding: 0; height: 100%">

<div style="float:left; position:relative; background-color:yellow; height:40px; width:780px;">bonjour</div>
<div style="float:left; position:relative;">
	<div style="background-color:red; height:100px; width:580px; position:relative;">bonjour</div>
</div>
<div style="float:left; margin:0px; position:relative;">
	<div style="background-color:blue; width:200px; position:relative;">bonjour2</div>
	<div style="background-color:green; position:relative;">bonjour3</div>
</div>
<div style="clear:left; height:200px; background-color:gray; margin:0px; position:relative;">bonjour2</div>


upload/6840-DIV.JPG

Merci.
tatin a écrit :
Bon bref, j'essaye de faire une design CSS donc avec les fameux DIVs

Oui enfin, div est un élément HTML générique de type bloc, qui n'a pas de mise en forme par défaut (son équivalent pour les éléments en-ligne est span). Mais rien n'oblige à utiliser des div, quand on peut utiliser des paragraphes, des listes, d'autres éléments de type bloc encore.
Je précise juste pour relativiser la divite aiguë qui parcourt ces forums de temps à autre.

tatin a écrit :
à un endroit de mon design, il y a un DIV à gauche et deux autres à droites. Ce que j'aimerai c'est que le deuxième à droite s'adapte à la hauteur du gaucher ! J'ai essayer en donnant des tailles, avec les margins... sa donne des trucs bizarre ou sinon, sa fait rien !

C'est une des limites des CSS, ou plutôt une des limites des navigateurs qui n'ont pas implémenté la propriété CSS display: table-cell.

Le seul moyen que je connaisse, c'est de ruser :
http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux

tatin a écrit :
Aussi, j'en profite pour vous dire, que pour pouvoir mettre les deux divs à la droite du gauche, j'ai été obligé de les mettres dans un autre div ! Car sinon, avec le float:left;, il me l'ai métai les uns a coté des autres. Y'a t'il mieux ?

Ça ne me choque pas particulièrement comme construction. Mais on peut faire plus simple :
– soit avec un bloc à gauche en float: left (il devra être en premier dans le code HTML), et les deux autres qui viennent se placer tout seuls à droite (il faut que le bloc de gauche ait une largeur fixe qui laisse de la place pour les autres blocs.
– soit avec les deux petits blocs en premier dans le code, et en float: right, tout en jouant avec la propriété clear.

Mais ce que tu as fait n'est pas problématique, et est plus simple à gérer pour un débutant.
Bonjour,

Ok pour les spans, les paragraphes, listes et autres... je vais essayer d'utiliser tout sa comme il faut.

Merci pour le lien, je suis aller directement dans le forum sans passer par les tutoriaux...

Enfin, ok pour les divs... en faite, j'avais lu un article qui disait qu'il fallait arreter de penser à la mode tableau, et la mon idée, m'y a fait repenser mais bon si sa marche, impeccable. Je préfere donc laisser ainsi dans un premier temps.

Merci donc pour ta réponse. Je vais lire le tuto et l'appliquer.
Bonjour,

Bon et bien, j'ai un problème qui se pose ! Sa marchais bien quand le contenu était trop grand mais quand c'est le menu, la sa marchais plus du tout. Alors j'ai fait sa :

<body style="margin:0px; padding: 0; height: 100%; text-align:center;">

<div style="position:relative; background-color:yellow; height:40px; width:780px; margin-left:auto; margin-right:auto; text-align:left;">bonjour</div>
<div style="background-color:blue; position:relative; width:780px; z-index:80; margin-left:auto; margin-right:auto; text-align:left;">

	<div style="background-color:red; float:left; text-align:left; width:400px;">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
	dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
	suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
	vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
	iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
	dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
	suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
	vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
	iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
	<div style="background-color:green; float:left; width:200px; text-align:left;">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
	dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
	suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
	vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
	iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
	dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
	suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
	vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
	iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	</div>

</div>
<div style="height:200px; background-color:gray; position:relative; text-align:left;">bonjour2</div>


Sous IE, sa fonctionne comme je le souhaite mais sour Mozilla, c'est autre chose ! En faite, le div de fond n'apparait plus ! Celui en bleu.

Merci.
tatin a écrit :
Sous IE, sa fonctionne comme je le souhaite mais sour Mozilla, c'est autre chose ! En faite, le div de fond n'apparait plus ! Celui en bleu.

À vue de nez : le flottant fait ce qu'il est censé faire, c'est à dire qu'il flotte. Du coup, son bloc parent ne s'allonge pas pour le contenir. Il ne disparaît pas, il se contente de faire 0px de hauteur.

Petit test à réaliser chez vous les enfants : mettez un padding: 1em; sur le bloc conteneur bleu. Magie, on le voit apparaître, et il fait maintenant 2em de hauteur.

Hop, la soluce par là :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Bonjour,

Et bien sa n'arrange rien au contraire... le padding ne fait pas beau sous IE et sous firefox, bien c'est pas bien mieux.

upload/6840-bug-div.JPG

Le pire c'est que j'avais réussi a faire ce que je voulais l'autre jour mais sans faire exprès j'ai perdu l'idée (merci le bricolage !).

Tous ce que je souhaite c'est ceci qui est en tableau, en divs :
<table><tr>
<td style="width:75%; background-color:red; vertical-align:top;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td>
<td style="width:25%; background-color:yellow; vertical-align:top;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt autem lla esent luptatum zzLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td>
</tr></table>

<br><br>

<table><tr>
<td style="width:75%; background-color:red; vertical-align:top;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt autem lla esent luptatum zzLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td>
<td style="width:25%; background-color:yellow; vertical-align:top;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td>
</tr></table>


Regardez la simplicité de mise en place ! Pourquoi nous dit-ont d'abandonner les tableaux pour les divs alors qu'ils n'ont pas l'air au point ? De plus, entre les navigateurs, il y a plus de problème qu'avant...

Bref, j'essaye de mis mettre pour ne pas paraitre veillaux mais je regrete mes tableaux qui me rendait la vie bien plus facile.

Donc, si vous éxécutez mon code, vous verez que je souhaite que soit le contenu ou le menu, que les deux divs soit de meme hauteur, tout du moins en apparence !

Merci.
tatin a écrit :
Et bien sa n'arrange rien au contraire... le padding ne fait pas beau sous IE et sous firefox, bien c'est pas bien mieux.

Le padding sert à mettre en évidence le problème. Pour la solution au problème, il faut suivre le lien donné dans mon message précédent.

tatin a écrit :
Tous ce que je souhaite c'est ceci qui est en tableau, en divs :
<table>deux colonnes</table>

D'une, ça n'est pas forcément interdit de faire ça avec un tableau. Ça n'est pas l'usage sémantique d'un tableau, mais ça ne pose pas trop de problèmes d'accessibilité, et c'est parfois pratique. Le tout est de ne pas imbriquer des tableaux les uns dans les autres (cauchemar pour l'accessibilité).

De deux, c'est très simple avec un bloc flottant et un bloc statique, à une nuance près : dans l'état actuel de l'implémentation des CSS2, on ne peut pas avoir l'aspect de colonnes comme avec un tableau. On aura deux blocs adjacents, mais le bloc le plus long ne fera pas s'allonger (en hauteur) le bloc le plus court, vu qu'ils ne seront pas liés.

De trois, deux petits exemples tous simples :
1 – http://web.covertprestige.info/test/02-deux-colonnes-simples.html (pas tip-top, mais bon…)
2 – http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html (à corriger si tu ne veux que deux colonnes)

Si tu veux absoluement deux colonnes visuellement de même hauteur, il n'y a pas de solution miracle en CSS (du moins il y en a une, mais pas implémentée par qui tu sais). Il faut donc se rabattre sur des petits trucs :
http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux

a écrit :
Regardez la simplicité de mise en place ! Pourquoi nous dit-ont d'abandonner les tableaux pour les divs alors qu'ils n'ont pas l'air au point ? De plus, entre les navigateurs, il y a plus de problème qu'avant...

Tu es sûr que ça n'est pas plutôt toi qui n'est pas au point ?
Je ne dis pas ça pour t'embêter, mais je constate que tu utilises une technologie nouvelle pour toi, sans trop savoir comment ça marche, et tu t'étonnes que ça ne fonctionne pas comme tu le voudrais.

Pour ma part je n'ai jamais utilisé les tableaux pour faire de la mise en page. Du coup, je ne suis pas compétent avec ces méthodes, et je pourrais très bien dire « Pourquoi est-ce que les défenseurs des tableaux disent que c'est plus efficace et plus rapide que les CSS, alors qu'avec les tableaux j'arrive à rien ? ».

Au passage, il ne s'agit pas d'abandonner les tableaux pour passer aux divs… mais de séparer la forme et le contenu, en ne mettant que l'indispensable dans le document HTML, et toute la mise en forme dans la feuille de style. On peut très bien faire ça sans utiliser la moindre balise <div>, d'ailleurs. Un div n'est qu'un conteneur (élément de type bloc) qui n'a pas de "sens" particulier (mis à part le fait qu'il regroupe des éléments), et pas de mise en forme par défaut.

Voilà, en espérant que ça t'aidera.

PS : désolé si le ton de ce message est un peu sec par moment, je me rends compte que je suis un peu crevé, et je n'ai pas la force de corriger certaines tournures de phrases avant de publier. J'espère que tu ne m'en voudras pas. Smiley confused
tatin a écrit :
Bon et bien, j'ai un problème qui se pose ! Sa marchais bien quand le contenu était trop grand mais quand c'est le menu, la sa marchais plus du tout.

Salut,
C'est normal, ce tuto permet seulement d'adapter visuellement la hauteur de la partie menu à celle de la partie contenu, mais pas l'inverse.

Ce qui serait pourtant facilement faisable en utilisant "display: table-cell;", mais qu'Internet Explorer ne connait pas. Une solution est de l'utiliser quand même et de prévoir une dégradation correcte pour IE : pour lui la hauteur ne s'adapterait visuellement que dans un cas.
Voir par ici : http://www.blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css

Sinon il est possible d'obtenir cette présentation avec IE (y compris IE 5) ainsi que les autres navigateurs (bien sûr), en utilisant les marges négatives : on prend deux conteneurs, chacun d'une couleur différente et le second dans le premier. On applique au second une marge à gauche qui laissera voir une partie du premier. On ajoute dans ce second conteneur nos deux "fausses colonnes" (#gauche et #droite disons).
Il suffit alors d'appliquer à #gauche une marge négative (de sorte que celui -ci se retrouve au dessus de la couleur du premier conteneur) et une largeur de la même valeur que celle de la marge de gauche du second conteneur, puis d'ajouter un float:left; (prévoir un élément en clear:both pour que #gauche puisse "pousser" le le conteneur)
Il y a une difficulté supplémentaire si l'on souhaite des pourcentages. On pourra dans ce cas prévoir sur le second conteneur une marge négative de droite de la même valeur que celle positive de gauche, + un overflow hidden sur le premier (avec une largeur pour IE...)

#gauche et/ou #droite vont ainsi pousser le second conteneur qui lui même va pousser le premier.
Kappiert ?

Voici un exemple en ligne

C'est juste une possibilité mais pas un conseil de procéder ainsi Smiley cligne
Modifié par Alan (01 Jun 2006 - 12:08)
Salut,

a écrit :
PS : désolé si le ton de ce message est un peu sec par moment, je me rends compte que je suis un peu crevé, et je n'ai pas la force de corriger certaines tournures de phrases avant de publier. J'espère que tu ne m'en voudras pas.


Non non, ne t'inquiète pas.

a écrit :
Tu es sûr que ça n'est pas plutôt toi qui n'est pas au point ?
Je ne dis pas ça pour t'embêter, mais je constate que tu utilises une technologie nouvelle pour toi, sans trop savoir comment ça marche, et tu t'étonnes que ça ne fonctionne pas comme tu le voudrais.


Tout a fait raison ! En faite, c'est vraiment nouveau pour moi et j'avoue que je suis perdu... de plus, je me suis rendu compte que l'on pouvait arriver à la même chose de plusieurs façons ce qui me dérange un peu mais bon, je vais m'y faire.

a écrit :
D'une, ça n'est pas forcément interdit de faire ça avec un tableau. Ça n'est pas l'usage sémantique d'un tableau, mais ça ne pose pas trop de problèmes d'accessibilité, et c'est parfois pratique. Le tout est de ne pas imbriquer des tableaux les uns dans les autres (cauchemar pour l'accessibilité).


Un article disait que l'on faisait une utilisation détourné des tableaux ce qui n'était pas bon et que par conséquent, il fallait les oubliers pour les divs... je me répète un peu... lol

a écrit :
mais de séparer la forme et le contenu, en ne mettant que l'indispensable dans le document HTML, et toute la mise en forme dans la feuille de style.


Ouf, je le fait à 90% déjà ! Normalement.

a écrit :
Voilà, en espérant que ça t'aidera.

Oui merci ! Tu m'es d'une grande aide.

-----------------------------------------------------------------

Alan >

a écrit :
exemple


C'est exactement ce qu'il me faut. Sinon, je vais faire un tour ton lien afin de voir.

Merci !
tatin a écrit :
Un article disait que l'on faisait une utilisation détourné des tableaux ce qui n'était pas bon et que par conséquent, il fallait les oubliers pour les divs... je me répète un peu... lol

Cet article va globalement dans le bon sens. Il présente une idée simple et puissante… qui comme toutes les idées de ce genre a besoin d'être nuancée Smiley cligne

Oui, l'utilisation des tableaux pour la mise en page est un détournement de l'élément html table. Mais, après tout, le HTML a un nombre d'éléments très limité. Par exemple, pour un menu de navigation, on n'a pas d'élément menu ou nav. Du coup, on fait une approximation : un menu est une liste de liens pointant vers des pages internes, donc on va utiliser une liste ul. Mais si on veut faire une liste de courses, on va utiliser le même élément. Au niveau sémantique, c'est donc limité ! Un script qui parserait cette page ne serait pas capable de reconnaître facilement s'il est confronté à un menu de navigation interne ou à une liste de courses ! Et tout ça parce qu'on a "détourné" l'élément ul. La vérité, c'est qu'il y a tellement peu d'éléments qu'on est obligé de détourner ces éléments d'un usage prévu initialement et restrictif.

Mais bon, le détournement d'ul en menu de navigation conserve une certaine logique. Celui de table en "structure globale d'une page ou d'une zone de page pour l'organisation graphique et spatiale des éléments" est par contre beaucoup plus contestable.

Après, il y a le questionnement pragmatique. Ai-je intérêt à abandonner les tableaux au profit d'un (X)HTML sémantique et des CSS ? Oui, pour plusieurs raisons :
– pour soi-même : allègement des fichiers et de la charge en bande passante, meilleure organisation du code, meilleure évolutivité du site (on peut modifier des choses sans tout refaire), etc.
– pour les visiteurs : meilleure compatibilité avec les navigateurs, accessibilité du contenu à tous ceux qui n'ont pas un navigateur graphique + une paire d'yeux avec 10/10 à chaque œil.
(Note : je t'accorde que la question de la meilleure compatibilité n'est pas flagrante, vu le retard du dernier de la classe, Internet Explorer. Mais tout de même, la situation est bien meilleure aujourd'hui avec les standards du web, qu'en 1998, non ?)

Positionnement pragmatique : si quelque chose ne met pas en danger ces avantages que j'ai acquis, il n'y a pas de raison que je ne l'utilise pas.
En l'occurence, l'utilisation d'UN SEUL tableau (surtout pas des tableaux imbriqués, qui sont fatals pour l'accessibilité… surtout si on multiplie les niveaux d'imbrication) n'est pas rhédibitoire. Ce n'est pas optimal, mais ça ne supprime aucun des avantages gagné (au pire, ça les atténue un petit peu… et encore, il faudrait le démontrer).

Ma suggestion, donc : si tu es perdu, fais un site avec UN tableau pour tes colonnes. Il peut être très frustrant de voir des div ou autres blocs en positionnement flottant qui vont tenir dans la largeur avec Firefox, mais qui seront trop larges dans IE pour que les deux div tiennent dans la largeur, ce qui fera que la deuxième "colonne" se retrouvera en dessous de la première. Dans un premier temps, tu peux donc utiliser ce compromis.
Tu verras, tu seras vite curieux de voir comment faire autrement.
Mais ne te fixe pas des enjeux énormes dès le début, vas-y progressivement.
Bonjour,

Super message !

Bon en faite, je vais retenter de tout faire en div grace aux liens que vous m'avez donné. Si je n'y parvient pas, j'utiliserai un tableau pour le cas des colones mais vraiment je souhaite évoluer !

Merci.
Bonjour,

Bon alors, je commence à bien me débrouiller je trouve mais il me reste des différences entre les deux navigateurs Mozilla et IE. Le fautif est IE bien sur ! Problème de marge top et bordures qui saute.

Voici les deux images, la premiere sous mozilla et la seconde sous IE :

upload/6840-div-mozilla.JPG

upload/6840-div-ie.JPG

Maintenant, mon code :
<html>
<style>

</style>
<head></head>

<body style="margin:0px; padding:0px; background-image:url('images/angyna-plat_02.jpg'); background-repeat:repeat-x;">

<div>&nbsp;</div>
<div style="position:relative; margin-bottom:-19px; margin-left:10px; margin-right:10px; z-index:100; border-top:solid 1px #989898; border-left:solid 1px #989898; border-right:solid 1px #989898;">

	<div style="position:relative; height:26px; margin-top:1px; margin-left:1px; margin-right:1px; background-image:url('images/angyna-plat_13.jpg');">dhfhdf</div>
	<div style="position:relative; height:75px; margin-left:1px; margin-right:1px; background-image:url('images/angyna-plat_16.bmp');">dhfhdf</div>
	<div style="position:relative; margin-left:1px; margin-right:1px;">
		<div style="position:relative; float:right; width:250px;">
			<div style="position:relative; height:150px; background-color:#115580;">efes</div>
		</div>
		<div style="position:relative; margin-right:250px; background-color:#86A9BF;">
			<div style="position:relative; height:60px; background-color:#86A9BF;">efes</div>
		</div>
	</div>
	<div style="position:relative; height:20px; margin-left:1px; margin-right:1px; clear:both;">&nbsp;</div>

</div>
<div style="position:relative; height:19px; background-image:url('images/angyna-plat_30.jpg'); z-index:1;">&nbsp;</div>
<div style="position:relative; height:300px; background-color:#737373; background-image:url('images/angyna-plat_37.jpg'); background-repeat:repeat-x;">&nbsp;</div>

</body>

</html>


Voila, si vous pouvez m'indiquer comment résoudre ces deux bugs sous IE.

Merci.
oui c'est clair que pour ca les div sont bien moins souples et abordables que la balise <table>, personnellement, j'ai fait un petit essais, mais ma colonne de gauche ne suit pas celle de droite quand on allonge le contenu....

Page xhtml
Feuille Css
nicolas g a écrit :
oui c'est clair que pour ca les div sont bien moins souples et abordables que la balise <table>, personnellement, j'ai fait un petit essais, mais ma colonne de gauche ne suit pas celle de droite quand on allonge le contenu....

Tu veux dire que ton bloc de gauche ne s'allonge pas pour prendre la même auteur que le bloc de droite avec lequel il n'est lié en aucune manière si ce n'est dans l'idée que tu as de ta mise en page ?

Je suis pas sûr d'y voir un problème technique. Smiley lol 
<html>
<style>
</style>
<head></head>

C'est un code simplifié ?
Parce que non seulement tu ne travailles pas avec un doctype (ce qui s'appelle chercher les emmerdes de compatibilité), mais en plus tu as un style (sans indication de type MIME) comme enfant de HTML, et un head vide.

<div>&nbsp;</div>

À virer, non ?

Au fait, je vois que tu fais passer tous tes styles par l'attribut style. Tu ne veux pas utiliseer de feuille de style ?
Modifié par mpop (04 Jun 2006 - 14:47)
Bonjour,

Ceci est une page test. Pense tu que le fait de ne pas avoir de doctype, il y est mes problèmes ? Pour les styles, ils yront dans une feuille de style ensuite. La balise div avec un espace a été supprimée.

Peut tu m'aider à régler les deux bugs sous IE ?

Merci
mpop a écrit :

Tu veux dire que ton bloc de gauche ne s'allonge pas pour prendre la même auteur que le bloc de droite avec lequel il n'est lié en aucune manière si ce n'est dans l'idée que tu as de ta mise en page ?

Je suis pas sûr d'y voir un problème technique. Smiley lol


tout a fait vi... je n'ai pas trouvé comment faire ce lien entre mes deux blocs.... Smiley decu
tatin a écrit :
Ceci est une page test. Pense tu que le fait de ne pas avoir de doctype, il y est mes problèmes ? Pour les styles, ils yront dans une feuille de style ensuite. La balise div avec un espace a été supprimée.

Peut tu m'aider à régler les deux bugs sous IE ?

Pour régler le problème avec IE, commence déjà par faire une page valide, qui indiquera aux différents navigateurs quelle norme utiliser. Même si c'est pour une page de test, mieux vaut ne pas fausser le texte en n'oubliant pas de mettre les éléments les plus importants.

N'oublies donc pas :
– une déclaration de type de document valide qui indique aux navigateurs d'utiliser le mode de rendu standard (du XHTML 1.0 Transitional ou Strict, par exemple) ;
– de mettre ton
<style type="text/css"></style>

à l'intérieur de l'élément head.
nicolas g a écrit :
je n'ai pas trouvé comment faire ce lien entre mes deux blocs.... Smiley decu

Deux solutions :
– soit ce sont deux blocs qui, dans leur définition, sont liés… je ne connais que les cellules de tableau qui répondent à cette contrainte, sauf si j'oublie quelque chose ;
– soit tu utilises deux blocs neutres (par exemple des divs), et tu indiques via ta feuille de style CSS qu'ils doivent être liés « à la manière de cellules de tableaux », grâce aux propriétés display: table; et display: table-cell;.

Le souci étant que la deuxième solution n'est pas utilisable en production, car Internet Explorer ne la comprend pas (et quelques uns des autres navigateurs non plus, il me semble… je suis plus très sûr). À moins de vouloir faire de la graceful degradation (dégradation gracieuse) de ta mise en page.
finalement, j ai trouvé une solution batarde en mettant un conteneur de même couleur que ma cellule de gauche.... l inconvéniant, c est quand la cellule de gauche est plus grande que celle de droite, mais comme ca ne sera pas le cas sur ce site ca passera ici. Smiley ohwell
Pages :
Sujet clos
Aller à