Positionnement de listes & Décalages

Salut à tous,

Je travaille actuellement sur une maquette de portfolio et je bloque sur certains points.

Lors de l'affichage en mode "Vignettes" (3 colonnes), je ne parviens pas à positionner l'ouverture du projet entre les vignettes sans que certaines passent en dessous du projet en question ... [i]Exemple parlant en cliquant sur "Projet1" et "Projet2".[/b]

J'ai réalisé une autre variante basée sur CSS3 mais ce n'est pas plus concluant pour le moment.

Dans les 2 cas, j'ai le problème de positionnement des vignettes ou du projet.

Quelqu'un peut-il m'aider ?

Merci !
Modifié par yank (25 Jul 2012 - 12:31)

Je simplifie ma question ...

Voici mon nouveau lien : http://bit.ly/O5ZIDu

Comment faire pour que l'ouverture du projet en mode "affichage vignettes" (3 colonnes), ne décale pas les miniatures suivantes ?

J'aimerais "juste" que les vignettes restent côte à côte, 3 par 3, avec l'ouverture du projet sous la ligne correspondante.

Quelqu'un aurait-il une idée lumineuse ?

Merci

Hello.

Tente un

html {overflow-y: scroll}

Attention aux effets de bord potentiels.

Florian_R a écrit :
Hello.

Tente un

html {overflow-y: scroll}

Attention aux effets de bord potentiels.

Merci pour ton aide, mais je ne pas certain que cela soit en rapport avec ma question ...

Je parle bien du décalage des miniatures lors de l'ouverture d'un projet en cliquant sur une des vignettes.

Par exemple en cliquant sur la miniature 1, le projet s'ouvre bien sous la première vignette, mais les 2 vignettes suivantes passent à la ligne sous le projet ouvert.

Merci

Arf, j'avais mal lu.

Le souci est que tu places tes projets sous la vignettes dans le HTML.

J'aurais tendance à faire :

<ul class="nav nav-thumbs">
	<li><a href="#projet1"><img src="" alt="altkivabien"></a></li>
	<li><a href="#projet2"><img src="" alt="altkivabien"></a></li>
	<li><a href="#projet3"><img src="" alt="altkivabien"></a></li>
</ul>

<div id="projet1">Bla bla projet</div>
<div id="projet2">Bla bla projet</div>
<div id="projet3">Bla bla projet</div>

<ul class="thumbs">
	<li><a href="#projet4"><img src="" alt="altkivabien"></a></li>
	<li><a href="#projet5"><img src="" alt="altkivabien"></a></li>
	<li><a href="#projet6"><img src="" alt="altkivabien"></a></li>
</ul>

<div id="projet4">Bla bla projet</div>
<div id="projet5">Bla bla projet</div>
<div id="projet6">Bla bla projet</div>

Avec un jquery ciblant les ".nav-thumbs a" et ajoutant une classe .active au projet ayant son href en id.
Modifié par Florian_R (25 Jul 2012 - 12:45)

Florian_R a écrit :
Le souci est que tu places tes projets sous la vignettes dans le HTML.

Je suis d'accord avec toi, et c'est bien le problème, mais si je ne les place pas sous les vignettes dans le HTML, en affichage "normal" (2 colonnes), les projets ne s'ouvriront plus sous les vignettes correspondantes mais toutes les 3 vignettes.

Me trompe-je ? ...

C'est là que je bloque ... une solution en JavaScript fonctionnerait sans doute, mais je ne vois pas comment faire.

Je n'y avais pas pensé.

Pour concilier les deux cas, je pense que tu vas devoir te tourner vers une structure HTML dans laquelle ton div#projet (en reprenant la structure de mon précédent post) est enfant du li.

Sinon, réorganiser le DOM via JS.

Florian_R a écrit :
Pour concilier les deux cas, je pense que tu vas devoir te tourner vers une structure HTML dans laquelle ton div#projet (en reprenant la structure de mon précédent post) est enfant du li.

Dans le même esprit, j'ai tenté une autre version uniquement basé sur CSS3 (ou la div est enfant du li) les vignettes ne se décalent plus mais le projet s'ouvre sous les vignettes, comme si la div n'était pas dans le flux ...

Une idée ?

Exemple CSS3

Merci !

Honnêtement, je ne vois que deux solutions pour faire ça simplement :

- Réarranger le DOM en JS quand tu change de mode.
- Utiliser du positionnement absolu, mais ça amène une contrainte sur la taille de ton .projet.

Tiens nous au courant, je trouve l'idée intéressante.

EDIT : une solution potentielle : sur ton sélecteur ul.thumb_view li, tu retires le height.
Tu ajoute une classe .col1, .col2, et .col3 sur tes li. Sur col1, un clear: left, col 2 et col3 une marge négative.

Ça fait très bricolage, mais ça a l'air de marcher de ce que j'ai essayé.

EDIT 2 : J'en ai fait un dabblet, c'est pas si crade en fait.
Modifié par Florian_R (25 Jul 2012 - 16:06)

Florian_R a écrit :

EDIT 2 : J'en ai fait un dabblet, c'est pas si crade en fait.

Salut,

Je viens seulement de voir ton EDIT ... par contre est-ce normal que rien ne s'affiche hormis le Header (Top Bar Fixe) sur Dabblet ? Certainement la faute du proxy ...

Dabblet déconne sous IE. Tu utilises quel navigateur? Je te repostes la page de résutat au cas où qui elle devrait passer partout.