Помогите сделать макет

[igmar]

Спасибо большое. Про макс ширину и высоту я бы сам не додумался - это работает. 

 

Для верхнего блока я придумал так:

position: absolute;

top: 0;

bottom: 80px;

Т.к. размеры нижнего блока постоянны, при заданных top & bottom высота блока будет подстраиваться под высоту родителя.

 

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

 

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

 

А как сделать такое вертикальное меню? У раскрывающихся пунктов/ подпунктов сначала есть иконка закрытой папочки с плюсиком, когда он раскрыт - то папка закрыта и она с минусом; для пунктов не имеющих подпунктов нет иконки папки. Принципиально как? Берутся иконки и при формировании списка перед текстом вставляется картинка? И поскольку это строчные элементы, то просто формируется строка списка?

Примерно так?: <ul><li> +<img src="закрытая_папка.gif" /> Пункт_меню_1 </li></ul>

Образца нет, видел такой сайт очень давно.

[Igor Schnaider]

Примерно так?: <ul><li> +<img src="закрытая_папка.gif" /> Пункт_меню_1 </li></ul>

Образца нет, видел такой сайт очень давно.

 

Просто делайте через назначение классов.

Edited December 1, 2015 by Igor Schnaider

[igmar]

Спасибо. В целом понятно, с чем разбираться.

 

Не понял вот:

 

  <li class="menu__item menu__item_opened">

 

Здесь присваиваются сразу 2 класса?

[Igor Schnaider]

Спасибо. В целом понятно, с чем разбираться.

 

Не понял вот:

 

  <li class="menu__item menu__item_opened">

 

Здесь присваиваются сразу 2 класса?

Да это кому как нравится.

 

(Вообще, это модификатор.)

[igmar]

Всем огромное спасибо за помощь. Ухожу на неделю переваривать.

 

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

http://codepen.io/anon/pen/WrepRO- меню вкладками

Edited December 2, 2015 by igmar

[igmar]

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

 

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

 

Вот я сделал 3 варианта: 1) картинка большущей высоты, 2)картинка большущей ширины, 3)маленькая картинка.

Как мне эти 3 варианта объединить, чтобы можно было поместить любую картинку в один контейнер, а не делать 3 разных? Чтобы показывалось как сейчас: все центрировано, размеры подогнаны.

 

Хоть идею дайте, не могу найти статей на эту тему.

Еще плохо то с моими вариантами, что у меня нет критериев, когда один применять, а когда другой. Т.е. насколько высота должна быть больше ширины, чтобы применять 1-й вариант, а не 2-й - пока я это сделал на глазок для очевидных картинок, но реально многие неочевидные, а примерно квадратные.

[Q4Dizzy]

http://jsfiddle.net/Q4Dizzy/a9ydk03e/

 

Наподобии такого... В любом случае использовать надо табличные стили из-за вертикального выравнивания..  А  насчёт высоты контейнеров и высоты длинных картинок - либо ограничивать максимальную высоту картинок, либо добавлять overflow родительскому блоку, что бы скрылась нижняя часть изображений, длинных в плане высоты.

[igmar]

Спасибо.

Нет, это не то, что мне нужно. У вас ограничения как раз на пропорции картинки. Табличные стили подходят для выравнивания по высоте, когда относительно большая ширина. И я также сделал во 2 варианте. Но когда большая высота и нужно выравнивать по ширине - это не работает, высокая картинка туда нее влезает.

Задача оказалась очень сложной при кажущейся простоте. Но люди же как-то делают это.

 

Скажите, что означает в стилях

.pic > span ?

Что означает ">" посередине ?

[igmar]

Вот лучшее решение, которое пока я нашел. Без нагромождения таблиц и блоков.

 

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

 

Но там есть косяк, который пока непонятно как преодолеть.

 

Если картинка больше блока, то background-size:  contain ;

А если картинка меньше блока, то background-size:  auto ;

 

Но как ее заранее определить, влезает она в блок или нет ? Если это научиться делать, то вопрос решен.

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

[Igor Schnaider]

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

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

[igmar]

Так а чем 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

Edited December 5, 2015 by igmar

[atlanta]

 

Так а чем 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

 

 

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

[Igor Schnaider]

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

 

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

[atlanta]

 

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

 

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

 

 

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

[Q4Dizzy]

Спасибо.

Нет, это не то, что мне нужно. У вас ограничения как раз на пропорции картинки. Табличные стили подходят для выравнивания по высоте, когда относительно большая ширина. И я также сделал во 2 варианте. Но когда большая высота и нужно выравнивать по ширине - это не работает, высокая картинка туда нее влезает.

Задача оказалась очень сложной при кажущейся простоте. Но люди же как-то делают это.

 

Скажите, что означает в стилях

.pic > span ?

Что означает ">" посередине ?

http://htmlbook.ru/css/selector/child

[atlanta]

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

 

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

Edited December 5, 2015 by atlanta

[igmar]

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

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

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

 

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

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

 

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

 

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

 

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

Igor Schnaider

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

 

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

[Igor Schnaider]

Так выравнивайте не с помощью таблиц. Тогда этих проблем не будет.

Кстати, в вашем примере с Яндекс фотками выравнивание как раз осуществляется с помощью псевдоэлемента.

[igmar]

atlanta

Нет, мне нужно не это.

Вот как все будет меняться размер блока в вашем первом варианте при изменении размера картинки. Он не должен меняться при загрузке в него разных картинок.

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

 

Второй вариант (адаптивное решение) то же самое:

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

[atlanta]

 

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

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

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

 

Мне нужно поместить в блок (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%; тоже наследуется

[igmar]

Igor Schnaider

А вы не можете показать мне оттуда кусочек кода, который это делает?

Я сам не смог найти.

[Igor Schnaider]

Ну, смысл такой: http://codepen.io/anon/pen/rxNveY

[Q4Dizzy]

Ну, смысл такой: http://codepen.io/anon/pen/rxNveY

 

При маштабировании бяка)) 

[igmar]

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

Нет.

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

 

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

Есть.

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

 

.gallery__item:before {

  content: '';

  display: inline-block;

  height: 100%;  

  vertical-align: middle;

}

 

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

[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