크기를 조정할 때 두 개의 열이 겹치지 않게하십시오.

저는 CSS를 처음 사용하고 2 열짜리 웹 사이트를 구축하려고했습니다. 코드는 여기에 있습니다 : JSFiddle. 오른쪽 내용 영역이있는 왼쪽 메뉴가 있습니다. 창이 충분히 큰 경우 레이아웃에 문제가 없습니다. 그러나 좁은 창으로 창의 크기를 조정할 때 내용이 메뉴 영역에 오버플로되며 위치를 고정 또는 절대 지정하지 않고 수정하는 방법을 알지 못합니다. 바닥 글은 페이지 끝 부분에 있습니다. 누군가가 문제를 해결하도록 도울 수 있습니까? 정말 고맙습니다!크기를 조정할 때 두 개의 열이 겹치지 않게하십시오.

나는 또한 긴 코드에 대해 미리 사과합니다.

<body> 
<div id="wrapper"> 
<div id="menunav"> 
    <img src="images/logo.jpg" alt="siteLogo" class="centered" id="logo"/> 
<nav id="nav"> 
    <ul> 
    <li><a href="index.html" class="thispage">Portfolio</a></li> 
    <li><a href="aboutme.html">About Me</a></li> 
    <li><a href="#">Resume</a></li> 
    </ul> 
</nav> 
</div> 

<div id="content"> 
<div class="grid3"> 
<article class="bucket" > 
<a href="#"> 
<img src="images/baskerville1.jpg" alt=""/> 
<div class = "img-overlay"> 
    <h3>Monogram</h3></div> 
    </a> 
</article> 

<article class="bucket"> 
<a href="#"> 
<img src="images/Gastalt.png" alt=""/> 
<div class="img-overlay"> 
    <h3>Gastalt Composition</h3> 
    </div> 
</a> 
</article> 

<article class="bucket"> 
<a href="#"> 
<img src="images/redThread.png" alt=""/> 
<div class="img-overlay"> 
    <h3>The Red Thread - A Visual Book</h3> 
    </div> 
    </a> 
</article> 

<article class="bucket"> 
<a href="#"> 
<img src="images/poster copy.png" alt=""/> 
<div class="img-overlay"> 
    <h3>Typographic Hierarchy</h3> 
    </div> 
    </a> 
</article> 

<article class="bucket"> 
<a href="#"> 
<img src="images/Spaces.png" alt=""/> 
<div class="img-overlay"> 
    <h3>Living in Two Spaces</h3> 
    </div> 
    </a> 
</article> 
</div> 
</div> 
<div id="footer">&copy;2014</div> 
</div> 

</body>

CSS 코드 : 나는 문제 및 붙여 넣기 모든 HTML 코드 거짓말을하는 부분을 모르는

@charset "UTF-8"; 

*{ 
margin:0; 
} 

html, body { 
margin: 0; 
background-color: #FFFFFF; 
height: 100%; 
padding: 0; 
} 

#wrapper { 
background-color: #FFFFFF; 
width: 1000px; 
padding-bottom: 0px; 
margin:0 auto; 
position:relative; 
min-height: 100%; 
} 

#menunav { 
position: fixed; 
width:180px; 
padding-top:80px; 
height: 100%; 
display: block; 
margin: 0px; 
} 
#logo { 
width: 70%; 
position: static; 
} 
#menunav ul { 
list-style-type: none; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
} 
#menunav a { 
display: block; 
padding-top: 8px; 
padding-bottom: 8px; 
margin-top: 12px; 
margin-right: 0px; 
margin-left: 0px; 
text-align: left; 
padding-left: 20px; 
background-color: rgba(193,193,193,1.00); 
color: rgba(0,0,0,1.00); 
} 
#menunav a:hover, #menunav a:active, #mainnav a:focus, #menunav a.thispage { 
background-color: rgba(0,174,210,1.00); 
color: rgba(255,255,255,1.00); 
text-decoration: none; 
} 

#content { 
display: block; 
    margin: 0 auto; 
padding-left:225px; 
padding-top:80px; 
background-color:#fffeee; 
} 

.centered { 
margin-left: auto; 
margin-right: auto; 
display: block; 
margin-top: auto; 
margin-bottom: auto; 
} 

a { 
text-decoration: none; 
} 
.bucket { 
position:relative; 
float: left; 
margin-left: 3.2%; 
margin-bottom:30px; 
} 

.grid3 .bucket:nth-of-type(3n+1){ 
margin-left: 0; 
clear: left; 
} 

.grid3 .bucket{ 
width: 31.2%; 
} 

.img-overlay h3 { 
opacity: 1; 
display: inline-block; 
margin: auto; 
height: 20px; 
position: absolute; 
top: 0; 
bottom: 0; 
right: 0; 
left:0; 
color: rgba(255,254,254,1.00); 
text-align: center; 
vertical-align: middle; 
} 
.img-overlay { 
background-color: rgba(0,0,0,0.6); 
bottom: 0px; 
top: 0px; 
opacity: 0; 
overflow:hidden; 
filter: alpha(opacity=0); 
position: absolute; 
width: 100%; 
z-index: 1000; 
transition: opacity 0.3s; 
-webkit-transition: opacity 0.3s; 
} 
.bucket:hover .img-overlay { 
opacity:1; 
filter: alpha(opacity=100); 
} 

.bucket img { 
width: 100%; 
} 

#footer{ 
clear:both; 
text-align: center; 
line-height:20px; 
vertical-align: middle; 
} 


@media screen and (max-width:740px){ 
/*change 3 column to 2 column*/ 
.grid3 .bucket:nth-of-type(3n+1) { 
    margin-left: 3.2%; 
    clear: none; 
} 
.grid3 .bucket:nth-of-type(2n+1) { 
    margin-left: 0; 
    clear: left; 
} 
}

출처

2014-02-08 susanz

'position : static;'<- 왜죠? 그것은 기본적으로 정적입니다 ... –

오 ... 좋은 잡을! 이전 버전의 파일 일 수 있습니다. – susanz

여기에서 당신의 목표는 무엇입니까? 스크롤 할 때 왼쪽 열을 정적으로 유지 하시겠습니까? 아니면 열이 겹치지 않도록 하시겠습니까? – EmileKumfa

설정 z-index:1 및

#menunav { 
z-index: 1; 
background-color: #FFFFFF; 
position: fixed; 
width:180px; 
padding-top:80px; 
height: 100%; 
display: block; 
margin: 0px; 
}

여기 #menunav에 background-color: #FFFFFF; 설정 그것은 http://jsfiddle.net/n9V3W/2/ 일하고있다 !!!

출처

2014-02-08 06:34:07 Sam1604

안녕 Sam1604, 답장을 보내 주셔서 감사합니다. 그러나 창 크기가 너무 작아 질 때 내용이 가로로 스크롤되는 문제는 해결되지 않습니다. 어쨌든 가로로 스크롤하지 않습니까? – susanz

크기를 조정할 때 두 개의 열이 겹치지 않게하십시오.

답변

관련 문제