이미지가 브라우저 창의 크기를 변경하면 임의로 번지 점프를 수행합니다.

Question

지금까지 가장 신비한 문제가 있습니다. 현재 설계중인 사이트를 방문하십시오. http://ftfranes.com/mliad2/

페이지가로드되면 브라우저 창의 크기를 조정하십시오. 이미지가 즉시 페이지 아래로 점프합니다. 그게 무슨 원인인지에 대한 단서가 있다는 것을 말하면 나는 거짓말을 할 것입니다. 그래서 나는 단순히 여기보다 더 똑똑한 사람을 찾고 있습니다.

Answer 1

두 가지 문제가 컨테이너 것으로 보인다 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 */ 
    : 
} 

이러한 변경 사항을 CSS에 적용하면 Chrome에서 문제가 해결 된 것으로 보입니다. (I는, 그러나, 그것은 '다시 도약'하기 위해 다시 창 크기를 조정해야했다.)

편집

작은 점프의 두번째 문제는 ...합니다 (H2가있는 것 같습니다 레드 헤링 (Red Herring)/우연이었다.)

일부 스크립트이 #grid_clone에 top:368px을 적용 창 크기를 조정합니다. 그리고 이것은 엄지 손톱 콘테이너를 조금 아래로 밀고있는 것처럼 보입니다. 진짜 해킹은이 여분의 도약을 막기 위해 CSS의이 요소에 margin-top:-28px;을 적용하는 것입니다.

두 요소 모두에 margin-top:-28px;을 적용해야한다고 생각합니다. 그렇지 않으면 정렬되지 않습니다.

댓글에서 계속 ...

Answer 2

ID가있는 ul grid_clone은 상단에오고 있습니다. 크기를 조정할 때 크기가 845px이므로 위치가 절대적으로 아래에 있으므로 상단에 845 픽셀을 남깁니다. 사용중인 플러그인입니까?

Answer 3

실제로 이것은 CSS 문제입니다. #image-grid은 왼쪽 플로트뿐 아니라 .sidebar_right_twitter으로 플로트합니다. 하지만 요소에는 충분한 공간이 있어야합니다. 그렇지 않으면 다음 행으로 넘어갑니다. 따라서 창 크기를 조정하면 div에 충분한 공간이 없기 때문에 다음 행으로 이동합니다.

그래서 당신은 당신이 용기가 필요합니다 서로 옆에 떠있는 요소를 원하는 경우 :

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

가 떠있는 div에게 주어진 공간을 초과하지 말아야 폭을 제공해야합니다.

Answer 4

콘텐츠 구조를 재정렬하려면 <ul>을 오른쪽 사이드 바의 div 위에 놓아야합니다. 둘 다 왼쪽으로 떠서 설정되므로 왼쪽에있는 요소가 가장 먼저 표시되기를 원할 것입니다.

편집 *

그리드가 정렬되지 않은 목록에 표시됩니다

-. 사이드 바에 포함 된 <div> 태그 후에 생성됩니다 <ul> 내가 언급 위치 코드를 제거 조합 부적절한 수레가 해결 것이라고 믿는다 너의 문제. <ul>에는 스크립트에 의해 지정된 위치 지정을 기반으로 플로트가 필요하지 않은 것 같습니다. 주변에 불을 지르고와

재생, 당신은 처음에는 저항 할 수 있지만, 난 당신 떴다 용기에 대해 그것을 보는 바와 같이이, HTML 및있다