Eirene
-
Posts
29 -
Joined
-
Last visited
Eirene's Achievements
Explorer (1/14)
0
Reputation
-
Надо менять верстку (( В дальнейшем мне таким же образом нужно будет исключить область верхнего меню и поиска, но оставить всю остальную серо-зеленую область кликабельной. Думала может как-то на jQuery можно сделать эти исключения.
-
Вариант, конечно, но не очень удобный.
-
Задача: Есть логотип, часть его (дерево в кружочке) должно вести по ссылке, напр.на Главную, при клике на остальную же часть нужно чтобы появлялось верхнее окошко. Пока дошла до того, что внутри ссылки сделала область конкретно для дерева в круге: <p class="logo"><a href="#">Mounthermon</a></p> .header p.logo{ float:left; width:239px; height:106px; text-indent:-900em; margin-top:-20px; background: url(../images/logo.png) no-repeat left top; position:relative; cursor:pointer; } .header p.logo a{ display:block; border-radius:27px; height: 52px; left: 8px; position: absolute; top: 19px; width: 53px; } Написала: $(document).ready(function(){ $('p.logo').not('p.logo a').click(function(){ $('.top-grey-block').slideToggle(); }); }); Но, естественно оно реагирует на нажатие по дереву, оно ведь в области p.logo находится... Как их сделать разнокликабельными? Посмотреть страничку можно тут
-
Именно это и не получается. Потому что когда дописываю в скрипт корректировку при скролле вниз - начинает все глючить((
-
Добрый день! Делаю "заглушку", где есть меню, которое "плавает". http://14.asmedius.z8.ru/irina/ear/ Нужно, чтобы при скольжении вниз, меню становилось чуть выше своей изначальной точки положения. Так и происходит при клике на пункты меню. Но. Мы ведь может воспользоваться и скроллом? Вот тут и начинается проблема. Не могу отловить что нужно сделать, чтобы меню правильно себя вело при скролле странице мышкой. Т.е., например, если мы нажмем п.Classes, а потом мышкой прокрутим вверх - то меню встанет на место. Если после этого начать скроллить вниз - то меню зависнет уже на своей позиции и не будет подтягиваться вверх как нужно. Где-то ошибка в логике, сломала голову уже
-
Не знаете, с шрифтом Franklin Gothic BookC работает? Все пытаюсь его прикрутить, никак не получается ((( http://14.asmedius.z8.ru/irina/jobber/ в исх.коде видно <p class="title">С нами работают</p> должен быть преобразован, но в браузере этот текст вообще не отображается.
-
Да, одновременно должны сразу обе строчки прокручиваться. Спасибо
-
Всем здравствуйте! Подскажите, пожалуйста, встречали ли вы подобный слайдер, чтобы контент размещался в две строки: Буду благодарна за название или его ссылку.
-
Блоки разной ширины на одинаковом расстоянии друг от друга
Eirene replied to Eirene's question in HTML Coding
А как узнать какое значение ставить в margin, если сайт резиновый? -
Если такой вопрос уже был, извиняюсь, поиск не работает Сам вопрос такой: можно ли при резиновой странице (5) расположить блоки (1-4) таким образом, чтобы они находились на одинаковом расстоянии друг от друга? При условии что блоки разной ширины и периодически меняются. Ниже попытка изобразить что требуется ))) Пока пришел в голову вариант засунуть все это дело в таблицу, есть другие варианты?
-
Нашла в сети шаблон 3х колонного макета на DIV'ах. И всем вроде бы хорош, но в IE 6 сразу появляется горизонтальная полоса прокрутки. Подскажите, пожалуйста, как ее убрать. http://blog.sjinks.pro/test/3col/3col_h100.html код шаблона: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Three Column Liquid Layout</title> <style type="text/css"> html { overflow: auto; background: #800000; } html:not(:nth-child(1)) { overflow: visible; } html, body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; } body { font: 14px/120% Verdana, Tahoma, Arial, Helvetica, sans-serif; position: relative; min-width: 640px; width: 90%; margin: 0 auto; } #header { height: 3em; background: red; color: #FFF; position: absolute; top: 0; width: 100%; z-index: 1000; left: 0; } .column { padding-top: 3em !important; } #container { padding-left: 220px; padding-right: 200px; overflow: hidden; float: left; /* IE 5.01 */ float/**/: none; height: auto !important; height: 100%; min-height: 100%; background: lime; position: relative; } * html #container { overflow: visible; } #left, #right, #content { float: left; position: relative; padding-bottom: 3em !important; } /*\*/ #left, #right, #content { padding-bottom: 1000em !important; margin-bottom: -997em !important; } /**/ @media all and (min-width: 0px) { #left, #right, #content { margin-bottom: 0 !important; padding-bottom: 3em !important; } #left:before, #right:before, #content:before { content: 'EasyClearing'; display: block; background: inherit; padding-top: 1000em !important; margin-bottom: -1000em !important; height: 0; } } #container:after { content: 'EasyClear'; display: block; height: 0; clear: both; visibility: hidden; } #container { display: inline-block; } /*\*/ #container { display: block; } /**/ #left { width: 220px; background: cyan; /* url(images/tile-2.jpg) repeat; */ margin-left: -100%; right: 220px; } * html #left { left: 200px; } #right { width: 200px; background: yellow; /* url(images/tile-3.jpg) repeat; */ margin-right: -100%; } #content { width: 100%; background: #CCC; /* url(images/tile-1.jpg) repeat; */ } #footer { height: 3em; color: #FFF; background: green; position: relative; z-index: 1000; margin-top: -3em; width: 100%; } </style> </head> <body> <div id="header"> Header </div> <div id="container"> <div id="content" class="column"> </div> <div id="left" class="column"> </div> <div id="right" class="column"> </div> </div> <div id="footer">Footer</div> </body> </html>
-
Благодарю! Надо изучить zoom: 1 подробнее, очень полезная штука оказалась)) p.s. обрезка отрицательного margin в ИЕ 6 решилась путем добавления position: relative;
-
Здравствуйте! Вот такая белиберда получается Тут лежит zip с файлами. Почему так происходит? Что браузеру не нравится? 6 ИЕ: 7 ИЕ: А так это выглядит в Мозилле или Хроме: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <meta http-equiv="keywords" content=""/> <meta http-equiv="description" content=""/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/> <title>Ekos</title> </head> <body> <!-- body --> <div id="top"> <!-- header --> <div id="header"> </div> <!-- end of header --> <!-- menu --> <!-- end of menu --> <!-- content --> <div id="body" class="clearfix"> <div id="leftCol"> <div id="menuUL"> <ul> <li><a href="/">Главная</a></li> <li><a href="/">О нас</a></li> <li class="current"><a href="/">Новости</a> <ul> <li class="current"><a href="/">Фотогалерея</a> <ul> <li><a href="/">Салон</a></li> <li><a href="/">Процедуры</a></li> <li class="current"><a href="/">Косметика</a></li> <li><a href="/">Специалисты</a></li> </ul> </li> <li><a href="/">Статьи</a></li> </ul> </li> <li><a href="/">Меня беспокоит</a></li> <li><a href="/">Прайс лист</a></li> <li><a href="/">Отзывы</a></li> <li><a href="/">Контакты</a></li> </ul> </div> </div> <div id="rightCol"> </div> </div> <!-- end of content --> </div> <!-- end of body --> <!-- footer --> <div class="clear"></div> <div id="bottom" class="clearfix"> </div> <!-- end of footer --> </body> </html> /******************************************************************************* RESET *******************************************************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /******************************************************************************* TEMPLATES *******************************************************************************/ /* CLEARFIX */ .clear{ clear: both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ /* END OF CLEARFIX */ /******************************************************************************* MAIN *******************************************************************************/ html, body { height: 100%; } body { font: normal 100% Palatino Linotype, serif; background: #a7d9c6 url(../img/body-bg.gif) center top repeat-y; } a:hover { text-decoration: none; } /******************************************************************************* STRUCTURE:BASE *******************************************************************************/ #top { position: relative; width: 980px; height: auto !important; height: 100%; min-height: 100%; margin: 0 auto; border-left: #88b0a1 4px solid; border-right: #88b0a1 4px solid; } #body { position: relative; padding: 25px 0 125px 0; background-color: #fff; } #header { position: relative; height: 201px; background: #fff url(../img/logo.jpg) 50% 15px no-repeat; border-bottom: 7px solid #dcdcdc; } #leftCol{ float: left; margin-bottom: 25px; padding-left: 45px; width: 220px; } #leftCol #menuUL{ width: 174px; padding: 0 46px 10px 0; font-size: 15px; line-height: 1.5; } #leftCol #menuUL a{ color: #16513b; } #leftCol #menuUL ul li{ text-transform: uppercase; } #leftCol #menuUL ul li.current{ background: #dcdcdc url(../img/menu-top.gif) top left no-repeat; margin-left: -17px; } #leftCol #menuUL ul li.current a{ padding-left: 17px; display: block; background: url(../img/menu-bottom.gif) bottom left no-repeat; } #leftCol #menuUL ul li.current ul li{ padding-left: 19px; background: none; background-color: #fff; text-transform: none; } #leftCol #menuUL ul li.current ul li.current{ padding-left: 36px; background: none; background-color: #fff; } #leftCol #menuUL ul li.current ul li a{ background: none; text-decoration: underline; color: #585757; } #leftCol #menuUL ul li.current ul li.current a{ background: none; text-decoration: underline; color: #585757; } #leftCol #menuUL ul li.current ul li.current ul li{ background: transparent url(../img/li.gif) no-repeat 30px 6px !important; padding-left: 21px; } #leftCol #menuUL ul li.current ul li.current ul li.current{ background: transparent url(../img/li.gif) no-repeat 47px 6px !important; padding-left: 38px; } #leftCol #menuUL ul li.current ul li.current ul li a{ font-size: 11px; } #leftCol #menuUL ul li.current ul li.current ul li.current a{ text-decoration: none; } #leftCol-main a, #leftCol a{ text-decoration: none; } #rightCol{ margin-left: 265px; padding: 0 45px 20px 45px; width: 621px; font-size: 14px; color: #4d4c4c; border-left: #dcdcdc 1px solid; } #bottom { position: relative; width: 980px; height: 100px; margin: -100px auto 0; padding-top: 30px; font-size: 12px; color: #4d4c4c; background: #dcdcdc url(../img/footer-top.jpg) 0 0 no-repeat; border-left: #88b0a1 4px solid; border-right: #88b0a1 4px solid }
-
Ссылку не дать - проект еще на локале) Поместила таблицу в div, прописала zoom и margin-right, дабы ей место увеличить - и только тогда все встало на место. Просто margin-right без zoom - не работал. psywalker, спасибо за подсказку
-
Так должно быть (и есть во всех приличных браузерах) - А так происходит в не приличном браузере ИЕ 6 - HTML <!-- content --> <div id="body" class="clearfix"> <div id="leftCol"> <div id="menuUL"> <ul> <li><a href="/">Главная</a></li> <li><a href="/">О нас</a></li> <li><a href="/">Новости</a></li> <li class="current"><a href="/">Меня беспокоит</a></li> <li><a href="/">Прайс лист</a></li> <li><a href="/">Отзывы</a></li> <li><a href="/">Контакты</a></li> </ul> </div> <div id="leftCol-uslugi"> <div id="order-call"><a href="/">Заказать звонок</a></div> <div id="Iwant"><a href="/">Я хочу</a></div> </div> </div> <div id="rightCol"> <div id="content"> <h1>Меня беспокоит</h1> <table id="iworryTable"> <tr> <td><img src="img/iworry-face.jpg" width="267" height="99" alt=""/> </td> <td> <img src="img/iworry-body.jpg" width="267" height="99" alt=""/> </td> </tr> <tr> <td> <ul> <li><a href="/">Морщины</a></li> <li><a href="/">Пигментные пятна</a></li> <li><a href="/">Проблемная кожа</a></li> <li><a href="/">Чувствительная кожа</a></li> <li><a href="/">Жирная кожа</a></li> <li><a href="/">Дегидрированная пятна</a></li> <li><a href="/">Для мужчин</a></li> </ul> </td> <td> <ul> <li><a href="/">Целлюлит, избыточный вес</a></li> <li><a href="/">Растяжки</a></li> <li><a href="/">Боли в спине</a></li> </ul> </td> </tr> <tr> <td><img src="img/iworry-hair.jpg" width="267" height="99" alt=""/></td> <td><img src="img/iworry-hands.jpg" width="267" height="99" alt=""/></td> </tr> <tr> <td></td> <td> <ul> <li><a href="/">Дряблая кожа</a></li> <li><a href="/">Выступающие вены</a></li> </ul> </td> </tr> </table> </div> </div> </div> <!-- end of content --> CSS #leftCol{ float: left; margin-bottom: 25px; padding-left: 45px; width: 224px; } #rightCol{ margin-left: 265px; padding: 0 80px 20px 45px; width: 565px; font-size: 14px; color: #4d4c4c; border-left: #dcdcdc 1px solid; } #rightCol ul li{ background: transparent url(../img/li.gif) no-repeat 0 9px !important; padding-left: 10px; line-height: 1.5; } #rightCol ul li a{ font-weight: bold; color: #4d4c4c; } #rightCol img{ padding-right: 12px; padding-bottom: 12px; float: left; } /******************************************************************************* CONTENT ELEMENTS *******************************************************************************/ #content table td{ padding: 7px 10px 7px 10px; } #content #iworryTable td{ padding: 0 46px 0 0; } #content #iworryTable td img{ padding: 0; } #content #iworryTable td ul{ padding: 12px 0 12px 12px; } Объясните, пожалуйста, почему негодяй ИЕ6 так себя ведет и как исправить его поведение?