EnvIT
-
Posts
16 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by EnvIT
-
Равномерное распределение блоков по горизонтали
EnvIT replied to @LEXXX_NF's question in HTML Coding
Не совсем, вместо li.helper хотелось бы увидеть li:last-child:after и тем самым избавиться от лишнего элемента в коде. -
Равномерное распределение блоков по горизонтали
EnvIT replied to @LEXXX_NF's question in HTML Coding
Создаём новую тему! А так же предоставляем скриншоты того, как нужно и как не нужно, чтобы было. Это не тема а продолжение темы "Равномерное распределение блоков по горизонтали", верни на место. Ты не прав. Размещение с помощью псевдо :after, а не через дополнительный блок div. Откуда текст теперь брать??? Заново печатать? С "Равномерное распределение блоков по горизонтали"? -
Затем, что надоело получать разный результат с формами в разных браузерах или использовать кучу лишних меток... К нормальному виду можно вполне привести любой элемент на странице, вопрос только в том, а надо ли? Ты не понимаешь сути, что понятие "кроссбраузерность" не означает, что везде, всё должно быть одинаково. Не обманывай браузеры, дай им делать то, что у них заложено а что делать, если нужно сверстать пиксел в пиксел поржал, спасибо. Качественная вёрстка - это та вёрстка, которую не стыдно показать другу, эта вёрстка, код которой логичен и понятен даже младенцу. Вёрстка должна быть сделано качественно, а значит код этой вёрстки должен быть легко модернезируемым, чтобы она была поделена на логические блоки, далее чтобы эта вёрстка не разваливалась при наполнении блоков, всяких ураганов и прочих катаклизмов. Вёрстка должна быть такой, чтобы в будущем вам не пришлось практически ничего менять, если вы захотели как то изменить ваш сайт, чтобы вы легко могли просто добавить или удалить что нибудь, без нанесения ущерба вашему сайту. И это лишь мелочи. Кроссбраузерность - это всё чушь, вёрстка может смотреться в разных браузерах по разному, и я не говорю про какие то страшные отличия, я имею ввиду особенности того или иного браузера, например всеми известного IE. И снова ты не правильно понял... Что делать, если нужно выстроить в ряд текстовое поле и 2 кнопки и уместить их в 100px?
-
Затем, что надоело получать разный результат с формами в разных браузерах или использовать кучу лишних меток... К нормальному виду можно вполне привести любой элемент на странице, вопрос только в том, а надо ли? Ты не понимаешь сути, что понятие "кроссбраузерность" не означает, что везде, всё должно быть одинаково. Не обманывай браузеры, дай им делать то, что у них заложено а что делать, если нужно сверстать пиксел в пиксел, т.к. иначе поедет верстка? А что делать, если нужно наложить фоновое изображение, которое будет нормально смотреться только при определенных размерах?
-
Затем, что надоело получать разный результат с формами в разных браузерах или использовать кучу лишних меток...
-
Вот такой вариант. Изменили, теперь [line-height]=[font-size]+2px. По-прежнему проблемы с фоном select в Opera. Пока что, не обращая на select вообще никакого внимания, получается... Небольшой отступ у input[type=text] слева, в safari с кнопками 3.14здец полный... IE8,9,Opera,FF - идентичны. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML CHECK</title> <style type="text/css"> body { margin:0; font-family:Tahoma, sans-serif; font-size:12px; line-height:14px; color:#000; } #box { height:1%; overflow:hidden; background-color:#eee; } a, blockquote, cite, code, form, input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea, h1, h2, h3, h4, h5, h6, label, menu, ol, ul, li, p, pre { float:left; vertical-align:top; } /* Reset list styles */ menu, ol, ul { list-style-image:none; list-style-position:outside; list-style-type:none; margin-top:0; margin-bottom:0; padding-left:0; } menu { /* only for Opera o_O */ margin-left:0; padding-right:0; } /* Reset common elems styles */ /* Margins & Paddings */ h1, h2, h3, h4, h5, h6, p, pre, blockquote { margin-top:0; margin-bottom:0; } blockquote { margin-right:0; margin-left:0; } /* Fonts styles */ a { text-decoration:none; color:#000; cursor:default; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:1em; line-height:14px; } code, pre { font-family:inherit; } cite { font-style: normal; } /* Forms styles */ input::-moz-focus-inner, button::-moz-focus-inner { border-width:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; } input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea { margin-top:0; margin-left:0; margin-bottom:0; margin-right:0; padding-top:0; padding-right:0; padding-left:0; padding-bottom:0; font-family:inherit; font-size:1em; line-height:14px !important; border-width:0; } input[type="text"], select, textarea { outline:0 none; background-color:transparent; } textarea { overflow:auto; resize:none; } </style> </head> <body> <div id="box"> <a href="">a</a> <blockquote>a</blockquote> <cite>a</cite> <code>a</code> <h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5> <h6>a</h6> <label>a</label> <p>a</p> <pre>a</pre> <menu> <li>a</li> </menu> <ol> <li>a</li> </ol> <ul> <li>a</li> </ul> <form> <input type="reset" value="a" /> <button>a</button> <input type="submit" value="a" /> <input type="text" value="a" /> <textarea>a</textarea> <select> <optgroup label="a"> <option selected="selected">a</option> <option>w</option> </optgroup> </select> </form> </div> </body> </html> Интересно работает свойство -webkit-appearance: none; Убирает у select стрелку, жаль пока не удалось найти подобного в других браузерах, тогда можно было бы вставлять свою, как фон '
-
Да бред, потому что собрал ты в кучу много лишнего и начал не с того. Я начал с того, что сделал html и закинул туда перечисленные метки, а то к чему я пришел, это то, что вы видите. Вы предлагаете мне border и еще что-то добавить, с ними поиграть и так далее... Я же не говорю вам, что это бред, т.к. тема не относится к решению проблем с "box-sizing", а напрямую к сбросу стилей для элементов внутри <form> и только, не нравится float:left? уберите, ничего не изменится, поставьте хоть display:inline всем, кроме лишних отступов, вы ничего не получите... Если тема относится к элементам формы, то зачем лишние элементы вне её? Если box-sizing не в теме, то зачем ты его используешь? И зачем так много лишних вообще элементов? Так много лишних элементов, чтобы показать себе, что они целиком и полностью управляются посредством стандартов w3c. На счет box-sizing читайте внимательнее тему, это напильник, который использовал я: /* Let`s style elems like reseted */ input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height:12px; } input, textarea { width:6px; } Ключевой строчкой для понимания является /* Let`s style elems like reseted */ Тобиж возьмем наши "проблемные места" и зададим им ширину и высоту такую, как у элементов, для которых мы уже обработали. Нужно объяснять, почему здесь не задана ширина для select? З.Ы. Если в таком варианте, привести элементы к одинаковому отображению, путем удаления внутренних стилей браузера, то убрав этот кусок кода, ничего по идее не должно измениться. З.З.Ы. И еще раз повторяю, задача привести все элементы к одинаковому отображению путем удаления стилей браузера (!), если это возможно, если нет, то решать эту проблему на уровне разработчиков браузеров индивидуально, либо использовать интерпретаторы JS, перегоняя все в <div> и <span>, снижая производительность на уровне клиента. Либо забить на это и делать "работает? отлично"
-
Да бред, потому что собрал ты в кучу много лишнего и начал не с того. Я начал с того, что сделал html и закинул туда перечисленные метки, а то к чему я пришел, это то, что вы видите. Вы предлагаете мне border и еще что-то добавить, с ними поиграть и так далее... Я же не говорю вам, что это бред, т.к. тема не относится к решению проблем с "box-sizing", а напрямую к сбросу стилей для элементов внутри <form> и только, не нравится float:left? уберите, ничего не изменится, поставьте хоть display:inline всем, кроме лишних отступов, вы ничего не получите...
-
К этому могу ещё добавить несколько советов. Не используйте картинки Не используйте скрипты Не используйте текст Не используйте *тут что-то* Идеальный размер всего проекта: 0 бит. Не больше и не меньше. Я вообще не понимаю, что вы хотите сделать? Сбросить стили для форм? Чтобы их опять переопределить? a, blockquote, cite, code, form, input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea, h1, h2, h3, h4, h5, h6, label, menu, ol, ul, li, p, pre { float:left; } Странный у вас какой-то сброс. float:left нужен для того, чтобы выстроить элементы в один ряд и работать с блочной моделью. Если вам нужно объяснить, почему не стоит использовать css-reset, обращайтесь. Вкратце, основная причина: 1) Бестолковая потеря производительности, не объяснимая ни одной весомой причиной. Просто откройте любой web inspecor, fire bug или другой удобный для вас инструмент и посмотрите, что у вас происходит в коде... В моем примере, нет задачи сделать "красивый" html или css, есть задача выдернуть из браузеров их бестолковые стили, которые не поддаются дрессировки на уровне стандартов w3c. А посему в дальнейшем не стоит устраивать здесь холиваров. контейнер - лишний элемент, я сам раньше делал "работает? отлично", а теперь вот хочется избавиться от этого... либо докопаться до разработчиков, либо выдернуть эти стили своими силами "убивая рисовалку" браузера. Не испытываете такого желания, "гуру верстки"? Ну во-первых до гуру мне ещё, как до китая =), а во-вторых ты неправильно сделал, поставь хотя бы бордер и начни с малого, потихоньку, а не со всех сразу. Возьми один элемент, обнули его стили, оставь ему бордер, поставь нормальную ширину. Рядом див сделай такой же ширины, чтобы было, на что ориентироваться. Поиграйся, если будет какой результат, показывай обязательно Вот такая вот хрень пишется короче намного, одной строкой: margin-top:0; margin-left:0; margin-bottom:0; margin-right:0; padding-top:0; padding-right:0; padding-left:0; padding-bottom:0; Вот это вообще бред: a, blockquote, cite, code, form, input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea, h1, h2, h3, h4, h5, h6, label, menu, ol, ul, li, p, pre { float:left; } Не вижу бреда с float:left и не люблю высказываний без объяснения причины, складывается впечатление "ляпнул, не подумал". margin и padding в одну строку вы точно никак не опишите, в две, можно Расписано на 4, для наглядности, видно, что есть 4 отступа. Например у p, pre 2 внешних отступа.
-
контейнер - лишний элемент, я сам раньше делал "работает? отлично", а теперь вот хочется избавиться от этого... либо докопаться до разработчиков, либо выдернуть эти стили своими силами "убивая рисовалку" браузера. Не испытываете такого желания, "гуру верстки"?
-
выше написано, что делаем css-reset для всех элементов, за основу можно взять, например, <div> - в спецификации w3c ему не присвоено никаких стилей (ну не считая display:block и прочих). Делаем вывод, если сбросить стили для всех элементов, то отображение у них должно быть одинаковое, чем собственно я и занимаюсь. Сбросили стили по максимуму, убрали border, padding, margin, для FF убрали focus-inner, получили то, что получили. Открываем в IE8 или IE9, все элементы, кроме textarea и select отображаются 1 к 1. В других браузерах наблюдаем проблемы, которые и пытаемся решить. Собственно есть подозрение, что нужно докопаться до внутренних стилей/элементов браузера, которых нет в спецификации w3c, но которые есть в "рисовалке" самого браузера/платформы.
-
А ты можешь сделать нормальную тестовую страницу проблемы, а то вверху хрень какая-та страшная. Господи, создаем index.html с таким содержанием: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML CHECK</title> <style type="text/css"> body { margin:0; font-family:Tahoma, sans-serif; font-size:12px; line-height:12px; color:#000; } #box { height:1%; overflow:hidden; background-color:#eee; } a, blockquote, cite, code, form, input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea, h1, h2, h3, h4, h5, h6, label, menu, ol, ul, li, p, pre { float:left; } /* Reset list styles */ menu, ol, ul { list-style-image:none; list-style-position:outside; list-style-type:none; margin-top:0; margin-bottom:0; padding-left:0; } menu { /* only for Opera o_O */ margin-left:0; padding-right:0; } /* Reset common elems styles */ /* Margins & Paddings */ h1, h2, h3, h4, h5, h6, p, pre, blockquote { margin-top:0; margin-bottom:0; } blockquote { margin-right:0; margin-left:0; } /* Fonts styles */ a { text-decoration:none; color:#000; cursor:default; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:1em; line-height:12px; } code, pre { font-family:inherit; } cite { font-style: normal; } /* Forms styles */ input::-moz-focus-inner, button::-moz-focus-inner { border-width:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; } input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea { margin-top:0; margin-left:0; margin-bottom:0; margin-right:0; padding-top:0; padding-right:0; padding-left:0; padding-bottom:0; font-family:inherit; font-size:1em; line-height:1em !important; border-width:0; } input[type="text"], select, textarea { outline:0 none; background-color:transparent; } textarea { overflow:auto; resize:none; } /* Let`s style elems like reseted */ input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height:12px; } input[type="text"], textarea { width:6px; } </style> </head> <body> <div id="box"> <a href="">a</a> <blockquote>a</blockquote> <cite>a</cite> <code>a</code> <h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5> <h6>a</h6> <label>a</label> <p>a</p> <pre>a</pre> <menu> <li>a</li> </menu> <ol> <li>a</li> </ol> <ul> <li>a</li> </ul> <form> <input type="text" value="a" /> <textarea>a</textarea> <input type="reset" value="a" /> <button>a</button> <input type="submit" value="a" /> <select> <optgroup label="a"> <option selected="selected">a</option> <option>w</option> </optgroup> </select> </form> </div> </body> </html> И наблюдаем кучу разных проблем, связанных с формами)) Как решать, наиболее простой способ 100% кроссбраузерный - интерпретация тегов в более простые... Но это не выход, т.к. теряем на производительности на стороне клиента.
-
Проблема в opera с select, не изменяется фон у select
-
Изменяю первый пост в связи с тем, что все оказалось гораздо хуже))) Просьба модераторов изменить название темы на более подходящее. Итак, взяв некоторые элементы, которые зачастую являются частью вёрстки самого макета, а не внутренних страниц содержания, провожу исследование кроссбраузерности этих элементов. 1) Делаю заготовку html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML CHECK</title> <link rel="stylesheet" type="text/css" href="css/css-for-check.css" /> </head> <body> <div id="box"> <a href="">a</a> <blockquote>a</blockquote> <cite>a</cite> <code>a</code> <h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5> <h6>a</h6> <label>a</label> <p>a</p> <pre>a</pre> <menu> <li>a</li> </menu> <ol> <li>a</li> </ol> <ul> <li>a</li> </ul> <form> <input type="text" value="a" /> <input type="reset" value="a" /> <button>a</button> <input type="submit" value="a" /> <textarea>a</textarea> <select> <optgroup label="a"> <option selected="selected">a</option> <option>w</option> </optgroup> </select> </form> </div> </body> </html> 2) Делаем свой css-reset для всех стилей (не используйте css-reset для первичного описания стилей конкретного проекта, убивает производительность из-за дальнейшего переопределения стилей) input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea { margin-top:0; margin-left:0; margin-bottom:0; margin-right:0; padding-top:0; padding-right:0; padding-left:0; padding-bottom:0; font-family:inherit; font-size:1em; line-height:12px !important; border-width:0; } input[type="text"], select, textarea { outline:0 none; background-color:transparent; } textarea { overflow:auto; /* for IE */ resize:none; } 3)Наблюдаем проблемы с элементами формы, пытаемся "допилить": input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height:12px; } input[type="text"], input[type="reset"], input[type="submit"], button, textarea { width:6px } Получаем, что получаем. Проверяю свежие браузеры вендоров "Chrome, Opera, Safari, IE, Mozilla", а также IE8. Отчет о проблемных элементах: 1) Chrome input[type="text"], select, textarea 2) Opera textarea /* текст немного съезжает вниз */ 3) Safari input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea 4) IE9 и IE8 select 5) Mozilla input[type="text"], input[type="reset"], input[type="submit"], button, select line-height для input и button нельзя задать меньше 14px, хотя input[type=text] отображается при этом нормально. Позже займусь кроссбраузерностью этого дела
-
Дружище, зачем вредные советы даёшь? Решается просто. Делаешь элементам обёртки из дивов, дивам ширину, а элементы внутри дивов растягиваешь на 100% еще проще решается: textarea, input { box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 1) Увы и ах, не работает в IE6 и IE7. Мне дорого разбираться с ними ' 2) В принципе можно использовать http://habrahabr.ru/blogs/css/100838/#habracut
-
Я пока что отталкиваюсь от интерфейсов и делаю так (IE 8+): <div class="nav"> <a href="#"> <span>Пункт навигации</span> </a> <a href="#"> <span>Пункт навигации</span> </a> <a href="#"> <span>Пункт навигации</span> </a> <a href="#"> <span>Пункт навигации</span> </a> <a href="#"> <span>Пункт навигации</span> </a> <a href="#"> <span>Пункт навигации</span> </a> <form class="search" action="" method=""> <input type="text" value="Что ищем?" /> <input type="reset" value="x" /> <input type="submit" value="Искать" /> </form> </div> где div.nav в будущем будет заменен на nav из html5 body, div, a, form, input { box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } div.nav { height : 1%; overflow : hidden; margin : 2px; padding : 6px 2px; background-color : #eee; border-width : 1px; border-style : solid; border-color : #d1d1d1; border-radius:3px; } div.nav a { float : left; margin : 0 3px; padding : 2px 6px; border-width : 1px; border-style : solid; border-color : transparent; border-radius : 3px; } div.nav a:hover, div.nav a:focus { background-color : #f9f9f9; border-color : #d1d1d1; } div.nav a span { white-space : nowrap; color : #333; font-size : 12px; line-height : 14px !important ; font-family : Tahoma, Arial, sans-serif; } div.nav form.search { float:right; height:24px; overflow:hidden; margin:0 3px; padding:0; } div.nav form.search input { display:block; float:left; margin:0; padding:0 6px; border-style: solid; border-color: #D1D1D1; color: #666; font-family:Tahoma, sans-serif; font-size:11px; } div.nav form.search input[type="text"] { height:24px; border-width:1px; line-height:22px !important; /* fix-bug in ie7 */ } div.nav form.search input[type="reset"] { border-width:1px 1px 1px 0; } div.nav form.search input[type="submit"] { width:49px; border-width:1px 1px 1px 0; border-top-right-radius:3px; border-bottom-right-radius:3px; } div.nav form.search input[type="submit"], div.nav form.search input[type="reset"] { cursor:pointer; height:24px; background-color: #E7E7E7; background-image: none; } div.nav form.search input[type="submit"]:hover, div.nav form.search input[type="submit"]:focus, div.nav form.search input[type="reset"]:hover, div.nav form.search input[type="reset"]:focus { border-color: #B0CCF2; background-color: #C6DCF6; } При масштабировании элементы съезжают, решается с помощью js. Суть в том, чтобы динамически сравнивать размеры div.nav и внутренних элементов, если они не умещаются, делаем то, что делают в windows 7. Создаем после последнего помещающегося элемента выпадающее меню, в которое помещаем наши не поместившиеся ссылки. Вот собственно сейчас прорабатываю элемент из html5 <nav>, к которому всегда будет добавляться скрипт из библиотеки...)