2009-12-07 9 views
0

Je rencontre un comportement étrange avec un projet, je travaille sur:Divs Maj Lorsque le contenu est trop grand

http://daft.net76.net/yah/

Lorsque vous cliquez sur les règles lien les changements entiers de mise en page à gauche par un pixel ou trois. J'ai attribué cela à la quantité de contenu dans ce div, parce que lorsque vous cliquez sur le lien « scores », qui a une hauteur inférieure contenu.

La structure div inférieure se présente comme suit:

<div id="lowercontent"> 
    <div id="rulesDiv" > 
     <h1>Rules</h1> 
     <p>Clicking the roll button rolls the dice. You have 3 rolls per turn. 
     After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn. 
     Submit a combination of dice by clicking an option and clicking Score Roll. 
     To claim yahtzee either click the zee button, or score roll without anything selected. 
     To claim yahtzee either click the zee button, or score roll without anything selected. 
     To claim yahtzee either click the zee button, or score roll without anything selected. 
     To claim yahtzee either click the zee button, or score roll without anything selected.</p> 
    </div> 
    <div id="scoresDiv"> 
     <h1>Scores</h1> 
     <p>1</p> 
    </div> 
    <p id="closeTest"><span id="close">close</span></p> 
</div> 

J'utilise des fonctions jquery pour basculer entre les scores et les règles. Le sous-contenu est une div. Les règles internes et les partitions divs n'ont pas de largeur.

Des idées? Faites-moi savoir si css plus détaillé sur les divs est nécessaire.

Répondre

1

Lorsque le div Rules est affiché, la barre de défilement apparaît. Tout d'abord, ce n'est vraiment pas une grosse affaire .. Je voudrais juste laisser seul.

Si elle vraiment vous dérange, ajoutez à votre CSS:

html { height: 100% } 
body { height: 101% } 

Cela forcera une barre de défilement pour être toujours présent de sorte que la mise en page ne se déplace pas.

+0

Ahhh c'est si simple! Je vous remercie! – febs

+0

c'est merveilleux! – ysth

0

Mes réponses originales sont ci-dessous mais la vérité est, il n'y a qu'une seule bonne réponse à cela si vous sentez que vous avez besoin de faire n'importe quoi: modal windows.

Une fenêtre modale est celle qui apparaît au premier plan et doit être avant de pouvoir actionnées continuer à faire ce que vous faisiez. Vous en avez déjà utilisé un même si vous ne connaissiez pas le nom. Un exemple est un dialogue de fichier ouvert dans une application. Vous devez choisir un fichier ou annuler pour continuer.

Sur le web, vous pouvez reproduire cette fonctionnalité assez facilement. Cela implique de "superposer" le contenu pour empêcher l'utilisateur de le toucher et la boîte modale au-dessus de la superposition. La plupart des exemples Web ombrent la superposition pour permettre à l'utilisateur de savoir ce qui a le focus.

Cela corrige votre problème, car il arrête le contenu se allongent en mettant le nouveau contenu sur l'ancien contenu et donc la barre de défilement n'a pas besoin de montrer. Heureusement pour vous, il existe des solutions préfabriquées (voir la dernière ligne de ce document), mais je pense que celle qui fonctionnera le mieux pour vous est Facebox. C'est léger et sexy et fait le travail de montrer juste quelques informations. il ne semble pas que vous ayez besoin de vous embourber dans d'autres actions.


Ici, au moins, c'est parce que la barre de défilement de la fenêtre apparaît.

Il y a quelques façons de corriger cela, mais tous sont assez hacky ou imparfait:

  1. Utilisez un design aligné à gauche.

  2. En charge, si la hauteur est supérieure à la hauteur calculée du contenu (pas de barre de défilement) forcer le contenu à créer une barre de défilement. Comparez les largeurs. Déduisez la moitié de votre marge gauche sur votre contenu. Yuck!

  3. Centrer manuellement le contenu à l'aide des crochets onload et onresize pour modifier la marge du contenu. Probablement le plus propre et vous pouvez le laisser sur margin:auto juste au cas où. Cela ne fonctionnera pas pour IE6 mais je suppose que c'est prévu.

  4. Vous pouvez mettre le contenu en onglets que l'utilisateur doit passer entre.

  5. Utilisez des couches modales contextuelles au lieu de joindre le contenu au bas de la page. Je pense quelque chose comme LightBox mais avec du contenu au lieu d'images. Je pense qu'il y a probablement un script qui fait ça avec du contenu.

Edit: See this pour plus de conseils sur les fenêtres modales.

Questions connexes