Не отображает полностью изображение

@MePHiSto88 · Регистрация: 13.02.2015

Студворк — интернет-сервис помощи студентам

Добрый день. Столкнулся с такой проблемой: переместил слайдер и теперь он отображается наполовину.

вот код:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div#slideshow{
    overflow: hidden;
    position: absolute;
    top: 660px;
    height: 385px;
    margin-bottom: 15px;
    width: 960px;
    
}
 
div#slideshow ul#slides{
    position: absolute;
    margin: 0 auto;
    width: 922px;
    height: 340px;
    top: 20px;
    left: 20px;
}

@Mikhail Shell · 23.02.2015, 15:40

Сообщение от MePHiSto88

слайдер

MePHiSto88, немного не понял где он.

@MePHiSto88 · 23.02.2015, 15:43 **[ТС]**

На картинке не полная рамочка со словами ВНИМНИЕ! т.е. то, что на скрине, болше не отображается...

@Mikhail Shell · 23.02.2015, 15:44

Покажите css того блока, который ниже слайдера.

@MePHiSto88 · 23.02.2015, 15:48 **[ТС]**

вот:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* SLIDESHOW ------------------------------------------------------------*/
 
div#slideshow{
    overflow: hidden;
    position: absolute;
    top: 660px;
    height: 385px;
    margin-bottom: 15px;
    width: 960px;
    
}
 
div#slideshow ul#slides{
    position: absolute;
    margin: 0 auto;
    width: 922px;
    height: 340px;
    top: 20px;
    left: 20px;
}
 
div#slideshow span{
    display: block;
    background: url(../img/slideshow.png) no-repeat;
    width: 960px;
    height: 385px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    cursor: default;
}
 
#slideshow-nav-holder{
    display: block;
    position: absolute;
    overflow: hidden;
    height: 20px;
    bottom: 30px;
    left: 40px;
    z-index: 20;
}
 
#slideshow-nav{
    display: block;
    overflow: hidden;
    height: 20px;
    background: url(../img/slideshow-nav-bg.png) repeat-x top left;
    float: left;
}
 
#slideshow-nav-holder .nav-left{
    width: 13px;
    height: 20px;
    float: left;
    background: url(../img/slideshow-nav-left.png) no-repeat top left;
}
 
#slideshow-nav-holder .nav-right{
    width: 13px;
    height: 20px;
    float: left;
    background: url(../img/slideshow-nav-right.png) no-repeat top right;
}
 
#slideshow-nav a { 
    display: block;
    float: left;
    background: url(../img/slideshow-button.png) no-repeat; 
    height: 12px;
    width: 12px;
    margin-top: 7px;
    text-indent: -9000px;
    margin-right: 2px;
    margin-left: 2px;
}
 
#slideshow-nav a:hover{
    background: url(../img/slideshow-button.png) no-repeat 0px -24px;
}
 
#slideshow-nav a.activeSlide { 
    background: url(../img/slideshow-button.png) no-repeat 0px -12px;
}
 
 
/* SLIDES ------------------------------------------------------------*/
 
.slide-fade,
.slide-scroll{
    overflow: hidden;
    border: 1px solid white;
    margin-bottom: 18px;
}

@Mikhail Shell · 23.02.2015, 15:48

Сообщение от MePHiSto88

height: 385px;

MePHiSto88, возможно проблема из-за того что вы задали, высоту. Нужно чтобы блок сам растягивался под содержимое.

@MePHiSto88 · 23.02.2015, 15:54 **[ТС]**

Попробовал убрать, слайдер совсем пропал, так что проблема не в этом

@Mikhail Shell · 23.02.2015, 16:00

MePHiSto88, попробуйте float left добавить к #slideshow, а к блоку ниже clear both. И все таки желательно высоту слайдшоу не задавать.

@MePHiSto88 · 23.02.2015, 16:08 **[ТС]**

вставил float: left; и clear: both; - абсолютно никаких изменений, попытался убрать высоту - исчезает сам слайдер, причём если увеличить высоту изменений нет, если уменьшить, то уменьшается площадь отображения...

@Mikhail Shell · 23.02.2015, 16:09

JS юзается?

@MePHiSto88 · 23.02.2015, 16:32 **[ТС]**

Вообще юзается, но к стилям не должно иметь какого-либо отношения

@Mikhail Shell · 23.02.2015, 16:38

А какая кодировка у файлов?

@MePHiSto88 · 23.02.2015, 17:27 **[ТС]**

UTF-8, если это вы имели ввиду...
Попробовал отключить все подключённые JS, они никак не влияют на стиль страницы...

@Academik · 23.02.2015, 19:17

MePHiSto88, дайте код слайдера html/css. Из темы не видно всей картины, но скорее всего высота слайдера меньше, чем высота изображения, поэтому и обрезает.

@MePHiSto88 · 23.02.2015, 21:13 **[ТС]**

Держите:

HTML5
1
2
3
4
5
6
7
8
9
10
<!-- slideshow -->
            
            <div id="slideshow">
                <a href="" id="slideshow-link" ><span></span></a>
                <ul id="slides">
                    <li><a href=""><img src="slides/slider1.jpg"  alt="Imagen" /></a></li>
                    <li><a href=""><img src="slides/slider2.jpg"  alt="Imagen" /></a></li>
                </ul>
            </div>
            <!-- ENDS slideshow -->

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/* SLIDESHOW ------------------------------------------------------------*/
 
div#slideshow{
    overflow: hidden;
    position: absolute;
    top: 660px;
    height: 385px;
    margin-bottom: 15px;
    width: 960px;
    float: left;
    
}
 
div#slideshow ul#slides{
    position: absolute;
    margin: 0 auto;
    width: 922px;
    height: 340px;
    top: 20px;
    left: 20px;
    clear: both;
}
 
div#slideshow span{
    display: block;
    background: url(../img/slideshow.png) no-repeat;
    width: 960px;
    height: 385px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    cursor: default;
}
 
#slideshow-nav-holder{
    display: block;
    position: absolute;
    overflow: hidden;
    height: 20px;
    bottom: 30px;
    left: 40px;
    z-index: 20;
}
 
#slideshow-nav{
    display: block;
    overflow: hidden;
    height: 20px;
    background: url(../img/slideshow-nav-bg.png) repeat-x top left;
    float: left;
}
 
#slideshow-nav-holder .nav-left{
    width: 13px;
    height: 20px;
    float: left;
    background: url(../img/slideshow-nav-left.png) no-repeat top left;
}
 
#slideshow-nav-holder .nav-right{
    width: 13px;
    height: 20px;
    float: left;
    background: url(../img/slideshow-nav-right.png) no-repeat top right;
}
 
#slideshow-nav a { 
    display: block;
    float: left;
    background: url(../img/slideshow-button.png) no-repeat; 
    height: 12px;
    width: 12px;
    margin-top: 7px;
    text-indent: -9000px;
    margin-right: 2px;
    margin-left: 2px;
}
 
#slideshow-nav a:hover{
    background: url(../img/slideshow-button.png) no-repeat 0px -24px;
}
 
#slideshow-nav a.activeSlide { 
    background: url(../img/slideshow-button.png) no-repeat 0px -12px;
}
 
 
/* SLIDES ------------------------------------------------------------*/
 
.slide-fade,
.slide-scroll{
    overflow: hidden;
    border: 1px solid white;
    margin-bottom: 18px;
}

@Academik · 23.02.2015, 23:18

MePHiSto88, какая высота картинок в слайдере?
Вангую:

CSS
1
ul#slides img{max-height: 100%;}

@MePHiSto88 · 24.02.2015, 16:05 **[ТС]**

Из похожего нашёл только

CSS
1
2
3
4
5
6
7
8
9
10
html{
    height: 100%;
}
 
body {
    line-height: 1;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:  100%;
    height: 100%;
}

но они не влияют на отображение слайдера

@Mikhail Shell · 24.02.2015, 16:20

Иногда "магия" происходит из-за кодировки.

Сообщение от MePHiSto88

UTF-8, если это вы имели ввиду...

MePHiSto88, попробуйте в notepad++ (или где вы все пишите) в настройках задать utf-8 без BOM, а затем добавить в html head

HTML5
1
<meta charset="utf-8" />

@MePHiSto88 · 24.02.2015, 16:52 **[ТС]**

у меня уже есть вот такая строка

HTML5
1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Добавлено через 12 минут
Может будет полезна ещё такая инфа: если слайдер поднимаю вверх, то он отображается целиком

@Mikhail Shell · 24.02.2015, 19:10

Сообщение от MePHiSto88

Может будет полезна ещё такая инфа: если слайдер поднимаю вверх, то он отображается целиком

Тогда есть следующий вариант:
поднимите слайдер вверх, а блок ниже слайдера опустите ниже.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@MePHiSto88 0 / 0 / 0 Регистрация: 13.02.2015 Сообщений: 105
	23.02.2015, 15:43 [ТС]
	На картинке не полная рамочка со словами ВНИМНИЕ! т.е. то, что на скрине, болше не отображается... 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	23.02.2015, 15:44
	Покажите css того блока, который ниже слайдера. 0

@MePHiSto88 0 / 0 / 0 Регистрация: 13.02.2015 Сообщений: 105
	23.02.2015, 15:54 [ТС]
	Попробовал убрать, слайдер совсем пропал, так что проблема не в этом 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	23.02.2015, 16:00
	MePHiSto88, попробуйте float left добавить к #slideshow, а к блоку ниже clear both. И все таки желательно высоту слайдшоу не задавать. 0

@MePHiSto88 0 / 0 / 0 Регистрация: 13.02.2015 Сообщений: 105
	23.02.2015, 16:08 [ТС]
	вставил float: left; и clear: both; - абсолютно никаких изменений, попытался убрать высоту - исчезает сам слайдер, причём если увеличить высоту изменений нет, если уменьшить, то уменьшается площадь отображения... 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	23.02.2015, 16:09
	JS юзается? 0

@MePHiSto88 0 / 0 / 0 Регистрация: 13.02.2015 Сообщений: 105
	23.02.2015, 16:32 [ТС]
	Вообще юзается, но к стилям не должно иметь какого-либо отношения 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	23.02.2015, 16:38
	А какая кодировка у файлов? 0

@MePHiSto88 0 / 0 / 0 Регистрация: 13.02.2015 Сообщений: 105
	23.02.2015, 17:27 [ТС]
	UTF-8, если это вы имели ввиду... Попробовал отключить все подключённые JS, они никак не влияют на стиль страницы... 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	23.02.2015, 19:17
	MePHiSto88, дайте код слайдера html/css. Из темы не видно всей картины, но скорее всего высота слайдера меньше, чем высота изображения, поэтому и обрезает. 0