Eirene
-
Posts
29 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Eirene
-
-
Вариант, конечно, но не очень удобный.
-
Задача:
Есть логотип, часть его (дерево в кружочке) должно вести по ссылке, напр.на Главную,
при клике на остальную же часть нужно чтобы появлялось верхнее окошко.
Пока дошла до того, что внутри ссылки сделала область конкретно для дерева в круге:
<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, а потом мышкой прокрутим вверх - то меню встанет на место. Если после этого начать скроллить вниз - то меню зависнет уже на своей позиции и не будет подтягиваться вверх как нужно.
Где-то ошибка в логике, сломала голову уже
-
Я так думаю шрифт не поддерживал русский язык. Сгенерировал скрипт с русским шрифтом и все ок.
Вот мануал + видео как организовать вывод нестандартных шрифтов на сайте.
P.S. Обнаружил, что не все русские шрифты работают с cufon
Не знаете, с шрифтом Franklin Gothic BookC работает?
Все пытаюсь его прикрутить, никак не получается (((
http://14.asmedius.z8.ru/irina/jobber/
в исх.коде видно <p class="title">С нами работают</p> должен быть преобразован, но в браузере этот текст вообще не отображается.
-
а листаются, как я поняла, и первая и вторая строка?
Да, одновременно должны сразу обе строчки прокручиваться.
Спасибо
-
-
попробуй margin использовать к таблице или блоку
А как узнать какое значение ставить в 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 разумеется)?
-
просто при уменьшении окна может появляться полоса прокрутки. Так что мой вариант работает стабильнее для всех броузеров.
Значит воспользуюсь полностью вашим вариантом
-
думаю это наиболее простой выход из этой ситуации чтоб не использовать всякие хаки.
Большое Вам СПАСИБО!!!
ЗЫ: Для добавления рамки сверху и снизу без гифа высоту подкорректировала.
.main{
height: 97%;
.....
}
Работает!!!
ЗЫ2: Смотреть в Опере не буду - на сегодня хватит мозгонасилия
-
guvatara, благодарю!
Подожду пока
-
position: fixed; зато IE 6 не понимает этого.
Тем не менее ИЕ отображал как надо, а Мозилла - нет...
-
Отправила. Возможно там css немного подпортила, но в целом все как было
-
уберите это и станет лучше.
Убрала, но стало хуже. Т.к. этим я div притягивала к самому низу, не зависимо от того сколько контента в нем бы находилось. Этот же div (у него класс main) и должен обрамляться рамкой.
-
зачем вот это?
.main{
height: 100%;
border: 10px #D0D0D0;
border-style: solid;
[b]position: fixed;
bottom: 0px;
top: 0px;[/b]
}Именно этой штуковиной и была сделана рамка, но некорректно отображалась в Мозилле.
-
Мозилла 2.0.0.11
ИЕ 6
Ширина области с рамкой во весь экран. По размерам пикселей на 30.
К сожалению, не разобралась как скриншот прикрепить. Могу выслать куда-нибудь.
Разные кликабельные области у логотипа
in JavaScript
Posted
Надо менять верстку ((
В дальнейшем мне таким же образом нужно будет исключить область верхнего меню и поиска, но оставить всю остальную серо-зеленую область кликабельной.
Думала может как-то на jQuery можно сделать эти исключения.