Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
qrax
0 / 0 / 0
Регистрация: 29.11.2009
Сообщений: 23
1

Верстка, картинки некорректно отображаются или не отображаются

23.09.2013, 20:13. Просмотров 1989. Ответов 7
Метки нет (Все метки)

У меня имеется трехколоночный сайт, по правой колонке будет располагаться картинка, состоящий из трех частей (были созданы три вложенных DIV'a для этих целей), первая часть имеет размер 175х430рх прижат к верху колонки, далее следует картинка с размеров 175х1рх, которая должна повторяться по высоте окна страницы, третья картинка должна быть прижата к низу. Правая колонка должна иметь фоновый рисунок(200х1рх), который должен так же повторяться по высоте страницы. На правой колонке будет так же текст с неким заголовком в рамке.
Проблема следующая: по левой колонке отрисовывается первая картинка, последующие не рисуются, фоновый рисунок правой колонки повторяется по высоте текста,а не по высоте страницы, помогите с идеями

HTML
HTML5
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
 <div class="left">
  Привет!
    <div class="lefttop">
        </div>
        Привет!
        <div class="leftcenter">
        </div>
        Привет!
        <div class="leftfoot">
        Привет!
        </div>
  </div>
  <div class="content">
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </div>
  <div class="right"> Привет!  
 </div>
CSS
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
.left {
    float: left;
    width: 175px;/*padding-bottom: 100px; */
}
.lefttop {
    height: 430px;
    background-image: url(../images/lefta.jpg);
}
.leftcenter {
    height: 100%;
    background: url(../images/leftar.jpg);
    background-repeat: repeat-y;
    background-position: top left;
    margin: auto 0;
}
.leftfoot {
    height: 200;
    background-image: url(../images/leftaf.png);
    background-repeat: no-repeat;
    background-position: center;
}
.content {
    padding: 10px 0;
    width: 625px;
    float: left;
    background-color: #009;
}
.right {
    float: left;
    width: 200px;
    background-image: url(../images/righta.jpg);
    background-repeat: repeat-y;
}
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.09.2013, 20:13
Ответы с готовыми решениями:

Блочная вёрстка. Не отображаются картинки
Создал шапку для сайта в фотошопе, а она не отображается. Даже больше скажу, у меня все картинки не...

Контент некорректно отображаются в IE
Сайт на Джумле (на форуме джумловодов ответа не дождался). Проблема в том, что материалы сайта...

Элементы отображаются некорректно
Два столбца column-1 and column-2 должни отображаться по-идее внутри блока header(обозначен красним...

Некорректно отображаются фото
Вот сайт: http://fitnes-vostok.ru/about/coaches/ В конце есть Сафиуллина Зульфия и Пащенко...

7
DesignBR
10 / 10 / 1
Регистрация: 30.06.2013
Сообщений: 87
23.09.2013, 20:21 2
Min-height:300px;/*любое число*/
0
qrax
0 / 0 / 0
Регистрация: 29.11.2009
Сообщений: 23
24.09.2013, 16:32  [ТС] 3
И куда это запихнуть?

Мне надо чтоб боковые картины(с размером 175х1рх) повторялись по высоте контента (средняя колонка), все должно выглядеть следующим образом:
_______________________________________________________
Header
_______________________________________________________
КартинаЛевая1 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая3 | ТекстОсновногоКонтента | КартинаПравая
--------------------------------------------------------------
footer
--------------------------------------------------------------

"КартинаЛевая2" и "КартинаПравая" - повторяются по высоте основного контента
0
wlizsak
0 / 0 / 0
Регистрация: 09.09.2013
Сообщений: 4
24.09.2013, 18:33 4
Попробуйте следующую вложенность:
HTML5
1
2
3
4
5
6
<div class="left_col">
    <div class="rigth_col">
          <div class="center">
          </div>
    </div>
</div>
Задайте каждому блоку ширину. Т.е. для левой колонки задаете ширину равную 175px(для своего фона) + 201px (для фона правой колонки)+ ширина центральной колонки. Правой колнки задаете float:right; для центральной колонки float:left;
По мере наполнения центральной колонки она будет растягивать правую, а та в свою очередь левую.
И внимательнее будьте с margin'ами, учитываейте и их при расчете ширины блоков.
Большая вложенность правда получается.
0
qrax
0 / 0 / 0
Регистрация: 29.11.2009
Сообщений: 23
25.09.2013, 13:12  [ТС] 5
Не совсем получается, content все время накладывается либо на left_col либо на right_col...
0
wlizsak
0 / 0 / 0
Регистрация: 09.09.2013
Сообщений: 4
25.09.2013, 16:15 6
.left_col тоже нужно добавить float, чтобы не схлопывалось. А то что накладывается, возможно дело в margin или padding. Выставите везде нули или задавайте ширину контейнеров учитывая отступы.
0
qrax
0 / 0 / 0
Регистрация: 29.11.2009
Сообщений: 23
26.09.2013, 12:58  [ТС] 7
HTML5
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
<div class="left_col">
  Привет!
   <div class="right_col">
    <div class="content">
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </div>
 </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.left_col {
    float: left;
    width: 1000px;
    background: url(../images/leftar.jpg);
    background-repeat: repeat-y;
}
 
.content {
    width: 625px;
    float: left;
    background-color: #009;
    margin-left: -625px;
}
.right_col {
    float: right;
    width: 200px;
    background-image: url(../images/righta.jpg);
    background-repeat: repeat-y;
}
Такой дизайн удалось сделать
_______________________________________________________
Header
_______________________________________________________
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
--------------------------------------------------------------
footer
--------------------------------------------------------------

НО МНЕ НАДО:
_______________________________________________________
Header
_______________________________________________________
КАРТИНАЛЕВАЯ1 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КартинаЛевая2 | ТекстОсновногоКонтента | КартинаПравая
КАРТИНАЛЕВАЯ3 | ТекстОсновногоКонтента | КартинаПравая
--------------------------------------------------------------
footer
--------------------------------------------------------------
0
wlizsak
0 / 0 / 0
Регистрация: 09.09.2013
Сообщений: 4
28.09.2013, 17:13 8
Посмотрите множественные фоны
0
28.09.2013, 17:13
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.09.2013, 17:13

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

На главной странице сайта не отображаются картинки записей, а в самой записи все картинки отображаются
Доброго времени суток всем. Помогите пожалуйста разобраться. На главной странице сайта не...

Картинки отображаются некорректно (Joomla 1.5)
Здравствуйте! У нас на сайте http://gantsdso.ru раньше все картинки отображались нормально (как...

Не отображаются вовсе или неправильно отображаются пару сайтов
Доброго времени суток.При переходе только на два сайта для изучение иностранных языков (lingualeo,...

Некорректно отображаются страницы
Криво отображаться страницы... точнее текст некоторых страниц. в приложении много больших...


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

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

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