Jump to content

Kray Storm

User
  • Posts

    176
  • Joined

  • Last visited

  • Days Won

    3

Everything posted by Kray Storm

  1. Абсолютно верно. Поэтому-то мы и указываем все эти 100% от <html> до нужного блока. Иначе его высота определяется его же контентом, что делает взятие % уже для контента, в таком случае, забавной операцией с позиции логики. Но в приведенном варианте это учтено и высота везде указана явно. Но почему-то конечный результат, так как я, понимает только Опера. Это глюк, фича или какая-то моя невнимательность?
  2. Если сравнивать со студиями, то очень и очень привлекательная цена ) А у фрилансеров такой разброс по цене/срокам/качеству, что даже трудно что-либо определить, как "середину". Просто для себя было интересно узнать.
  3. Как вариант: #shop li{ display:inline-block; margin:30px;}
  4. А почему оно тогда тут не уезжает? Из серии <!--Тут не трогать--> и /*Тут тоже не трогать*/ ? )) Понятно. Т.е., это не вы писали? PS: Такой сайт, как последний у вас в портфолио, правда столько рублей стоит сделать? Это только верстка или все полностью от дизайна до хостинга (без SEO и поддержки)?
  5. По первому абзацу. У меня конечно, боевого опыта в верстке нет (а уж тем более в серьезных проектах), но мне кажется странным увязывать доступную область просмотра и ширину/высоту пунктов меню в такой величине, как количество строк текста. Раз меню горизонтальное, то, так понимаю, нужно учитывать ограничения по ширине? У вас же и так уже пункты меню строчно-блочные. Задайте им какой-то подходящий max-width: и vertical-align: для красоты. Манипуляция шириной самого контейнера мне кажется более адекватной реакцией на ограничение области вывода, чем изменение количества строк текста в этих контейнерах. А если две строки окажется мало, чтобы уместиться и нужно будет три? А так весь текст сам решит, на сколько строк ему биться, чтобы уместиться в область. Вроде такого. Если я не угадал в подходе, тогда поясните плз, мне будет интересно разобраться. Кнопку More с появлением дополнительных менюшек на CSS можно реализовать появлением скрытых блоков с позиционированием (хотя, наверное, на скриптах это проще). Что касается поддержки IE, то для IE7 можно порыться в направлении expression-ов.
  6. Это статья-урок 2012 года? Тогда первый совет - читай лучше htmlbook. Похоже автор той статьи писал ее не для того, чтобы кого-то научить, а чтобы самому разобраться (есть такой подход, да). По ссылке, приведенной mrnobody все расписано. Если все еще не понятно, вот несколько моментов: 1. Любой блочный элемент состоит из областей - box-ов. Это content- padding- border- и margin- box-ы. 2. Что определяет величина, задаваемая в параметрах width и height? Ну да. Ширину/высоту области контента. 3. В далекие времена IE5.5 все было не так. Значение width определяло ширину блока по внешней границе рамки, т.е. content+padding+border. Но однажды W3C стало скучно и они все переделали на так, как сейчас (п.2). И сегодня это имеет прикладной смысл знать, только если ты настойчиво решишь отказаться от использования <doctype>. В этом случае IE, не увидев декларацию, перейдет в режим совместимости (старых сайтов со старыми браузерами), в котором включится модель IE5.5. Либо кто-то из прошлого будет сознательно использовать IE5.5. Вот и все.
  7. Мда )) Уже начал сходить с ума, пытаясь понять логику, по которой float-элемент игнорирует height и min-height в процентах. Оказалось дело в Firefox. Допустим, у нас есть float-блок, который находится в родителе. И нам нужно, чтобы даже при отсутствии контента (или малом количестве) у плавающего была бы какая-то минимальная заданная высота. Как бы логично и удобно использовать min-height, который берется от родителя. Но FF все обламывает. Понятно, что такую модель можно реализовать и по-другому. Но вопрос в том, что есть ли способ, не меняя подход, научить FF видеть эту высоту? Перед нажатием на "отправить" проверил в Хроме. Та же проблема. Тогда это уже интереснее. Кто может подсказать что-то на этот счет? Код онлайн Этот же код: <!doctype html> <html> <head> <meta charset="utf-8"> <title>float height:100% error</title> <style type="text/css"> html, body{ height:100%; } body{ margin:auto; } #main{ overflow:hidden; width:50%; min-height:70%; margin:auto; background:#ccf; } #left{ float:left; width:50%; min-height:100%; background:#ffc; } </style> </head> <body> <div id="main"> <div id="left">Плавающий блок</div> </div> </body> </html> У Оперы и даже jsfiddle.net все в порядке.
  8. Раз уж заговорили про стоимость работы. Я понимаю - "свободный рынок+Москва"+"Котики!!!" и все такое. Но что думаете про сайт из портфолио за 2012 год, в котором сказано "Стоимость создания сайта от 10 000 руб." плюс сверху "индивидуальный расчет от сложности". А в самом сайте (на таблицах) сходу такие конструкции, как <body background="..."> и <div align="center">, это не говоря про <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0... и прочее. Насколько это "нормально"? Я не спец (совсем не спец), поэтому интересно "мнение трудящихся". Или если сайт с нуля и под ключ, то это норм? Сайт про котиков если кому интересно. Если это читает автор сайта - это я не с целью постебаться, а от растерянности и вообще(с) о_О ))
  9. Даже не знаю, что тут сказать. Все щас туда уезжают. Даже Меню, и то... Значит, кто-то толкает и "увозит" его. Хорошо, когда макет тренировочный и можно поотказываться от всего, что трудно сверстать ) Прийдется применить стандартный ход "секретное оружие" - экранируем наших logo-пловцов блоком с overflow. Я там "в порыве творчества" слегка похозяйничал, так что посмотрите внимательно - где-что не так стало. Долго думал над конструкцией: #wrapper { width: 985px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; background-color:#faf3b8; Это для чего? Внутрь <div id="middle"> особо не смотрел, но там тоже некоторые моменты показались "нестандартными". Похоже на простой двухколоночный макет, но почему-то обе колонки float:left, а левая еще и margin-left:-100%; при том что у нее есть и relative, который нигде не используется.
  10. Понятно. #gor-menu { background-image: url("img/bg-menu.jpg"); height: 93px; left: 513px; <!--Оставляем--> padding-top: 18px; position: relative absolute; top: 234px; width: 454px; } Если интересно, почему так, то... => При относительном позиционировании взаимодействие со смежными элементами сохраняется, независимо от новых координат элемента. В начальных координатах слева от меню находится плавающий logo. Пункты меню (и ссылки) являются строчными, а это значит, что они обтекают float-элементы (даже если они вложены в блоки). В результате позиционирования блок ушел, а осадок взаимодействие (обтекание) осталось. А вот при абсолютном позиционировании с элементом уже никто не взаимодействует. Кроме <html> или ближайшего предка с relative. Таким образом, (назначая родителю relative, но не сдвигая блок) можно регулировать точку отсчета элементов с absolute и делать им "как бы относительное как-бы позиционирование". Но в данном случае это даже и не нужно. Как-то так. PS: Больше! Больше котиков в Интернете!
  11. Если нужно, чтобы "меню двигалось влево" (я так понял, располагалось у левого края), то не надо его отодвигать на пол-экрана от этого "лево". ) #gor-menu { background-image: url("img/bg-menu.jpg"); height: 93px; left: 513px; <!--Убрать--> padding-top: 18px; position: relative; top: 234px; width: 454px; } PS: Потерялись размерности. width:248px; height:235(чего?); float:left; } #logo2 { width:248px; height:235(чего?); float:right; }
  12. Зависит от конкретного случая. Чтоб уж наверняка "не ошибиться", можно почитать про идентификаторы и классы в самоучителе на сайте.
  13. Так и должно быть. Ведь float-элементы игнорируются блочными. Как вариант - указать overflow. Либо поставить пустой блок-подкладку с clear между контентом и нижним краем контейнера. Можно его даже сгенерить через after.
  14. На счет кодировки... Условно говоря, есть кодировка в html-коде - <meta charset=...>; есть кодировка в которую сохранен файл, и есть кодировка, которая указывается в content-type-заголовке ответа сервера на запрос браузера. И если она указана (а она указана), то браузер ее и включает, и даже не смотрит что там написано в html-коде. Слова <meta charset=...> работают, если открыть офлайновый html-документ, т.е. когда указаний от сервера поступать не будет. Текст типа РўРёРїРѕРіСЂР°С говорит о том, что файл, сохраненный в utf-8 поступает с указанием кодировки windows-1251. Т.е. нужно смотреть настройки сервера.
  15. Это все очень хорошо, но вот что говорит заголовок ответа от сервера: Content-Type: text/html; charset=windows-1251 PS: Дабы браузеры не впадали в quirks-mode, можно еще добавить <!doctype html>. Особо полезно для IE. PPS: По-научному не иероглифы (????), а кракозябры ))
  16. Судя по описанию, похоже на проблемы округления размеров в px при масштабировании. Суть в том, что при масштабе 0,75 или 0,5 браузер и монитор физически не могут отобразить 0,75 или 0,5 пиксела. Поэтому браузеры выкручиваются прибавлением/отниманием 1px от общей величины элемента. Теоретически можно исправить ситуацию, если сделать разделительные линии в 2px. Тогда 1 пиксел будет "в запасе" при масштабировании. Но, конечно, линии будут толще. Ну или попробовать самому блоку с горизонтальной чертой задать height:3px, а внутри уже выровнять изображение по центру. Кстати, только что сам столкнулся с подобным в Firefox: есть <span>, за ним сразу <div> в нормальном потоке. Никаких отступов нет. Так вот, при масштабировании, между ними как раз то возникает, то пропадает 1-пиксельный горизонтальный зазор.
  17. А что дает такая конструкция? Какой смысл в добавлении <span> внутрь <a>? <li> <a href="#"> <span class="menu">Menu Item</span> </a> </li>
  18. Дизайн... ну, ничего особенного. Форумно. Минимум картинки максимум букв. Если это специализированный форум, то люди приходят за инфой и им, в основном, без разницы, какие там тени и иконки. 1. Пиктограмма "Вся Активность" в стиле Pixel-Art, а остальные - нет. Как-то не в тему. 2. Кнопка "Задать вопрос" обрамлена белым полем, как какой-то особый элемент. Зачем? 3. ОГРОМНОЕ поле поиска. 4. Смысл выводить возле названия темы +1 и -1, если голосовать можно (и нужно) только прочитав ее. Т.е., зайдя внутрь. Вот там этих кнопок и достаточно. 5. Шрифт тем в списке немного бы потолще. Теряется. Тут не столько дизайн, сколько юзабилити нужно думать. А это будет понятно только после n-часов пользования.
  19. Если все правильно понял про "цветочки и листочки", то тут нечто подобное обсуждали.
  20. Тут "хитрость" в том, что используется блок с картинкой, который спозиционирован изначально так, что выходит далеко влево за границу своего родителя. Вот и получается, когда ты двигаешь окно, картинка съедается, но только до границы родителя. А потом, поскольку картинке с жесткой шириной и без всякого маргина справа до правого края родителя еще несколько сотен px - она и едет себе до самого этого края, как и положено воспитанному контенту. Если смотреть по визуальным границам, то: {картинка[}родитель] Если по вложенности: [{картинка с absolute}родитель с relative] Элемент с absolute можно спозиционировать куда угодно, но отсчет будет идти от ближайшего родителя с не static. У нас - relative, в нормальном потоке на своем месте. Как-то так. ===Это должно быть вторым сообщением, но форум их безжалостно объединил=== Не совсем фоном. <img src="http://forum.worldoftanks.ru/public/style_images/wg/logo.png" alt="Перейти к списку форумов"/> Не особо-то в равной. Левый край окна упирается в букву W и "двигает" лого. А обрезается все справа.
  21. Товарищи-верстальщики! Каждый раз самостоятельно отвечая на форуме на вопрос, вы воруете у Google ценного посетителя. Одумайтесь! Так жить нельзя!
  22. Например, если неизвестно 1 или 10 там колонок, то каждую такую колонку делать блоком и позиционировать друг-за-дружкой, а внутри них уже располагать вон те синенькие блоки.
  23. Как вариант - если нужно как там, то сделать как там. Зеленый фон - это не рисунок а заливка блока с заданной высотой, который, как ему и положено растягивается на ширину родителя. Сам рисунок-надпись - картинка с прозрачностью внутри этого блока. Он по умолчанию сохраняет свой размер, поэтому и вылазит за край блока, когда там уже нет места. А в чем сложность? PS: Сообщений:1 Регистрация: 14 Март 10 Круто. Представил, как человек два-с-половиной года тщательно готовил вопрос
×
×
  • 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