Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Центрированные слои 
V
    Опции темы
Guide
Дата 30.7.2008, 08:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 13.7.2008

Репутация: нет
Всего: нет
В общем скажу сразу, только недавно начал переходить с табличной вёрстки на послойную. В глаза бросился сайт deviantart.com, вернее бросилась в глаза реализация центрирования плавающих слоёв. Сколько я не копался в их кодах, в итоге не смог отделить мёд от дёгтя. В общем прошу вас помочь решить данную проблему.
К сообщению прикрепил картинку. Объясню что нужно сделать:
Есть три слоя -> Зелённый (Контейнер), Оранжевый (Малый контейнер), Голубой (Картинка). Как из рисунка понятно, планируется галерея.
Задача заключается в том чтобы все контейнеры и рисунок были центрированы. При этом Зелённый не имеет фиксированной ширины (width: 100%), Оранжевый имеет фиксированную ширину(width: 210px), Рисунок имеет только фиксированную высоту, то есть может менять ширину, но в пределах ширины Оранжевого слоя.
Надеюсь я правильно объяснился, буду рад и очень благодарен если найдутся люди которые решат мою проблему. Спасибо за внимание.

user posted image

Это сообщение отредактировал(а) Guide - 30.7.2008, 08:19
PM MAIL   Вверх
bars80080
Дата 30.7.2008, 09:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
м-м-м, завернуть все оранжевые в дополнительный контейнер без указания ширины. этот внешний контейнер отцентровать в зелёном? внутри тоже выравнивание по центру
далее назначить оранжевым контейнерам боковые маргины в процентах, и все они должны быть display: inline;


такая вот идея
PM MAIL WWW   Вверх
Guide
Дата 30.7.2008, 09:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 13.7.2008

Репутация: нет
Всего: нет
Идею не совсем понял. Если не сложно, рабочий пример.... smile 
PM MAIL   Вверх
bars80080
Дата 30.7.2008, 11:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
к сожалению, могу толкать только идеи

вот пример отлично пашуший в ИЕ6
Код

<html><head>
<style>
* { margin: 0px; padding: 0px; }
html, body { width: 100%; height: 100%; }
#green { width: 100%; height: 100%; background: #66ff66; text-align: center; }
#mid { /*border: solid 1px #ff0000; width: 700px;*/ margin: 0px auto; }
#mid div.orange { width: 210px; margin: 20px 20px; background: #ffbb00; display: inline; }
#mid div.orange img { width: 170px; display: inline; margin: 10px 20px; }
</style>
</head><body>
<div id="green"><div id="mid">

<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>

</div></div>
</body></html>
 однако в ФФ3 претерпевает не понятные изменения. если мне кто-нибудь объяснит, что фаерфокс о себе думает, буду признателен
PM MAIL WWW   Вверх
webster
Дата 30.7.2008, 12:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34
bars80080 вы же объявили для :
Код

#mid div.orange { .... display: inline; }

он и ведет себя как обычная строка - нет вертикальных полей и отступов, высота равна высоте содержащейся в нем строки (или пробельного символа). Один из выходов из сложившейся ситуации - это "дорисовать" оранжевый фон к самим изображениям.
PM MAIL   Вверх
bars80080
Дата 30.7.2008, 12:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
бред какой-то, в очередной раз убеждаюсь что ФФ с логикой не дружит сильнее ИЕ

так и не сумел заставить его и центрировать нормально и отображать поля. любой внутренний блок с display: block; выстраивает элементы в колонку

а делать поля дорисовкой, извини, это мягко говоря на танках в булочную ездить
PM MAIL WWW   Вверх
krundetz
Дата 30.7.2008, 13:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Вечный странник
***


Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69
гдето видел кросбраузерное решение это задачи надо пошерстить закладки если найду выложу.


--------------------
!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород
user posted image
PM MAIL   Вверх
Guide
Дата 30.7.2008, 13:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 13.7.2008

Репутация: нет
Всего: нет
Код

<html><head>
<style>
* { margin: 0px; padding: 0px; }
html, body { width: 100%; height: 100%; }
#green { width: 100%; height: 100%; background: #66ff66; text-align: center; }
#mid { /*border: solid 1px #ff0000; width: 700px;*/ margin: 0px auto; }
#mid div.orange { width: 210px; margin: 20px 20px; background: #ffbb00; display: inline-block; }
#mid div.orange img { width: 170px; display: inline; margin: 10px 20px; }
</style>
<!--[if IE]>
<style>
#mid div.orange { display: inline; }
</style>
<![endif]-->
</head><body>
<div id="green"><div id="mid">
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
</div></div>
</body></html>


Эх выы!  smile 
PM MAIL   Вверх
bars80080
Дата 30.7.2008, 14:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
а я блин что-то читаю 
Цитата(htmlbook @  ,  , http://htmlbook.ru/css/display.html)
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный
 и воспринимаю, что будет та же бяка, что и с inline в ФФ


эх, проверять надо
PM MAIL WWW   Вверх
Guide
Дата 30.7.2008, 14:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 13.7.2008

Репутация: нет
Всего: нет
Наверно вопрос можно считать решенным? Или есть умельцы которые сделают лучше?
PM MAIL   Вверх
bars80080
Дата 30.7.2008, 14:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
а чем тебе не нравится? вроде идеально соответствует твоей картинке
PM MAIL WWW   Вверх
Guide
Дата 31.7.2008, 13:38 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 13.7.2008

Репутация: нет
Всего: нет
Короче, вот кроссбраузерное решение без извратов (Conditional comments) и красиво. Всем спасибо, почти ничем не помогли.  smile 

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Smile! :)</title>
</head>
<style>
.container {
    text-align:center;
}

.ctr {
    display:inline;
    zoom:1;
    width:218px;
}

.orange{
    display:table-cell;
    display:inline-block;
    background-color:#FFCC00;
    height:150px;
    margin:4px;
    width:210px;
    overflow:hidden;
}

.orange img
{
    
    max-height:140px;
}

.blue
{
    text-align:center;
    width:200px;
    height:140px;
    margin:5px;
    background-color:#0099FF;
}

</style>
<body>
<div class="container" >
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:20px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:40px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:60px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:80px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:100px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:120px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:140px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:160px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:180px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:200px" /></div></div>
</div>
</body>
</html>


Это сообщение отредактировал(а) Guide - 31.7.2008, 13:39
PM MAIL   Вверх
krundetz
Дата 31.7.2008, 15:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Вечный странник
***


Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69
Цитата(Guide @ 31.7.2008,  13:38)
Всем спасибо, почти ничем не помогли.  smile 

Это что за предьява такая? Тебе пытались помочь я 1 час потратил чтобы найти тебе ссылку на решение(правда не нашел) bars80080 выдал кучу кода webster поправил барса кое в чем. Мы что обязаны были это делать? Мы что обязаны были вам выдать решение по первому вашему требованию? Сдесь к друг другу другие отношения а не такие как у вас.

Это сообщение отредактировал(а) krundetz - 31.7.2008, 15:02


--------------------
!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород
user posted image
PM MAIL   Вверх
bars80080
Дата 31.7.2008, 15:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
ну-ну.
судя по всему ты его забыл проверить в самом популярном браузере ИЕ6

да и я бы не сказал, что влипшая в верхний край картинка так уж хорошо смотрится
PM MAIL WWW   Вверх
Guide
Дата 31.7.2008, 15:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 13.7.2008

Репутация: нет
Всего: нет
krundetz, bars80080, Извините меня, погорячился. Закончу, делать галерею, обязательно выйду на улицу и убьюсь об стенку  smile 
Спасибо всем кто старался. smile 

Цитата(bars80080 @  31.7.2008,  15:05 Найти цитируемый пост)
судя по всему ты его забыл проверить в самом популярном браузере ИЕ6


Хм..почему-то я думаю что больше никогда не буду создавать под неё сайты. А насчёт влипших вверх картинок: не страшно, главное слои отцентрировал. smile 
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1272 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.