La section folle

[elfaus]

Hello les webmasteriens et webmasterienne !

Aujourd'hui, je vous faire pars d'un problème de design mais aussi et surtout de code...

J'utilise les nouvelles balises HTML5 pour mon site (section, article, nav and co) et en voulant refaire une page aujourd'hui, je me suis heurté à un problème à n'y rien comprendre :

Le dernier article (Nécromancien) accessible via ce lien http://93.1.39.42/test/fr/cards-monster-mosaic.html#necro est en dehors de la section contrairement aux autres o0

Aucune différence de code ou de css, tous les autres articles sont traités de la même façon et c'est le seul qui déconne...

Même sous firefox (vue kikoo 3D), l'article nécro est complètement à l'ouest et pourtant, il est sur la même couche que ses semblables

Y-a-t-il une limite de dimension attribuée aux sections ??

Comment faire pour régler ceci sans passer par un height définie en hard ?

[beladom]

Salut,

La dernière liste de ta balise article fait flotter tous ses éléments, tu dois donc faire un clear de tes float avant la fermeture de ta balise article (sinon ces derniers sortent de leur conteneur parent).

Le plus commode pour pallier à ce genre de problèmes est d'utiliser une classe générique que tu appelles dès que tu en as besoin. Par exemple, ajoute le flux suivant à la suite de ta dernière liste :

<div class="clear"></div>

Puis dans ta feuille de style tu ajoutes :

.clear {

  clear:both;

}

ça fonctionnera

Tu as également d'autres solutions plus pointues que je te recommande (clearfix ou overflow:hidden), voici un excellent article d'Alsa qui résume bien les différents avantages/inconvénients :

http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

[captain_torche]

Et, plutôt que mettre les éléments en float, la propriété display: inline-block leur permet d'avoir une largeur fixe et de laisser des éléments à leur droite sans créer de soucis de flux.

[beladom]

Très juste ... En revanche ça ne sera pas compatible sur IE < 8

[Aenoa]

l'HTML 5 non plus

[elfaus]

Salut,

La dernière liste de ta balise article fait flotter tous ses éléments, tu dois donc faire un clear de tes float avant la fermeture de ta balise article (sinon ces derniers sortent de leur conteneur parent).

Le plus commode pour pallier à ce genre de problèmes est d'utiliser une classe générique que tu appelles dès que tu en as besoin. Par exemple, ajoute le flux suivant à la suite de ta dernière liste :

<div class="clear"></div>

Puis dans ta feuille de style tu ajoutes :

.clear {

clear:both;

}

ça fonctionnera

Tu as également d'autres solutions plus pointues que je te recommande (clearfix ou overflow:hidden), voici un excellent article d'Alsa qui résume bien les différents avantages/inconvénients :

http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

Pour seulement la dernière liste ? Elles ont toutes le même style et la même structure Oo

Bon, ceci dit on va pas se pleindre, le display: inline-block est suffisant, j'en ai profité pour faire sauter les float et clear à gogo

Autre question tant qu'on y est, l'animation est lente sur GSM (de l'ordre de 10 à 20 secondes), une idée de la cause et de la façon dont améliorer ça ?

Modifié 9 Décembre 2012 par elfaus

[beladom]

Oui après chaque précédentes listes il y'avait une div avec un clear:both qui suivait ... Sauf, sur la dernière, d'où le problème de float

Qu'est-ce que tu entends par animation ? Le chargement de ta page ? Si tel est le cas, tu as effectivement de gros soucis de perf, lié notamment au nombre très important d'images et à leur manque d’optimisation ... Tu dois pouvoir réduire la plupart d'entre elles (elle font systématiquement + de 10ko) et également réduire le poids de ton image de background (presque 400 ko).

[elfaus]

non je parlé de l'effet de transition quand on passe le curseur sur une image

[beladom]

Afficher du contenu sur le hover c'est pas très "mobile friendly" comme on dit !