Images au hasard faisant un saut à l'élastique lors du redimensionnement de la fenêtre du navigateur

Question

Le problème le plus mystérieux que j'ai rencontré jusqu'ici. Visitez le site que je suis en train de concevoir: http://ftfranes.com/mliad2/

Ensuite, il suffit de redimensionner la fenêtre de votre navigateur une fois la page chargée. Vous remarquerez que les images sautent instantanément plus bas sur la page. Je mentirais si je vous disais que je n'ai aucune idée de ce que cela cause, donc je me tourne vers quelqu'un ici qui pourrait être simplement plus intelligent que moi.

Answer 1

Il y a semble y avoir deux conteneurs problématiques, comme je le vois, en ce qui concerne vos conteneurs flottaient. Les deux .sidebar-right-twitter et .projects prennent pleine largeur, donc .projects (contenant vos vignettes) est poussé en dessous de .sidebar-right-twitter quand ils devraient être côte à côte.

.side-bar-right { 
    float: right; 
    margin-left: 705px; /* Reduce a lot or omit entirely? */ 
    : 
} 

.projects { 
    float: left; 
    width: 940px; /* Reduce to nearer 700px */ 
    : 
} 

Apporter ces modifications au CSS semble résoudre le problème dans Chrome. (Je, cependant, besoin de redimensionner à nouveau la fenêtre afin de le rendre « revenir en arrière ».)

EDIT

Le 2e numéro du petit saut ... (Le H2 semble avoir été un hareng rouge/hasard.)

Lorsque vous redimensionnez la fenêtre certains scripts applique top:368px-#grid_clone. Et cela semble pousser un peu trop loin le conteneur de miniatures. Un vrai hack est d'appliquer margin-top:-28px; sur cet élément dans le CSS pour contrer ce saut supplémentaire.

Je suppose que vous devrez appliquer margin-top:-28px; aux deux éléments sinon ils ne seront pas alignés.

Suite dans les commentaires ...

Answer 2

ul avec id grid_clone est en haut: 845px lorsque nous redimensionnons, car il est positionné absolument il va en bas laissant 845px en haut. Est-ce un plugin que vous utilisez?

Answer 3

En fait, il s'agit d'un problème css. #image-grid flotte à gauche ainsi que .sidebar_right_twitter. Mais un élément doit avoir suffisamment d'espace pour flotter. Sinon, il passera à la rangée suivante. Donc, en redimensionnant la fenêtre, le div n'a plus assez d'espace et va à la rangée suivante.

Donc, si vous voulez des éléments flottants à côté de l'autre, vous aurez besoin d'un conteneur:

<div id="myContainer"> 
    <div class="floatLeft"> 
    </div> 
    <div class="floatRight"> 
    </div> 
</div> 

Assurez-vous de donner les divs flottant une largeur qui ne dépasse pas l'Shoul espace donné.

Answer 4

Réorganiser votre structure de contenu, vous devez mettre votre <ul> au-dessus de la div pour la barre latérale droite. Ils sont tous les deux configurés pour flotter à gauche, donc vous voulez que l'élément sur la gauche soit en premier.

Modifier *

Votre grille est affichée dans une liste non ordonnée -. <ul> qui est créé après la balise <div> que la barre latérale est contenue dans Je crois qu'une combinaison de suppression du code de positionnement mentionné et flotteurs inappropriés fixeront ton problème. Il est probable que le <ul> n'a même pas besoin d'un flottant, basé sur le positionnement qui lui est assigné par vos scripts.

Jouez avec Firebug, vous pouvez être résistant au début, mais il est un must pour tous ceux qui travaillent avec HTML et CSS