CSS и заголовок "Летающая тарелка"

Компания, в которой я работаю, уже давно использует летающую тарелку. Недавно они изменили формат заголовка на более сложный, который выглядит так:

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

К сожалению, я не могу заставить его выглядеть так, как показано выше. THe закрывается, я могу заставить его выглядеть так, как будто верхняя строка короче нижней строки:

                              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;

Тег выглядит следующим образом для идентификаторов и классов выше:

      <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>

Думаю, это все. Я надеюсь, что кто-то может помочь. Я совершенно не понимаю, как исправить верхнюю линию. Спасибо!!

ОБНОВЛЕНИЕ. Короткая строка связана с переносом более длинных заголовков. Есть ли способ исправить поля @ top-left, @ top-center и @ top-right до фиксированной ширины, чтобы заголовок мог переноситься, не заставляя весь заголовок сдвигаться меньше / больше в зависимости от заголовка? Кстати: я пробовал пробел: nowrap; на @ верхнем левом поле, но это просто приводит к тому, что весь заголовок соскальзывает с правой стороны страницы с длинными заголовками.

Надеюсь, это поможет найти решение. Заранее спасибо!!


css flying-saucer
person user1937895    schedule 17.04.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я не знаю, можно ли делать то, что вы хотите, используя @top-left, @top-center и @top-right. Когда я пробую ваш пример кода, я получаю что-то вроде этого:

                               THE COMPANY NAME
____________________________________________________________________

_____                                               ____                    
title                                               date

Одним из решений для получения того, что вы хотите, было бы использование одного заголовка @top-center, содержащего три части заголовка.

Компонент @ top-center будет занимать всю ширину страницы, и вы можете разместить в нем три своих div.

Например :

@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>
person obourgain    schedule 18.04.2013