Eirene
-
Posts
29 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Eirene
-
Надо менять верстку (( В дальнейшем мне таким же образом нужно будет исключить область верхнего меню и поиска, но оставить всю остальную серо-зеленую область кликабельной. Думала может как-то на 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 так себя ведет и как исправить его поведение?
-
Не пойму - от чего в Мозилле (2.0) происходит такая вещь: http://www.fbf.ru/zlatopek/ovs.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Златопек</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="styles.css" rel="stylesheet" type="text/css"></head> <body> <div class="main"> <div id="back"><<<a href="http://www.fbf.ru/"> на главную</a></div> <div id="logo" align="center"><img src="img/logo.gif"></div> <div id="logo2" align="center"><img src="img/slogan.gif"></div> <center><img class="p" src="img/polosa.gif"></center> <table class="small" align="center"> <tr> <td class="sm" rowspan="6" valign="top"> <div id="leftText"><br/>ЗАО "Первая Бисквитная Фабрика", предприятие группы <a style="color:#B7202E" href="http://www.lacom.com">"Лаком"</a> представляет новые продукты под новой торговой маркой "Златоп?к". Златоп?к - это выпеченные сладости золотыми руками наших кондитеров-профессионалов. Богатое вкусное печенье и другие сладости, с натуральными добавками и произведенные по современным инновационным технологиям. "Златоп?к" - радость в упаковке!</div></td> <td class="smMiddle"><img src="img/ovs_1.gif"></td> <td class="rText">Печенье "Златоп?к" овсяное классическое Вес упаковки 240 грамм </td> </tr> <tr> <td class="smMiddle"><img src="img/ovs_2.gif"></td> <td class="rText">Печенье "Златоп?к" овсяное с изюмом Вес упаковки 240 грамм</td> </tr> <tr> <td class="smMiddle"><img src="img/ovs_3.gif"></td> <td class="rText">Печенье "Златоп?к" овсяное топленое молоко Вес упаковки 240 грамм</td> </tr> <tr> <td class="smMiddle"><img src="img/ovs_4.gif"></td> <td class="rText">Печенье "Златоп?к" овсяное с миндал?м Вес упаковки 240 грамм</td> </tr> <tr> <td class="smMiddle"><img src="img/ovs_5.gif"></td> <td class="rText">Печенье "Златоп?к" овсяное с кусочками шоколада Вес упаковки 240 грамм</td> </tr> <tr> <td class="describe" colspan="2">Срок хранения: 6 месяцев Вес короба: 240 грамм х 15 штук Количество коробов в паллете: 50 Без консервантов. Без красителей.</td> </tr> </table> </div> </body> </html> html{ height:100%; } body { color: #AFAEAE; margin: 0; padding: 0; background-image:url('img/brd.gif'); background-position:top; background-repeat:repeat-x; height: auto !important; height: 100%; min-height: 100%; } html { height:100%; } img { border: 0px; } img.p { width: 950px; height: 15px; } .main{ height: auto !important; height: 100%; min-height: 100%; position:relative; border:0px; border-left: 10px; border-right: 10px; border-color: #D0D0D0; border-style: solid; display:block; background-image: url('img/brd.gif'); background-position:bottom; background-repeat:repeat-x; } table.small{ width: 950px; background: url("img/back.gif") no-repeat; margin-bottom: 15px; } td.sm{ width: 340px; float: left; border-right-width: 4px; border-right-style: solid; border-color: #DEDEDD; padding-right: 5px; } td.smMiddle{ width: 300px; padding-left: 30px; padding-right: 20px; } td.vrSmMiddle{ width: 300px; padding-left: 48px; padding-right: 20px; } td.smText{ font-family: Tahoma; font-size: 12px; font-style: normal; color: 000000; } h3 { font-family: Arial Black; font-size: 15px; font-style: italic; font-weight: 100; color: #B7202E; } h3.2 { font-family: Arial Black; font-size: 15px; font-style: normal; font-weight: 100; color: #B7202E; } .entrance{ text-align: center; font-family: Tahoma; font-size: 19px; padding: 20px 0px 20px 0px; text-align: center; } a.more{ float: right; font-size: 13px; font-weight: normal; color: #AFAEAE; } .describe{ font-family: Tahoma; font-size: 11px; text-align: left; padding-left: 25px; font-weight: bolder; } .rText{ padding-left: 15px; padding-right: 45px; width: 300px; font-family: Tahoma; font-size: 15px; font-weight: bolder; text-align: center; } #leftText{ font-family: Arial; font-size: 15px; font-style: italic; font-weight: bold; color: Black; } #logo { padding-top: 25px; } #logo2 { padding-top: 15px; padding-bottom: 10px; } #back{ margin-top: 45px; margin-left: 45px; position: absolute; font: 13px; color: #AFAEAE; font-weight: bold; } a{ color: #AFAEAE; font-weight: bold; }
-
guvatara, а как поступить в этой ситуации: когда документ становится достаточно большим и появляется полоса прокрутки, в Мозилле нижняя рамка при прокрутке остается где-то на середине документа, в ИЕ - в конце документа как и должна. И еще один вопрос - чего это таблица так себя ведет некрасиво (в Firefox разумеется)? http://www.fbf.ru/zlatopek/entrance.html
-
Значит воспользуюсь полностью вашим вариантом
-
Большое Вам СПАСИБО!!! ЗЫ: Для добавления рамки сверху и снизу без гифа высоту подкорректировала. .main{ height: 97%; ..... } Работает!!! ЗЫ2: Смотреть в Опере не буду - на сегодня хватит мозгонасилия
-
guvatara, благодарю! Подожду пока
-
Тем не менее ИЕ отображал как надо, а Мозилла - нет...
-
Отправила. Возможно там css немного подпортила, но в целом все как было
-
Убрала, но стало хуже. Т.к. этим я div притягивала к самому низу, не зависимо от того сколько контента в нем бы находилось. Этот же div (у него класс main) и должен обрамляться рамкой.
-
Именно этой штуковиной и была сделана рамка, но некорректно отображалась в Мозилле.
-
Мозилла 2.0.0.11 ИЕ 6 Ширина области с рамкой во весь экран. По размерам пикселей на 30. К сожалению, не разобралась как скриншот прикрепить. Могу выслать куда-нибудь.