b0s

При любом размере окна браузера, не должно быть так: Правая фотография, по высоте, физически, такая же как и остальные, но остальные фотографии меньше, так как на них действует {width:25%}, а на эту высокую - нет. То есть, оно действует, но её ширина и так достаточно мала и пропорционально ширине, её высота конечно больше.

Здравствуйте! У меня есть страница, в которой располагается список галерей. Всего галереи четыре. Вчера обнаружил, на старых разрешениях из всего списка галерей видно только первую фотографию слева. А самый маленьких вообще видно только её верхнюю границу. Перенаписал код, часа наверное за четыре, за пять. Был доволен и счастлив, т.к. в IE6 при любых разрешениях, при использовании которых были проблемы, всё стало отображаться как я хотел. Окно браузера можно было уменьшать как угодно, картинки всё равно были там где были при открытии страницы, но масштабировались. Но моя радость не долго со мной пробыла... Все миниатюры в галереи были горизонтальными и я решил попробовать заменить одну из горизонтальных миниатюр, миниатюрой фотографии вертикального формата. Стало грустно потому, что фотографии масштабировались по процентной ширине. Эта же фотография высокая, а не широкая и если ей задавать высоту, то это применяется ко всему стилю, а это влияет на все фотографии. В конечном итоге размер фотографий оказывается непредсказуемым.. Конечно занудство и идеализм, мучающие мою голову зудят, что надо потратить кучу сил и времени, но пока что не соглашаться на внедрение JS, для решения этого вопроса. Очень хочу решить вопрос CSS, но как не могу предположить. На всякий случай подведу итог того, что пытаюсь сделать: масштабируемые миниатюры, уменьшающиеся, но сохраняющие пропорции при уменьшении окна, находящиеся на равном расстоянии, друг от друга, так же при этом имеющие определённый размер, даже не смотря на то, что одна из фотографий в галерее больше в высоту, а остальные в ширину, но при этом она всё равно должна располагаться так, словно она широкая но умещаться правильно также и по высоте. Искренне прошу меня простить, ежели повторяю тему. Провёл поиск по форуму, но не нашел. Также искал в гугл, также безрезультатно. Пожалуйста, код: <style> html, body { text-align:center; height:100%; width:100%; margin:0; padding:0; } #gallery { display:inline-block; white-space:nowrap; } #gallery a, #gallery a:link,#gallery a:hover { vertical-align:top; border:0px solid green; display:inline-block; font-family: Comic Sans MS; font-size: 100%; font-weight:bold; WIDTH:25%; HEIGHT:25%; margin:2.5% 9%; text-decoration:none; } #gallery a img{ WIDTH:100%; border:0px; } #gallery a div{ white-space:normal; text-decoration:underline; } </style> <div id="gallery"> <a href="gal1/" style="color:#993366;"> <img alt="gal1" src="pics/gal1_thumb.jpg" /> <div>gal1</div> </a> <a href="gal2/" style="color: #800000;"> <img alt="gal2" src="pics/gal2_thumb.jpg" /> <div>gal2</div> </a> <br /> <a href="gal3/" style="color: #FFFFFF;"> <img alt="gal3" src="pics/gal3_thumb.jpg" /> <div>gal3</div> </a> <a href="gal4/" style="color: #FF99CC;"> <img alt="gal4" src="pics/gal4_thumb.jpg" /> <div>gal4</div> </a> </div> Буду благодарен за ваши ответы! Ещё кстати, наткнулся на вот такой вариант сохранения пропорций, но не могу понять как его применить когда размер миниатюр зависит от размера окна

Я провёл небольшое тестирование. Если Firefox'овое расширение Firebug работает правильно, то получается, что Firefox неверно обрабатывает команды для работы с кодировкой. Opera реагировала на все "намёки" сменить кодировку, вне зависимости от кодировки самого файла. То есть при использовании @charset "utf-8" (внутри CSS), charset как параметра тэга link - всё прокатывало. А вот firefox, подкачал, похоже. Если конечно я ничего не упустил.

Я так все и делал! Но русский шрифт в CSS искажался, а когда переделал в ANSI // Windows-1251 все исправилось. Если не найду этому объяснения то оставлю кодировку Windows-1251. Так вот я вам пишу о чём. Вы, скорей всего, всё сделали правильно. Но, по какой-то причине, таблица стилей, всёравно, даже при условии, что вы сохраняйте файл кодируя его в UTF-8, даже при том, что вы явно задаёте кодировку командой @charset "utf-8"; внутри CSS файла, всё равно считывается в кодировке windows-1251, а не в utf-8. Иными словами вы скорей всего всё сделали что от вас требуется, возможно у браузера есть проблемы с определением кодировок в CSS файлах. Ещё раз повторю, попробуйте использовать charset как параметр тэга link.

Если вы, в Notepad++ перед сохранением делали так: то вы вряд ли решите эту проблему, так как по моему скромному мнению вы всё сделали от вас зависящее, а дольше уже совсем не вас касается.

Понимаю, что вопрос глупый, но на какую тему? Кодировки текстовых файлов? Кодировки в HTML 5 / CSS / JavaScript? Кодировка между браузером и сервером? Просто вариантов названия темы достаточно, что бы задать такой вопрос.

Статью на тему? Какую?

Потому, что файл в любом случае читается браузером или передаётся сервером, не знаю как правильней, в кодировке windows-1251, вне зависимости от того что файл записан в UTF-8, что внутри файла есть явная команда на чтение файла в UTF-8. Понимайте?

@charset "utf-8"; body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.875em; background: #fff url(images/bg.gif) left top repeat-x; color: #333; } a , a:active, a:visited{ color: #0062c6; text-decoration: none; } a:hover { color: #5191e8; text-decoration: underline; } a { outline: none; } a img { border: none; } Я к сожалению не могу вам предложить, что то дельное. Могу ещё предложить обратить внимание на следующую информацию, возможно вы её читали не раз: Надеюсь, что возможно параметр чарсет для тэга линк подействует лучше, хотя я сомневаюсь.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> На моей странице UTF-8 кодировка CSS файла не определялась правильно до тех пор пока я командой на php не дополнил заголовок, как предлагал выше. Файл ".htaccess" на narod.ru запрещён. Приведите пожалуйста пример строки, которой вы задаёте кодировку в CSS файле.

Простите, а как выглядит код загрузки таблицы стилей, на страничке, к которой применяется таблица стилей?

А вы страницу стилей загрузили и открыв контекстное меню выбрали команду Просмотреть исходный код или загрузив всю страницу и выполнив тоже самое?

У меня адресной строке Notepad++ показывает кодировку файла. И я сохранил CSS файл в формате UTF-8 без BOM. Абсолютно также сделал. А как именно вы просматривайте эту таблицу стилей в браузере? Как открывайте? Простите если вопрос опять глупый.

Простите, за глупый вопрос. Как вы можете подтвердить, что сохранили файл в UTF-8? Не уверен, что это имеет отношение к делу, но на всякий случай. Не сохранён ли файл в формате UTF-8 с BOM ? Версия Mozilla Firefox установленная у меня - 4.0.1. Я использую расширение Firebug, которым просмотрел запрос своего CSS файла, добавив в него строку с русскими буквами и сохранив его в UTF-8. К сожалению в заголовке ответа нет конкретной кодировки, но русский текст читаем. Предполагаю, что и файл правильно читается браузером. Забавно, но если открывать CSS файл прописав адрес к нему в адресной строке, то информация о загрузочной странице гласит, что файл загружен в windows-1251 В мой веб сервер встроен PHP, и сервер настроен на обработку CSS файлов как PHP. Это не самый удобный способ, но его главный плюс в том, что я могу дополнять CSS условиями PHP. Благодаря чему, внутрь файла, можно добавить следующую строку <? header('Content-type: text/css;charset=utf-8');?>, если в вашем случае это возможно, файл скорей всего будет обрабатываться правильно. Я не считаю этот вариант приемлемым, так как совсем не обязательно, что у вас есть возможность, обрабатывать CSS другим обработчиком, но если вам нужно правильное отображение и для вас такого типа обработка возможна, это один из вариантов. Ещё один вариант это просто наблюдать файл в текстовом редакторе)))). Больше ничего придумать не могу.

Согласен! Сделал. Фраза "Сделай это с експрешном" звучит словно "Сделай это с кайфом" ))))))) Согласен Медведь. Только вот хорошо бы он тебя услышал psywalker, я услышал, и вас и mishka2. Спасибо!

Погоди, а с чего ты взял, что вот твою задачу можно 100% кроссбраузерно решить чисто на CSS? p.s. И кстати называя меня "Всезнайкой", ты меня этим самым даже обидел. Я наоборот пытаюсь донести до тебя, что ты слишком перебираешь с упёртостью там, где она совершенно не нужна. А я как раз совсем не хотел сказать, что вы всезнайка, а казалось не написал всего пару слов. В прочем наверное это правило обратной связи фраз. Если кто то говорит что ты не знаешь, значит ты думаешь что тебя считают не опытным юнцом, и думаешь что тот кто тебя считает юнцом - всезнайка, странно но я как раз писал текст во избежании мысли, что в моей голове сложилось представление что вы всезнайка. Есть по моему анекдот про программистов, еслиб которые строили дома они получались бы странными, не поддающимися законам физики, вот я подобную фразу построил))) настоящий программюга)))))) Простите меня, я совсем не хотел вас обидеть... Спасибо, я вам нашептал в личку об AREA, ещё до вашего поста.

А уже сделали, где-то тут был пост, одного из участников, который махом решил гору вопросов. Во http://forum.htmlbook.ru/index.php?showtopic=26713&view=findpost&p=200935 В словосочетании явно выражен взмах рукой, и слышна фраза подобная "Да иди ты куда хочешь, хоть с дома прыгай...". Жалко, я совсем не хотел такого ощущения вызвать. Нет, совершенно не так. Подтекст был другой: "Ну раз ты такой настырный и не слушаешь, что тебе говорят более опытные камрады, то делай по своему. Удачи." psywalker, вы очень зря так пишите. Я не настырный и здесь дело не в том, что я считаю вас слишком умным или очень опытным, и из-за чувства всезнайства считаю вас неправым. Я как раз согласен с вами, я же написал об согласии с вами. Но я не считаю правильным использование лишних возможностей которые могут не работать в той или иной ситуации. Тем не менее я включил в код то что вы предложили и очень вам благодарен.

В словосочетании явно выражен взмах рукой, и слышна фраза подобная "Да иди ты куда хочешь, хоть с дома прыгай...". Жалко, я совсем не хотел такого ощущения вызвать.

Два раза отправилось сообщение.

И что? Даже и если так, то это полнейший бред. У тебя на сайте вообще жс не будет? И назови мне того извращенца, у которого отключен ЖС в 2011? Я не сторонник идеи, что JS надо отключать, и не сторонник идеи, что JS это плохо. Активное содержимое это здорово! Большой функционал, много гибких функций. С приходом HTML5 JS безусловно станет его неотъемлемой частью как и сами тэги HTML)))). Возможно вы со мной не согласитесь, но я попросту стараюсь придерживаться простых правил или границ, как вам угодно. Мне кажется, что меню которое я делаю, не должно вообще содержать JS, просто потому, что без JS его можно сделать и так. Это не выползающее меню, ему не нужны скрипты. Раньше, я делал какие-то более примитивные вещи и там, довольно много, использовал JS, а потом немного вычерпывая всякую информацию решил, что надо использовать JS там где этот язык действительно нужен. Я бы мог остановится на "onclick='location.href'", но это же абсурд, для того что бы кнопка работала как кнопка надо что бы у пользователя был включён JS. Ну вот бывает так что у пользователя он выключен, ну вот бывает такое и всё. Да, он сам должен разбираться что у него включено, а что нет, и он сам должен разбираться в том, что перед входом на мой сайт, что бы перейти из главного меню в другой раздел он должен включить JS, или что бы работала какая то часть кнопки, но мне кажется это совсем не верно. Мне кажется, что если вы на форум обратились за советом, то значит "вещи" выполняются совсем не легко. display: table и table-cell поддерживается во всех современных браузерах и IE8+. Для людей с IE7- как раз и используется экспрешен. Если люди пользуются старыми браузерами, да и ещё отключают JS, то вероятно они ищут острых ощущений. Кстати, даже Яндекс придерживается такой версии. Кстати, чего гадать, посмотрите сколько на ваш сайт заходит людей с IE и сколько с отключённым JS. Если много, то можно сделать альтернативный вариант этой кнопки для старых браузеров. Простите, я ровняюсь не на Яндекс, но ваше мнение мне важно, я его очень ценю и согласен полностью. Жалко мир не такой каким бы мне и многим другим хотелось его видеть. То что может работать без активного содержимого ИМХО должно без него работать. С IE людей вообще нет. Большая часть пользуется Opera и Mozilla. Но это для меня не показатель. На самом деле експрешн по сути это тот же джс, если в браузере ие запретить активное содержимое, то и експрешны не отработают. Спасибо за ваш ответ! На самом деле експрешн по сути это тот же джс, если в браузере ие запретить активное содержимое, то и експрешны не отработают. Ничего страшного, будет повод перейти на современный браузер Я не могу полагаться на то, что кто-то на что-то перейдёт, моё дело делать всё так, что бы оно работало как можно на большем диапазоне. Простите если выгляжу полным дебилом ослом или придурком, я не оный. Проще конечно забить на всё это, и вообще монтировать сайт под мой любимый браузер Firefox, но что то мне кажется, что это будет не фантан. Кстати, ещё мысль. Если экспресии есть, значит они нужны и это факт. Но одно дело когда сайт заведомо активный весь, а другое дело если там мало активности. Хотя кто сейчас без активного содержимого сайты делает... я таких практически не вижу. Так что во многом с вами согласен дорогие отвечающие.

Согласен! Спасибо вам за совет! Очень дельный.

само собой, это же таблица)) Там все предельно ясно. Я читал форумы на эту тему, со знакомым программистом болтал, и на форумах и программист дали мне знать, что вёрстка таблицами признак плохого тона. Я с тех пор таблицы решил использовать только когда действительно собираешься делать таблицу.

Мне почему то кажется, что это попахивает фиксированной непроцентной разметкой. Ммм? почти. Можно и процентами попробовать все отмерить. Но это самый последний способ и подойдет он, если нет ничего больше на страничке. например вот так все прекрасно работает: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" /> <head> <title>Пример</title> </head> <style> body { height:100%; margin:0; font-size:12px; } .main{ position:absolute; height:90%; background:green; width:22%; overflow:hidden; text-align:center; } .text{ position:absolute; height:90%; width:90%; background:gray; margin:0px 10px 0px 10px; text-align:left; } .left{ position:absolute; display:block; top:93%; left:5%; } .right{ position:absolute; display:block; top:93%; left:55%; } #path{ position:absolute; top:96%; left:40%; } </style> <body> <div class="main"> Список файлов <div class="text"> Текстовый документ.txt(81 б) </div> <span class="left">Файлов в папке: 1</span> <span class="right">Общий размер: 81 б</span> <div id="path">Путь: /</div> </div> </body> </html> Мне почему то кажется что вариант с таблицей самый хороший, хотя и громоздкий. Он простой и довольно понятный.

Мне почему то кажется, что это попахивает фиксированной непроцентной разметкой. Ммм? Думаю, да. Скорей всего с 99% вероятностью решен.

Растянется Уже растягивается, да ещё и с улыбкой))))))))))) Я конечно переделаю разметку под нужды, но в общем это она же. <style> body { height:100%; margin:0; font-size:12px; } .main{ position:absolute; height:90%; background:green; width:22%; min-width:250px; text-align:center; } .text{ width:95%; height:90%; background:gray; margin:0 auto; text-align:left; overflow:auto; vertical-align:top; } .left{ float:left; margin:10px; } .right{ float:right; margin:10px; } #path{ margin-top:10px; clear:both; } </style> <table class="main"> <tr> <td>Список файлов</td> </tr> <tr class="text"> <td> Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) Текстовый документ.txt(81 б) </td> </tr> <tr> <td> <span class="left">Файлов в папке: 1</span> <span class="right">Общий размер: 81 б</span> <div id="path">Путь: /</div> </td> </tr> </table>