Jump to content

zodcyi

Newbie
 View Profile  See their activity

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Everything posted by zodcyi

  1. zodcyi
    Добрый день! Есть следующий код html и css: <!DOCTYPE html> <html> <head> <title>test-page</title> <meta charset="utf-8" /> <style> body {margin: 0px;} header {width: 1000px; margin: 0px auto} #a {width: 300px; float: left; background: #27408B} #b {width: 200px; float: right; background: #008B00} #c {background: #CD2626; height: 150px} #a, #b {height: 100px;} </style> </head> <body> <header> <div id="a"></div> <div id="b"></div> <div id="c"></div> </header> </body> </html> Задача. Левый синий блок (div id="a") и правый зеленый (div id="b") имеют непостоянную ширину, то есть их ширина изменяется в зависимости от контента. Необходимо сделать так, чтобы центральный блок красного цвета (div id="c") занимал всю оставшуюся ширину между этими двумя блоками - синего и зеленого цвета. Использование свойства float необязательно. Вот ссылка на страницу https://dl.dropboxus.../test-page.html Спасибо!
  2. zodcyi
    Ясно, всем спасибо за помощь!
  3. zodcyi
    Так если пользователь масштабирует страницу, у него на экране появляются эти лишние пиксели. Получается, что сверстанные блоки съезжают. Да и внешний вид веб-страницы портится.
  4. zodcyi
    Доброго времени суток! Есть следующий код html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> <!--[if lt IE 9]> <script> var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]--> <script> function hide_input_value(iv) { if (iv=="Search website") { document.getElementById('field_search').value=""; } } function show_input_value(iv) { if (iv=="") { document.getElementById('field_search').value="Search website"; } } </script> </head> <body> <header> <div id="services_wrapper"> <div id="services"> <ul id="menu_services"> <li><a href="#">Account Sign In</a></li> <li><a href="#">Register</a></li> <li><a href="#">Buyers Guide</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> <div id="switch_lang"> <a href="#" id="usa_flag"></a> <a href="#" id="canada_flag"></a> </div> <a href="#" id="live_help">Live Help</a> <a href="#" id="phone_number">123.456.7890</a> </div><!--end of services--> </div><!--end of services_wrapper--> <div id="main_line_wrapper"> <div id="main_line_bg"> <div id="main_line"> <div id="custom"> <div>0 items in your bag</div> <a href="#">Check Out</a> </div><!--end of custom--> <div id="site_name"> <img src="img/logo_part1.jpg" alt="logo_1" /> <img src="img/logo_part2.jpg" alt="logo_2" /> </div><!--end of site_name--> <form> <input type="search" name="search" value="Search website" id="field_search" onfocus="hide_input_value(this.value)" onblur="show_input_value(this.value)" /><input type="submit" value="" /> </form> </div><!--end of main_line--> </div><!--end of main_line_bg--> </div><!--end of main_line_wrapper--> </header> <div id="nav_wrapper"> <nav> <span>home</span> <a href="#">latest arrivals</a> <a href="#">men's</a> <a href="#">women's</a> <a href="#">kids</a> <a href="#">brands</a> <a href="#">sale</a> <a href="#">gift cards</a> <a href="#" id="last_nav_item">freebies</a> </nav> </div><!--end of nav_wrapper--> </body> </html> Лист стилей: @font-face { font-family: 'arial_narrowbold'; src: url('../fonts/arial_narr_bold/arialnb-webfont.eot'); src: url('../fonts/arial_narr_bold/arialnb-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/arial_narr_bold/arialnb-webfont.woff') format('woff'), url('../fonts/arial_narr_bold/arialnb-webfont.ttf') format('truetype'), url('../fonts/arial_narr_bold/arialnb-webfont.svg#arial_narrowbold') format('svg'); font-weight: normal; font-style: normal; } /*GENERAL*/ html, body { margin: 0px; padding: 0px; border: 0px; } #wrapper { width: 960px; margin: 0px auto; } .clear { clear: both; } img { border: 0px; } input[type="search"]:focus { outline: none; } /*HEADER*/ #services_wrapper { width: 100%; height: 30px; background: repeat-x url(../img/services_bg.gif); } #services { margin: 0px auto; width: 960px; height: 30px; background: repeat-x url(../img/services_bg.gif); } #menu_services { float:left; list-style-type: none; margin: 0px; padding: 0px; color: #c0c0c0; font: 13px Arial, sans-serif; line-height: 30px; } #menu_services li { float: left; margin-left: 13px; padding-left: 16px; background: url(../img/services_point_bg.gif) no-repeat; } #menu_services li:first-child { margin-left: 0px; padding-left: 0px; background: none; } #menu_services li a { color: #c0c0c0; text-decoration: none; } #menu_services li a:hover { text-decoration: underline; } #switch_lang { float: right; width: 53px; height: 11px; margin: 9px 0px 10px 31px; } #switch_lang a { display: block; width: 20px; height: 11px; float: right; } #usa_flag { background: url(../img/usa_flag.gif) no-repeat; margin-left: 13px; } #canada_flag { background: url(../img/canada_flag.gif) no-repeat; } #live_help { width: 60px; height: 18px; margin: 5px 0px 3px 36px; padding: 4px 0px 0px 38px; background: url(../img/cloud_help.png) no-repeat; } #live_help:hover, #phone_number:hover { text-decoration: underline; } #live_help, #phone_number { float: right; display: block; font: 13px Arial, sans-serif; line-height: 10px; color: #fff; text-decoration: none; } #phone_number { width: 83px; height: 16px; padding: 6px 0px 0px 27px; margin: 3px 0px 5px; background: url(../img/handset.png) no-repeat; } #main_line_wrapper { width: 100%; height: 100px; background: url(../img/main_line_bg.gif) repeat-x; } #main_line { width: 960px; height: 100px; margin: 0px auto; background: url(../img/main_line_bg2.png) no-repeat, url(../img/main_line_bg.gif) repeat-x; } #custom, #site_name { width: 320px; height: 100px; float: left; } #custom { background: url(../img/bag.png) 6px 7px no-repeat; } #custom div { margin: 28px 0px 12px 85px; font: 20px Arial, sans-serif; color: #fff; } #custom a { display: block; width: 114px; height: 17px; margin-left: 104px; padding-top: 6px; border-radius: 10px; background: url(../img/check_button.png) no-repeat; font: bold 15px/11px Arial,sans-serif; text-align: center; text-decoration: none; color: #ffc200; } #site_name img { display: block; } #site_name img:first-child { margin: 5px 0px 0px 48px; } #site_name img:first-child + img { margin-left: 81px; } #main_line > form { width: 292px; height: 31px; float: left; padding: 35px 0px 34px 28px; } #main_line input[type="search"], #main_line input[type="submit"] { height: 31px; border: 0px; padding: 0px; vertical-align: bottom; } #main_line input[type="search"] { width: 230px; padding-left: 20px; border-radius: 10px 0px 0px 10px; background: url(../img/search_input_bg.png) no-repeat; font: 13px Arial, sans-serif; color: #3a3a3a; -webkit-appearance: none; } #main_line input[type="submit"] { width: 42px; border-radius: 0px 10px 10px 0px; background: url(../img/go_button.gif) no-repeat; cursor: pointer; } /*NAV*/ #nav_wrapper { width: 100%; height: 43px; background: url(../img/nav_bg.png) repeat-x; } nav { width: 920px; height: 36px; padding: 7px 20px 0px; margin: 0px auto; font-size: 0px; line-height: 0px; } nav a, nav span { display: block; width: 90px; height: 28px; margin-right: 10px; float: left; text-transform: uppercase; font: bold 16px arial_narrowbold, sans-serif; text-align: center; white-space: nowrap; color: #fff; border-radius: 3px; } nav a { text-decoration: none; } nav span { background: url(../img/nav_item_bg.png) repeat-x; } nav span + a { width: 125px; } #last_nav_item { width: 85px; margin-right: 0px; } nav a:hover { background: url(../img/nav_item_bg.png) repeat-x; } Проблема - при изменении масштаба страницы в Chrome появляются дополнительные полоски пикселей. Привожу скрин(полоски указаны двумя стрелками слева), масштаб страницы в Chrome уменьшен до 90%. Открываю Developer Tools в Chrome и вижу следующее: Для дива #nav_wrapper в стилях определена высота в 43 пикселя. Получается, что при зуме Chrome меняет высоту блока. При дальнейшем уменьшении/увеличении эти полоски пикселей начинают то пропадать, то появляться снова. С такой проблемой в Chrome встречаюсь уже не первый раз. Подскажите, пожалуйста, можно ли это исправить. Вот ссылка на страницу.
  5. zodcyi
    Спасибо за советы!
  6. zodcyi
    Добрый день! Ищу тему для курсовой - проект на JavaScript, не игра. Допускается использовать другие языки программирования, но основной - JS. Из того, что нашел в интернете - online reader, mp3-player или эмуляторы dos. Может у кого есть техническое задание на тот или иной проект на JS. Спасибо.
  7. zodcyi
    Всем спасибо за ответы!
  8. zodcyi
    Доброго времени суток! Вот, что нужно сверстать: Размер шрифта для самих элементов меню (Account Sign In, Register...) - 13 пикселей. Для точек-разделителей - 25 пикселей. Интерлиньяж одинаковый - 30 пикселей. Между элементом меню и точкой-разделителем расстояния в 3 пробела размером шрифта 13 пикселей. Базовая линия элементов меню и базовая линия точек-разделителей совпадают. Вот мой код, использую unordered list, сначала устанавливаю размер шрифта для элементов меню и точек одинаковый - 13 пикселей. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <header> <div id="services_wrapper"> <div id="services"> <ul> <li>Account Sign In .</li> <li> Register .</li> <li> Buyers Guide .</li> <li> About .</li> <li> Blog .</li> <li> Contact</li> </ul> </div><!--end of services--> </div><!--end of services_wrapper--> </header> </body> </html> Лист стилей: /*GENERAL*/ html, body { margin: 0px; padding: 0px; border: 0px; } #wrapper { width: 960px; margin: 0px auto; } /*HEADER*/ #services_wrapper { width: 100%; height: 30px; background: repeat-x url(../img/services_bg.gif); } #services { margin: 0px auto; width: 960px; height: 30px; background: repeat-x url(../img/services_bg.gif); } #services ul { list-style-type: none; margin: 0px; padding: 0px; color: #c0c0c0; font: 13px Arial, sans-serif; line-height: 30px; } #services ul li { float: left; } Открываю браузер: Все нормально, остается добавить для точек-разделителей размер шрифта 25 пикселей. Использую тег span. Вот код: ... <div id="services"> <ul> <li>Account Sign In <span>.</span></li> <li> Register <span>.</span></li> <li> Buyers Guide <span>.</span></li> <li> About <span>.</span></li> <li> Blog <span>.</span></li> <li> Contact</li> </ul> </div><!--end of services--> ... В лист стилей добавляю следующее правило: ... #services ul li span { font-size: 25px; } ... Открываю браузер: Меню съехало. И здесь непонятно несколько моментов. Смотрю в Firebug: 1) Для спиcка ul я задал наследуемое свойство line-height: 30px, откуда тогда появились эти 34 пикселя для элемента li? 2) Так же не работает line-height и для тега span Вместо 30 пикселей, высота span 29 пикселей. В принципе, меню можно поднять с помощью position:relative. Но все равно у элементов li и span остается высота в 34 и 29 пикселей соответственно. Объясните, пожалуйста, что происходит в данном случае и подскажите, есть ли решение получше для данной задачи. Спасибо.
  9. zodcyi
    mrnobody, SelenIT - спасибо за помощь!
  10. zodcyi
    Добрый день! Есть следующий код: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Псевдоклассы</title> <style> a:link { color: #0f0; } a:visited { background: #f00; } </style> </head> <body> <p> <a href="1.html">Первая ссылка</a><br/> <a href="2.html">Вторая ссылка</a><br/> <a href="3.html">Третья ссылка</a><br/> <a href="4.html">Четвертая ссылка</a><br/> <a href="5.html">Пятая ссылка</a> </p> </body> </html> Открываю страницу в Chrome, перехожу по первым двум ссылкам. Все работает так, как указал в стилях - непосещенные ссылки зеленого цвета, посещенные красного. Первая задача - установить псевдокласс :hover так, чтобы при наведении на посещенные и непосещенные ссылки, они отображались данным цветом: #0ff. Добавляю код в начало листа стилей: ... <style> a:hover { color: #0ff; } a:link { color: #0f0; } a:visited { color: #f00; } </style> ... Открываю браузер, при наведении на посещенные и непосещенные ссылки их цвет не меняется. Переношу правило a:hover {color: #0ff;} в конец листа стилей: ... <style> a:link { color: #0f0; } a:visited { color: #f00; } a:hover { color: #0ff; } </style> ... Открываю браузер, все работает. При наведении указателя мыши все ссылки окрашиваются в нужный цвет. 1) Первый вопрос - какое значение имеет место нахождения данного правила a:hover {color: #0ff;} в коде? Следующая проблема. Добавляю в исходный код 2 правила. Первое правило - чтобы при наведении указателя мыши на непосещенные ссылки, они окрашивались в оранжевый цвет. Второе правило - чтобы при наведении указателя мыши на посещенные ссылки, они окрашивались в черный цвет. Получается следующий код: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Псевдоклассы</title> <style> a:link { color: #0f0; } a:visited { color: #f00; } a:link:hover { color: orange; } a:visited:hover { color: #000; } </style> </head> <body> <p> <a href="1.html">Первая ссылка</a><br/> <a href="2.html">Вторая ссылка</a><br/> <a href="3.html">Третья ссылка</a><br/> <a href="4.html">Четвертая ссылка</a><br/> <a href="5.html">Пятая ссылка</a> </p> </body> </html> Открываю браузер - все работает. Далее добавляю правило, чтобы посещенные ссылки при наведении указателя мыши перечеркивались горизонтальной чертой: a:visited:hover {text-decoration: line-through;} . Получается следующий код: ... <style> a:link { color: #0f0; } a:visited { color: #f00; } a:link:hover { color: orange; } a:visited:hover { color: #000; text-decoration: line-through; } </style> ... Открываю браузер - добавленное правило игнорируется. При наведении мыши на посещенные ссылки свойство text-decoration: line-through не работает. Далее переношу правило text-decoration: line-through из посещенных ссылок в непосещенные. То есть, получается следующий лист стилей: ... <style> a:link { color: #0f0; } a:visited { color: #f00; } a:link:hover { color: orange; text-decoration: line-through; } a:visited:hover { color: #000; } </style> ... Открываю браузер - свойство text-decoration: line-through при наведении указателя мыши применяется для всех ссылок, хотя я указал только для непосещенных. Помогите разобраться - что происходит с кодом? Спасибо.
  11. zodcyi
    sigma77, спасибо большое за помощь!
  12. zodcyi
    Есть следующий код html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>Специфичность селекторов</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style35.css" type="text/css" /> </head> <body> <div class="one"> <p title="privet">Это просто первый абзац текста</p> </div> </body> </html> и следующий код css p[title="privet"] { background: #ff0000; } .one p { background: #00ff00; } В результате обработки кода браузером, получаем абзац на зеленом фоне. Считаем специфичность для p[title="privet"] { background: #ff0000; } Получается, один селектор тега p (это один) и селектор атрибута [title="privet"] (это десять). В сумме получается 11. Теперь считаем специфичность для .one p { background: #00ff00; } Получается, класс .one (это десять) и селектор тега p (это один). В сумме ,опять же, получается 11. Так как специфичность селекторов одинакова, срабатывает тот селектор, что написан в коде ниже, т.е. .one p { background: #00ff00; } Поэтому абзац в браузере отображается на зеленом фоне, а не на красном. Здесь все ясно. Вопрос вот в чем. В случае изменения тега <div> на тег p, абзац в браузере отобразится на красном фоне. То есть, если изменить код следующим образом: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>Специфичность селекторов</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style35.css" type="text/css" /> </head> <body> <p class="one"> <p title="privet">Это просто первый абзац текста</p> </p> </body> </html> а код css оставить тот же, то в браузере абзац отобразится на красном фоне. Помогите ,пожалуйста, разобраться, в чем дело. .
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept