Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 27 Ответов
  • 3490 Просмотров
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Вопрос по верстке.
« : 26.09.2011, 16:43:31 »
Ребят, билась, билась, все хотела как хочется...

И посетила меня мысль: а вдруг это не возможно в принципе?

Собственно, вопрос.

А можно сверстать макет такого типа:

1. Верстка сео
2. Три колонки, все одинаковой высоты и на весь экран, при отсутствии модулей в одной из них или обоих боковые схлопываются и контент расширяется
3. Хейдер собсно
4. Футер прижат к низу экрана
5. Последняя радость - резиновый, с ограничением минималки и максималки по ширине.
6. Кроссбраузерность обязательно с 7 осла начиная
7. Все это выровнять по центру

Готова даже, наверное, заплатить за такой макет, чтобы было что разобрать и проанализировать)))



« Последнее редактирование: 27.09.2011, 11:03:03 от Taatshi »
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Вопрос по верстке.
« Ответ #1 : 27.09.2011, 11:37:50 »
Вот, на скорую руку накидал трёхколоночный.
Код
<body>
<div id="site" style="width:100%;background:#00F; overflow:hidden; display:block">
<div id="header" style=" height:200px;width:90%; min-width:1000px; max-width:1250px; background:#ff0000; margin:10px auto;display:block"></div><!--header-->
<div id="main" style=" width:90%; min-width:1000px; max-width:1250px; background:#ccc000; margin:10px auto; overflow:hidden;display:block">


<div id="left" style="width:200px;background:#0F0; float:left;padding-bottom:10000px; margin-bottom:-10000px;display:block"> ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/>
ajsgfhasgfhaghfhgasfgashfgasgfas<br/></div><!--left-->


<div id="right" style="width:200px;background:#0F0; float:right;padding-bottom:10000px; margin-bottom:-10000px;display:block"></div><!--right-->


<div id="content" style=" background:#C03; margin:10px 210px; padding-bottom:10000px; margin-bottom:-10000px;display:block"></div><!--content-->



</div><!--main-->
<div id="footer" style=" height:100px;width:90%; min-width:1000px; max-width:1250px; background:#ff0000; margin:10px auto;display:block"></div><!--footer-->

</div><!--site-->
</body>
Правда есть недостаток - нельзя этим трём колонкам поставить нижнюю границу.

А саму центральную часть лучше выводить через условия, чтоб количество колонок менялось. Напишу - обновлю пост.
Создание сайтов, шаблонов, помощь в решении проблем.
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: Вопрос по верстке.
« Ответ #2 : 27.09.2011, 11:57:37 »
Да ты понимаешь, все по отдельности я тоже сделаю, меня интересует чтобы ВСЕ было. А у тебя уже - не то((( 

Закрытые источники говорят, что раз плюнуть))) Мда.... Значит, будем учиться.
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Вопрос по верстке.
« Ответ #3 : 27.09.2011, 12:29:30 »
Почему не то? Условия ты лучше меня писать умееш. Вот подкоректируй и всё нормально будет. По вышеприведённому примеру в диве main всё заменить
Код
<?php 
if ($this->countModules( 'left' ) + $this->countModules( 'right' ) = 0) { ?>
 <div id="content" style=" background:#C03; display:block"></div><!--content-->
<?php } else { ?>
<?php
if ($this->countModules( 'left' ) & $this->countModules( 'right' )) { ?>
 <div id="left" style="width:200px;background:#0F0; float:left;padding-bottom:10000px; margin-bottom:-10000px;display:block"><jdoc:include type="modules" name="left" style="xhtml" /></div><!--left-->
<div id="right" style="width:200px;background:#0F0; float:right;padding-bottom:10000px; margin-bottom:-10000px;display:block"><jdoc:include type="modules" name="right" style="xhtml" /></div><!--right-->
<div id="content" style=" background:#C03; margin:10px 210px; padding-bottom:10000px; margin-bottom:-10000px;display:block"><jdoc:include type="component" /></div><!--content-->
<?php } else { ?>
<?php
if ($this->countModules( 'left' )) { ?>
<div id="left" style="width:200px;background:#0F0; float:left;padding-bottom:10000px; margin-bottom:-10000px;display:block"><jdoc:include type="modules" name="left" style="xhtml" /></div><!--left-->
<div id="content" style=" background:#C03; margin-left:210px; padding-bottom:10000px; margin-bottom:-10000px;display:block"><jdoc:include type="component" /></div><!--content-->
<?php } else { ?>
<div id="right" style="width:200px;background:#0F0; float:right;padding-bottom:10000px; margin-bottom:-10000px;display:block"><jdoc:include type="modules" name="right" style="xhtml" /></div><!--left-->
<div id="content" style=" background:#C03; margin-right:210px; padding-bottom:10000px; margin-bottom:-10000px;display:block"><jdoc:include type="component" /></div><!--content-->
<?php } ?>
<?php } ?>
<?php } ?>
Код не проверял, возможны ошибки, да и синтаксис подправить не мешало бы
Создание сайтов, шаблонов, помощь в решении проблем.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке.
« Ответ #4 : 27.09.2011, 12:32:18 »
Всё реально. Только колонки одинаковой высоты... В общем, мы можем вытянуть на 100% высоты только первого НЕПОСРЕДСТВЕННОГО потомка элемента body при его высоте в 100%. Значит колонки одинаковой высоты так просто не сделаешь. Как вариант: если фон колонок одноцветный, то делать агромадные бордеры у элемента этого цвета и отрицатыльными маржинами накладывать сверху контент колонок.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке.
« Ответ #5 : 27.09.2011, 12:34:48 »
Цитировать
padding-bottom:10000px; margin-bottom:-10000px
знаю, но считаю некошерным решением. :)
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Вопрос по верстке.
« Ответ #6 : 27.09.2011, 12:37:21 »
знаю, но считаю некошерным решением. :)
В ie7 не работает, но если под конкретную задачу, то можна изголиться...
А как кошерно? Напишеш?
P.S. не прочитал предыдущий пост
Цитировать
Всё реально. Только колонки одинаковой высоты... В общем, мы можем вытянуть на 100% высоты только первого НЕПОСРЕДСТВЕННОГО потомка элемента body при его высоте в 100%. Значит колонки одинаковой высоты так просто не сделаешь. Как вариант: если фон колонок одноцветный, то делать агромадные бордеры у элемента этого цвета и отрицатыльными маржинами накладывать сверху контент колонок.
Нифига не понял  ^-^
Скрипт ещё какой-то слышал подключается, который высчитывает высоту родительского элемента и присваивает высоту колонкам, но видеть не видел...
« Последнее редактирование: 27.09.2011, 12:44:44 от Efanych »
Создание сайтов, шаблонов, помощь в решении проблем.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке.
« Ответ #7 : 27.09.2011, 12:51:29 »
Ну если юзать js то вообще никаких невыполнимых задач не будет :))
Попробую ещё объяснить. Вот, например, разметка: белый контент, серые колонки в 300px по бокам. Как вытянуть на 100%? Легко. Разделим на две задачи. Серый фон колонок и контент колонок. Контент колонок, ясен пень, не обязательно делать стопроцентной высоты. А фон колонок сделаем бордюром wrapperа. Т.е. вкладываем в бади див 100%-й высоты и с боковым бордерами в 300px серого цвета. А внутри колонки уже сносим НА сервый фон отрицательными  отступами. Работает везде.
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Вопрос по верстке.
« Ответ #8 : 27.09.2011, 13:05:56 »
Врубился. Прикольно.
Создание сайтов, шаблонов, помощь в решении проблем.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке.
« Ответ #9 : 27.09.2011, 13:12:58 »
Efanych сенькс за плюс.
Усложним задачу: Фон колонок - некая текстура повторяющаяся по-вертикали. Ограничение всё то же: фиксированная ширина колонок. Решение: рисуем картинку шириной в ширину колонки, скажем, 300px, а высотой - высота текстуры, скажем, 20px. Назначаем бэкграунд-имеджем сперва для бади с выравниванием в одну сторону, потом для wrapperа с выравниванием в другую. Правда, цвета фона не будет и без пикчеров не будет смотрецо, например, белое на белом. Но на это нынче чёт все забивают. Один я фанатею по красивой вёрстке походу ^-^
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Вопрос по верстке.
« Ответ #10 : 27.09.2011, 13:18:24 »
Цитировать
Назначаем бэкграунд-имеджем сперва для бади с выравниванием в одну сторону, потом для wrapperа с выравниванием в другую.
Вот этого не понял. wrapper - это родительский див, в котором колонки? А body?
А. понял. Ещё один див внедрить?
Создание сайтов, шаблонов, помощь в решении проблем.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке.
« Ответ #11 : 27.09.2011, 13:23:47 »
Да. Придёцо один див таки внедрить. Но это, имхо, меньшее из зол. В решении с бордюрами тоже лишний див используецо.
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: Вопрос по верстке.
« Ответ #12 : 27.09.2011, 13:26:25 »
Гг..))) рада услышать как все изгаляются)) мне вот тоже приходится, так у меня комплекс неполноценности развивается - мол, намудрила, а решение походу должно быть простое... Ну, раз можно всякие мусипуси крутить, так все легче становится)))

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

Вот только что изобрела такой велик)))
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

AdWeb

  • Давно я тут
  • 878
  • 31 / 3
Re: Вопрос по верстке.
« Ответ #13 : 12.02.2012, 15:10:28 »
чтот не пойму как пофиксить:
есть мидл часть сайта (в разных меню\разделах разная высота в зависимости от наполненности контентом)  и футер внизу соответственно, так вот как сделать так чтобы не зависимо от того сколько материала  футер сдвигался бы вниз страницы, а не поднимался если в материале пару строк всего

пробовал задать высоту для основного части сайта 1000пкс  результата не давало футер лезет верх...
| Хороший Хостинг | Купить Хикашоп | Каталог перекладів Joomla компонентів
PS. спасибо кидать через вебмани: R152456839841 если плюсикофф не хватает :)
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке.
« Ответ #14 : 12.02.2012, 17:08:59 »
чтот не пойму как пофиксить:
есть мидл часть сайта (в разных меню\разделах разная высота в зависимости от наполненности контентом)  и футер внизу соответственно, так вот как сделать так чтобы не зависимо от того сколько материала  футер сдвигался бы вниз страницы, а не поднимался если в материале пару строк всего

пробовал задать высоту для основного части сайта 1000пкс  результата не давало футер лезет верх...
Это азы вёрстки. Решений несколько.
1. Самое логичное и популярное. Футер фиксированной высоты. Весь трюк в том, что мы можем указать ПЕРВОМУ потомку body высоту 100%. Тогда, если разметка такая:
Код: html4strict
<div id="all_all">
    <div id="component">
        content
    </div>
    <div id="foot_fix"></div>
</div>
<div id="all_foot">footer</div>
то css:
Код: css
html, body {width:100%; height:100%;}
#all_all {min-height:100%; margin-bottom:-120px;}
#foot_fix {height:120px;}
#all_foot {height:120px;}
Т.е. мы вытягиваем body и component на 100%. А потом даём отрицательный отступ component-у. Футер уже спозиционирован как надо, но налазит на контент, что не айс. Поэтому после контента вставляем пустую заглушку, которая не даёт тексту залазить под футер.
2. Если футер НЕфиксированной высоты (что редко), то тут два выхода.
а) Использовать display:table. Не совсем кошерное решение, т.к. куча дополнительных элементов придётся городить.
б) Использовать способ (1), но не прописывать высоту футера и фикса, а внутрь фикса продублировать контент футера. Совсем маразм, имхо, но некоторые используют.
В общем рекомендую первый способ.
*

AdWeb

  • Давно я тут
  • 878
  • 31 / 3
Re: Вопрос по верстке.
« Ответ #15 : 12.02.2012, 18:30:51 »
в том то и прикол, что первому потомку задаю 100% (хотя ща еще с футером повожусь скорей всего там чтот не доделал)
тут шаблон еще хитрый какойто использует 2 типа ксс один от темплейта второй схема и для дивов выводятся 2 парамтра из 2х файлов...
| Хороший Хостинг | Купить Хикашоп | Каталог перекладів Joomla компонентів
PS. спасибо кидать через вебмани: R152456839841 если плюсикофф не хватает :)
*

AdWeb

  • Давно я тут
  • 878
  • 31 / 3
Re: Вопрос по верстке.
« Ответ #16 : 12.02.2012, 20:40:34 »
чтот не получается, страница уходит в скрол...
| Хороший Хостинг | Купить Хикашоп | Каталог перекладів Joomla компонентів
PS. спасибо кидать через вебмани: R152456839841 если плюсикофф не хватает :)
*

AdWeb

  • Давно я тут
  • 878
  • 31 / 3
Re: Вопрос по верстке.
« Ответ #17 : 13.02.2012, 19:58:00 »
в общем решил проблему, но указав не первому потомку минимальную высоту, а для области контента min-height: 100%; margin-bottom: -высота_футера;

зы. хотя отрабатывает все равно не так как хотелось бы,..
| Хороший Хостинг | Купить Хикашоп | Каталог перекладів Joomla компонентів
PS. спасибо кидать через вебмани: R152456839841 если плюсикофф не хватает :)
*

xXDIZELXx

  • Осваиваюсь на форуме
  • 12
  • 1 / 0
  • Dark side is with me
Re: Вопрос по верстке
« Ответ #18 : 17.02.2014, 11:22:00 »
Есть вопрос, у меня в диве, прописано два модуля, но как их сделать(не лево право) а верх и низ.
как я понимаю надо зададь, им 100% величину, но не выходит как исправить?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке
« Ответ #19 : 17.02.2014, 11:25:21 »
xXDIZELXx, покажите рисунком пожалуйста. Я не понял, что нужно.
*

xXDIZELXx

  • Осваиваюсь на форуме
  • 12
  • 1 / 0
  • Dark side is with me
Re: Вопрос по верстке
« Ответ #20 : 17.02.2014, 11:36:26 »
Есть блог headerbar  в нем находятся: лого ширеной в контент, и два модуля поиск и корзина, картинку не могу к сожелению показать,
два модуля этих находятся под лого, лежат они горизонтально а мне нужно вертикально, сначало так было, но что то случилось
 ссылку могу на сайт дать, если нужно, попросиле доделать, вот кручусь. спасибо за ранее
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке
« Ответ #21 : 17.02.2014, 11:42:36 »
Как помочь то? Картинок нет, сайта нет. Ну нужно некоторые блоки возможно сделать плавающими, а некоторые статичными. Возможно нужно у некоторых изменить позиционирование. Хотя, если там таблично всё, то это не поможет.
*

xXDIZELXx

  • Осваиваюсь на форуме
  • 12
  • 1 / 0
  • Dark side is with me
Re: Вопрос по верстке
« Ответ #22 : 17.02.2014, 11:49:29 »
http://ostrovokart.ru/ вот сайт
*

xXDIZELXx

  • Осваиваюсь на форуме
  • 12
  • 1 / 0
  • Dark side is with me
Re: Вопрос по верстке
« Ответ #23 : 17.02.2014, 11:59:47 »
я с Joomla раньше не сталкивался вот приходится быстро учить, форумами пользовался только чтением и поиском,
обращаюсь очень редко простите если что не так, ну как понял по этой теме.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке
« Ответ #24 : 17.02.2014, 12:20:45 »
Код: css
#headerbar > div {float:left;}
#headerbar > div.left {float:right; width:250px;}
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: Вопрос по верстке
« Ответ #25 : 17.02.2014, 16:02:23 »
Когда вы уже прекратите апать эту мою позорную тему!
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

xXDIZELXx

  • Осваиваюсь на форуме
  • 12
  • 1 / 0
  • Dark side is with me
Re: Вопрос по верстке
« Ответ #26 : 17.02.2014, 16:51:12 »
спасибо получилось, но еще вопрос 250px как влияют я не понимаю
я менял на любое значение и нет разницы

*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по верстке
« Ответ #27 : 17.02.2014, 17:02:57 »
Это для того, чтобы блок корзины и блок поиска встали друг под друга.
Taatshi, 2011-й год же. Все мы учились тогда.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как понять где находится файл который надо поправить чтобы изменить элемент? Вопрос по "Просмотр ко?

Автор vovchikku

Ответов: 0
Просмотров: 1495
Последний ответ 16.07.2016, 14:11:05
от vovchikku
Вопрос по ads.

Автор LarryFlynt

Ответов: 0
Просмотров: 1155
Последний ответ 16.10.2015, 13:01:22
от LarryFlynt
Вопрос по шаблону OT Happy Day

Автор Mobidi

Ответов: 1
Просмотров: 1716
Последний ответ 18.08.2015, 12:47:47
от shyrik707
Вопрос по шаблону Beez 20

Автор websiller

Ответов: 2
Просмотров: 1403
Последний ответ 21.06.2015, 19:52:16
от websiller
Вопрос по редактированию шаблона

Автор yaroslav-soyuz

Ответов: 12
Просмотров: 1560
Последний ответ 03.04.2015, 15:24:39
от juvemen