Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
RustamVarikov
0 / 0 / 0
Регистрация: 23.08.2017
Сообщений: 7
1

Сайт растягивается при длинном заголовке

07.01.2018, 06:33. Просмотров 891. Ответов 7
Метки css, html (Все метки)

Пытаюсь отредактировать центральный заголовок сайта:
http://ahmedessa.net/box/index.html Сайт начинает некорректно себя вести. Как пофиксить корявость отображения для того, чтобы title отображался лаконично посередине?



1 - стандартный заголовок в брузере:
HTML5
1
2
3
4
5
6
7
<h1 class="box-headline letters rotate-2">
                    <span class="box-words-wrapper" style="width: 619px;">
                        <b class="is-visible" style="opacity: 1;"><i class="in"><em>d</em></i><i class="in"><em>e</em></i><i class="in"><em>s</em></i><i class="in"><em>i</em></i><i class="in"><em>g</em></i><i class="in"><em>n</em></i><i class="in"><em>.</em></i></b>
                        <b style="opacity: 1;"><i class="out"><em>&nbsp;</em></i><i class="out"><em>c</em></i><i class="out"><em>o</em></i><i class="out"><em>d</em></i><i class="out"><em>i</em></i><i class="out"><em>n</em></i><i class="out"><em>g</em></i><i class="out"><em>.</em></i></b>
                        <b style="opacity: 1;"><i class="out"><em>g</em></i><i class="out"><em>r</em></i><i class="out"><em>a</em></i><i class="out"><em>p</em></i><i class="out"><em>h</em></i><i class="out"><em>i</em></i><i class="out"><em>c</em></i><i class="out"><em>.</em></i></b>
                    </span>
                </h1>
2 - Меняю например на:
HTML5
1
2
3
4
5
6
7
<h1 class="box-headline letters rotate-2">
                    <span class="box-words-wrapper" style="width: 2281px;">
                        <b class="is-visible" style="opacity: 1;"><i class="out"><em>У</em></i><i class="out"><em>с</em></i><i class="out"><em>т</em></i><i class="out"><em>а</em></i><i class="out"><em>н</em></i><i class="out"><em>о</em></i><i class="out"><em>в</em></i><i class="out"><em>к</em></i><i class="out"><em>а</em></i><i class="out"><em> </em></i><i class="out"><em>в</em></i><i class="out"><em>и</em></i><i class="out"><em>д</em></i><i class="out"><em>е</em></i><i class="out"><em>о</em></i><i class="out"><em>н</em></i><i class="out"><em>а</em></i><i class="out"><em>б</em></i><i class="out"><em>л</em></i><i class="out"><em>ю</em></i><i class="out"><em>д</em></i><i class="out"><em>е</em></i><i class="out"><em>н</em></i><i class="out"><em>и</em></i><i class="out"><em>я</em></i><i class="out"><em>.</em></i></b>
                        <b style="opacity: 1;"><i class="in"><em>&nbsp;</em></i><i class="in"><em>П</em></i><i class="in"><em>р</em></i><i class="in"><em>о</em></i><i class="in"><em>к</em></i><i class="in"><em>л</em></i><i class="in"><em>а</em></i><i class="in"><em>д</em></i><i class="in"><em>к</em></i><i class="in"><em>а</em></i><i class="in"><em> </em></i><i class="in"><em>к</em></i><i class="in"><em>а</em></i><i class="in"><em>б</em></i><i class="in"><em>е</em></i><i class="in"><em>л</em></i><i class="in"><em>е</em></i><i class="in"><em>й</em></i><i class="in"><em>.</em></i></b>
                        <b style="opacity: 1;"><i><em>О</em></i><i><em>б</em></i><i><em>с</em></i><i><em>л</em></i><i><em>у</em></i><i><em>ж</em></i><i><em>и</em></i><i><em>в</em></i><i><em>а</em></i><i><em>н</em></i><i><em>и</em></i><i><em>е</em></i><i><em>.</em></i></b>
                    </span>
                </h1>

3- Исходники темы:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <!-- box-intro -->
        <section class="box-intro">
            <div class="table-cell">
                <h1 class="box-headline letters rotate-2">
                    <span class="box-words-wrapper">
                        <b class="is-visible">Установка видеонаблюдения.</b>
                        <b>&nbsp;Прокладка кабелей.</b>
                        <b>Обслуживание.</b>
                    </span>
                </h1>
                <h5>everything you need to build your personal portfolio</h5>
            </div>
 
            <div class="mouse">
                <div class="scroll"></div>
            </div>
        </section>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.01.2018, 06:33
Ответы с готовыми решениями:

Почему сайт растягивается?
Как сделать чтобы сайт во всех расширениях монитора был одинаковый не...

Сайт не растягивается по всему экрану!
Ребят помогите пожалуйста! Шапка на сайте не растягивается по всему экрану,...

С !doctype высота header не растягивается попроцентно, а без него растягивается
Не нашел подобной другой темы. Имею такую же проблему. &lt;!DOCTYPE html PUBLIC...

Принудительный перевод строки при длинном слове в таблице
Приветствую. Вобщем есть таблица. тегу td задана ширина 65 &lt;td width=&quot;65&quot;&gt;...

При уменьшении масштаба, футер не растягивается
Кому не жалко немного времени, чтобы помочь новичку, пожалуйста напишите в...

7
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 182
07.01.2018, 16:47 2
не особо понятна проблема, архив бы, вышеизложенной разметки как-то маловато, там ведь и ротатор текста какой-то используется, и стили, глянуть бы под капот
0
RustamVarikov
0 / 0 / 0
Регистрация: 23.08.2017
Сообщений: 7
08.01.2018, 05:10  [ТС] 3
Сайт растягивается при длинном заголовке
В оригинале выглядит так.

Сайт растягивается при длинном заголовке
Растягивается (если заменить дефолтный title) или вписать длинное слово.

Box Portfolio (1).zip Вот оригинальные исходники (оригинальный линк для скачки http://ahmedessa.net/box.html)
0
RustamVarikov
0 / 0 / 0
Регистрация: 23.08.2017
Сообщений: 7
10.01.2018, 20:42  [ТС] 4
Может ли кто нибудь мне помочь разобраться, какой параметр нужно пофиксить для корректного отображения...
0
Mikhail Shell
50 / 50 / 39
Регистрация: 15.11.2014
Сообщений: 626
10.01.2018, 20:46 5
Лучший ответ Сообщение было отмечено RustamVarikov как решение

Решение

Уменьшите font-size у заголовка и будет решена проблема.
1
RustamVarikov
0 / 0 / 0
Регистрация: 23.08.2017
Сообщений: 7
11.01.2018, 08:05  [ТС] 6
Сайт растягивается при длинном заголовке
Если поправить, проблема остаётся прежней.
0
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 182
11.01.2018, 09:00 7
Лучший ответ Сообщение было отмечено RustamVarikov как решение

Решение

Попробуйте прописать в стиле
CSS
1
.box-words-wrapper {width: 100% !important;}
ну и меньше шрифт соответственно
1
RustamVarikov
0 / 0 / 0
Регистрация: 23.08.2017
Сообщений: 7
11.01.2018, 09:34  [ТС] 8
Всем спасибо за помощь!
0
11.01.2018, 09:34
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.01.2018, 09:34

Не растягивается
Здравствуйте. У меня почему-то не повторяется по вертикали: background:...

Не растягивается блок
Помогите! Есть блок , фон задний фон части сайта, в котором расположено меню и...

Блок не растягивается
Почему отступ слева больше, чем справа, а если убрать в #content...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru