Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Вёрстака стихов в HTML 
:(
    Опции темы
kogem
Дата 8.11.2008, 22:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог

Репутация: нет
Всего: нет



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

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

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

 При этом концы строк могут оканчиваться на разных расстояниях.
PM MAIL WWW ICQ   Вверх
Itsys
Дата 8.11.2008, 23:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



Код

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

PM MAIL WWW Skype   Вверх
kogem
Дата 8.11.2008, 23:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог

Репутация: нет
Всего: нет



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

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

PM MAIL WWW ICQ   Вверх
bars80080
Дата 8.11.2008, 23:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



да можно:

Код

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


Это сообщение отредактировал(а) bars80080 - 8.11.2008, 23:57
PM MAIL WWW   Вверх
Itsys
Дата 9.11.2008, 08:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



bars80080, а что делать с переносом строк? Если это вставить в довольно узкую ячейку таблицы строки начнут переноситься.... 
PM MAIL WWW Skype   Вверх
bars80080
Дата 9.11.2008, 11:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Код

#cont { overflow: scroll; }

PM MAIL WWW   Вверх
ksnk
Дата 9.11.2008, 11:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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

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


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


Это сообщение отредактировал(а) ksnk - 9.11.2008, 11:17


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
kogem
Дата 9.11.2008, 18:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог

Репутация: нет
Всего: нет



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

<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>
PM MAIL WWW ICQ   Вверх
bars80080
Дата 9.11.2008, 21:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



к сожалению, вынужден признать, что это почему-то в ИЕ6 и опере не катит. завтра если не забуду надо будет поковыряться
PM MAIL WWW   Вверх
FortMax
Дата 10.11.2008, 03:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 485
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО

Репутация: 3
Всего: 5



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

<pre> ... </pre>

PM MAIL ICQ   Вверх
kogem
Дата 10.11.2008, 10:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог

Репутация: нет
Всего: нет



Вот это будет действовать в Opera и IE, причём даже без align, он просто для наглядности)
 
<table align="center">
<tr><td>
<p>маленькие дети</p>
<p>ни за что на свете</p>
<p>не ходите</p>
<p>в африку гулять</p>
</td></tr>
</table> 
 
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0517 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.