28221 sujets

CSS et mise en forme, CSS3

[Résolu] Forcer des tableaux à rester dans leur container...

Pages :
Hello,

Le mieux c'est que je vous montre mon problème : en gris j'ai un <div> quelconque que j'utilise un peu comme un conteneur et qui doit inclure les 2 tableaux noirs :

upload/455-img1.jpg

Mais dès que je rajoute un "float: left" au tableau de gauche, et un "float: right" au tableau de droite, j'obtiens ça :

upload/455-img2.jpg

Le pire c'est qu'avec IE6 le <div> gris recouvre en plus les tableaux Smiley sweatdrop

Des idées pour m'en sortir ?
Modifié par mijack (27 Feb 2005 - 09:59)
le fait de mettre tes boites en FLOAT, fait qu'ils sortent du flux normal. Essaye de rajouter un truc après tes 2 tableaux :
clear: both;

pour se replacer en flux normal après.
Modifié par anthony (26 Feb 2005 - 10:59)
Merci, ça fonctionne effectivement... sous Firefox. Avec IE6, les tableaux se retrouvent cachés derrière la <div> container..

J'ai essayé de mettre un "z-index: 2" au container et d'inclure le tableau dans un div : 
<div style="float:left; z-index: 1;">


Mais le tableau est toujours caché. Mon exemple n'est pas en ligne, mais je peux mettre le code si besoin est...
normalement dans ton cas, il n'y a pas eu à utiliser le z-index... pose nous ton code ( met ton code entre [code ] et [/code ] ( sans l'espace ) ).

Errata: ou bien comme viens de le dire Raph, lis la FAQ pour apprendre le positionnement par FLOAT.
Modifié par anthony (26 Feb 2005 - 11:21)
J'ai bien lu la FAQ, et j'ai opté pour l'utilisation d'un <hr> comme le propose Raphael dans un des posts Smiley smile
Mais... ça ne résoud toujours pas mon problème avec mon tableau: il est toujours caché derrière le <div> Smiley eek

Donc, voici un peu de codes Smiley lol Je précise que le <div> conteneur fait partie d'un système d'onglets dont le script provient du Net.

Donc le CSS du conteneur :

.dynamic-tab-pane-control .tab-page {
	clear:			both;
	z-index:		2;
	position:		relative;
	filter:			progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
					progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
}


Puis dans le HTML je pose simplement mon tableau :

<table border="0" class="textNormal" style="float:left">
...
</table>
<hr>


Et mon tableau se retrouve caché sous IE6.
Modifié par mijack (26 Feb 2005 - 11:44)
anthony a écrit :
comment tu as sémantiqué ta page HTML


Excusez-moi, je débute. Mais c'est quoi, sémantiquer une page HTML ?
Je complète Smiley confused

Le système d'onglets comprend un tab-pane (qui est le conteneur général du menu d'onglets), qui lui comprend une tab-page (qui est la page affichée sous les onglets... Le tableau se trouve dans cette tab-page.

Donc en gros, voilà le résultat :

			<div class="tab-pane" id="tab-pane-1">
			   <div class="tab-page" id="tab-page-1">
			<table border="0" class="textNormal" style="float:left">
(...)
</table>
<hr>


Le CSS complet des tabs se trouve là : http://www.fcsion4ever.com/v3.1/css/tab.css

C'est plus clair ? Smiley rolleyes
Salut,

--> mijack : Euh..sans vouloir briser la confidentialité de ton code html, tu pourrais pas nous faire une extraction un peu plus exploitable ?

--> anthony : mdr le "sémantiqué"

--> Laurent Denis : mdr Smiley cligne

Smiley lol
anthony a écrit :
hum ouais, j'ai bien regardé ton CSS mais je ne vois nul part le sélecteur HR dedans... Smiley rolleyes


C'est une remarque pertinente Smiley lol J'ai bien écrit que c'était le css relatif aux tabs (il était livré avec le script des onglets).

Sinon j'utilise d'autres CSS :
http://www.fcsion4ever.com/v3.1/css/body.css où tu trouveras le <hr>
http://www.fcsion4ever.com/v3.1/css/div.css pour tout ce qui concerne les <div>, et
http://www.fcsion4ever.com/v3.1/css/styles.css pour tous les styles concernant les textes et tableaux.

Mais seul celui sur les tabs devrait être utile.

Toutefois, j'ai uploadé mon fichier à problème pour t'aider :
http://www.fcsion4ever.com/v3.1/match.php : l'onglet à problème est le 2e (après-match), lorsque tu cliques sur "Rapport du match". Tu peux voir 2 tableaux (stade et arbitre) qui apparaissent avec FireFox mais sont cachés sur IE6)

J'espère que ça va t'aider, j'ai essayé plusieurs manips, mais rien à faire.
mijack> je ne sais pas ce que tu as bu ce matin, mais ta page s'affiche correctement sous IE6... Smiley biggrin
anthony a écrit :
mijack> je ne sais pas ce que tu as bu ce matin, mais ta page s'affiche correctement sous IE6... Smiley biggrin


Pourtant j'ai pris que la moitié d'une bouteille de vodka ce matin avec mes céréals Smiley confus

Non, plus sérieusement voici ce que j'ai :

Image Firefox :
upload/455-firefox.jpg

Image IE6 :
upload/455-ie6.jpg
Errata: Fallait cliquer sur Rapport du match.

Hum, le FLOAT passe à la ligne quand la somme de la taille des tableaux dépasse la taille du bloc DIV.
Modifié par anthony (26 Feb 2005 - 13:01)
anthony a écrit :
Errata: Fallait cliquer sur Rapport du match.

Hum, le FLOAT passe à la ligne quand la somme de la taille des tableaux dépasse la taille du bloc DIV.


mais encore ... ? Smiley confuse
Re,

Une petite piste possible en attendant mieux : j'ai repris en local l'html de la page et les différents css pour tester plus facilement, et tout fonctionne bien sans rien toucher...jusqu'à ce que je pointe vers tes javascripts (que je n'avais pas repérés tout de suite) et là effectivement y'a problème.

Je te tiens au courant. Smiley cligne
[mode hors sujet]
Il y a quelque chose de fabuleux dans ce post, c'est l'intervention de Raphael et de Laurent Denis qui sont passées totalement inapercues !
[/mode hors sujet]
Et bien relis un peu mieux : Raphael écrit "FAQ", et mon message suivant commence par "J'ai bien lu la FAQ", alors excuse-moi... Smiley fache
Pages :
Sujet clos
Aller à