Search the Community

Добрый день. Создал меню горизонтальное и по макету нужно сделать между меню полоску. как должно выглядеть: Фото меню Я ее добавил в <li>border-right: 1px solid #fff. и у последней ссылки ее нужно убрать. как сделать чтобы рамка не виднелась??? хотел отдельно последний пункт меню взять в ид и убрать ее. но чтото не получается. <li id="contact_us"> <a href="#">CONTACT US</a> </li> кроме как вставлять блок или картинку чтоб замазать ничего не приходит в голову. подскажите пожалуйста реально ли ее убрать через стили ?

Доброго времени суток, как можно осуществить данную проблему? Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство?

Добрый день, форумчане! Необходимо сверстать данную страничку. Нужно, чтобы некоторые колонки были обвернуты рамкой + логотип. Есть мысля делать это все при помощи fieldset+legend. Но, как видно по картинке, блоки должны располагаться непосредственно от рамки и лого, не внутри филдсета. Также еще нужно, чтобы при наведении на блоки применялся hover-эффект (по дефолту на них стоит фильтр размывания, при наведении этот фильтр должен исчезать). Собсна, в чем вопрос: как реализовать подобную рамку и лого, чтобы еще и до колонок смог достучаться ?

Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте). Для второго элемента указано свойство: padding-left: calc(50% - 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше), если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится). И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать. Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать. В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно. В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево. В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"... Каким образом приручить эти элементы?

.border { border: 3px dashed orange; } <a href = "images/eye.jpg" class = "border"> <img src = "images/eye.jpg" width = "200" /> </a> а если убрать из ссылки, то норм.

Добрый день, Как считаете как лучше реализовать эту рамку? Как бы сделали это вы? border || border-image || svg || css-mask Или что-то другое??? Спасибо!

Совершенно не отображаются границы у таблиц. Дело не в css. Создаю таблицу без стилей - нет границ, таблицу с принудительными стилями для отображения границ ноль реакций. Отключаю все таблицы стилей как на скрине, создаю простой код, ничего лишнего - нет границ. Хотя если судить по стилям по умолчанию (на скрине) - должны быть серые границы. Спасибо заранее если кто поможет.

Привет! Пытаюсь сделать рамку для body, т.е. рамку у всей страницы документа. Мне нужно чтобы она имела отступ в 15px от края, причем содержимое страницы обрезаться не должно. Если я указываю у body свойства border и padding, то содержимое соответственно обрезается по краям. Добавлял новый тег в начале страницы, рамка отображается как нужно, но из-за структуры сайта не могу с позиционировать содержимое поверх этого нового блока. Какие есть способы добавления такой рамки к странице? http://s010.radikal.ru/i312/1508/f7/742465e57832.png Спасибо

Здравствуйте, В ближайшее время я наверное вас замучаю. Мой первый вопрос будет касаться размещения border в псевдоэлементах. Хочу заверстать вот это меню Здесь у кнопок двойная граница (серая и черная). Моей основной проблемой сейчас является разделение кнопок. Пытался сделать с помощью box-shadow, border etc, ничего не получилось. Т.к. разделение кнопок получается суммой двух border, что неправильно. Теперь решил раздвинуть кнопки между собой margin'ом и вставить туда с помощью псевдоэлемента border. Не могу понять почему он становиться ПОД кнопкой. Подскажите, пожалуйста. И вообще, моя стратегия решения верна или есть какая-то альтернатива? Код - http://jsfiddle.net/Lyo0fhk3/

Здравствуйте, В ближайшее время я наверное вас замучаю. Мой первый вопрос будет касаться размещения border в псевдоэлементах. Хочу заверстать вот это меню Здесь у кнопок двойная граница (серая и черная). Моей основной проблемой сейчас является разделение кнопок. Пытался сделать с помощью box-shadow, border etc, ничего не получилось. Т.к. разделение кнопок получается суммой двух border, что неправильно. Теперь решил раздвинуть кнопки между собой margin'ом и вставить туда с помощью псевдоэлемента border. Не могу понять почему он становиться ПОД кнопкой. Подскажите, пожалуйста. И вообще, моя стратегия решения верна или есть какая-то альтернатива? Код - http://jsfiddle.net/Lyo0fhk3/

Привет. Есть горизонтальное меню. Как после каждого пункта меню вывести точки, как тут: Если кому нужна картинка точек.

Здравствуйте! В макете есть блок с границей: Подскажите пожалуйста как мне реализовать такой же блок с такой же границей только средствами CSS. Легкий способ(просто вырезать блок и установить через background), но это ведь не правильно как я понял. А с border-img я не разобрался. Заранее благодарен!

Всем привет , как вы догадались я рукожопый новичек. Обычно я всегда сначала убьую пару часов на решение проблемы своими силами, чаще всего мне этого времени хватает и у меня все получается, но в этот раз вышло совсем не так. В общем решил я склепать что то типа макета отправленного сообщения, чисто div с названиями , сначала я столкнулся с тем что при изменении масштаба моя верстка разваливается как карточный домик, перепробовав тыщу способов я избавился от border и оставил все сзаливкой что бы понимать где что как. Далее когда я уже все вместе более ли менее собрал решил я проверить как будет выглядеть текст, вставил где что надо и бац, у меня из за текста покосился весь шаблон, взде появились какие то отсупы которые я пытался убрать, текст высото в 9пикселей никак не хотел лезть в див размером 12 , он все время сползал вниз, не спасло даже выравнение текста по середине Вот style.css div.comment{ width: 300px; border-style: groove; height: 121px; border-width: 1px; } div.comment-head{ width: 300px; background: #ff1111; height: 13px; position:relative; padding-bottom: 4px; text-align: center; border: 1px #000; } div.comment-right{ width: 240px; background: #ffffff; height: 108px; float:left; } div.comment-left{ width: 60px; background: #111111; height: 108px; float:left; } div.comment-photo{ width: 50px; background: #1111ff; height: 50px; margin-top: 5px; margin-left: 5px; } div.comment-name{ width: 100px; margin-top: 0.5px; background: #11ff11; height: 9px; margin-left: 60px; float:left; } div.comment-number{ width: 40px; margin-left: 10px; background: #11ff61; height: 8px; margin-top: 10px; float:left; text-align: center; }А это сам код <html> <head> <title>test</title> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"><!-- картинка в вкладке --> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><!-- кодировка --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="comment"> <div class="comment-head"> <p style=" line-height: 0.00001;">ДЕнис Роллов</p> </div> <div class="comment-left"> <div class="comment-photo"></div> <div class="comment-number"><p style=" font-size:3px;">15:12</p></div> <div class="comment-number"><p style=" font-size:3px;">03.12.2012</p></div> </div> <div class="comment-right"><p>Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.Здесь будет комментарий о нашем сайте.</p></div> </div></body></html>Я знаю что все написано ужасно криво и вообще не по правилам, но это мой первый проэкт, так что прошу помочь

Аллоха, люди! Есть 3 состояния кнопки, у каждой из которых border и background градиент. Собственно, как это чудо можно реализовать придерживаясь следующих требований: вся магия должна происходить исключительно на стороне css.в html не должно быть вложенности.стили должны одинаково корректно применяться к любым html тегам.можно использовать любые свойства css3, главное что бы в не поддерживаемых браузерах срабатывала заглушка типа сплошного цвета вместо градиента.P.S. искренняя благодарность и восхищение человеком который реально способен решить данную задачу. Спасибо.

Во всех других браузерах проблемы не наблюдаю. Именно Firefox, версия 29.0. Масштаб >=100%. При 80% - нормально, а при 100% и больше делает некоторые линии жирнее. Подскажите пожалуйста как бороться с этим багом? код: <!DOCTYPE HTML><html lang="ru"><head> <meta charset="UTF-8"> <title>JavaScript уроки</title> <style type="text/css"> table { border-collapse:collapse; } td { padding:4px; border:1px solid black; } </style></head><body><!-- <script type="text/javascript" src="operatpry_cikla.js"></script> --><table> <tr> <td> random_text </td> <td> random_text </td> <td> random_text </td> ... <td> random_text </td> </tr></table></body>

Делаю верстку с резиновыми колонками и фиксированными отступами между ними. .col {margin-left: 10px;margin-right: 10px;}Через float колонки находятся в одном ряду. Если задать margin, при ресайзе окна колонки не обтекаются и переносятся. Подумал для этого использовать бордеры, вот так: border-left: solid 10px transparent;border-right: solid 10px transparent;Можно так?

Добрый день. Подскажите, как сделать http://itmages.ru/image/view/1361341/6565d38d такое меню? Интересует граница вверху и внизу по всей ширине содержимого, но при a:hover чтобы исчезала.

Подскажите пожалуйста, как сделать двойную границу? Т.е. мне надо две линии которые по ширине умещаются в 2px и каждый пиксель разного цвета! Я понимаю, что допустим делается одна линия так border-left: solid 1px #f8d; , а вот как делается еще одна линия возле нее?

<div style="width: 300px; margin: 0; padding: 0; background: #00f5aa;"> <div style="padding: 0px 10px 0px 10px; margin: 0px 0px 0px 0px;"> <input name="tb_password" type="password" id="Password1" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"> </div></div>Почему ширина поля ввода получается больше 280? <div style="width: 300px; margin: 0; padding: 0; background: #b6ff00;"> <div style="padding: 0px 10px 0px 10px; margin: 0px 0px 0px 0px;"> <p style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;border:4px solid black;">text text text text text text text text text text text text text text text text text text</p> </div></div>Так тоже больше. если border задать 0px, то ширина получатеся ожидаемая - 280px Как задать отступы\ширину, чтобы внутренние элементы полностью помещались внутри вместе с рамкой?

Друзья, а как реализовать такой бордер? Подскажите пожалуйста

Доброго времени суток всем! Кто нибудь сталкивался с такой проблемой: При увеличении экрана и при просмотре сайта на мониторах с разрешением от 1600 пх на картинке background-image] появляется вертикальная черная полоса в 1 пикс. как бордер. И я не могу понять что это, на самой картинке ничего нет. Может это горизонтальный повтор background-image, но тогда почему его нет при просмотре на мониторах со стандартным разрешением? Верстка в простых таблицах. Я пробовал заменить картинку для этого background-image, просто обрезал белую часть картинки где появляется эта черная полоса. Проблема вроде решалась в этом месте, но в других местах пошли не состыковки картинок общего бекграунда (верстальщик сверстал одну картинку из разных частей + там еще другие картинки накладываются). В общем откатил все назад и теперь ломаю голову - как исправить этот глюк чтоб не переверстывать всю страницу заново. Код там такой (в четырех местах): <td width=246 background=/images/but00.gif valign=top height=151> <td background="/images/but00.gif" width="246" valign="top" height="100%"> <td background="/images/but00.gif" width=246 valign=top height=100%> <tr><td background="/images/but00.gif" height=100%> </td></tr> Никаких репитов для него не прописано. Сама картинка бекграунда: сайт: crantal.ru Прошу помощи форумчан. Если кто знает как решить проблему, заранее благодарен!

Собственно само меню: http://jsfiddle.net/npofopr/TygPr/ Не могу понять, как мне у активного пункта убирать все бордеры. Т.е. чтобы не было той белой полоски справа. Пришло на ум только делать у активного тень, которая будет скрывать границу. Больше ничего не придумывается. Делать по другому границы... Особо вариантов не много вроде. Подскажите, кто чем может.

Добрый день, мне необходимо сделать вот такую вещь http://min.us/lvw5hPeUbX2CD Пол дня отмучался с box-shadow, не получилось, сделал так: внизу страницы разместил небольшой блок, условно футер, сделал из него параллелограмм (при помощи transform: skew(20deg) и добавил по всему общему блоку border-right, почти то, но!!! уголок в бордере не срезан верхний,и этого не хватает для завершения образа. Следовательно вопрос: как срезать правильно уголок у бордера, либо, может кто подскажет как сделать такой мнимый объем? Буду очень признателен за любые подсказки и за любую информацию.

Подскажите, пожалуйста, как исправить вот этот глюк? (см. рисунок) http://clip2net.com/s/2Umh5 В Мозилле и Опере все отображается нормально, в Хроме показывает вот эту ненужную рамку, а в IE (как всегда) вообще кошмар. На IE мне вообще пофиг, но вот как сделать так, чтобы в Google Crome рисунок-ссылка тоже отображался нормально, без вот этой дурацкой серой обрамляющей рамки? Перерыл уже весь Интернет - везде один и тот же совет - в свойствах рисунка поставить border=0px Поставил этот border = 0 везде, где только можно и в свойствах DIV и в свойствах ссылок, и в свойствах рисунка - не помогает. Видимо это делается как-то иначе. Как? Ведь, теоретически это сделать как-то возможно! Вот на этой гугловской странице полно таких вот рисунков ссылок, без таких вот серых обрамляющик рамок вокруг картинок-ссылок. Вот так тоже уже пробовал - не помогло...