Jump to content

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


igmar
 Share

Recommended Posts

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

 

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

position: absolute;

top: 0;

bottom: 80px;

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

 

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

 

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

 

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

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

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

Link to comment
Share on other sites

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

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

 

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

Edited by Igor Schnaider
Link to comment
Share on other sites

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

 

Не понял вот:

 

  <li class="menu__item menu__item_opened">

 

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

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

 

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

Link to comment
Share on other sites

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

 

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

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

Edited by igmar
Link to comment
Share on other sites

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

 

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

 

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

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

 

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


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

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

Спасибо.

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

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

 

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

.pic > span ?

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

Link to comment
Share on other sites

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

 

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

 

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

 

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

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

 

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


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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Так а чем 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 by igmar
Link to comment
Share on other sites

 

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

 

 

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

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

 

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

 

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

 

 

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

Link to comment
Share on other sites

Спасибо.

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

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

 

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

.pic > span ?

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

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

Link to comment
Share on other sites

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

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

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

 

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

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

 

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

 

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

 

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

Igor Schnaider

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

 

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

atlanta

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

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

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

 

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

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

Link to comment
Share on other sites

 

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

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

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

 

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

Link to comment
Share on other sites

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


Нет.

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

 

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


Есть.

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

 

.gallery__item:before {
  content: '';
  display: inline-block;
  height: 100%;  
  vertical-align: middle;
}
 
Вроде получилось.
Link to comment
Share on other sites

 

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

Нет.

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

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy