CSS와의 전투없이이 레이아웃을 달성하려면 어떻게해야합니까?

Question

이 문제에 관해 몇 가지 질문이 있지만 이해하기가 다소 어렵습니다. 특정 태그를 포함해야하는 템플릿에서 작업 중이며 코드를 업로드 한 후 템플릿에 추가 된 다른 요소를 사용해야합니다. 나는 이것에 대해 걱정하지 않겠지 만, 바닥 글이 페이지의 하단에 표시되도록 노력하고 있습니다. 바닥 글에 대해서는 아무 것도 변경할 수 없으며 래퍼로 사용하는 div의 맨 아래에 표시됩니다. 문제는 높이를 고정 된 값으로 설정하면 주석 div가 바닥 글과 겹치기 전에 너무 많은 주석이있을 수 있다는 것입니다. 나는 컨테이너 div의 높이를 자동으로 설정하고 자동으로 오버플로, 하단 여백을 65 (바닥 글의 높이)로 설정하고 오버플로를 설정하여 주석 div (매우 느슨한 주석이 있음)를 스크롤하는 등 다양한 솔루션을 시도했습니다. 여기

Here is an example of the problem and the template as it stands.

은 컨테이너 사업부에 대한 CSS 스타일이다 (DIV 아이디 = 홈페이지) 여기

#Main { 
margin: 0px auto auto auto; 
background-color: #808080; 
font-family: Verdana, Geneva, Tahoma, sans-serif; 
font-size: medium; 
font-variant: normal; 
color: #FFFFFF; 
width: 900px; 
position: relative; 
} 

는 댓글 DIV

#Comments { 
background-color: #008080; 
width: 450px; 
height: auto; 
top: 1750px; 
left: 450px; 
position: absolute; 
overflow: auto; 
} 

을위한 CSS 스타일입니다 그리고 여기 방법입니다 divs가 본문에 쌓여 있습니다.

페이지가 이미지가 무겁기 때문에 코드를 경량으로 유지하려고 노력하고 있습니다.

도움을 주셔서 감사 드리며 누구나 필요하면 템플릿을 게시 해 드리겠습니다.

편집 :

좋아, 내가 CSS와 나는 아래로 가지고있는 div의를 다시해야하고, A), B) 난에서 순수 CSS를 사용하여 수행하거나하는 방법 단서가 없다는 것을 나에게 발생 있어요 당신 중 하나가 말한대로 적어도 싸우지 않고. 내가 이루고자하는 목표는 다음과 같습니다.

실마리가 없습니다. 어떻게해야합니까? 모든 도움이 크게 감사 할 것입니다. (자신의 div에있는 모든 요소를 ​​모두 피할 수있는 방법도 있습니다)

Answer 1

해당 페이지에서 CSS와 정말로 싸우고있는 것 같습니다. 대부분의 요소는 절대적으로 #Main 클래스 내에 있습니다. 이렇게하면 실제로 원하는 레이아웃보다 더 많은 레이아웃을 지정해야합니다. 또한 가변적 인 양의 댓글이나 동적 콘텐츠가있는 경우 다른 사람들이 콘텐츠를 가져 오지 않으면 콘텐츠 컨테이너를 확장하는 것이 훨씬 더 어려워집니다.

Nicole Sullivan's OOCSS framework과 같은 그리드 레이아웃을 이용하는 CSS 프레임 워크 나 접근 방식을 강하게 권할 것입니다.

구조체 (많은 좋은 예제가 있음)는 쉽게 따라 할 수 있으며 달성하려는 레이아웃의 종류에 훨씬 쉽게 적용될 수 있습니다.

Answer 2

내가 당신의 이미지 레이아웃을 코딩 얼마나 어떤 시험없이 쓸 것이다

:

HTML :

<div id="header" class="centered"></div> 
<div id="content" class="centered"> 
    <div id="navigation"></div> 
    <div id="content"></div> 
</div> 
<div id="comments" class="centered"> 
    <div id="author-comments" class="centered"></div> 
    <div class="centered"> 
    <div id="comment-field"></div> 
    <div id="user-comments"></div> 
    </div> 
</div> 

CSS :

* { margin:0px; padding:0px } 
html { height:100% } 
body { height:100% } 
.centered { position:relative; margin:0 auto; width:960px } 
#header { height:100px; background:#333 } 
#content { overflow:hidden } 
#author-comment { overflow:hidden; margin:30px auto } 
#comment-field { position:relative; float:left; width:480px; overflow:hidden } 
#user-comments { position:relative; float:left; width:480px; overflow:hidden } 

죄송 있어요 지금은 테스트 할 시간이 없지만 첫 번째보기에서는이 코드에 아무런 문제가 보이지 않습니다. 작동하지 않아요

Answer 3

나는 이것이 도움이되기를 바랍니다.

다음은 사용할 수있는 매우 기본적인 레이아웃입니다. 당신의 CSS에서

:

#header, #content, #comments{ 
    margin: 0 auto; 
    width: 960px; 
    overflow: hidden; 
    } 
    #author-comments{ 
    width: 100%; 
    } 
    #comment-box{ 
    float: left; 
    width: 50%; 
    } 
    #comment-list{ 
    float: right; 
    width: 50%; 
    } 

마크 업에서 :

<div id="header"> 
    Header 
</div> 
<div id="content"> 
    Contents 
<div> 
<div id="comments"> 
    <div id="author-comments"> 
    Author comments 
    </div> 
    <div id="comment-box"> 
    Comment box 
    </div> 
    <div id="comment-list"> 
    Comment list 
    </div> 
</div> 

그것은 당신이 스타일없이 의미가 마크 업을 사용하는 것이 정말 중요합니다. div를 일반 상자로 보지 말고 문서에 구조를 부여하는 실제 내용 컨테이너로 간주하십시오.

참고로, 사용중인 이미지의 양을 보완하면서 파일을 밝게 유지할 수있는 div 수에 대해 우려했다고 언급했습니다. 이것에 대해 걱정하지 마십시오. 텍스트 문서 (예 : HTML)는 파일 크기 측면에서 이미지와 아무런 관련이 없습니다. 그러나, 그는 무료 인 것처럼 마크 업을 던져야 함을 의미하지는 않습니다.)

마지막으로 한 가지. 장식 이미지를 렌더링하는 데 <img> 개의 요소를 사용하고있는 것으로 나타났습니다. CSS를 사용하여 해당 이미지를 <div>에 배경 이미지로 설정하십시오. 이렇게하면 구조를보다 깔끔하고 쉽게 구현할 수있을뿐 아니라 내용을 나타내는 이미지와 장식을 나타내는 이미지 사이에 선을 그립니다.