Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Вёрстака стихов в HTML

Автор: kogem 8.11.2008, 22:33

Как с помощьи HTML/CSS можно правильно верстать стихи? Есть ли для этого специальный тег?

Например мне нужно написать стих, чтобы он центрировался по центру, но начала строк были бы на одной вертикальной линии  вот так:

                               Я поэт, зовусь незнайка,
                               От меня вам балалайка!
                               ---------------------------------------------
                               ---------------------------------------
                               ----------------------------------

При этом концы строк могут оканчиваться на разных расстояниях.

Автор: Itsys 8.11.2008, 23:06

Код


<div align="center">
    <table border="0">
        <tr>
            <td nowrap>
                Я поэт, зовусь незнайка,<br>
                От меня вам балалайка!<br>
                ---------------------------------------------<br>
                ---------------------------------------<br>
                ----------------------------------<br>
            </td>
        </tr>
    </table>
</div>

Автор: kogem 8.11.2008, 23:15

Itsys, В общем понятно. А оптимизировать никак нельзя, чтобы код не такой длинный был, с помощью span и CSS или ещё чего?

Добавлено через 1 секунду
Itsys, В общем понятно. А оптимизировать никак нельзя, чтобы код не такой длинный был, с помощью span и CSS или ещё чего?

Автор: bars80080 8.11.2008, 23:56

да можно:

Код


<style>
#cont { text-align: center; }
#stih { margin: 0 auto; text-align: left; }
</style>

<div id="cont">
<div class="stih">
<p>маленькие дети</p>
<p>ни за что на свете</p>
<p>не ходите</p>
<p>в африку гулять</p>
</div>
</div>

Автор: Itsys 9.11.2008, 08:48

bars80080, а что делать с переносом строк? Если это вставить в довольно узкую ячейку таблицы строки начнут переноситься....

Автор: bars80080 9.11.2008, 11:05

Код


#cont { overflow: scroll; }

Автор: ksnk 9.11.2008, 11:17

bars80080,
Itsys, вероятнее всего имел ввиду что-то такое

Код


<nobr>маленькие дети</nobr>
<nobr>ни за что на свете</nobr>
<nobr>не ходите</nobr>
<nobr>в африку гулять</nobr>

Хотя overflow тут тоже на месте smile

Автор: kogem 9.11.2008, 18:54

А ещё можно так:

<style>
.cont { text-align: center;overflow: scroll; }
#stih { margin: 0 auto; text-align: left; }
</style>

<div class="cont" id="stih">
<p>маленькие дети</p>
<p>ни за что на свете</p>
<p>не ходите</p>
<p>в африку гулять</p>
</div>

Автор: bars80080 9.11.2008, 21:07

к сожалению, вынужден признать, что это почему-то в ИЕ6 и опере не катит. завтра если не забуду надо будет поковыряться

Автор: FortMax 10.11.2008, 03:12

а если использовать

Код


<pre> ... </pre>

Автор: kogem 10.11.2008, 10:54

Вот это будет действовать в Opera и IE, причём даже без align, он просто для наглядности)

<table align="center">
<tr><td>
<p>маленькие дети</p>
<p>ни за что на свете</p>
<p>не ходите</p>
<p>в африку гулять</p>
</td></tr>
</table>