画像はランダムにブラウザウィンドウのサイズ変更時にバンジージャンプを行います

Question

私が今までに遭遇した最も神秘的な問題です。現在設計中のサイトにアクセスしてください：http://ftfranes.com/mliad2/

次に、ページが読み込まれたらブラウザウィンドウのサイズを変更してください。あなたは、画像がすぐにページのさらに下にジャンプすることに気付くでしょう。それが原因で何が起こっているのかわからないと私はあなたに言ったならば、私はうそをつくでしょう。

Answer 1

が2つの問題のコンテナであるように思わCSSで作業する人のために持っている必要があります。 .sidebar-right-twitterと.projectsの両方が全幅を占めるため、.projects（サムネイルを含む）は横並びにするときは.sidebar-right-twitter以下にプッシュされます。

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

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

これらの変更を行うと、Chromeでこの問題が解決されるようです。 （私は、しかし、それはバックジャンプ」にするために、もう一度ウィンドウのサイズを変更する必要がありました。）

EDIT

小さなジャンプの第二の問題は...（H2が持っているように見えます赤いニシン/偶然となって。）

あなたには、いくつかのスクリプトが#grid_cloneにtop:368pxを適用しているウィンドウのサイズを変更する場合。そして、サムネイルのコンテナを少し押しすぎているように見えます。実際のハックは、CSSのこの要素にmargin-top:-28px;を適用して、この余分なジャンプを打ち消すことです。

margin-top:-28px;を両方の要素に適用する必要があると思われます。そうしないと、整列しません。

続きのコメント...

Answer 2

idul grid_cloneを持つulは、845pxのサイズになっています。これは、絶対に配置されているため、上に845pxを残しているためです。それはあなたが使用しているプラ​​グインですか？

Answer 3

実際これはCSSの問題です。 #image-gridは左に浮動し、.sidebar_right_twitterとなります。しかし、要素には浮動小数点のスペースが必要です。そうでなければ、次の行にジャンプします。したがって、ウィンドウのサイズを変更することで、divには十分なスペースがなくなり、次の行に移動します。

あなたが隣同士に浮動要素にしたいのであれば、あなたは、コンテナが必要になります。

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

は、フローティングのdivに与えられたスペースを超えないshoul幅を与えるようにしてください。

Answer 4

コンテンツの構造を変更するには、右側のバーのdivの上に<ul>を配置する必要があります。それらはどちらも左に浮動するように設定されているので、左の要素が最初になるようにします。

編集*

あなたのグリッドは順不同リストに表示されている - 。サイドバーの中に含まれている<div>タグの後に作成され<ul>私が言及した位置決め用コードと不適切な山車の除去の組み合わせが修正されますと信じていますあなたの問題。 <ul>には、スクリプトによって割り当てられた配置に基づいて、浮動小数点数が必要ない場合もあります。周りの放火犯と

プレイは、あなたが最初に耐性であり得るが、それは私があなたの浮かべた容器について、それを見ると、HTMLとあります