Проблемы новичков в CSS

Not4all

Привет,

Я пытаюсь использовать свободно доступный код CSS для настройки InfoWindows моих карт Google.

Как мне избавиться от этой полосы прокрутки?

Код такой

.gm-style-iw {

ширина: 300 пикселей! важно;

вверху: 15 пикселей !важно;

слева: 0 пикселей !важно;

цвет фона: #fff;

box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);

граница: 1 пиксель сплошной rgba(72, 181, 233, 0,6);

радиус границы: 2px 2px 10px 10px;

}

#iw-контейнер {

ширина: авто;

высота: авто;

нижнее поле: 10 пикселей;

}

#iw-container .iw-title {

ширина: 310 пикселей;

семейство шрифтов: «Open Sans Condensed», без засечек;

размер шрифта: 22px;

вес шрифта: 400;

отступ: 10 пикселей;

цвет фона: #48b5e9;

белый цвет;

маржа: 0;

граница-радиус: 2px 2px 0 0;

}

#iw-container .iw-content {

ширина: 310 пикселей;

высота: авто;

размер шрифта: 13 пикселей;

высота строки: 18 пикселей;

вес шрифта: 400;

поле справа: 1 пиксель;

отступы: 15 пикселей 5 пикселей 20 пикселей 15 пикселей;

/*

максимальная высота: 140 пикселей;

переполнение-y: прокрутка;

*/

переполнение-х: скрыто;

}

.iw-content img {

плавать: вправо;

поле: 0 5 пикселей 5 пикселей 10 пикселей;

}

.iw-subTitle {

размер шрифта: 16 пикселей;

вес шрифта: 700;

отступ: 5 пикселей 0;

}

.iw-bottom-gradient {

позиция: абсолютная;

ширина: 310 пикселей;

высота: 25 пикселей;

внизу: 10 пикселей;

справа: 18 пикселей;

фон: линейный градиент (вниз, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

фон: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

фон: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

фон: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

}

#iw-wrap {

ширина: 250 пикселей;

маржа: 0 авто;

}

#iw-left_col {

плыть налево;

ширина: 125 пикселей;

}

#iw-right_col {

плавать: вправо;

ширина: 125 пикселей;

}

vContent = ' '; если (vOnTimes == "Y") {
vContent = vContent + '
' + vDriverNames + '
';
} еще {
vContent = vContent + '
' + vDriverNames + '
';
}

vContent = vContent +
'
' +
'
' + vHubs + 'Хаб' + '
Грузовик' + vTruckNames + '
' +
«Последнее обновление:» + vTimestamps +
'

Просмотр остановок

' +
'' +
'

8BuZzie8

Привет,

Я пытаюсь визуализировать ваш CSS и вижу некоторые моменты, которые могут быть проблемой:

Обратите внимание на следующие классы и их ширину.

.gm-style-iw {

ширина: 300 пикселей! важно;

#iw-container .iw-title {

ширина: 310 пикселей;

#iw-container .iw-content {

ширина: 310 пикселей;

.iw-bottom-gradient {

ширина: 310 пикселей;

Вы заметите .gm-style-iw, и я считаю, что это основной контейнер/коробка.

Таким образом, эти 310 пикселей (которые, как я полагаю, находятся внутри .gm-style-iw) продвигают контент.

Вот почему у него автоматически появляется вертикальная полоса прокрутки.

Решение:

Убедитесь, что ширина всего контейнера внутри не превышает ширину основного контейнера.
На самом деле, если вам не нужны 310 пикселей, вы можете удалить их или сделать их 100%.
Примечание. Если вы сделаете их 100% и у них есть отступы. Обязательно добавьте размер окна: border-box;

Я надеюсь, что это поможет. Спасибо и храни Бог всегда!
www.alfieindesigns.com

FerumFlex

Этот код нам совершенно не поможет, поскольку это всего лишь CSS, не связанный с реальным HTML, который он стилизует.

Почему бы просто не дать ссылку на реальный сайт? Или хотя бы пример где-нибудь выложить? Но из CSS кажется, что полоса прокрутки определена здесь: #iw-container .iw-content - поэтому либо измените ширину, либо удалите определение полосы прокрутки, либо что-то в этом роде.

Stas79

Кнопка/значок закрытия сообщает нам, что сам контейнер менее широк, чем должен был быть. Увеличение ширины должно решить вашу проблему, а также вернуть кнопку на место (по центру в верхнем правом углу).

Похожие темы	Дата
Как сделать интерактивный стенд	19.12.2024, 05:12
Почему Лебедев?	19.12.2024, 05:12
Помогите советом как стать дизайнером?	19.12.2024, 05:12
Многотематический блог — хорошая идея? Как мне начать?	19.12.2024, 05:12
Как удалить двойную прокрутку по оси Y без скрытого содержимого?	19.12.2024, 05:12
Создание списка в адаптивном списке из трех столбцов	19.12.2024, 05:12
CMS для IT-технической документации	19.12.2024, 05:12
Посоветуйте, пожалуйста	19.12.2024, 05:12
Создание вопросов поддоменов	19.12.2024, 05:12
Выпадающие меню остались в прошлом?	19.12.2024, 05:12

Проблемы новичков в CSS

Not4all

8BuZzie8

FerumFlex

Stas79

I AM

Интересно