-
Posts
176 -
Joined
-
Last visited
-
Days Won
3
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Kray Storm
-
Высота float-элемента в 100% в FF и Chrome
Kray Storm replied to Kray Storm's question in HTML Coding
Абсолютно верно. Поэтому-то мы и указываем все эти 100% от <html> до нужного блока. Иначе его высота определяется его же контентом, что делает взятие % уже для контента, в таком случае, забавной операцией с позиции логики. Но в приведенном варианте это учтено и высота везде указана явно. Но почему-то конечный результат, так как я, понимает только Опера. Это глюк, фича или какая-то моя невнимательность? -
Если сравнивать со студиями, то очень и очень привлекательная цена ) А у фрилансеров такой разброс по цене/срокам/качеству, что даже трудно что-либо определить, как "середину". Просто для себя было интересно узнать.
-
Как вариант: #shop li{ display:inline-block; margin:30px;}
-
CSS3 и HTML5 стоит ли заморачиватся новичку?
Kray Storm replied to Alazaren's question in HTML Coding
Ну вот тогда заживем... -
А почему оно тогда тут не уезжает? Из серии <!--Тут не трогать--> и /*Тут тоже не трогать*/ ? )) Понятно. Т.е., это не вы писали? PS: Такой сайт, как последний у вас в портфолио, правда столько рублей стоит сделать? Это только верстка или все полностью от дизайна до хостинга (без SEO и поддержки)?
-
По первому абзацу. У меня конечно, боевого опыта в верстке нет (а уж тем более в серьезных проектах), но мне кажется странным увязывать доступную область просмотра и ширину/высоту пунктов меню в такой величине, как количество строк текста. Раз меню горизонтальное, то, так понимаю, нужно учитывать ограничения по ширине? У вас же и так уже пункты меню строчно-блочные. Задайте им какой-то подходящий max-width: и vertical-align: для красоты. Манипуляция шириной самого контейнера мне кажется более адекватной реакцией на ограничение области вывода, чем изменение количества строк текста в этих контейнерах. А если две строки окажется мало, чтобы уместиться и нужно будет три? А так весь текст сам решит, на сколько строк ему биться, чтобы уместиться в область. Вроде такого. Если я не угадал в подходе, тогда поясните плз, мне будет интересно разобраться. Кнопку More с появлением дополнительных менюшек на CSS можно реализовать появлением скрытых блоков с позиционированием (хотя, наверное, на скриптах это проще). Что касается поддержки IE, то для IE7 можно порыться в направлении expression-ов.
-
Разное отображение блоков с одинаковыми размерами в браузерах.
Kray Storm replied to rikitiki's question in HTML Coding
Это статья-урок 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. Вот и все. -
Мда )) Уже начал сходить с ума, пытаясь понять логику, по которой 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 все в порядке.
-
Раз уж заговорили про стоимость работы. Я понимаю - "свободный рынок+Москва"+"Котики!!!" и все такое. Но что думаете про сайт из портфолио за 2012 год, в котором сказано "Стоимость создания сайта от 10 000 руб." плюс сверху "индивидуальный расчет от сложности". А в самом сайте (на таблицах) сходу такие конструкции, как <body background="..."> и <div align="center">, это не говоря про <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0... и прочее. Насколько это "нормально"? Я не спец (совсем не спец), поэтому интересно "мнение трудящихся". Или если сайт с нуля и под ключ, то это норм? Сайт про котиков если кому интересно. Если это читает автор сайта - это я не с целью постебаться, а от растерянности и вообще(с) о_О ))
-
Даже не знаю, что тут сказать. Все щас туда уезжают. Даже Меню, и то... Значит, кто-то толкает и "увозит" его. Хорошо, когда макет тренировочный и можно поотказываться от всего, что трудно сверстать ) Прийдется применить стандартный ход "секретное оружие" - экранируем наших 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, который нигде не используется.
-
Понятно. #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: Больше! Больше котиков в Интернете!
-
Если нужно, чтобы "меню двигалось влево" (я так понял, располагалось у левого края), то не надо его отодвигать на пол-экрана от этого "лево". ) #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; }
-
Зависит от конкретного случая. Чтоб уж наверняка "не ошибиться", можно почитать про идентификаторы и классы в самоучителе на сайте.
-
Так и должно быть. Ведь float-элементы игнорируются блочными. Как вариант - указать overflow. Либо поставить пустой блок-подкладку с clear между контентом и нижним краем контейнера. Можно его даже сгенерить через after.
-
На счет кодировки... Условно говоря, есть кодировка в html-коде - <meta charset=...>; есть кодировка в которую сохранен файл, и есть кодировка, которая указывается в content-type-заголовке ответа сервера на запрос браузера. И если она указана (а она указана), то браузер ее и включает, и даже не смотрит что там написано в html-коде. Слова <meta charset=...> работают, если открыть офлайновый html-документ, т.е. когда указаний от сервера поступать не будет. Текст типа РўРёРїРѕРіСЂР°С говорит о том, что файл, сохраненный в utf-8 поступает с указанием кодировки windows-1251. Т.е. нужно смотреть настройки сервера.
-
Это все очень хорошо, но вот что говорит заголовок ответа от сервера: Content-Type: text/html; charset=windows-1251 PS: Дабы браузеры не впадали в quirks-mode, можно еще добавить <!doctype html>. Особо полезно для IE. PPS: По-научному не иероглифы (????), а кракозябры ))
-
Вертикальная линия - 1шт.
-
Проблема с отображением background'а при масштабировании
Kray Storm replied to Tok13's question in HTML Coding
Судя по описанию, похоже на проблемы округления размеров в px при масштабировании. Суть в том, что при масштабе 0,75 или 0,5 браузер и монитор физически не могут отобразить 0,75 или 0,5 пиксела. Поэтому браузеры выкручиваются прибавлением/отниманием 1px от общей величины элемента. Теоретически можно исправить ситуацию, если сделать разделительные линии в 2px. Тогда 1 пиксел будет "в запасе" при масштабировании. Но, конечно, линии будут толще. Ну или попробовать самому блоку с горизонтальной чертой задать height:3px, а внутри уже выровнять изображение по центру. Кстати, только что сам столкнулся с подобным в Firefox: есть <span>, за ним сразу <div> в нормальном потоке. Никаких отступов нет. Так вот, при масштабировании, между ними как раз то возникает, то пропадает 1-пиксельный горизонтальный зазор. -
А что дает такая конструкция? Какой смысл в добавлении <span> внутрь <a>? <li> <a href="#"> <span class="menu">Menu Item</span> </a> </li>
-
Дизайн... ну, ничего особенного. Форумно. Минимум картинки максимум букв. Если это специализированный форум, то люди приходят за инфой и им, в основном, без разницы, какие там тени и иконки. 1. Пиктограмма "Вся Активность" в стиле Pixel-Art, а остальные - нет. Как-то не в тему. 2. Кнопка "Задать вопрос" обрамлена белым полем, как какой-то особый элемент. Зачем? 3. ОГРОМНОЕ поле поиска. 4. Смысл выводить возле названия темы +1 и -1, если голосовать можно (и нужно) только прочитав ее. Т.е., зайдя внутрь. Вот там этих кнопок и достаточно. 5. Шрифт тем в списке немного бы потолще. Теряется. Тут не столько дизайн, сколько юзабилити нужно думать. А это будет понятно только после n-часов пользования.
-
Если все правильно понял про "цветочки и листочки", то тут нечто подобное обсуждали.
-
Тут "хитрость" в том, что используется блок с картинкой, который спозиционирован изначально так, что выходит далеко влево за границу своего родителя. Вот и получается, когда ты двигаешь окно, картинка съедается, но только до границы родителя. А потом, поскольку картинке с жесткой шириной и без всякого маргина справа до правого края родителя еще несколько сотен px - она и едет себе до самого этого края, как и положено воспитанному контенту. Если смотреть по визуальным границам, то: {картинка[}родитель] Если по вложенности: [{картинка с absolute}родитель с relative] Элемент с absolute можно спозиционировать куда угодно, но отсчет будет идти от ближайшего родителя с не static. У нас - relative, в нормальном потоке на своем месте. Как-то так. ===Это должно быть вторым сообщением, но форум их безжалостно объединил=== Не совсем фоном. <img src="http://forum.worldoftanks.ru/public/style_images/wg/logo.png" alt="Перейти к списку форумов"/> Не особо-то в равной. Левый край окна упирается в букву W и "двигает" лого. А обрезается все справа.
-
Товарищи-верстальщики! Каждый раз самостоятельно отвечая на форуме на вопрос, вы воруете у Google ценного посетителя. Одумайтесь! Так жить нельзя!
-
Например, если неизвестно 1 или 10 там колонок, то каждую такую колонку делать блоком и позиционировать друг-за-дружкой, а внутри них уже располагать вон те синенькие блоки.
-
Как вариант - если нужно как там, то сделать как там. Зеленый фон - это не рисунок а заливка блока с заданной высотой, который, как ему и положено растягивается на ширину родителя. Сам рисунок-надпись - картинка с прозрачностью внутри этого блока. Он по умолчанию сохраняет свой размер, поэтому и вылазит за край блока, когда там уже нет места. А в чем сложность? PS: Сообщений:1 Регистрация: 14 Март 10 Круто. Представил, как человек два-с-половиной года тщательно готовил вопрос