넘쳐 흐르는 문제

저는 중심에 배치 된 레이아웃을 사용하여 주로 4 개의 div (줄 바꿈, 상단, 메뉴 및 내용)가있는 HTML/CSS 웹 사이트에서 작업하고 있습니다.넘쳐 흐르는 문제

내 #content 내부의 텍스트가 겹쳐서 div 안에 강제로 삽입 할 수 없다는 것이 문제입니다. 또한 div에서 스크롤을 사용 가능하게하고 HTML에서 사용하지 않도록 설정하면 스크롤이 div에 대해 작동하지 않습니다. 따라서 겹치는 내용과 아래로 스크롤 할 수있는 옵션이 없어졌습니다.

그래서 다시 시작하면 3 개의 고정 된 div를 사용하고 중심에 두 개의 옆쪽 테두리를두고 내 배경 이미지가 움직이지 않게하려고합니다. 콘텐츠 만 내부로 스크롤해야합니다.

여기 내 CSS 코드입니다 : 가능한 것이 무엇인지, 내가 당신을 위해 무엇을 찾고있는 생각 레이아웃을 만든 바탕으로

<style type=text/css> 

html 
{ 
    overflow: none; 
} 

head 
{ 

} 

body 
{ 
    background-color: #030B12; 
} 

p 
{ 
    font-family: verdana; 
    font-size: 12px; 
    color: #FFFFFF; 
    text-align: left; 
} 

h1 
{ 
    margin-top: 25px; 
    font-family: verdana; 
    font-size: 16px; 
    color: #FFFFFF; 
    text-align: center; 
} 

bg2 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

#wrapper 
{ 
    height: 100%; 
    width: 70%; 
    margin: auto; 
    background-image: url('bg2.jpg'); 
    background-position: fixed; 
    background-repeat: no-repeat; 
} 

#top 
{ 
    background-image:url('top.jpg'); 
    background-repeat: no-repeat; 
    background-position: fixed; 
    height: 15%; 
    width: 100%; 
    margin: auto; 
} 

#menu 
{ 
    height: 60px; 
    width: 100%; 
    background-image: url('navi_bg.png'); 
} 

#content 
{ 
    overflow: auto; 
    display: block; 
} 

ul 
{ 
    list-style-type: none; 
    height: 60px; 
    width: 663px; 
    margin: auto; 
} 

ul a 
{ 
    background-image: url(navi_bg_divider.png); 
    background-repeat: no-repeat; 
    background-position: right; 
    padding-right: 22px; 
    padding-left: 16px; 
    display: block; 
    line-height: 60px; 
    text-decoration: none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 21px; 
    color: #FFFFFF; 
} 

ul li 
{ 
    list-style-type: none; 
    float: left; 

} 

ul a:hover 
{ 
    color: #3F5F7B; 
}

출처

2012-11-20 RBorges77

후 모든 코드. jsfiddle를 사용하십시오. – twodayslate

코드가 너무 길어 html이 없기 때문에 http://jsfiddle.net/에서 설정해야합니다. – Linas

. 상위 리 메뉴 항목을 가운데로 가져 오는 데는 몇 가지 문제가 있지만, 쉽게 해결할 수있을 것이라고 확신합니다. 해당 영역을 스크롤하고 래퍼의 배경을 정적으로 유지하려면 내용 영역의 높이를 지정해야합니다.

div#content{ 
max-height:300px; 
overflow-y:scroll; 
}

Here is the fiddle

출처

2012-11-20 17:08:05 TNCodeMonkey

넘쳐 흐르는 문제

답변

관련 문제