igmar

Я правильно понимаю, что из скрипта нельзя прочитать css, поэтому нельзя присвоить элементу класс определенный в css. т.е. в css есть .class1{margin:0;} раньше он не использовался нигде. значит нельзя для какого-то элемента присвоить из скрипта element.className="class1" ?

Ладно, из этого я делаю вывод, что так и было задумано. Хотя я этого не понимаю. Страница (html) отображается уже со стилями css - значит все атрибуты уже присвоены всем элементам. Почему же javascript не может прочитать их? Ведь они уже на странице, т.е. в памяти. Скрипт же читает не файл css, а обращается к значениям свойств элементов которые уже загружены в память?

Запарившись в доску пились свое меню, скажите кто-нибудь, пожалуйста: насколько javascript умеет читать стили прописанные в css? http://codepen.io/anon/pen/RrPNPe очередной недолепленный кирпич Если я в блоке css задаю ul {display: block;} а потом читаю его из функции (конкретно, по id, чтобы без вопросов) alert(document.getElementById("6").style.display); то результата нет (неопределен), хотя в css он задан Но если в функции сначала присвоить его document.getElementById("6").style.display="block"; то все отлично, значение потом читается. И значение реально меняется - в окошке все отображается. В чем проблема? Что не так и почему значение не читается без его предварительного задания в функции?

andrey7287, спасибо. Позже разберусь. Сначала придется читать js чтобы понять. Недолепленный кирпич http://codepen.io/anon/pen/ZQYYjr- вертикальное меню http://codepen.io/anon/pen/QywdoW Заступорился. Хочу сделать, чтобы при щелчке по закрытой папке она раскрылась, а если по раскрытой - то закрылась. Понятно, что низлежащим подменю надо сделать display: none или наоборот display:block. Но как их определить, эти низлежащие подменю?

Изменение фона картинки по стрелкам сделал. Теперь нужно научиться получать извне список картинок (url) и сделать, чтобы они сменяли друг друга при щелкании по стрелкам в соответствии со списком. Кто знает и может подсказать как это сделать?

Пусть будет кирпичик http://codepen.io/anon/pen/jWOdNY- изменить фон

Картинки допиливать я решил потом, т.к. уже и с этим можно и нужно двигаться к следующим этапам. Подскажите пожалуйста что-нибудь, чтобы подступиться к новой задаче на этом каркасе: http://codepen.io/anon/pen/Bjaqpw Если щелкать по стрелкам вправо-влево, то они принимают клики. Как по клику автоматически сделать изменения в index.html, чтобы изменить стиль div class="contpic" и сделать ему бэкграундом другой url. Например заменить картинку bigheight.jpg на bigwidth.jpg - чтобы было понятно как это работает. На самом деле непринципиально, что именно там изменить. Как вообще что-то изменить там по клику? Мне сказали на другом сайте, что есть технология Ajax, которая умеет менять часть сайта. Кто-нибудь может объяснить как ее сюда привинтить? Или каким-то иным путем изменить index.html? Я могу вставить в html код на php. Он будет при загрузке страницы формировать какие-то строки, например, задавать тот же бэкграунд. Но как сделать, чтобы он по клику запустился, сформировал новые строки и перезагрузил эту часть страницы?

У меня тоже картинки растянуты по ширине. Иногда они нормальные - не знаю с чем связано. Вот посмотрите, она же растянута. http://igmar.hop.ru/screen1.jpg

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

Спасибо. Кажется, это то, что мне нужно. Сейчас поизучаю. Нет. Там не работает вертикальное центрирование широкой картинки. http://codepen.io/anon/pen/RrwyWO Есть. Я добавил по аналогии с :after { .gallery__item:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;} Вроде получилось.

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

atlantaНет, мне нужно не это. Вот как все будет меняться размер блока в вашем первом варианте при изменении размера картинки. Он не должен меняться при загрузке в него разных картинок. http://codepen.io/anon/pen/Ywzamd Второй вариант (адаптивное решение) то же самое: http://codepen.io/anon/pen/obNdNP

Поскольку я новичок в этом деле, то многое до меня трудно доходит, потому что многих основ не знаю. Но учиться и рассказать, что мне нужно, я готов всегда. Мне нужно поместить в блок (div) неизвестного размера картинку неизвестного размера. Картинка должна быть центрирована по вертикали и горизонтали блока. Если картинка меньше размера блока, то она должна поместиться своим размером. Если картинка больше блока по какой-то стороне, то она должна пропорционально сжаться под размер блока. Если окно изменяется (и размеры блока, соответственно, изменяются), то и размеры, соответственно, картинки должны изменяться. На примере, мне нужно сделать это (черное окно с картинкой). При изменении размера окна размеры картинки будут пропорционально меняться. Причем в черное окно можно поместить картинку любого размера - хоть малюсенькую, хоть огромную - огромная пропорционально сожмется. https://fotki.yandex.ru/next/users/igor-i-markin/album/510268/view/1334896 По поводу таблиц прекрасно сказал Igor Schnaiderвысоту установить на саму таблицу не получиться, так как она подстраивается под содержимое, а не наоборот. Так вот мне нужно, чтобы содержимое подстроилось под блок.

Я не понял. Объясните. Как это можно приделать к 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

Вот лучшее решение, которое пока я нашел. Без нагромождения таблиц и блоков. http://codepen.io/anon/pen/qbBPGq Но там есть косяк, который пока непонятно как преодолеть. Если картинка больше блока, то background-size: contain ; А если картинка меньше блока, то background-size: auto ; Но как ее заранее определить, влезает она в блок или нет ? Если это научиться делать, то вопрос решен. Потому что, если картинка маленькая, то она будет растягиваться под размеры блока и резкость будет никакая. Нельзя ее растягивать.

Спасибо. Нет, это не то, что мне нужно. У вас ограничения как раз на пропорции картинки. Табличные стили подходят для выравнивания по высоте, когда относительно большая ширина. И я также сделал во 2 варианте. Но когда большая высота и нужно выравнивать по ширине - это не работает, высокая картинка туда нее влезает. Задача оказалась очень сложной при кажущейся простоте. Но люди же как-то делают это. Скажите, что означает в стилях .pic > span ? Что означает ">" посередине ?

Помогите, пожалуйста, если кто знает как делать. Уже реально замучился с картинками, чтобы их уместить в div независимо от их размера. Трудность в том, что абсолютные размеры никакие неизвестны заранее. http://codepen.io/anon/pen/dGypdB Вот я сделал 3 варианта: 1) картинка большущей высоты, 2)картинка большущей ширины, 3)маленькая картинка. Как мне эти 3 варианта объединить, чтобы можно было поместить любую картинку в один контейнер, а не делать 3 разных? Чтобы показывалось как сейчас: все центрировано, размеры подогнаны. Хоть идею дайте, не могу найти статей на эту тему. Еще плохо то с моими вариантами, что у меня нет критериев, когда один применять, а когда другой. Т.е. насколько высота должна быть больше ширины, чтобы применять 1-й вариант, а не 2-й - пока я это сделал на глазок для очевидных картинок, но реально многие неочевидные, а примерно квадратные.

Всем огромное спасибо за помощь. Ухожу на неделю переваривать. Если никто не против, я буду складывать сюда свои кирпичики, которые потом мне пригодятся. А то они теряются. http://codepen.io/anon/pen/WrepRO- меню вкладками

Спасибо. В целом понятно, с чем разбираться. Не понял вот: <li class="menu__item menu__item_opened"> Здесь присваиваются сразу 2 класса?

Спасибо большое. Про макс ширину и высоту я бы сам не додумался - это работает. Для верхнего блока я придумал так: position: absolute; top: 0; bottom: 80px; Т.к. размеры нижнего блока постоянны, при заданных top & bottom высота блока будет подстраиваться под высоту родителя. Так проблема в том, что я не могу читать сложный код, чтобы посмотреть как страница сделана. Так же как латинский текст: буквы знакомые, а что написано непонятно. А когда делаются несколько страниц с одинаковым главным меню, это просто один блок header вставляется на каждую страницу, а подсвечиваются разные вкладки в меню ? А как сделать такое вертикальное меню? У раскрывающихся пунктов/ подпунктов сначала есть иконка закрытой папочки с плюсиком, когда он раскрыт - то папка закрыта и она с минусом; для пунктов не имеющих подпунктов нет иконки папки. Принципиально как? Берутся иконки и при формировании списка перед текстом вставляется картинка? И поскольку это строчные элементы, то просто формируется строка списка? Примерно так?: <ul><li> +<img src="закрытая_папка.gif" /> Пункт_меню_1 </li></ul> Образца нет, видел такой сайт очень давно.

ОК. Спасибо. На самом деле, вопросы у меня есть. 1. У меня есть div, в котором по высоте есть 2 div.Второй нижний, неизменного размера, я прижимаю вниз margin-bottom: 0; (ему нужно задать position: absolute; и родителю задать position: ...) Но как мне сделать верхний блок на оставшуюся высоту? Это должен быть самостоятельный блок, чтобы ему сделать полосу прокрутки и свой стиль. По ширине я могу это делать - если родитель flex, то задать ширину для первого блока width: 100% и он займет всю оставшуюся ширину. Но с высотой это не проходит, height:100% не срабатывает. 2. Чтобы поместить картинку большого размера в div, я могу задать либо width:100% , либо height: 100%. Она пропорционально сожмется и поместится. Но я не знаю заранее, у нее больше ширина или высота. Как мне поместить в блок картинку неизвестных пропорций? Если задать width:100%; height:100%; то она исказится. Есть ли способ, не зная заранее размеры картинки, поместить ее в div от края до края? Еще вопрос. Как в принципе сделан черный блок этой страницы? https://fotki.yandex.ru/next/users/igor-i-markin/album/510268/view/1334869 Видно, что черный блок состоит из 2-х блоков (со стрелками). По ширине левый примерно 40%, правый 60%. Но сверху на них наложена картинка. Но при этом щелкая как бы по картинке, все равно эти щелчки принимают черные блоки. Они прозрачные и находятся сверху картинки? А черный фон под всеми ними? Или они под картинкой, но каким-то образом принимают щелчки?

Сделал. http://codepen.io/anon/pen/rOXGQM

Новый адрес шапки. По старому пропала кнопка Save. http://codepen.io/anon/pen/rOXGQM Теперь я знаю, что такое блочные и строчные элементы и какие теги к ним относятся.

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

Потому что там можно было без колонок обойтись и сделать проще. Я так и сделал. Вот с колонками. http://codepen.io/anon/pen/zvVXZQ p.s. Было бы хорошо, если бы вы иногда давали ссылки на статьи или примеры, как нужно делать. Иначе, методом тыка, уходит слишком много времени. Обычно обучение строится по 2 схемам: 1) ученику даются какие-то основы, потом он их прорабатывает и на их основе решает задачи, 2) дается непонятное задание и нужно каким угодно способом сделать результат. Пока я иду вторым путем. Как я сделаю правильно, если никогда не видел, как нужно делать правильно? Это слишком медленно.