Поиск по сайту
Результаты поиска по тегам 'css'.
Найдено 886 результатов
-
Както озадачелся вопросом каким способом лучше создать кнопку из CSS3, c помощью картинки или SVG... В каждом из вариантов есть свои проблемы. Каккой из вариантов, будет более удобней, надёжней в плане отображения и простоы, с недоразветостью браузеров ...? Примеры: .input_submit { background: url("../public/style_images/master/topic_button.png") repeat-x scroll center top #212121; border-color: #212121; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 0 #5C5C5C inset, 0 2px 3px rgba(0, 0, 0, 0.2); color: #FFFFFF; } .pay-button { -moz-box-sizing: border-box; background: linear-gradient(to bottom, #00B4F5 0%, #0096D2 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 100, 145, 0.5); color: #FFFFFF; display: inline; font-size: 15px; height: 30px; line-height: 30px; padding: 0; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); width: 100px; } .selector { background: url(../img/box_bg.svg) no-repeat 0 0 #eee; /* Chrome 25-, Firefox 15-, Opera 12, Safari, IE9, Mobile*/ background: linear-gradient(#fff, #000); /* Chrome 26+, Firefox 16+, Opera 12.1+, IE10+ */ }
-
Всем привет. Нужно немного опустить блок с текстом по отношению к другому блоку с изображением, но почемуто блок опускается вместе с картинкой.Помогите решить проблему. На скрине показано какой блок нужно опустить. Немогу понять в чем беда. html <!DOCTYPE html> <html> <head> <meta crarset="utf-8"> <title>ruslanlizogub</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/960_24_col.css"> </head> <body> <div class="cv-section container_24"> <div class="person"> <img src="img/avatar.jpg" width="122" height="165" alt="ruslan lizogub"> <div class="fio"> <h1 class="lizogub">Lizogub Ruslan</h1> <h2 class="status">Junior Web Developer</h2> </div> </div> </html> css .container_24 { background: #f8f8f8; width: 960px; } .fio { width: 390px; height: 65px; margin-top: 30px; } .person img { float: left; margin-right: 25px; background-color: #fff; border: 1px solid #dedede; padding: 10px; } .cv-section { border-top: 20px solid #FDB020; }
-
делаю сайт под несколько экранов. несколько css файлов будут производить редизайн сайта при загрузке. через media="only screen and (max-width:траляля) в html несколько элементов в зависимости от разрешения экрана должны появляться/скрываться. можно сделать это с помощью visible - но тогда элементы как я понимаю все равно будут грузиться - просто визуально их не будет видно. может быть есть свойство css с помощью которого по id можно просто "вырезать" часть кода из html? то есть чтобы браузер игнорировал допустим конкретный div при загрузке страницы (как <!-- --!>) java script не предлагать - а то черт ногу сломит, я и так уже перемудрил
-
Как сделать, прописать, чтобы отображение полей и кнопок, в других браузерах было, как в Opera <input name="LMI_PAYMENT_AMOUNT" size="3" value="10" title="Введите сумму"/> ... <select name="LMI_PAYEE_PURSE" title="Выбор валюты" style="min-width:30px;"> <optgroup label="Выбор"> <option value="1">WMR</option> <option value="2">WMZ</option> <option value="3">WME</option> <option value="4">WMU</option> <option value="5">WMB</option> </optgroup> </select> <input type="submit" class="button" name="wmsubmit" alt="Осуществить платеж с Webmoney!" value="Отправить"/>
-
Дело в том, что в мозиле отображается всё нормально а в гуле нет. Помогите решить проблему? Код кнопки: <div class="cont2" align="center"> <input id="wm-pay-button" class="pay-button" type="submit" value="Отправить" alt="Осуществить платеж с Webmoney!" name="wmsubmit"> </div> Css .pay-button { -moz-box-sizing: border-box; background: -moz-linear-gradient(center top , #00B4F5 0%, #0096D2 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 100, 145, 0.5); color: #FFFFFF; display: inline; font-size: 15px; height: 30px; line-height: 30px; padding: 0; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); width: 100px; } .pay-button:hover { background: none repeat scroll 0 0 #00A5E4; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 100, 145, 0.5); } - ещё если возможно, можео исправить для мазилы перекос полей, где "10" и "WMR"?
-
Всегда пугает работа связанная с форматированием текста. Хочется использовать какой либо "шаблонизатор" или что-то подобное. Но в моём понимании "шаблонизатор" это такой скрипт на php или js, который при передаче ему текста вида: Заголовок 1 уровня === Заголовок 2 уровня ___ Обычный абзац с автоопределением переноса строки, т.е. ему даешь текст с отступами самого редактора(табами например), а он их сам распознает и соответствующе отображает. <img>ссылка на картинку</img> Сам расставляет теги и просчитывает отступы. Видел нечто подобное на гитхабе при создании страницы проекта, но не понял где его достать и как им пользоваться "изнутри". Рад буду любым ссылкам на русско и англоязычные ресурсы с подобными плагинами, что-то ещё про мустаче слышал, но не могу из документации понять, то ли он делает. Заранее всем благодарен, сильно не пинайте.
-
Как сделать, чтобы не все поля меняли свой размер, так как в css уже прописан определённый размер и там он устраивает, а в некоторых местах хотелось бы, чтобы он не применялся к некоторым полям и они были бы меньше. И размер шрифта водимый в эти поля не изменялся. Пример поля: <input name="LMI_PAYMENT_AMOUNT" size="3" value="10" title="Введите сумму"/> ... <select name="LMI_PAYEE_PURSE" title="Выбор валюты" style="min-width:30px;"> <optgroup label="Выбор"> <option value="1">WMR</option> <option value="2">WMZ</option> <option value="3">WME</option> <option value="4">WMU</option> <option value="5">WMB</option> </optgroup> </select> <input type="submit" class="button" name="wmsubmit" alt="Осуществить платеж с Webmoney!" value="Отправить"/> Картинка: В принципе надо прописать class, кто знает как?
-
Сейчас использую такой код: .gallery { max-width: 840px; height: auto; text-align: center; } .gallery-item { background: #000; position: relative; left:-10px; } .gallery img { max-width: 840px; height: auto; transition: all 0.2s ease; } .gallery img:hover { opacity: 0.6; } Суть в том, что картинка находится в диве gallery-item, он черного цвета, по этому когда наводишь на картинку, она становится прозрачней, тем самым темнея. Однако, gallery-item растягивается на все максимальные 840px, и если картинка в ширину меньше этого числа, то по бокам черные полосы, естественно они не нужны, есть ли способ как-то решить это маленькую проблему?
-
Здравствуйте! Подскажите, пожалуйста, как при скролинге страничке, сделать, что бы div2 вставал на место div1 (т.е. уходил верх)? При скролинге в топ - блоки возвращались на свою позицию. Спасибо! Код на http://cssdeck.com/labs/i1jxnjzh <html> <title>hello word</title> <style> body{ margin:0px; padding:0px; } .div1 { width: 100%; text-align: center; background-color: #e1e1e1; height: 40px; line-height: 40px; } .div2 { width: 100%; text-align: center; background-color: #888888; position: fixed; height: 30px; line-height: 30px; } .div3 { margin-top: 30px; } </style> <head> </head> <body> <div class="div1"> hello, hide me </div> <div class="div2"> scroll me </div> <div class="div3"> scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br> </div> </body> </html>
-
Заметил я что в CSS можно прописывать свойства не только для существующих тегов, но и для любого сочетания букв, и решил написать свой тег. Всё вроде бы работает, но одна проблема — в Chrome свойства для spoiler[type="img"] отображаются не только для тега <spoiler type = "img"> но и для всех тегов <spoiler>. Если открыть просмотр "Исходного кода элемента", и там сделать с этим тегом что-нибудь, то всё приходит в норму. Код HTML: <!DOCTYPE html> <html> <head> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <meta charset = "utf-8"> <link rel="stylesheet" href="spoiler.css"> </head> <body> Текст текст текст <spoiler type = "img"><img src = "http://dopostback.anyversum.e3w.ru/wp-content/themes/Black/Logo.png"></spoiler> текст текст <br> <spoiler>Текст</spoiler> <spoiler type = "text">Текст</spoiler> </body> </html> Код CSS: spoiler { color: black; background: black; cursor: default; } spoiler a { cursor: auto; } spoiler[color="gray"] { color: gray; background: gray; } spoiler[color="white"] { color:white; background: white; border: 1px solid black; } spoiler:hover { color:white; } spoiler[color="gray"]:hover, spoiler[color="white"]:hover { color:black; } spoiler:hover a { color:blue; text-decoration:none; } spoiler a { color:black; } spoiler[color="white"] a { color: white; } spoiler[color="white"]:hover a { color: blue; } spoiler[color="gray"] a { color: gray; } spoiler[color="gray"]:hover a { color: blue; } spoiler a:hover { text-decoration: underline; } spoiler:hover a:visited { color:darkviolet; } spoiler:hover a:active { color:red; text-decoration: none; } spoiler[type="img"] { background-color: black; color:white; } spoiler[type="img"]::before { content: "Image"; } spoiler[type="img"] img { display: none; } spoiler[type="img"]:hover img { display: block; }
-
В чем отличие <link rel="stylesheet" type="text/css" href="style.css" /> и <style type="text/css"> @import url("style.css"); </style> ?
-
Здравствуйте! Делаю фотогалерею. В блоке мне надо чтобы в местах a и b блок угасал градиентом. (в блоке у меня картинки) (фон блока белый)
-
Доброго времени суток! Сталкнулся с проблемой выравнивания inline элементов по вертикали пример _http://jsfiddle.net/n4eWe/6/, в данном случае работает, как хотелось бы(визуально) но хочется уйти от подгонки размеров вручную, а чтобы оно всё же позиционировалось само, не зависимо от #topmenu{ height: 40px; ... } Работает в таком варианте, как есть, но приходится подгонять при смене высоты topmenu значинием #topmenu ul { padding-top: 20px; } или topmenu ul убераем вообще и раскомментируем #topmenu li { /*vertical-align: bottom;*/ /*line-height: 56px;*/ ... } тогда приходится играть значением 56px... 1. Как же всё таки правильно пользоватся выравниванием? 2. полупрозрачность нижнего бокса делал сначала с помощью opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ Результат мне нравился(визуально), но! На медленных компьютерах ужасное листание при использовании хоть где-то прозрачности, потому сделал подложку из 1px png нужной прозрачности, стало работать быстро и гладко, но можно ли добиться теперь прозрачности scrollbar(как при opacity)?
-
Имеется некая таблица с величиной ячеек 60x60px. В каждой ячейке должна быть следующая структура: <div class="numberandbuttons"> <div class="number"> </div> <div class="lefrsqr"> </div> <div class="rightsqr"> </div> </div> lefrsqr и rightsqr это квадраты размером 15x15px поставленные в нижние углы ячейки. Необходимо поставить number вертикально и горизонтально по центру ячейкти, а lefrsqr и rightsqr в нижние углы ячейки таким образом, чтобы ни один элемент не выезжал за границы ячейки и при изменении размеров number скриптом, lefrsqr и rightsqr оставались приклееными к своим углам, а он оставался выровнянным по центру. То есть нужно позиционировать два угловых квадрата в нижние углы так, чтобы все остальные элементы отображались как будто их нет в ячейке. Как это можно сделать? Статью http://htmlbook.ru/css/position я читала, но так и не поняла как мне нужно поступать в моей ситуации. Заранее спасибо за ответ.
-
Здравствуйте! У меня есть два дива, сверху и снизу. Мне нужно чтобы они были на той же позиции(второй див над первым, точнее когда кликаем на меню в первом диве, появляется второй див, над первым дивом). Второй див я сделал снизу, добавил к нему position:relative и поднял на 800 пикселей(у самого дива так же 800 пх). Проблема в том что внизу, место этого дива остается, появляется скролл, который мне не нужен. Как реализовать правильно, без скролла?
-
Всем привет я новичек во всем этом подкажите почему когда нету текста боковая панель переползает на место текста как исправить? вот код css html, body { height: 100%; } body { margin: 0px; padding: 0px; background: #000000; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #878787; } h1, h2, h3 { margin: 0px; padding: 0px; text-transform: uppercase; font-family: 'Archivo Narrow', sans-serif; font-weight: normal; color: #101010; } h2 { padding-bottom: 30px; letter-spacing: -1px; font-size: 2em; } p, ol, ul { margin-top: 0px; } p { line-height: 180%; } strong { } a { color: #FE801C; } a:hover { text-decoration: none; } a img { border: none; } img.border { } img.alignleft { float: left; margin-right: 30px; } img.alignright { float: right; } img.aligncenter { margin: 0px auto; } hr { display: none; } .title { padding-left: 40px; background: url(icon01.png) no-repeat left top; } .title2 { padding-left: 20px; background: url(icon02.png) no-repeat left 5%; } /** WRAPPER */ #wrapper { width: 1200px; padding: 0px 15px; background: #FFFFFF; } .container { width: 1200px; margin: 0px auto; } .clearfix { clear: both; } /** HEADER */ #header { overflow: hidden; padding: 30px 0px; } /** LOGO */ #logo { float: left; width: 300px; margin: 0; padding: 0; } #logo h1, #logo p { } #logo h1 { letter-spacing: -2px; font-size: 3em; } #logo h1 a { color: #101010; text-transform: uppercase; } #logo p { margin: 0; padding: 0px 0 0 0px; color: #8E8E8E; } #logo p a { color: #D6D6D6; } #logo a { border: none; background: none; text-decoration: none; color: #12212F; } /** MENU */ #menu { float: left; width: 300px; padding: 0px 10px 10px; } #menu #box1 { margin-bottom: 50px; } /** PAGE */ #page { overflow: hidden; padding: 50px 0px 0px 0px; border-top: 1px solid #DEDEDE; } /** CONTENT */ #content { float: right; width: 800px; } #content #cbox1 { margin-bottom: 40px; } /** SIDEBAR */ #sidebar { float: left; width: 300px; padding: 0px 30px; } #sidebar #box1 { margin-bottom: 50px; } /* Footer */ #footer { overflow: hidden; padding: 20px 0px; border-top: 1px solid #DEDEDE; } #footer p { text-align: center; font-size: 12px; } #footer a { } /** BANNER */ #banner { overflow: hidden; padding-bottom: 40px; } /** TWO COLUMN */ #two-column { overflow: hidden; padding: 40px 0px; border-top: 1px solid #DEDEDE; } #two-column h2 { font-size: 1.5em; } #two-column #tbox1 { float: left; width: 350px; } #two-column #tbox2 { float: right; width: 350px; } /* Button style 1 */ .link-style { display: inline-block; margin-top: 20px; padding: 10px 20px; background: #FE801C; border-radius: 5px; border: 1px solid #C2590A text-decoration: none; color: #FFF; } /* List style 1 */ ul.style1 { margin: 0px; padding: 0px; list-style: none; } ul.style1 li { padding: 10px 0px 15px 0px; border-top: 1px solid #E6E7DC; } ul.style1 .first { padding-top: 0px; border-top: none; } /* List style 2 */ ul.style2 { margin: 0px; padding: 0px; list-style: none; } ul.style2 li { padding: 25px 0px 15px 0px; border-top: 1px solid #E6E7DC; } ul.style2 .first { padding-top: 0px; border-top: none; } ul.style2 h3 { padding: 0px 0px 10px 0px; } ul.style2 h3 a { color: #101010; } ul.style2 a { text-decoration: none; } ul.style2 a:hover { text-decoration: underline; } /* List style 3 */ ul.style3 { margin: 0px; padding: 0px; list-style: none; } ul.style3 li { padding: 20px 0px 20px 0px; border-top: 1px solid #E6E7DC; } ul.style3 p { margin: 0px; padding: 0px; } ul.style3 img { float: left; margin-top: 3px; margin-right: 20px; } ul.style3 .posted { padding: 10px 0px 10px 0px; font-size: 8pt; color: #A2A2A2; } ul.style3 .first { padding-top: 0px; border-top: none; } А вот код html <div id="wrapper" class="container"> <div id="banner" align="center"> <img src="header-image.jpg" width="1200" height="500" alt="" /> </div> <div id="header"> <div id="content"> <var>content</var> </div> <div id="menu"> <var>navigation[1|2|3]</var> </div> <div id="sidebar"> <var>sidebar</var> </div> </div> <div id="footer"> <var>footer</var> </div> </div> Пользуюсь сервисом jimdo! и подскажите как вставить фотку тут не указывая url а загрузить с компа? вот адрес сайта www.olga-logos.jimdo.com заранее спасибо!
-
Знаю, что глупый вопрос, но как сделать, чтобы на айфоне\айпаде при масштабировании контента он изменялся по ширине, а не оставался фиксированной ширины. Структура представляет из себя блок с шириной 100%, в нём еще 1 блок с шириной 100%, и в нём еще много блоков с шириной 100%, я так понял, что 100% берётся от размера документа. А нужно от размеров области просмотра. <meta name=”viewport” content=”width=320"> не помогает. Заранее спасибо
-
Подскажите, как создать такое меню - http://css-live.ru/articles/zadanie-po-vyorstke-17-vertikalnoe-menyu.html Мыслей нет никаких по этому поводу.
-
Добрый день! Есть базовые (минимальные) знания HTML, CSS, Photoshop. При наличии работы и оплаты буду развиваться. Желательно удаленный вариант или же редкими личными встречами. Живу я в М.О. - к сведению в случае второго варианта. Сейчас работаю в офисе по совершенно другой деятельности. Не хватает времени на совмещение, потому сменю ее на желаемую, в случае если мы друг друга найдем. Андрей. Спасибо!
-
Добрый день. Хочется услышать мнение опытных верстальщиков - можно ли отдавать такую работу условному заказчику? Есть ли грубые ляпы? Пора уже брать реальные заказы, или пока еще потренироваться на кошках? Верстал интернет-магазин с бесплатного макета: в архиве http://gfile.ru/atIs на сайте http://www.freepsd.w...zina-elwau.html HTML: http://popugaev38.ru/index.html http://popugaev38.ru/object.html http://popugaev38.ru/catalog.html http://popugaev38.ru/contacts.html CSS: http://popugaev38.ru/css/style.css JS: http://popugaev38.ru/js/main.js
-
Добрый день, есть меню, в меню настроенны активные ссылки, т.е если я на главной, главная в меню активна, нужно сделать так, когда юзер наводим мышку на другие категории меню, активность сбрасывается, убирает мышку, опять появляется. Возможно ли реализовать на чистом CSS??? Если нет, подскажите куда копать... Всем спасибо.
-
мой сайт - http://www.garik1.ru/ Там мои навыки, работы и контакты. Возможна удаленка или (даже желательно) на терр. работодателя в Москве.
-
Всем хай! Вроде нечего сложного нет, кто может помочь с копировать верхний блок Меню с сайта http://www.netdreams.co.uk/, там гдей home \ What we do \ Showcase ну и т.д. Медиа центр не нужен. Кто может состряпать (скопировать) ccs ну и создать разметку заодно =)) Буду век благодарен. Сам пока что разбираюсь что куда там 3 css файла я уже запутался короче что куда прошу помощи.
-
Есть проблема мод (скрипт) в левой колонке отображается нормально но как его переносишь в футор почему то его растягивает, как это испивать, чтобы он отображался везде одинаково.
-
Подскажите как сверстать такое: <div class="outer"> <div class="inner">Текст1</div> <div class="inner">Текст2</div> <div class="inner">Текст3</div> </div> блоки inner должны быть по ширине окна браузера в одну строку, соответственно outer = 3 окнам. Текст внутри inner должен быть по центру по вертикали и горизонтали. Что-то не получается никак.
