Aller au contenu

La section folle


Aller à la solution Solutionné par captain_torche,

Sujets conseillés

Posté

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 ?


Posté

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 wink.gif



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
Posté

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.


Posté (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 wink.gif

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é par elfaus
Posté

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 wink.gif



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).


Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...