1

Вот статья(скрин):

alt text

Мой код, в котором вертикальный текст смещается на заголовок:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ПРОграммист</title>
  <style type="text/css">
   .center {
    width: 800px; /* Ширина слоя в пикселах */
    padding: 6px; /* Поля вокруг текста */
    margin: 0 auto; /* Выравниваем по центру */
    background: #4AA02C; /* Цвет фона */
    color:#ffffff;
   }
  </style>
  <style type="text/css">
   .center1 {
    width: 650px; /* Ширина слоя в пикселах */
    margin: 0 auto; /* Выравниваем по центру */
   }
  </style>
  <style type="text/css">
   .vertical {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: tb-rl;
width: 10px;
}
 </style>
 </head>
 <body>
<div class="center"><center><b>МЕРОПРИЯТИЯ, КОНФЕРЕНЦИИ</b></center></div>
<div class="center1">
<table width="100%" cellspacing="0" cellpadding="0">
   <tr> 
   <td width="10" valign="top"><center><div class="vertical">Александра Кушнарева
[email protected]</div></center></td><td valign="top">

<h2><font face="DejaVuSerif"><p style="color:#4AA02C">КОНФЕРЕНЦИЯ ПО РАЗРАБОТКЕ ПО CEE-SECR 2011</p></font>
</h2>
<p>
<img src="2.jpg" alt="автор статьи" align="right"
style="float: right; padding-left: 10px; padding-bottom: 10px;">
<font size="4"; face="DejaVuSerif"><p align="justify">Научно-практическая конференция «Разработка ПО 2011/ Software
Engineering Conference (Russia)» – ключевое событие индустрии
программирования России и стран Центральной и Восточной
Европы. История конференции началась в 2005 году. Тогда это
стало очень ярким событием для всего ИТ- сообщества России. За
прошедшие шесть лет конференция выросла до статуса международного
форума и стала знаковым событием как для российских разработчиков
программного обеспечения, так и для западных ИТ- специалистов.
</p>
</font>
</p>

</td>
</div>
 </body>
</html>

Как это исправить?

3
  • 1
    Извините, возможно я спросони, не совсем понятно что Вы хотите?
    – systemiv
    17 сен 2011 в 6:57
  • Советую вообще от этого избавиться. Оно хорошо выглядит на печати, но на вебе ужасно - будет трудно, например, скопировать и-мейл или просто прочесть - шея треснет
    – kotia
    17 сен 2011 в 7:24
  • просто нам дали задание статью из журнала сделать в HTML. тогда буду искать другую статью
    – gvenog
    17 сен 2011 в 9:00

1 ответ 1

3

Возможное решение:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>ПРОграммист</title>
        <style type="text/css">
           .center {
            text-align: center;
            margin:0px auto;
           }
           .green {
            background: #4AA02C; /* Цвет фона */
            color:#ffffff;  
           }
          .greencenter {
            background: #4AA02C; /* Цвет фона */
            color:#ffffff;  
            text-align: center;
            margin: 0px auto;  
           }
           .vertical {
            margin-bottom: -40px;
            text-align: right;
            transform:rotate(90deg);
            -webkit-transform:rotate(270deg);
            -moz-transform:rotate(270deg);
            -o-transform:rotate(270deg);
            float: left;
            padding-top: 230px;
            padding-left: 40px;
           }
        </style>
    </head>
    <body>
        <div class="green center" style="width: 800px;"><b>МЕРОПРИЯТИЯ, КОНФЕРЕНЦИИ</b></div>
        <div class="vertical">Александра Кушнарева<br/>[email protected]<hr color="#4AA02C" width="198px"/></div>
        <div class="center" style="width: 650px;">
            <h2><font face="DejaVuSerif"><p style="color:#4AA02C;">КОНФЕРЕНЦИЯ ПО РАЗРАБОТКЕ ПО CEE-SECR 2011</p></font></h2>
            <img src="2.jpg" alt="автор статьи" style="float: right; margin: 10px;">
            <font size="4"; face="DejaVuSerif">
            <p align="justify">Научно-практическая конференция «Разработка ПО 2011/ Software
            Engineering Conference (Russia)» – ключевое событие индустрии
            программирования России и стран Центральной и Восточной
            Европы. История конференции началась в 2005 году. Тогда это
            стало очень ярким событием для всего ИТ- сообщества России. За
            прошедшие шесть лет конференция выросла до статуса международного
            форума и стала знаковым событием как для российских разработчиков
            программного обеспечения, так и для западных ИТ- специалистов.
            </p>
            </font>
        </div>
    </body>
</html>
1
  • огромное спасибо! ВОПРОС РЕШЕН
    – gvenog
    18 сен 2011 в 15:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.