Interface CSS3 / IE 9

[Wells]

C'est vrai mais je t'aurais privé du plaisir de le faire, et je me sentais pas de t'infliger ça ^^

Bon je vais étudier ça de prêt pour voir si il ne se cacherais pas des failles.

Merci à toi, je savais que je pouvais compter sur vous les gars !


Sinon HS total, tu joue à STO?

[Roworll]

C'est vrai mais je t'aurais privé du plaisir de le faire, et je me sentais pas de t'infliger ça ^^
...
Sinon HS total, tu joue à STO?

Vilain petit profiteur :p

Sinon, oui, je joue à STO et quelques autres MMOs selon les envies et le temps
- STO (lifer, principalement orienté Fed)
- CO (lifer, trop de persos pour en faire la liste)
- Lotro (lifer, une bonne conf en prime)
et plus récemment SWtOR.

[Wells]

Je viens d'analyser la ligne du haut. L'astuce que tu utilise est sympa, cependant même si graphiquement parfaite, elle pose un soucis de structuration.

Puisque nous sommes dans l’étude de cas (je ne me sert pas de ce design, c'est juste un test pour voir jusqu’où on peut pousser CSS3 à la base ^^), autant le faire complémentent, ça pourra sans doute intéresser d'autres personnes ici.

Imaginons (dans la ligne du haut) que je veuille écrire un texte comme ceci :


  testcss3a.png (Taille : 3,61 Ko / Téléchargements : 12)

Le soucis c'est que si on veut aligner notre texte sur la gauche, on ne pourra pas le faire car cette "limite" de gauche n'est que graphique et n'a pas de consistance.

[Viciousity]

Il y a moyen de faire cela beaucoup plus sémantiquement parlant

<section role='left-nav'>

  <a href="#">Menu Gauche</a>

  <a href="#">Menu Gauche 1</a>

  <a href="#">Menu Gauche 1</a>

</section>

<section role='top-nav'>

  <a href="#">Menu top</a>

  <a href="#">Menu top 1</a>

  <a href="#">Menu top 1</a>

</section>

<section role='content'>

  Contenu ici.

</section>

Je vous poste ce soir

[Roworll]

Si si, elle est consistante.
Elle ne fait que suivre la série de "boutons"

[Edit]

J'avais prévenu que j'avais fait ça à l'arrache.
Il y a largement moyen de faire un truc bien plus propre.

[Ter Rowan]

Puisque nous sommes dans l’étude de cas (je ne me sert pas de ce design, c'est juste un test pour voir jusqu’où on peut pousser CSS3 à la base ^^), autant le faire complémentent, ça pourra sans doute intéresser d'autres personnes ici.

je confirme

Désolé de ne pas participer, on est deux niveaux au dessus du mien mais c'est fort intéressant

[Wells]

Si si, elle est consistante.
Elle ne fait que suivre la série de "boutons"

[Edit]

J'avais prévenu que j'avais fait ça à l'arrache.
Il y a largement moyen de faire un truc bien plus propre.

Oui j'y ai penser après coup il est vrai. Je prépare de mon coté la version "colorisé".

Si je vois d'autres cas spéciaux, je les proposerais ici

---

Bon je suis pas allez bien loin.

Je ne comprend pas pourquoi sur le rollover des boutons, ceux ci diminue légèrement (1 ou 2px) en hauteur.

Si je ne force pas la hauteur à 19px dans le css, ça fait un effet yoyo désagréable.

j'en ai profiter pour rendre le tout compatible FF3 et iE7,8. Malheureusement tt n'est pas faisable, j'ai donc placé un bandeau pour ces navigateurs histoire de prévenir les users.

EDIT: meme adresse que avant : http://wells83.free.fr/HTML5/CSS3/test.html

[Argorate]

pour le hover j'ai trouvé

tu as un padding top de 4, et sur la classe hover, tu as seulement mis 3.
J'ai vérifié en prenant des screen pour comparer, y a bien 1px de décalage a cause du padding

[Wells]

mouais c'est bizarre, doit être une histoire de priorité dans les css.

[Wells]

Attention, question con en vue. Avant de me prendre la tete 100 sur la faisabilite meme du bousin, je demande aux experts ici réunits.

J'ai cette structure:

<div style="width:30%; height:100px;">

  <div style="width:100%; height:100%;">

    mon texte la

  </div>

</div>

J'aimerais positionner un div en absolute de 100% de hauteur, width 10px, le tout colle a droite de mon bloc englobant.

Est ce possible?