[A demi Résolu] Vive Florent V, CSS + effet slide = 1 souci

Bonjour à tous,

Je rencontre un léger souci, le mieux est de vous le montrer en image :

http://www.xebios.org/css/demo.htm

Le but est en fait d'avoir dans ma section Test1 juste la partie 1 et dans ma section Test2, la partie 2.

En modifiant à 100% mon

.section {
	width: 800px;
	float: left;
	}

Mes parties sont l'une sous l'autre

Merci pour votre aide.
Modifié par Mandrax (21 Jun 2007 - 20:42)

Bonjour,

Le conteneur des deux blocs en width: 200%, puis les deux blocs en width: 50%.

Par contre, deux blocs de 50% sur une même largeur ça risque de poser des problèmes à certains navigateurs (problèmes d'arrondi lors du calcul des largeurs réelles en pixels). Mais bon, on peut déjà commencer par ça.

C'est super Merci [Résolu]

J'en déduis que pour 5 onglets, je passe à 500% et 20%

Encore merci !

Avec une petite nuance cependant : les problèmes d'arrondi des largeurs en pixels dans certains navigateurs, notamment Internet Explorer.

Par exemple, avec 5 blocs en largeur 20%, il se pourrait qu'un ou deux de ces blocs ait un pixel de trop au final, et donc que le dernier bloc passe à la ligne.

la solution pour éviter ce genre de chose consiste généralement à ne pas avoir X flottants tenant pile poil dans la largeur, mais plutôt X-1 flottants et un dernier bloc non flottant, venant se loger dans l'espace restant grâce à, au choix :
- une marge à gauche (de largeur 100%/X*(X-1), soit une marge de 80% si X=5) ;
- peut-être plus simple, un contexte de formatage grâce à un overflow: hidden ou overflow: auto.

Ces deux notions sont abordées dans l'article suivant :
Un design fluide avec trois «colonnes», grâce au positionnement flottant

Bonjour et bienvenue,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Par contre sur une résolution écran à partir de 1024px de large, on voit une partie de ta div test2-pane… Cela me parait plus judicieux pour ce systeme là de fixé le conteneur dans sa largeur… C'est pour ça je pense, que cela marche si bien sur http://www.panic.com/coda/

Parcontre je viens de déceller un nouveau souci, je m'explique :

j'ai 5 catégories à afficher grâce à 5 onglets, donc je met mon conteneur global à 500% et mon div de sections à 20% pour que ca se calle niquel chrome.

Jusque la tout va bien.

Mais un problème intervient lorsque je redimensionne la fenêtre du navigateur, le contenu du div se décalle (vers la gauche ou la droite) pour faire apparaitre le(s) div des catégories d'à coté

Biensur ce problème n'intervient pas lorsque je suis sur la 1ere catégorie (le 1er div)

Que faire ? du javascript peut etre ? mais dans ce cas je suis perdu.

Merci d'avance pour vos avis.
Modifié par Mandrax (17 Jun 2007 - 21:29)

Mandrax a écrit :
Mais un problème intervient lorsque je redimensionne la fenêtre du navigateur, le contenu du div se décalle (vers la gauche ou la droite) pour faire apparaitre le(s) div des catégories d'à coté

Un exemple en ligne ?

Bonjour,

J'ai mis à jour la page : http://www.xebios.org/css/demo.htm

Voici la marche à suivre, réduire la fenêtre du navigateur puis cliquez sur Test1 (un petit bug), puis cliquez sur Test2 et réagrandissez la fenetre du navigateur.

Si tout va bien (tout va mal en fait) vous verrez la partie de Test1 .

Bonne soirée,

Merci

Avec quel(s) navigateur(s) est-ce que ça pose problème ? Je n'ai rien constaté de problématique avec Firefox 2.

Sous firefox 2.0 on peut constater le bug.

Il faut avoir la fenetre en plein écran, passer sur la section Test2 et réduire la fenetre pour se rendre compte que le texte n'occupe plus toute la largeur du div ou que la partie de Test1 apparait.

Ah oui tiens.

Comme le simple fait de cliquer sur un onglet corrige le problème, je n'avais pas vraiment fait attention. De plus, on passer rarement son temps à redimensionner la fenêtre du navigateur.

Je ne vois pas trop quelle solution proposer, par contre.

Du javascript ?

Mandrax a écrit :
Du javascript ?

Sans doute. Mais pour le coup, ça n'est plus mon domaine.