atlanta

 

Спасибо. Кажется, это то, что мне нужно. Сейчас поизучаю.

Нет.

Там не работает вертикальное центрирование широкой картинки.

 

http://codepen.io/anon/pen/RrwyWO

Есть.

Я добавил по аналогии с :after {

 

.gallery__item:before {

  content: '';

  display: inline-block;

  height: 100%;  

  vertical-align: middle;

}

 

Вроде получилось.

 

 вот вам галерея готовая  просто создайте index.html и вставьте туда этот http://codepen.io/anon/pen/MKWGpv?editors=110

 

я прошу прощение , но а у вас есть сайт на собственном движке ? а то у вас на wordpress а на нём даже простая домохозяйка без навыком html css js может слепить сайт за 30 минут , тем более тот шаблон - не совсем уверен но он заводской - так есть ?

 

Мы вас прощаем, как вы и просите, за некомпетентность как минимум.

 

Не хотите похвастаться вашим движком? Мы даже потратим время и проанализируем его код и возможности =) Хотите показать ваши работы? Мы с удовольствием их оценим.

 

ЗЫ Если нет то вы не имеете никаких прав кого-то критиковать и говорить о всяких домохозяйках.

 

мне что из за спора покупать хостинг ? что мне мне выигрыш спора даст ? 

Не вижу никакого смысла спорить с вами дальше. Да и тема не в том разделе.

я не спорю - я живу этим - и купил себе машину и квартиру - и всё на вёрстке и на создании своей cms - и не обязательно создавать велосипед каждый раз - достаточно написать один раз а потом изменять его чуток и всё ... ок - пока - я не спорил - не люблю спорить

 

я продал четыре дня назад - был у меня - как будет заказ - я сделаю - и выложу пример - wp очень простой движёк - ну по крайней мере если ни лесть в шаблон - да и готовых решений под производство шаблонов тоже есть - шаблонизаторы  - я не понял вашу иронию - у вас какие то проблемы с wp ?

У меня не ирония была, а предложение показать то, что вы умеете делать на этой CMS. Почти всегда люди рассуждающие так как вы - нифига не умеют делать если дело пойдет чуть дальше чем скачать и активировать плагин.

Плюс к этому, ТС предлагают верстку. Если вы не различаете что такое верстка и что такое создание шаблона для wordpress то тоже не стоит писать.

Да и я не совсем понимаю, сделать для каждого проекта собственный велосипед не использовав готовые решения это верх крутизны и профессионализма разработчика?

 

вы о SEO  слышали ? наверно понимаете что уникальность имеет очень большой вес и цену , так же относится и собственному управлению сайта , больше 1000.... человек создали сайт на wp , ещё какой то процент на joomla и так же на drupal - вёрстка - что сложного ? вы напишите мне что то что мне было бы не под силу , о wp ,joomla , drupal ,webasyst не пишите - это мои дипломные работы были на них - и писал на них шаблоны - это глупо и доказывать не вижу смысла , я пишу здесь просто так - помочь в чём то разобраться - особенно  вёрстке - 

 

что требуется сделать ? поясните плиз 

Поскольку я новичок в этом деле, то многое до меня трудно доходит, потому что многих основ не знаю.

Но учиться и рассказать, что мне нужно, я готов всегда.

 

Мне нужно поместить в блок (div) неизвестного размера картинку неизвестного размера. Картинка должна быть центрирована по вертикали и горизонтали блока. Если картинка меньше размера блока, то она должна поместиться своим размером. Если картинка больше блока по какой-то стороне, то она должна пропорционально сжаться под размер блока.

Если окно изменяется (и размеры блока, соответственно, изменяются), то и размеры, соответственно, картинки должны изменяться.

 

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

 

https://fotki.yandex.ru/next/users/igor-i-markin/album/510268/view/1334896

 

По поводу таблиц прекрасно сказал 

Igor Schnaider

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

 

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

 

Ну тут проще чем требуется , сам div вложен в блок - обёртку , и этот div имеет свои размеры к примеру 60% и выставлен по центру margin:auto; но высоту он имеет 100% но для этого потребуется указать родителю высоту в 100% так как процент это некая виртуальная единица и посему надо указать родителю что он сам имеет высоту в 100% и тогда это сработает - а изображению уже width:100%; (унаследуется от родителя) и height:100%; тоже наследуется

 

я прошу прощение , но а у вас есть сайт на собственном движке ? а то у вас на wordpress а на нём даже простая домохозяйка без навыком html css js  может слепить сайт за 30 минут , тем более тот шаблон - не совсем уверен но он заводской - так есть ?

Ахренеть логика... Какое отношение имеет сообщество к деятельности ТС? Та даже если имеет, покажи свою работу на wordpress раз домохозяйки могут?

 

я продал четыре дня назад - был у меня - как будет заказ - я сделаю - и выложу пример - wp очень простой движёк - ну по крайней мере если ни лесть в шаблон - да и готовых решений под производство шаблонов тоже есть - шаблонизаторы  - я не понял вашу иронию - у вас какие то проблемы с wp ?

https://cloud.mail.ru/public/7Mu2/UHu7zLnCC  вот архив в облаке mail.ru - откройте index.html - в само низу увидите 

    <script type="text/javascript">     $(document).ready(function(){        $(".li-menu").click(function(){            $(".menu").show();            $(".jq").show();        });    });            $(".jq").click(function(){            $(".menu").hide();            $(".jq").hide();        });    </script>

это и есть то что открывает и то что закрывает , .jq это элемент который по умолчанию скрыт и при клике на .li-menu этот появляется но он прозрачный и z-index на уровень ниже самого меню и вместе с .jq открывается сам блок меню и так же по клику на .jq закрывается .menu  и сам .jq , требуется подключение библиотеки jquery

https://jsfiddle.net/atlanta/6yeL7hc9/   вам это надо ?

https://jsfiddle.net/atlanta/6yeL7hc9/1/ -адаптивное решение

 

Я не понял. Объясните. Как это можно приделать к background и какие max значения нужно задать?

 

Не к background, а к самой картинке. Вам же Q4Dizzy показал. Что-то типа этого. Единственно, раз вы выравниваете по вертикали с помощью таблицы, высоту установить на саму таблицу не получиться, так как она подстраивается под содержимое, а не наоборот. Вроде, если ставить высоту на table-cell, то нормально работает.

 

что требуется сделать ? поясните плиз 

Занимаюсь (X)HTML/CSS вёрсткой.

Делаю действительно качественную работу.

- любой сложности, хоть с подвыпердвертом)

- под любые платформы

- под любые браузеры

- валидная начисто!

- уникальная организация html/css кода - Семантически корректный код - логичность верстки

- табличная, дивная (предпочитаю второе, 49/50 как правило блочные работы)

- индивидуальный подход к каждому клиенту

Портфолио и код моих работ могу продемонстрировать непосредственно заказчику при личной переписке.

Цены:

Цены зависят от сложности макета.

За IE6, IE7 беру отдельную плату, 50% от общей суммы.

Все предложения по работе присылайте мне на почту psywalker09@gmail.com или в ЛС

Временно не беру заказы.

Думаю, мой статус не даст усомниться в моей правде

Наше сообщество (css-live.ru)

я прошу прощение , но а у вас есть сайт на собственном движке ? а то у вас на wordpress а на нём даже простая домохозяйка без навыком html css js  может слепить сайт за 30 минут , тем более тот шаблон - не совсем уверен но он заводской - так есть ?

 

Так а чем max-width и max-height не подходят?

 

Я не понял. Объясните. 

Как это можно приделать к background и какие max значения нужно задать?

 

Я нашел такой случай:

 

.images-post img { 

max-width: 500px; 

width:expression(this.width > 500 ? "500px" : this.width); }

 

Меня интересует здесь 3-я строка. В ней определяется превышает ли ширина картинки 500px, если превышает, то еe ширине задается 500px. 

Можно ли аналогично сделать для моей картинки-background такой смысл, пока не знаю правильный синтаксис:

 

if background.width < container1.width and background.height < container1.height then

  background-size:  auto ;

else

  background-size:  contain ;

end if

 

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

 

 

 

я не увидел разницы - вы уже решили ?

 

Нет не решил, просто пришлось обновить сайт как есть , а нужно как на скрине 

 

а у вас есть в joomla  шаблон styles.css или как он в joomla называется ? вы  его пробовали исправлять ? 

 

 

 

Да конечно пробовал, но я не силен в CSS ,  пользуюсь справочником с этого сайта, но почему то ерунда выходит, по отдельности каждый DIV получается сделать как нужно, но чтобы все вместе в превью товара выглядели как картинке нет

 

у вас тема -стандартная , смените  вашу тему - это самое простое решение

 

я не увидел разницы - вы уже решили ?

 

Нет не решил, просто пришлось обновить сайт как есть , а нужно как на скрине 

 

а у вас есть в joomla  шаблон styles.css или как он в joomla называется ? вы  его пробовали исправлять ? 

 

ни верно ! меню у вас должно быть таким :

<menu>  <ul>      <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>  </ul></menu>

и использовать figure в вашем примере не верно ! вообще используйте html5 и его семантику   вот пример http://codepen.io/anon/pen/WrNdqZ - я чуток адаптировал - это для примера

я не увидел разницы - вы уже решили ?

для iphone - как вы реализовали css - точнее стили ?

https://jsfiddle.net/atlanta/74hvmpba/1/    вот так ??

Всё правильно работает. Тексту некуда деваться, вот он и переносится.

да не корректно всё работает - тексту надо придать нужный стиль - https://jsfiddle.net/atlanta/74hvmpba/1/ - вот так например

примените flex-box , как раз flex и позволяет складывать содержимое без особых усилий ! вам скинуть пример ?

http://codepen.io/anon/pen/Rrbwqz?editors=110

не не так - спросили про то что если содержимое сайдебара есть то контент 70%  если же в сайдебаре отсуствует содержимое то контент 100%

вёрстка на bootstrap - ток что проблем быть не должно - вот свою работу - с текстового документа - до полной готовности - можете так ?

скроллер добавьте красивый - а то тот как буд то деревянный - стандартный имею ввиду  -ну и слайдер бы какой нить - хоть что то украшать будет

Может мне проще отказаться от рисунков и сделать обычным текстом (но чтобы был такой же дизайн)?

мне кажется это реально - просто вы применили absolute - и из за этого геморой такая !! я вам дал ссылки на моё решение - и оно адаптивное решение - выбирайте

 

 

 

Не увидел я ответа хоть частично правильного , используйте @media - и в нём точно укажите размеры а в файле .htaccess указать можно и само устройство iphone или же его браузер safari , а так же у вас на странице есть lightbox но понятно что вы убрали кролл но зато блоку gallery дали скролл но примените - https://github.com/mzubala/jquery-custom-scrollbar- вот этот плагин и ваш скроли станет очень красивым

@ media используются и айфон их игнорирует, в этом то и проблема. За плагин спасибо.

 

эмуляторах

 

Вот как сайт выглядет в симуляторе: http://take.ms/xibT8

Точ в точ он выглядит на iPhone 5s. Я не в курсе какими симуляторами вы тестировали, но я бы им не доверял.

 

Попробуй стили вынести в отдельный файл (styles.css) и написать просто:

@media (max-width: 800px) {    body {         background:url(image/mbg.jpg) center top no-repeat;        background-size: cover;    }    .menu {        width: 70%;    }}

 

 @atlanta, а ты бы перечитал в чем проблема, тогда понял бы что твой ответ не имеет ничего общего с проблемой

 

Фоновые стили не могу вынести в отдельный файл, так как к каждой странице сайта, свой отдельный фон, поэтому прописываю непосредственно в html. Но в отдельный стилевой файл вынесены другие параметры, и @media которые прописаны там (параметры различных контейнеров и пр.), так же не применяются к айфону.

Кстати параметры так и прописаны, как предлагаете.

И спасибо за симулятор! ) сохранила в закладки, свои удалю! )

 

@media (max-width: 800px) { body { background:url(image/mbg.jpg) center top no-repeat; background-size: cover; } .menu { width: 70%; } }

Так там ведь проблема как раз в background-size: cover, как я понял.

Toleri, странно, что вы ничего не смогли найти по этому вопросу.

 

Основная проблема в том, что айфон игнорирует @media. Искала на русском ). Возможно искала не совсем так как нужно, но не могу до конца понять в чем загвоздка. Информацию по ссылке посмотрела, с моим английским, с ходу я не разберусь, а от авто-переводчика мозг вообще взрывается ))) Попробую почитать, поковыряться попозже. Спасибо за инфу! )

 

   если у вас не получилось применить медиа запрос на iphone это не говорит о том что это не получится у меня ! вы ни первая и ваше Яблочко тоже ни первое у меня , больше 14 проектов - и пока не было нареканий , всегда под любые мобильные средства используют @media - читайте на htmlbook.ru как правильно делать их 

 

О! Ну так я для того и обратилась на форум, что бы знающие люди, мне новичку, подсказали, в чем возможно моя ошибка, как сделать так что бы заработала. Спасибо за конструктивную критику и советы по делу.

 

понятно - давайте сделаем так - откройте bootstrap - и посмотрите как они стилизовали свою вёрстку - особенно  обратите внимание на @media -  если  не получится , не поймёте что и как то пишите на почту - будем разбираться  что и как , думаю - что справитесь - но вёрстка по safari любой скажет что это ни лёгкая задача - есть три гиганта с особенной сложностью : 1) APPLE SAFARI 2) MICROSOFT IE 3) LINUX MIDORI  - вот с ними и возникают проблемы у каждого  верстальщика - но пишите думаю помогу - но просто я работаю и могу ответить с задержкой

 

Не увидел я ответа хоть частично правильного , используйте @media - и в нём точно укажите размеры а в файле .htaccess указать можно и само устройство iphone или же его браузер safari , а так же у вас на странице есть lightbox но понятно что вы убрали кролл но зато блоку gallery дали скролл но примените - https://github.com/mzubala/jquery-custom-scrollbar- вот этот плагин и ваш скроли станет очень красивым

@ media используются и айфон их игнорирует, в этом то и проблема. За плагин спасибо.

 

эмуляторах

 

Вот как сайт выглядет в симуляторе: http://take.ms/xibT8

Точ в точ он выглядит на iPhone 5s. Я не в курсе какими симуляторами вы тестировали, но я бы им не доверял.

 

Попробуй стили вынести в отдельный файл (styles.css) и написать просто:

@media (max-width: 800px) {    body {         background:url(image/mbg.jpg) center top no-repeat;        background-size: cover;    }    .menu {        width: 70%;    }}

 

 @atlanta, а ты бы перечитал в чем проблема, тогда понял бы что твой ответ не имеет ничего общего с проблемой

 

Фоновые стили не могу вынести в отдельный файл, так как к каждой странице сайта, свой отдельный фон, поэтому прописываю непосредственно в html. Но в отдельный стилевой файл вынесены другие параметры, и @media которые прописаны там (параметры различных контейнеров и пр.), так же не применяются к айфону.

Кстати параметры так и прописаны, как предлагаете.

И спасибо за симулятор! ) сохранила в закладки, свои удалю! )

 

@media (max-width: 800px) { body { background:url(image/mbg.jpg) center top no-repeat; background-size: cover; } .menu { width: 70%; } }

Так там ведь проблема как раз в background-size: cover, как я понял.

Toleri, странно, что вы ничего не смогли найти по этому вопросу.

 

Основная проблема в том, что айфон игнорирует @media. Искала на русском ). Возможно искала не совсем так как нужно, но не могу до конца понять в чем загвоздка. Информацию по ссылке посмотрела, с моим английским, с ходу я не разберусь, а от авто-переводчика мозг вообще взрывается ))) Попробую почитать, поковыряться попозже. Спасибо за инфу! )

 

   если у вас не получилось применить медиа запрос на iphone это не говорит о том что это не получится у меня ! вы ни первая и ваше Яблочко тоже ни первое у меня , больше 14 проектов - и пока не было нареканий , всегда под любые мобильные средства используют @media - читайте на htmlbook.ru как правильно делать их 

http://jsfiddle.net/podr5m94/2/

а теперя сожмите экран на jsfiddle - и посмотрите как это выглядит на мобилке - тот отступ в 100рх - это ужос