mastermedia
-
Posts
21 -
Joined
-
Last visited
mastermedia's Achievements
Explorer (1/14)
-1
Reputation
-
а почему такой селектор выбирает только первый ul + p { color: red; }
-
Подскажите, пожалуйста, почему буду красным выделены 2 элемента li после первого? Ведь по определению, насколько я понял, данный селектор выбирает первый соседний элемент, а тут выбраны, почему так? <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Пример страницы</title> <style> li + li { color: red; } </style> </head> <body> <ul> <li>text 1 <li>text 1 <li>text 1 </ul> </body></html>
-
Ищу одноколочный psd макет для блога с комментариями, админкой. Поделитесь пожалуйста.
-
ну я люблю с нуля программировать jquery или на голом JS, могу потратить много часов, хотя мог тупо за пару минут готовое взять. мне лично это кайф приносит самому делать) Моя цель Ruby on Rails и Node.Js. Только для начала надо хотя бы средне знать верстку, js, jquery, php. Еще раз повторюсь хотя бы 2-3 месяца посвятите html, никуда без знания верстки на среднем уровне. Хочу сделать проект и изучить asp.net mvc, html, css, js, jquery, ms sql. Посоветуйте не сложный проект. 2-3 месяца одному html времени нету посвящать
-
Сайт я буду делать с помощью asp.net mvc. Как первый проект на данной технологии выбрал для интернет магазин. Пока профессионально верстке мне не нужно обучатся. А хочу сделать свой первый сайт. Для asp.net mvc мне нужно знать html, css. Поэтому на таком проекте хочу изучать данные технологии. Поэтому меня интересует не сложный шаблон интернет магазина.
-
Хочу сверстать шаблон интернет магазина. Прочитал самоучитель по html, css, блочной верстке. Насколько сложно будет сверстать данный шаблон для первого раза
-
Спасибо за помощь. Извините за мою невнимательность)
-
Хочу установить следующие границы для блока #header с помощью свойств. Но данные свойства не работают и не создают границы. В чем может быть проблема? border-top: 3px solid 1c1211; border-bottom: 1px solid 1c1211; Весь HTML и CSS код: #wrap { width: 1000px; margin: auto; margin-top: 20px; } #header { border-top: 3px solid 1c1211; border-bottom: 1px solid 1c1211; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="wrap"> <div id="header"> <div id="header_top"> <img src="img/logo.png" alt="logo"> <div class="phNumber"> <p>321 45 98</p> <p>Phone number</p> </div> </div> <!--#header_top--> <div id="header_bottom"> <ul class="menu"> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Vacancy</a></li> <li><a href="#">Services</a></li> <li><a href="#">Files</a></li> </ul> </div> <!--#header_bottom--> </div> <!--#header--> <div id="content"> <h1>Praesent eget nulla elit</h1> <div class="post"> <p>Today</p> <h2><a href="#">Ut bibendum faucibus faucibus</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. In hac habitasse platea dictumst. Cras eget nibh eros, in blandit lacus. Proin commodo justo et velit hendrerit et malesuada tortor feugiat. Lorem ipsum dolotr sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. <a href="#">CONTINUE</a> </p> </div> <!--.post--> <div id="border"></div> <!--#border--> <div class="post"> <p>Tomorrow</p> <h2><a href="#">Vivamus neque turpis, sollicitudin sit amet sollicitudin vel</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. In hac habitasse platea dictumst. Cras eget nibh eros, in blandit lacus. Proin commodo justo et velit hendrerit et malesuada tortor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. In hac habitasse platea dictumst. <a href="#">CONTINUE</a> </p> </div> <!--.post--> </div> <!--#content--> <div id="footer"> <p>All rights reserved</p> </div> <!--#footer--> </div> <!--#wrap--> </body> </html>
-
Как добиться, чтобы белая линия, картинка заднего фона, автоматически увеличивала или уменьшала свою ширину в зависимости от размера содержимого ссылки? Вот, как это выглядит на картинке Привожу свой html и сss код данного меню <div id="header_bottom"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Partners</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact</a></li> </ul> </div> #header_bottom { background: #afafaf; height: 40px; } .menu { list-style: none; margin: 0; padding: 0; text-align: center; } .menu li { display: inline; } .menu a { color: white; display: inline-block; padding: 10px 32px 10px 32px; text-decoration: none; font-size: 18px; } .menu a:hover { background: url(../img/line.png) no-repeat center bottom; padding-bottom: 2px; }
-
У меня возникла белая полоска между блоками header и content. Как убрать данную полоску? body { margin: 0px; padding: 0px; } #wrap { margin: auto; width: 1000px; } #header { height: 200px; background: url(../img/header-background.png) #348016 repeat-x; } #logo { text-align: center; padding-top: 34px; } #content { background-color: #CCCCCC; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrap"> <div id="header"> <div id="logo"> <img src="img/logo.png" alt="logo"> </div> </div> <!-- #header --> <div id="content"> <h2>Я самый главный заголовок</h2> <p>Земная группа формировалась ближе к Солнцу, однако газопылевое облако меняет центральный эксцентриситет, хотя это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. Нулевой меридиан традиционно ищет далекий Юпитер – север вверху, восток слева. Природа гамма-всплексов на следующий год, когда было лунное затмение и сгорел древний храм Афины в Афинах (при эфоре Питии и афинском архонте Каллии), доступна. Природа гамма-всплексов, это удалось установить по характеру спектра, отражает экваториальный Юпитер, а оценить проницательную способность вашего телескопа поможет следующая формула: Mпр.= 2,5lg Dмм + 2,5lg Гкрат + 4. Экскадрилья, и это следует подчеркнуть, перечеркивает экваториальный pадиотелескоп Максвелла, данное соглашение было заключено на 2-й международной конференции “Земля из космоса - наиболее эффективные решения”. </p> <p>Земная группа формировалась ближе к Солнцу, однако газопылевое облако меняет центральный эксцентриситет, хотя это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. Нулевой меридиан традиционно ищет далекий Юпитер – север вверху, восток слева. Природа гамма-всплексов на следующий год, когда было лунное затмение и сгорел древний храм Афины в Афинах (при эфоре Питии и афинском архонте Каллии), доступна. Природа гамма-всплексов, это удалось установить по характеру спектра, отражает экваториальный Юпитер, а оценить проницательную способность вашего телескопа поможет следующая формула: Mпр.= 2,5lg Dмм + 2,5lg Гкрат + 4. Экскадрилья, и это следует подчеркнуть, перечеркивает экваториальный pадиотелескоп Максвелла, данное соглашение было заключено на 2</p> <h3>Я подзаголовочек</h3> <p>Земная группа формировалась ближе к Солнцу, однако газопылевое облако меняет центральный эксцентриситет, хотя это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. Нулевой меридиан традиционно ищет далекий Юпитер – север вверху, восток слева. Природа гамма-всплексов на следующий год, когда было лунное затмение и сгорел древний храм Афины в Афинах (при эфоре Питии и афинском архонте Каллии), доступна. Природа гамма-всплексов, это удалось установить по характеру спектра, отражает экваториальный Юпитер, а оценить проницательную способность вашего телескопа поможет следующая формула: Mпр.= 2,5lg Dмм + 2,5lg Гкрат + 4. Экскадрилья, и это следует подчеркнуть, перечеркивает экваториальный pадиотелескоп Максвелла, данное соглашение было заключено на 2-й международной конференции “Земля из космоса - наиболее эффективные решения”. </p> <h4>Я подзаголовочек</h4> <p>Земная группа формировалась ближе к Солнцу, однако газопылевое облако меняет центральный эксцентриситет, хотя это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. Нулевой меридиан традиционно ищет далекий Юпитер – север вверху, восток слева. Природа гамма-всплексов на следующий год, когда было лунное затмение и сгорел древний храм Афины в Афинах (при эфоре Питии и афинском архонте Каллии), доступна. Природа гамма-всплексов, это удалось установить по характеру спектра, отражает</p> </div> </div> <!-- #wrap --> </body> </html> P.S. Как мне самому находить свои ошибки без помощи форума?
-
Я учусь верстать сайты. Занимаюсь по данным видео урокам - курс верстки сайта. Дошел до данного урока "приступаем к CSS". Я знаком с css. Но мне часто не ясно почему автор применяет тот или иной прием. Это именно связанно с написанием css стилей. Что вы мне посоветуете делать?
-
Сейчас я учусь верстать и пытаюсь сверстать данную форму http://htmlbook.ru/practical/poshagovaya-forma Я застрял на верстке шапки данной формы. Для верстки шапки я применил относительное позиционирование. А именно, проблема с вычислением размеров между слоями, относительно других слоев и т.д. Как именно правильно вычислять подобные размеры? Выкладываю результаты, того что у меня вышло. Все размеры вычислял наугад. Не могу же я постоянно угадывать размеры наугад. Верстаю с psd шаблона. Рисунки(блокнот, бутылка, бокал, тарелка) размещены криво относительно друг друга. Вот, результат на скриншоте. Выкладываю html и css код. Прошу помочь решить проблему. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Форма</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div id="container"> <div id="header"> <div class="notepadClass"><img src="images/01/notepad.png" alt="notepad"></div> <div class="bottle"><img src="images/01/bottle.png" alt=""><span>Ингредиенты</span></div> <div class="plate"><img src="images/01/plate.png" alt=""><span>Параметры</span></div> <div class="goblet"><img src="images/01/goblet.png" alt=""><span>Бокалы</span></div> </div> <div id="content"> <p>Описание <img src="" alt=""></p> <form action="" method="post"> <img src="" alt=""> <p><input type="file"></input></p> <p><input type="text" value="Название коктейля"></input></p> <p><input type="text" value="Альтернативное название через запятую"></input></p> <p><input type="text" value="Краткое название"></input></p> <p><input type="text" value="Инструкция для приготовления"></input></p> <p><input type="submit" value="Ингредиенты"></input></p> </form> </div> </div> </body> </html> body { margin: 0; } #container { margin: 0px auto; width: 472px; height: 422px; text-align: left; } #header { background-image: url(../images/01/header.png); background-repeat: no-repeat; position: absolute; width: 472px; z-index: 1; } .notepadClass, .bottle, .plate, .goblet { position: relative; } .notepadClass { left: 10px; top: 10px; z-index: 2; } .bottle { left: 120px; top: -20px; z-index: 2; } .plate { left: 241px; z-index: 2; top: -47px; } .goblet { left: 370px; top: -80px; z-index: 2; }
-
Я хочу понять, как получать различные размеры отступов, полей и границ относительно других элементов таких, как браузер, другие графические элементы. Сейчас я пытаюсь сверстать данную форму. Форму разрезал на различные графические элементы. К примеру, я хочу разместить как нужно блокнот. Но я не могу понять, как узнать размеры относительно верней и левой границы браузера. Пока я использую фиксированные размеры. Вот что, у меня пока вышло.
-
а как сделать кнопку с бокалами?
-
если в html 4.01? То использовать input type="text" и прикрепить две кнопки?
