0
OK - 저는 CSS Newb (부드럽게 다루십시오)라는 것을 인정합니다. 그리고 HTML 전문가 모두는 아닙니다. 프론트 엔드보다 비즈니스 로직이 훨씬 뛰어납니다. 즉, 나는 남편을위한 웹 사이트를 개발 중이다 (우리는 그 일을 외부에서 할 수는 없다). 가변 길이를 가질 수있는 페이지에 끈적한 바닥 글을 구현하려고합니다. 문제는 페이지의 왼쪽에 메뉴를 구현 한 이후로 바닥 글이 페이지의 맨 위로 이동한다는 것입니다. 왜 그런지 모르겠지만 왜 그럴지 모르겠습니다. 페이지 내용은 데이터베이스에서 가져옵니다. 기본 HTML 레이아웃은 php를 통해 데이터베이스에서 작성된 세부 정보 (탭 스트립, 메뉴, 내용)와 함께 HTML로 작성됩니다. 기본 HTML 구조는 다음과 같다 : 어떤 제안을 부탁드립니다 :CSS/HTML5 - 끈적 끈적한 바닥 글이 작동하지 않음
<body>
<div id='content-container'>
<div id='wrapper'>...</div>
<div id='body-wrapper'>
<div id='floater-wrapper'>
<div id='floating-menu-1'>
</div>
<div id='floating-menu-2'>
</div>
<div>
<div id='content'>
</div>
</div>
<div id='foot-wrapper'>
<div id='foot-content'>
</div>
</div>
</body>
CSS의가 (내가 여기 온라인에서 발견 한 끈적 끈적한 바닥 글 솔루션의 모든 변화를 시도했다. 참고) 다음과 같다. #content 전에
<style>
/*START NAV*/
ul, ul li, li{list-style: none;}
#navigation-wrapper{
background-image: url(images/line.png);
background-repeat: no-repeat;
background-position: right bottom;
height: 100px;
width: 1000px;
margin: 27px 0 0;
}
#logo{
display: block;
float: left;
height: 150px;
width: 200px;
display: block;
text-indent: -999993px;
background-image: url(images/wgclogo2_small.png);
background-repeat: no-repeat;
background-position: center center;
}
#logo a {
margin: 10px 0 0;
display:block;
height:100%;
width:100%;
}
#navigation{
display: block;
float: right;
margin: 10px 0 0 0;
}
#navigation ul {
color: #323131;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: right;
}
#navigation li {
display:inline;
padding: 0 0 0 15px;
font-weight: 600;
}
#navigation a {
color: #323131;
text-decoration: none;
font-size:13px;
}
#navigation a:hover{
color: #78756f;
border-bottom: 5px solid #323131;
border-top: 5px solid #323131;
padding-top: 12px;
padding-bottom: 10px;
}
div#nav{
width: 577px;
height: 44px;
}
div#nav ul {
width: 100%;
height: 100%;
overflow: hidden;
}
div#nav ul li {
float: right;
}
div#nav ul li a {
text-indent: 100px;
overflow: hidden;
display: block;
height: 44px;
}
/*Start First item in Nav 42+0=42 */
div#nav ul li.about a {width: 42px}
div#nav ul li.about a:hover, div#nav ul li.about a.current { }
/*End First item in Nav*/
/*Start Next item in Nav 58+42=100 */
div#nav ul li.food a {width: 58px}
div#nav ul li.food a:hover, div#nav ul li.food a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 54+100=154 */
div#nav ul li.special a {width: 54px}
div#nav ul li.special a:hover, div#nav ul li.special a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 42+154=196 */
div#nav ul li.service a {width: 42px}
div#nav ul li.service a:hover, div#nav ul li.service a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.cost a {width: 52px}
div#nav ul li.cost a:hover, div#nav ul li.cost a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.contact a {width: 57px}
div#nav ul li.contact a:hover, div#nav ul li.contact a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.customers a {width: 50px}
div#nav ul li.customers a:hover, div#nav ul li.customers a.current { }
/*End Next item in Nav*/
/*END NAV*/
/*START CONTENT & HEADERS*/
html, body{
height: 100%;
background-image: url(images/bkg.png);
}
#content-container{
min-height: 100%;
position:relative;
vertical-align: top;
}
#body-wrapper{
/* overflow: auto; */
min-height: 100%;
padding-bottom: 40px;
display: inline-block;
position:absolute;
vertical-align: top;
}
#content{
display:inline-block;
position: absolute;
width:800px;
margin-left: 200px;
}
h1 {
text-align: left;
text-decoration: none;
color: #003366;
font: normal normal 30px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h2 {
text-align: left;
text-decoration: none;
color: #993300;
font: 24px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h3 {
text-align: left;
font: 16px Georgia, "Times New Roman", Times, serif;
color: #666666;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
p.alert{
text-align: left;
font-weight: bold;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #ff5600;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
#content ul, ol {
border-left: 3px solid #dfedcb;
margin-left: 5px;
margin-bottom: 20px;
padding-left: 15px;
color: #323131;
font: 16px Georgia, "Times New Roman", Times, serif;
}
/* START Floating Menu Styles */
#floater-container{
display: inline-block;
position:absolute;
left: 0px;
vertical-align: top;
text-align: start;
}
div.floating-menu {
position:static;
background:rgba(0.25,0.25,0.25,0.25);
border:1px solid #299366;
width:185px;
z-index:300;
}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
/*END Floaters */
/*END CONTENT & HEADERS*/
/*START LOGIN*/
#login-wrapper{ vertical-align: middle; border-style: solid; border-width: thin; height: 125px; width: 500px; margin: 27px 0 0;}
#facebook{text-align: center; vertical-align: middle; background-image: url(images/login_border.png); background-position: right center; background-repeat: no-repeat; display:inline-block ; float: left; width: 200px; height: 125px; margin: 0 0 0 0;}
#local_login{vertical-align: middle; display: inline-block; float: right; width: 300px; height: 125px; margin: 0 0 0 0;}
/*END LOGIN*/
/* START TABSTRIP STYLES */
.tabStrip ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabStrip li {
margin: 0 2px 0 0;
list-style-type: none;
float: right;
}
.tabLink {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e8e8e8;
border: #dadada solid;
border-width: 1px 1px 0 1px;
color: #8a8a8a;
}
.tabLinkActive {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e0e0e0;
border: #c0c0c0 solid;
border-width: 1px 1px 0 1px;
color: #0066ff;
}
.tabContent {
display: none;
}
.tabContentActive {
display: inherit;
clear: both;
background: #f0f0f0;
border: 1px #dedede solid;
padding: 10px;
/* height:inherit; */
width:97.5%;
}
/*END TABSTRIPS */
</style>
마크 업이 나를 위해 작동하지 않습니까? –
빈 페이지가 나타납니다. –
div 구조로만 내용을 게시하지 않았습니다. –