0
편집 : 현재 문제가 해결되었지만 새로운 문제를 만들기 시작했습니다.많은 콘텐츠 또는 텍스트가있는 경우 내용 입력란이 컨테이너 div에서 벗어납니다.
사이트에있는 콘텐츠 div (예 : 100 % 높이의 iframe)에 콘텐츠를 추가 할 때 Content div가 확장되어 Conatiner div에서 떠 다니는 것이 문제가되었습니다. 그래서 CSS 코드는 이것이다 ..
@charset "utf-8";
/* CSS Document */
body{background-image:url('/media/Background.png');}
#Container{
position:relative;
width: 900px;
min-height:200px;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: de;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;
background-color:#C1E9FF;
overflow:inherit;
}
#LogoContainer{
position:absolute;
background-image:url('/media/Logo.png');
border-right-width:1px;
border-bottom-width:1px;
border-right-color:rgb(0,0,1);
border-bottom-color:rgb(0,0,1);
border-right-style:solid;
border-bottom-style:solid;
width:400px;
height:50px;
}
#LikeBar{
position:absolute;
border-bottom-width:1px;
border-bottom-color:rgb(0,0,1);
border-bottom-style:solid;
width:500px;
height:50px;
left:400px;
}
#ButtonHome{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
top:50px;
z-index:1;
}
#ButtonVideo{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
left:105;
top:50px;
z-index:1;
}
#ButtonSpeedtest{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
left:210;
top:50px;
z-index:1;
}
#ButtonYVideos{
position:absolute;
background-image:url('/media/Bt.png');
width:100px;
height:30px;
left:315;
top:50px;
z-index:1;
}
#YouTubeBox{
position:absolute;
background-image:url('/media/Box.png');
width:100px;
height:30;
left:10px;
text-align:center;
}
#TwitterBox{
position:absolute;
background-image:url('/media/Box.png');
width:100px;
height:30;
left:110px;
text-align:center;
}
#FaceBookBox{
position:absolute;
background-image:url('/media/Box.png');
width:100px;
height:30;
left:210px;
text-align:center;
}
#Content{
position:relative;
top:90px;
width:780px;
min-height:80%;
border-top:1px solid #000001;
}
#Footer{
position:relative;
border-top-width:1px;
border-top-color:rgb(0,0,1);
border-bottom: 1px solid #000001;
border-top-style:solid;
width:900px;
bottom:0px;
z-index:1;
text-align:center;
}
#AdFooter{
position:relative;
width:728px;
height:100px;
margin: 0px auto 0 auto;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
}
#AdSidebar{
position:absolute;
width:120px;
height:600px;
left:780px;
top:50px;
border-left: 1px solid #000001;
border-bottom: 1px solid #000001;
}
p{line-height: 1px;}
그리고 현재 HTML 코드, 오류와 관련이없는 내용없이.
<html>
<head>
<title>Faulty css</title>
<link href="ThemeV1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Container"> <!-- Start Container -->
<div id="LogoContainer">
</div>
<div id="LikeBar">
<p class="DivT">
</p>
</div>
<!-- Menu Controls -->
<a href="/"><div id="ButtonHome"><center><p>Home</p></center></div></a>
<!-- <a href="/blog"><div id="ButtonVideo"><center><p>Blog</p></center></div></a> -->
<a href="/Speedtest.html"><div id="ButtonSpeedtest"><center><p>SpeedTest</p></center></div></a>
<a href="/videos.html"><div id="ButtonVideo"><center><p>Videos</p></center></div></a>
<!-- WEBSITE CONTENT -->
<div id="Content">
<iframe src="about:blank" width="100%" height="100%" allowTransparency="true"></iframe>
</div>
<!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer">
<p>Test</p>
<th>
</div>
<!-- End Footer -->
<div id="AdFooter">
</div>
<div id="AdSidebar">
</div>
</div> <!-- End Container -->
</body>
</html>
이가 발생하는 이유에 대한 내 생각 엔, 바닥 글이 잠겨 및 내용이 커지고 때 이동하지 않습니다. 그리고 내가하고 싶지 않은 것은 이것이 내가 만든 첫 번째 테마 인 모든 것을 다시 코딩하는 것이지만 작동하지만 바닥 글에 버그가 있습니다.
나는 그것을 시도했지만 꼬리말은 여전히 내용의 중첩 때문에 바닥 글이 높이를 변경하지 않으며 P는 바닥 글에서 벗어나지 못했습니다. – Teknikk
CSS 끈 푸터 솔루션 중 하나를 사용해보십시오. –