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 that you have read and understand our privacy policy and code of conduct.

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