CSS와 비행 접시 머리

Question

내가 일하는 회사는 플라잉 받침을 한동안 사용 해왔다. Renently, 그들은 다음과 같은 복잡한 형식으로 헤더 형식을 변경했습니다.

       THE COMPANY NAME 
_____________________________________________________________________________ 
This is the name of the article       | Date:04/17/2013 
_____________________________________________________________________________ 

나는 유감스럽게도 위와 같이 보일 수 없습니다. 여기

       THE COMPANY NAME 
____________________________________________________________________ 
This is the name of the article     | Date:04/17/2013 
_____________________________________________________________________________ 

코드입니다 :

@page { 
     size:letter; 
     margin-top: 0.8in; 
     margin-bottom: 0.5in; 
     padding: 5px; 
     border-top:#90aac5 solid 1px; 
     @top-left {content: element(leftHeader);} 
     @top-center{content: element(centerHeader);} 
     @top-right {content: element(rightHeader);} 
     } 

    #page-thisheader-center { 
    position:running(centerHeader); 
    border-bottom:#90aac5 1px solid; 
    font-size:9px; 
    height:52px; 
    color:#7e7f7f; 
    padding:2px; 


    } 

    #page-header-right { 
    position:running(rightHeader); 
    border-top:#90aac5 1px solid; 
    height: 25px; 
    font-size:9px; 
    color:#7e7f7f; 
    white-space:nowrap; 
    float:right; 
    padding-top:5px; 

    } 

    #page-header-left { 
    position:running(leftHeader); 
    border-top:#90aac5 1px solid; 
    height: 25px; 
    font-size:9px; 
    color:#7e7f7f; 
    float:left; 
    padding-top:5px; 


    } 
    .date { 
    height: 15px; 
    border-left: #90aac5 solid 1px; 
    float:right; 
    width:75px; 

태그는 위의 ID와 클래스 다음과 같습니다 외형은 수익성보다 짧은 어디 그것의 모양을 얻을 수있는 닫히고입니다 :

 <div id ="page-header-left" align="left"> 
     <div> <xsl:call-template name="get.title"/></div> 
     </div> 

    <div id ="page-header-right" align="right"> 
     <div class="date"> <xsl:call-template name="get.date"/></div> 
     </div> 

    <div id ="page-thisheader-center"> 
     <div> <xsl:call-template name="get.company.name"/></div> 
     </div> 

나는 그것이 전부라고 생각합니다. 누군가가 도울 수 있기를 바랍니다. 나는 최고 라인을 수정하는 방법에 완전히 곤란하다. 감사!!

UPDATE는 짧은 선은 긴 제목의 포장 때문이다. @ top-left, @ top-center 및 @ top-right 여백을 고정 너비로 ​​고정하여 제목이 제목에 따라 전체 머리글을 더 작게/크게 슬라이드하지 않고 줄 바꿈 할 수 있도록 할 수 있습니까? BTW : 나는 공백을 시도했다 : nowrap; @ 상단 왼쪽 여백에 있지만 전체 제목이 긴 제목이있는 페이지의 오른쪽에서 벗어나게됩니다.

솔루션에 도움이되기를 바랍니다. 미리 감사드립니다 !!

Answer 1

@top-left, 및 @top-right을 사용하여 원하는 작업을 수행 할 수 있는지 잘 모르겠습니다. 내가 샘플 코드를하려고 할 때, 나는 이런 식으로 뭔가를 얻을 :

       THE COMPANY NAME 
____________________________________________________________________ 

_____            ____      
title            date 

하나의 솔루션을 사용하면 헤더의 세 부분을 포함하는 하나의 헤더를 사용하는 것입니다 원하는 것을 얻을 수 있습니다.

상단 중앙 구성 요소는 페이지의 전체 너비에 걸쳐 있으며, 내부에 개의 레이아웃을 배치 할 수 있습니다. 예를 들어

:

@page { 
    size: letter; 
    margin-top: 0.8in; 
    margin-bottom: 0.5in; 
    @top-center {content: element(centerHeader);} 
} 

#page-thisheader-center { 
    position: running(centerHeader); 
} 

#company { 
    border-bottom: #90aac5 1px solid; 
    text-align:center; 
} 
#line2 { 
    border-bottom: #90aac5 1px solid; 
} 
#article{ 
    float:left; 
} 
#date { 
    border-left: #90aac5 solid 1px; 
    margin-left: 6in; 
} 

그리고 : 일

<div id="page-thisheader-center"> 
    <div id="company">THE COMPANY NAME</div> 
    <div id="line2"> 
     <div id="article">Name of the article</div> 
     <div id="date">Date : 04/07/2013</div> 
    </div> 
    </div>