소스 코드가있는 CSS 레이아웃

내가 뭔가 명확한 것을 놓치고 있는지 궁금해하기 시작했지만 지금은 일을 찾고 있었지만 아직 확실한 답을 찾을 수 없었습니다.소스 코드가있는 CSS 레이아웃

내가 찾고있는 것은 헤더와 끈적한 바닥 글이있는 2 열 페이지 (오른쪽에서 메뉴)에 대한 소스 주문 콘텐츠 CSS 레이아웃이며, 바람직하지 않은 해킹이없는 것이 좋습니다. 의 바람직한 소스 순서 : 나는 나 자신이 구축을 위해 노력에서 너무 멀리받지 못했습니다라고, 나처럼
{내용}
{rightmenu}
{바닥 글}
{헤더}

내가 가진 어디서나 적절한 예를 찾을 수있었습니다. 어떤 제안? 실제로이 문서가 아주 좋은 모든 것을 설명 생각

http://www.positioniseverything.net/ordered-floats.html

감사

내가 질문 권리를 이해한다면

출처

2011-03-21 NickC

헤더를 소스 코드의 맨 마지막에 넣으시겠습니까? 제발 SEO 말하지 마. – thirtydot

다른 요소가 어디에 있어야하는지 보여주는 그림을 그리면 동일한 모양의 레이아웃을 만들 것입니다. – thirtydot

사이트 로고나 h1을 하단에 넣는 것이 좋은 아이디어라고 생각하지 않지만 합법적 인 이유가있을 수 있습니다. 아래쪽에 머리글을 붙이면됩니다. 예를 들어 큰 드롭 다운은 종종 유용성의 아래쪽에 있습니다. 사용자뿐만 아니라 SE의) – clairesuzy

이 당신의 대답해야합니다.

출처

2011-03-21 15:02:37

Dennis에게 감사드립니다. 흥미로운 기사입니다. 그것은 왼쪽/오른쪽 열에 답합니다. 비록 내가 이미 float : left;/float : 오른쪽; 어려운 비트가 원본 순서 헤더를 올바르게 맨 위에 올리는 것으로 보입니다. – NickC

실제로이 특성에서 명확한 특성이 매우 흥미 롭다고 생각합니다. float 속성을 살펴 보는 것도 흥미 롭습니다. 항상 논리적 인 것은 아니지만 둘 이상의 요소가 올바르게 유동적으로 나타나도록 시도해야합니다! ;) 왼쪽과 오른쪽으로 두 개의 요소가 떠있는 것이 아마도 올바른 방법 일 것입니다. 그렇지 않으면 너비가 100 % 인 컨테이너를 가질 수 있고 div가 세 개의 열을 "포함"하여 왼쪽으로 떠 가게 할 수 있습니다. 그런 다음 바닥 글을 동일한 너비와 왼쪽으로 떠있게 만드십시오. –

질문이 있으시면 다음 번호로 알려주십시오 .-) –

내용 오른쪽, 사이드 바 왼쪽은 아마도 가장 쉬운 부유 레이아웃이고, 바로 내용을 폭으로 오른쪽으로 띄우고, 왼쪽으로 배치를 피하여 오버플로로 공간을 채 웁니다. 꼬리말은 지워집니다.

헤더는 소스에서 가짜 헤더 div를 먼저 넣습니다. 거기에는 큰 드롭 다운 메뉴가있는 경우 링크가 굉장히 많이 들리는 것을 원치 않을지라도 로고 또는 무언가가있을 수 있다고 가정합니다. 거기에 들어가거나 그런 식으로. 어쨌든 "위조 된"헤더를 만들어서 필요한 실제 공간을 만들고 그 아래에있는 div에 맨 위에 표시하고 절대적으로 배치하려는 내용을 넣으십시오.

여기이 나는 순간에 가지고 올 수있는 최선입니다 fiddled mockup

출처

2011-03-21 16:53:42 clairesuzy

감사합니다. 지금 작동하는 프로토 타입을 가지고 있습니다. 별도의 답변으로 게시 할 예정이므로 여기에 추가하는 방법을 알 수 없습니다. – NickC

을합니다. 상대적 위치와 절대 위치의 혼합 비트이지만 작동하는 것처럼 보입니다. 누구든지이 문제를 볼 수 있습니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html> 
    <head> 
     <style> 
      * { 
    margin: 0; 
    } 
    html, body { 
    height: 100%; 
    } 
    .container { 
    min-height: 100%; 
    /*height: auto !important;*/ 
    height: 100%; 
    margin: 0 auto -2em; 
    } 
    .content{ 
    float: left; 
    width: 80%; 
    } 
    .menu{ 
    margin-left: 80%; 
    } 
    .header{ 
    position: absolute; 
    top: 0px; 
    height: 3em; 
    width: 100%; 
    } 
    .clearheader{ 
    height: 3em; 
    } 
    .footer, .clearfooter { 
    height: 2em; 
    clear: both; 
    } 

    .container { 
    background: grey; 
    } 
    .header{ 
    background: cyan; 
    } 
    .clearheader{ 
    background: cyan; 
    } 
    .footer{ 
    background: blue; 
    } 
    .clearfooter { 
    background: lightblue; 
    } 

     </style> 
     <link rel="stylesheet" href="NJC layout2.css" ... /> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="clearheader"></div> 
      <div class="content">Content</div> 
      <div class="menu">menu</div> 
      <div class="clearfooter"></div> 
     </div> 
     <div class="header">header</div> 
     <div class="footer">Footer</div> 
    </body> 
</html>

출처

2011-03-21 20:00:23 NickC

소스 코드가있는 CSS 레이아웃

답변

관련 문제