elfaus Posté 9 Décembre 2012 Posté 9 Décembre 2012 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 Posté 9 Décembre 2012 Posté 9 Décembre 2012 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
Solution captain_torche Posté 9 Décembre 2012 Solution Posté 9 Décembre 2012 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 Posté 9 Décembre 2012 Posté 9 Décembre 2012 Très juste ... En revanche ça ne sera pas compatible sur IE < 8
elfaus Posté 9 Décembre 2012 Auteur Posté 9 Décembre 2012 (modifié) 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 Posté 9 Décembre 2012 Posté 9 Décembre 2012 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 Posté 9 Décembre 2012 Auteur Posté 9 Décembre 2012 non je parlé de l'effet de transition quand on passe le curseur sur une image
beladom Posté 9 Décembre 2012 Posté 9 Décembre 2012 Afficher du contenu sur le hover c'est pas très "mobile friendly" comme on dit !
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant