Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Совет по использованию DIV с

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте,
посоветуйте как лучше сделать, следующую задачу, для максимальной совместимости в разных брандмауэрах пользователей.
 
Есть 9 картинок. Их необходимо расположить по таким позициям:
 
(Верхний левый угол no-repeat, 24х23) (Средине верхней части repeat-x) (Верхний правый угол no-repeat, 24х23)
(Левый центральный блок, repeat-y) (Средина 1х1, полная заливка, ширина 800px) (Правый центральный блок, repeat-y)
(Нижний левый угол no-repeat, 24х23) (Средина нижней части repeat-x) (Нижний правый угол no-repeat, 24х23)
 
я пробовал сделать так:
 

Код:
<style>
.tpage1 {background: url('/inew/1/top_left.png') no-repeat; width: 24px; height: 23px; display: table-cell;}
.tpage2 {background: url('/inew/1/top_body.png') repeat-x; width: 800px; height: 23px; display: table-cell;}
.tpage3 {background: url('/inew/1/top_right.png') no-repeat; width: 24px; height: 23px; display: table-cell;}
.bpage1 {background: url('/inew/1/body_left.png'); width: 24px; display: table-cell;}
.bpage2 {background: url('/inew/1/body_body.png'); width: 800px; display: table-cell; color: #a1a1a1; text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 18px;}
.bpage3 {background: url('/inew/1/body_right.png'); width: 24px; display: table-cell;}
.botpage1 {background: url('/inew/1/bottom_left.png') no-repeat; width: 24px; height: 23px; display: table-cell;}
.botpage2 {background: url('/inew/1/bottom_body.png') repeat-x; width: 800px; height: 23px; display: table-cell;}
.botpage3 {background: url('/inew/1/bottom_right.png') no-repeat; width: 24px; height: 23px; display: table-cell;}
</style>
 
<div><div class="tpage1"></div><div class="tpage2"></div><div class="tpage3"></div></div>
<div><div class="bpage1"></div><div class="bpage2">Тут типо текст</div><div class="bpage3"></div></div>
<div><div class="botpage1"></div><div class="botpage2"></div><div class="botpage3"></div></div>
 

 
но не устраивает следующие пункты:
1. Присутствует display: table-cell; (в EI7 < он не работает)
2. Необходимо задавать width: 800px; в верхней и нижней центральной части, как это убрать?
 
 
Есть ещё способы использовать примерно такой вариант:

Код:
<div class="tpage1"><div class="tpage3"><div class="tpage2"></div></div></div>

 
 
или с использованием before и after в .tpage2

Код:
<div class="tpage2"></div>

 
 
или через <table>, что самое не желательное. Что лучше всего выбрать?

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 22:05 28-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
Вопросы по CSS
 

Цитата:
в EI7 < он не работает

пора бы забыть об ie7 и ниже.
 
а почему не сделать контейнер с position:relative и задавать его детям абсолютное позиционирование?

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:12 28-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii

Цитата:
пора бы забыть об ie7 и ниже.  

постараюсь)
 

Цитата:
а почему не сделать контейнер с position:relative и задавать его детям абсолютное позиционирование?

тоже вариант... только остается открыт вопрос
 

Цитата:
2. Необходимо задавать width: 800px; в верхней и нижней центральной части, как изменить, чтоб ширину задавать нужно было только в одном из центральном блоке? Т.е. верхняя и нижняя часть, автоматически растягивались, как  (Средина 1х1, полная заливка, ширина 800px)

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 23:38 28-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
только остается открыт вопрос  

я же написал - контейнер, ему и задаем ширину

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 23:52 28-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Т.е. так?
 

Код:
<div style="position:relative; width: 800px;">
<div syle="position: absolute; background: url('/inew/1/top_left.png') no-repeat; width: 24px; height: 23px; left: 0; top: 0;"></div>
<div syle="position: absolute; background: url('/inew/1/top_body.png') repeat-x; height: 23px; top: 0;"></div>
<div syle="position: absolute; background: url('/inew/1/top_right.png') no-repeat; width: 24px; height: 23px; right: 0; top: 0;"></div>
</div>

 
только как будет растягиваться div с top_body.png? на 100%?

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 17:53 29-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
только как будет растягиваться div с top_body.png? на 100%?

написал же, абсолютное позиционирование, значит выставляем и right тоже

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 19:50 29-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii

Код:
<style>
.top_bas {position:relative; width: 800px;}
.top_bas div {position: absolute;}
.top_bas div.s1 {background: url('/inew/1/top_left.png') no-repeat; width: 24px; height: 23px; left: 0; top: 0;}
.top_bas div.s2 {background: url('/inew/1/top_body.png') repeat-x; height: 23px; top: 0px; left: 24px; right: 24px;}
.top_bas div.s3 {background: url('/inew/1/top_right.png') no-repeat; width: 24px; height: 23px; right: 0px; top: 0px;}
 
.top_bas div.s4 {background: url('/inew/1/body_left.png') repeat-y; width: 24px; height: 23px; left: 0; top: 23px;}
.top_bas div.s5 {background: url('/inew/1/body_body.png'); left: 24px; right: 24px; top: 23px;}
.top_bas div.s6 {background: url('/inew/1/body_right.png') repeat-y; width: 24px; height: 23px; right: 0px; top: 23px;}
 
.top_bas div.s7 {background: url('/inew/1/bottom_left.png') no-repeat; width: 24px; height: 23px; left: 0; bottom: 1px;}
.top_bas div.s8 {background: url('/inew/1/bottom_body.png') repeat-x; height: 23px; bottom: 0px; left: 24px; right: 24px;}
.top_bas div.s9 {background: url('/inew/1/bottom_right.png') no-repeat; width: 24px; height: 23px; right: 0px; bottom: 0px;}
</style>
 
<div class="top_bas">
<div class="s1"></div><div class="s2"></div><div class="s3"></div>
<div class="s4"></div><div class="s5">Текст</div><div class="s6"></div>
<div class="s7"></div><div class="s8"></div><div class="s9"></div>
</div>

 
тут появилось 3 бага.
1. Последующие блоки "налазят" на class="top_bas" и даже <div class="clear"></div> не помогает
2.  s7, s8, s9 устанавливается выше чем s1, s2, s3... s6
3. s4 и s6 не тянутся по высоте как s5 т.е. s5 может менятся по высоте... а s4 и s6 не меняются...

Код:
.clear {
  clear: both;
  display: block;
  line-height: 0px;
  height: 0px;
  overflow: hidden;
}

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 21:03 30-04-2015 | Исправлено: Sutar, 21:08 30-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
даже <div class="clear"></div> не помогает  

а с чего он должен помогать, если у вас нет плавающих блоков?
 
это не баги, это руки.
конечно же с абсолютным позиционированием, при высоте меньше суммы нижнего и верхнего ряда все будет налазить - для этого нужно задать min-height контейнеру, чтобы не сжимался до такой ситуации.
 
к примеру - http://jsfiddle.net/pgrLvnv6/
если же нужно, чтобы центральный div растягивался автоматически по высоте, вместе с контейнером, то ему не нужно абсолютное позиционирование, а лишь выставить нужные margin или padding - http://jsfiddle.net/pgrLvnv6/1/

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:17 30-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
в s1 ... s3 в картинках есть элементы с 1-100% прозрачностью. А именно, закругления по краю и т.д.
при установке position: static; в s5, background в том div заливает всё подряд и даже прозрачные места в div.s1 - div.s9, закругления пропадают...
 
Добавлено:
а если задать margin, то происходит сдвиг s5 вверх... так как сверху расположен элемент, с margin
 
 
 

Код:
 
.page-bottom {
  background: url('/images/bottom_content_divider.png') no-repeat;
  margin: 15px 9px;
  height: 15px;
}
 
<div class="page-bottom"></div>

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 21:40 30-04-2015 | Исправлено: Sutar, 21:45 30-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
а если задать margin, то происходит сдвиг s5 вверх... так как сверху расположен элемент, с margin  

ну неужели и в этом помощь нужна?
 
задайте тогда контейнеру padding
http://jsfiddle.net/pgrLvnv6/2/

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:54 30-04-2015 | Исправлено: Mavrikii, 21:55 30-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Сделал, вроде всё не плохо получается. Только в EI8 не растягиваются по ширине и высоте s2, a4, s6 и s8(

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 22:01 30-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
Только в EI8 не растягиваются по ширине и высоте s2, a4, s6 и s8(

ссылку на страницу

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:03 30-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

 
Сайт в localhost работает, могу скрин дать. Использую EI8

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 22:09 30-04-2015 | Исправлено: Sutar, 22:09 30-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
Сайт в localhost работает, могу скрин дать

зачем мне скрин? выложите страницу куда нить, смотреть нужно не на картинку, а используя тулбар девелопера в браузере.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:10 30-04-2015 | Исправлено: Mavrikii, 22:10 30-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Тык

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 22:27 30-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
IE8 у меня нет, но в его эмуляции стандартным IE проблем нет.
 

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:35 30-04-2015 | Исправлено: Mavrikii, 22:36 30-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
я скрин кидал вам выше.... Это я открывал через EI8 на компе.

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 22:47 30-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
Это я открывал через EI8 на компе.

судя по всему, там проблема в чем то другом.
эмуляция меня никогда не обманывала.
 
эм.. а кто будет страницу оформлять по стандарту? теги html, body и так далее?
более того, следует указать doctype - в режиме quirks mode можно получить черти что.
https://ru.wikipedia.org/wiki/Quirks_mode

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:51 30-04-2015 | Исправлено: Mavrikii, 22:52 30-04-2015
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
страница с html и body есть, там такой-же дефект....
попробуйте тут: http://netrenderer.com/index.php

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 23:11 30-04-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
попробуйте тут

на чем? если тут - http://hserv.net.ua/test.html ничего нет

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 23:12 30-04-2015
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » Совет по использованию DIV с


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru