Search the Community
Showing results for tags 'html'.
-
Нужно чтобы при нажатии другие блоки убирались, а не перекрывались. БЕЗ скриптов. /* css таба */ .tabs { position: relative; min-height: 350px; font-family: calibri; color: #404C59; } .tab { float: left; } .tab label { background:#ccc; ; position: relative; left: 1px; padding: 10px; background-color: #E6E6E6; } .tab [type=radio] { display: none; } .content { position: absolute; left: 0; background: #FAFAFA; right: 0; margin-top: 10px; padding:10px; } [type=radio]:checked ~ label { background: #FAFAFA; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; } .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg .tg-s6z2{text-align:center} .tg .tg-j1h2{font-size:x-large;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center} .tg .tg-a0td{font-size:100%} .tg .tg-mysd{font-size:18px;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center} .tg .tg-g8f1{font-size:100%;text-align:center} .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg .tg-s6z2{text-align:center} .tg .tg-y5uk{font-weight:bold;font-style:italic;font-size:large;text-align:center} .tg .tg-xloo{font-weight:bold;font-style:italic;font-size:medium;background-color:#f2cf44;text-align:center} <!-- HTML --> <html> <body> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Полиграфия</label> <div class="content"> <p> <table class="tg" style="table-layout: fixed; width: 299px; float:left; "> <colgroup> <col style="width: 145px"> <col style="width: 49px"> <col style="width: 54px"> <col style="width: 51px"> </colgroup> <tr> <th class="tg-mysd" rowspan="2">ТИП ПРОДУКЦИИ</th> <th class="tg-j1h2" colspan="3">ЦЕНА</th> </tr> <tr> <td class="tg-g8f1">USD</td> <td class="tg-g8f1">RUB</td> <td class="tg-a0td">UAH</td> </tr> <tr> <td class="tg-031e">Билборд</td> <td class="tg-s6z2">100</td> <td class="tg-s6z2">3500</td> <td class="tg-s6z2">1200</td> </tr> <tr> <td class="tg-031e">Буклет</td> <td class="tg-s6z2">40</td> <td class="tg-s6z2">1400</td> <td class="tg-s6z2">480</td> </tr> <tr> <td class="tg-031e">Флаер</td> <td class="tg-s6z2">30</td> <td class="tg-s6z2">1050</td> <td class="tg-s6z2">360</td> </tr> <tr> <td class="tg-031e">Дисконт карты</td> <td class="tg-s6z2">30</td> <td class="tg-s6z2">1050</td> <td class="tg-s6z2">360</td> </tr> <tr> <td class="tg-031e">Визитки</td> <td class="tg-s6z2">5</td> <td class="tg-s6z2">175</td> <td class="tg-s6z2"></td> </tr> </table> </p> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Закладка №2</label> <div class="content"> <p> </p> <img src="http://placekitten.com/200/100"> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Закладка №3</label> <div class="content"> <p>Содержание закладки №3</p> <img src="http://placedog.com/200/100"> </div> </div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">Закладка №4</label> <div class="content"> <p>Содержание закладки №4</p> <img src="http://placedog.com/200/100"> </div> </div> </div> </body> </html>
-
Проблемма в том, что в поле ввода хрома "Поиск..." (placeholder="Поиск...") отображается на одном уровне,а вводимый пользователем текст на пару пикселей ниже. В фф и иэ все нормально. Глаз режет, помогите( Код: [hide] <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Форма для поиска</title> <style>body{background:#394e63;font-family: "PT Sans",Verdana,Arial,sans-serif;}.search {width: 240px;height: 35px;border-radius: 10px;background:#fff;}input[type="text"] {padding:0;margin:0;display:block;height:35px;border: none;outline: none;-webkit-appearance: none;width: 197px;margin: 0px 0px 0px 9px;float:left;font:16px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#394e63;}input[type="submit"] {width: 20px;height: 20px;border: none;background: url(img/search.png) no-repeat;float:right;margin: 7px 7px 0px 0px;outline: none;-webkit-appearance: none;}input::-ms-clear {display: none;}input[type="submit"]:hover{background: url(img/search_hover.png) no-repeat;cursor:pointer;} </style> </head> <body> <form> <div class="search"> <input type="text" name="search" placeholder="Поиск..."> <input type="submit" value=""> </div> </form> </body>[/hide]
-
Я с PHP вообще плохо дружу и прошу вас помочь мне в создании двух дополнительных полей при создании опции (каталог - опции - создать). В прикрепленном изображении я набросал html макет, но как все заставить заработать c PHP я даже представления не имею. Мне хотя бы class присвоить, а описание опции не главное но тоже надо. Жду ваших предложений или решений. Спасибо. -
Всем доброго времени суток!Решил обратиться на этот форум к опытным людям за советами ну и возможно для получения ответов на свои вопросы(если не трудно ответьте буду очень признателен) 1.Хотел начать изучать html,но узнал о выходе html 5 как вы думаете какой из них сразу можно учить? 2.знаю что бы стать хорошим веб разработчиком нужно приложить немало усилий,именно поэтому что бы ещё больше не осложнять своё положение (так как я новичок) подскажите в каком порядке и каким способом следует изучать все тонкости типа php,css,html,Java,ajax и т п! Заранее спасибо за вашу помощь )
-
Здравствуйте. Задался целью собрать сайт и в принципе все по урокам понятно. Но вот одна проблемка по которой я не нашел никаких уроков и тем. Проблема заключается в том что у меня на странице есть меню, которое находится в теге <DIV>, когда я выставляю какие то параметны для того что бы меню нашло свое место на сайте все ок, но стоит мне увеличить или уменьшить страницу скролом CTRL+Scroll как меню менят свое положение. Заранее спасибо. <!DOCTYPE html><html><head> <title>My Project</title><link type="text/css" rel="stylesheet" href="menu.css" media="screen"/><link type="text/css" rel="stylesheet" href="style.css"/><script type="text/javascript" src="http://dimics.com/wp-content/themes/dimics/jquery-1.3.2.js"></script><script type="text/javascript" language="javascript"> $(document).ready(function(){$("a").hover(function(){$(this).stop().animate({top:"0px"}, "300");}, function(){$(this).stop().animate({top:"-35px"}, "300");});});</script></html> <body> <div id="menu"> <ul> <li><a href="#" class="home"></a></li> <li><a href="#" class="about"></a></li> <li><a href="#" class="links"></a></li> <li><a href="#" class="contact"></a></li> </ul> </div> </body></html>* { margin:0; padding:0; }#menu {height:35px;overflow:hidden;width:1200px;border: 2px solid black;position:absolute; top:500;left: 50px;}li {display:inline;float:left;list-style-type:none;margin-right:1px;} a {display:block;height:70px;top:-35px;position:relative;width:100px;} a.home {background:url(images/home.jpg) no-repeat bottom center;} a.about {background:url(images/about.jpg) no-repeat bottom center;} a.links {background:url(images/links.jpg) no-repeat bottom center;} a.contact {background:url(images/contact.jpg) no-repeat bottom center;}
-
Здравствуйте. Мой сайт(http://kovkavolgograd.ru/) на wordpress. Форум поддержки wordpress вообще не работает, даже пароль от входа не восстановить.У меня на компьютере пять браузеров - GoogleChromePortable, GoogleChrome, Opera, OperaAC и Mozilla Firefox. В трех из них ( GoogleChromePortable, GoogleChrome, Opera) буквы текста моего сайта разноцветные, серо-зеленые. Я новичок в этом деле. Подскажите в чем проблема? Или скажите сайт где на этот вопрос я могу получить ответ ? С Ув. !
-
Обычно я для форматирования текста беру стандартные теги, типа <i> и <b> и задаю им тот стиль, который мне нужен. Вопрос, честно, дурацкий, но не могу уснуть из-за него: Могу ли я применять собственные теги с заданным набором правил? И чем это черевато? В простом виде: мне нужно красный цвет и пунктирную линию для некоторых слов. Чтобы не занимать стандартные теги, то задаю эти свойства в <jopa>свой тег</jopa>, который уже дальше могу по необходимости дополнить стандартными.
-
Здравствуйте. Мой сайт (http://kovkavolgograd.ru/) не проверяется на валидность -http://validator.w3.org/#validate_by_uri . Выдает ошибку - Sorry! This document cannot be checked.Sorry, I am unable to validate this document because on line 611 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. The error was: utf8 "\xDF" does not map to Unicode Подскажите пожалуйста, в чем может быть проблема?
-
Добрый день соискателям. В зарождающийся крупный проект требуется программист, понимающий, что такое flash media server. Знающий, как он работает. Умеющий его настроить и поддерживать работоспособность. Должен разбираться в скриптах и видео потоках. Желательны знания php, для администрирования сайта и небольших доработок дизайна, верстальщик. Умеющий работать с Linux, Debian, CentOs. VDS, ispManager, SSL. Требуется человек, живущий кодом, готовый работать первые 2-3 месяца за идею. Далее на постоянной основе за оклад. Либо за полную оплату проделанной работы (на выбор). Все вопросы и резюме на почту videoartstudioru@gmail.com
-
Здравствуйте. Я хочу в шапку сайта расположить объекты таким образом: (левый край экрана)Текст-ссылка1 и логотип1 пустота логотип2 текст-ссылка2 (правый край экрана) Подскажите пожалуйста оптимальный метод, как это можно было бы сделать, используя css и html. Спасибо.
-
Здравствуйте. Прошу помочь бездарности. Нужно, чтобы при наведении вываливалось меню и фон родителя оставался неизменным, когда юзер будет водить курсором по выпадающему меню. Примерно это должно быть вот так http://joxi.ru/6WQfU_3JTJBXFcsaglQ Оранжевое - это hover. Но у меня такая беда http://joxi.ru/KmUfUxjKTJCPTRw_8zk Понимаете, о чём я? Подскажите, что я не учла? Очень интересно, самоё не получилось разобраться. Спасибо, джедаи.
-
Добрый день. Прошу оценить вёрстку на наличие ошибок. Любая критика приветствуется. Макет взят отсюда: http://htmlforum.ru/index.php?showtopic=27439 Сайт http://testx.96.lt/wev_ref2.html Спасибо.
-
Как сделать, чтобы при нажатии на ссылку появлялся сбоку блок(div)?
alex1998 posted a question in HTML Coding
Есть список услуг, каждая категория - это ссылка, список находится слева. Нужно так, чтобы при нажатии на категорию сбоку появлялся блок. При этом, нужно, чтобы при нажатии на другую категорию этот блок закрывался и появлялся новый. если можно чтобы плавно появлялся блок. Помогите пожалуйста, народ, очень нужно. -
Вот например я нашел такой макетик. Мне нужно сделать полноценную рабочую страницу. Только я не совсем понимаю, что от меня требуется в целом. Знаю что сверстать и пару скриптов реализовать. В общем - Кто может, посмотрев на макет описать по пунктам процесс всей работы? Буду очень благодарен!
-
Рассматривал я бутстрап и пришла в голову идея по стилизации селекта. HTML <span class="select"> <span class="select__wrap"> <select name="options"> <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> <option value="option-3">Option 3</option> </select> </span></span>CSS .select,.select__wrap { display: inline-block;}.select,.select__wrap,.select__wrap select,.select__wrap option { font-size: 14px; line-height: 1em; vertical-align: bottom;}.select { border: red 3px dotted; border-radius: 5px;}.select__wrap { overflow: hidden;}.select__wrap select { margin: -1px; padding: 0;}Пример: http://codepen.io/GreatRash/pen/isjgL Работает во всех современных браузерах + IE Quirks Mode!
-
Помогите пожалуйста сделать выпадающее меню на css, без jq. Спасибо <div id="menu"> <ul><li><a href="#">click me</a></li><ul><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li></ul><li class="standup"><a href="">ССЫЛКА1</a></li><li class="standup"><a href="">ССЫЛКА2</a></li><li class="standup"><a href="">ССЫЛКА3</a></li><li class="standup"><a href="">ССЫЛКА4</a></li></ul></div>
-
Здравствуйте. Прошу оценить первую вёрстку http://maximbaluyev.com/. Покритикуйте код. Может, найдутся советы или пожелания. Буду рада услышать. Это сайт портфолио. На месте чёрных квадратов будут работы, которые к данному времени еще не готовы. Также вариант отображения работы можно посмотреть здесь: http://maximbaluyev.com/logo.html и здесь: http://maximbaluyev.com/logo-single/logo-single-2.html Интересует решение для одной проблемы: при уменьшении окна браузера сайт странно себя ведёт. Так как навигация фиксирована по пожеланию, то как лучше выполнить: чтобы она перекрывалась работой при уменьшенном окне браузера или чтобы вовсе скрывалась как в этом примере? Подскажите, очень надо что-то решить. Просто не знаю, как лучше будет. Думаю, услышать более опытное решение мне не помешает. заранее спасссибсы Горрлумм Горрлумм
-
Уважаемые форумчане! Подскажите ОФФЛАЙН инструмент для красивого оформления документов(и правильного!). Html в первую очередь,но еще бы CSS с PHP желательно,да и Java
-
Приветствую сообщество. Я заметил в одном уроке по верстке тэг html при задании ширины, высоты и бэкграунда страницы. В уроке об этом нет ни слова, и выглядит как обычная необходимость. Мне не удалось найти информации относительно использования тэга html в стилях css, а очень хочется понять, в чем тут суть. Пример кода из урока: Вопрос - для чего же это был сделано? В чем секрет? В каких случаях и следует ли вообще его так использовать, или это просто ошибка автора?
-
оно: http://maximbaluyev.com/ здравствуйте. есть просьба: уменьшите окно браузера, чтобы появилась горизонтальная прокрутка. что лучше: чтобы навигация была перед или за контентом в таком случае? или может лучше при максимальном уменьшении окна браузера сделать так, чтобы навигация исчезала, как в этом примере? а также чтобы появилась вертикальная прокрутка. шрифт уменьшается, но когда уже максимально уменьшили по высоте, соц. кнопки аккуратно налазят на навигацию. что тут посоветуете? я понимаю, что до таких размеров просмотр портфолио никто доводить не будет... но всё таки и если есть какие-то советы по адаптации сайта для мобильных устройств, то помогите ссылками на ресурсы, статьи... п.с. первая вёрстка) осталось немного для старта. п.п.с. уже залила, но полоса от соц. иконок перекрывает контент на странице с помощью z-index)). это исправлю. заранее спасссибсы Горрлумм
-
Приветствую. Делаю поэтажное выделение на здание, через теги map area, использую плагин maphilight Проблема в том, что выделение срабатывает не всегда, баг возникает в браузерах Chrome и Opera Гуглил решение, нашел только вариант с добавлением к тегу map id и name с одинаковым значением, но это не сработало. Кто сталкивался с подобным, как заставить работать указанные браузеры? <script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>$(function() { $(".map").maphilight();});<img class="map" alt="img/1470.jpg" src="http://s018.radikal.ru/i501/1402/07/2debaecf5527.jpg" usemap="#myMap" width="1470" height="827" /> <map name="myMap" id="myMap"> <area shape="poly" coords="177,164,359,147,591,156,852,193,852,259,591,240,358,237,177,244" class="class6 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id6" target="_self" title="title6"/> <area shape="poly" coords="177,244,359,237,591,240,852,259,853,313,591,309,358,309,178,310" class="class5 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id5" target="_self" title="title5"/> <area shape="poly" coords="177,310,357,309,591,310,853,314,853,368,592,378,359,380,178,374" class="class4 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id4" target="_self" title="title4"/> <area shape="poly" coords="178,374,359,381,592,379,853,368,853,422,591,446,359,451,178,438" class="class3 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id3" target="_self" title="title3"/> <area shape="poly" coords="178,438,359,451,591,445,853,421,853,476,592,514,358,525,177,508" class="class2 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id2" target="_self" title="title2"/> <area shape="poly" coords="177,508,358,525,591,514,824,480,823,534,593,584,359,596,176,571" class="class1 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id1" target="_self" title="title1"/> </map>P.S. Если есть подробная документация (на русском) о создании подобного рода карты, буду рад ссылке. Пытался сделать с помощью Raphael, но не разобрался в документации.
-
При наведении на ссылку, она должна оставаться такой-же яркой, а остальные должны темнеть. Вот код: HTML : <div class="menu_content"> <ul> <li class="home"><a href="#">Главная</a></li> </ul> CSS: .menu_content{ margin: 30px 0 30px 0;}.menu_content ul{ padding: 10px; vertical-align: middle; }.menu_content ul li{ margin: 3px 0 3px 0; list-style-position: inside;}.menu_content ul li a{ text-decoration: none; color: #404040; padding: 5px 20px; display: block; margin: 0 0 0 10px;}.menu_content ul li a:hover{ color: #010101;}.home{ background: url(../images/sprite.png) 0 4px no-repeat; /*Используется sprite*/}Подскажите пожалуйста как это сделать. И буду благодарен, если скажите замечания по коду. -
Делаю выпадающее меню, должно выглядеть так: При ховере на пункт меню появляется подменю. Ширина основного меню - резиновая. При наведении на Пункт4 и Пункт5 меню привязывается к правому краю. Мой код просто ужасен, подскажите пожалуйста как это сделать. .head_menu{ margin:30px 0 30px 0;}.menu { overflow: hidden; padding: 10px; list-style: none;}.menu li{ float: left; margin: 0;}.menu li a{ text-decoration: none; color: #0076d1; font-size: 14px; font-weight: bold; padding: 10px; display: block;}.menu li a:hover{ display: block; border: 1px solid #d0d0d0;}.menu ul li a:hover{ color: #000;}.menu li ul { display:none; position:absolute; width:120px; overflow: hidden; border: 1px solid #d0d0d0;}.menu li:hover ul{ display: block;}.menu ul li{ float: left;}
-
Оцените, пожалуйста, вёрстку: http://tellmeof.cc.ua/Styleux/styleux.html
-
Доброго времени суток, форумчане! Возникла у меня проблемка не большая. Нарисовал картинку (бэкграунд), и в этой картинке оставил место для вставки видео. Т.е. рамку. В это место нужно вставить видео. Бэкграунд вроде настроил, вроде отображается, но вот видео на "место" поставить не могу. Использую тег margin-top, указываю значения, а он делает отступ не только для видео, но и для самого бэкграунда. По-любому проблема лежит где-то на поверхности, а я ее не вижу, как обычно. Помогите сообразить, пожалуйста Вот мой код: + Картинка.
