Sedacove
-
Posts
24 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Sedacove
-
-
Всем привет! Надо было на сайт добавить модальное окно, но в виду того, что начал недавно изучать jQuery, возник вопрос.
Я взял уже готовое окно, пример кода:
<— jQuery —>
$(document).ready(function() {
//Когда вы нажмете на ссылку с классом poplight и HREF начинается с a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Получить Popup HREF и определить размер
//Запрос и Переменные от HREF URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Возвращает первое значение строки запроса
// Добавить кнопку "Закрыть" в наше окно, прописываете прямой путь к картинке
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="img/close.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//Определяет запас на выравнивание по центру (по вертикали по горизонтали)мы добавим 80px к высоте / ширине, значение полей вокруг содержимого (padding) и ширину границы устанавливаем в CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Устанавливает величину отступа на Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Постепенное исчезание слоя - .css({'filter' : 'alpha(opacity=80)'}) используется для фиксации в IE , фильтр для устранения бага тупого IE
return false;
});
<— —>
<— HTML —>
<div id="popup_name" class="popup_block">
</div>
<a href="#?w=500" rel="popup_name" class="poplight">Войти на сайт</a> (Эта ссылка вызывает окно)
<— —>
А теперь собственно вопрос:
Мне нужно сделать еще одно модальное окно, следовательно в HTML у дива нужно изменить класс. Например на:
<div id="window2" class="window2"></div>
И естественно, что ссылка тоже изменится.
Что нужно изменить в коде jQuery, и в классе ссылки чтобы работало?
-
настарткарьера.рф
-
Я ж говорю, я методом тыка проверял. убрал в классе .meni li a свойство display: block и скролл исчез.
-
Есть достаточно сложное горизонтальное меню
Вот css код:
.menu LI
{
float: left;
display: block;
position: absolute;
}
.menu LI A
{
display: block;
}
.menu LI A:hover
{
display: block;
text-indent: -9999px;
overflow: hidden;
/*+opacity:80%;*/
-moz-opacity: 0.8;
opacity: 0.8;
}
.li1
{
left: 80px;
top: 88px;
z-index:1;
}
.li1 A
{
width: 62px;
height: 63px;
background-image: url(img/onas.png);
background-position: 0px px;
}
При таком раскладе появляется горизонтальный скролл на странице. Но если из .menu LI A убрать display: block, то скролл пропадает.Но и элемент меню тоже Как быть?
-
rgba цвет
А по-подробней?
background: rgba(
0, // red
0, // green
0, // blue
0.5 // alpha opacity
);Только для CSS3 совместимых браузеров.
http://ru.wikipedia.org/wiki/%D0%90%D0%BB%D1%8C%D1%84%D0%B0-%D0%BA%D0%B0%D0%BD%D0%B0%D0%BB
Это просто отдельно от всего в CSS вставить? Странно, но у меня не работает...
-
rgba цвет
А по-подробней?
-
Есть такое прекрасное свойство в css называется «opacity» и оно задает прозрачность элемента. Но есть одна проблема. У меня есть блок <div> я ему задаю прозрачность и весь текст тоже становится прозрачным. А мне нужно, чтобы только бэкграунд стал прозрачным, а текст нет. Как такое сделать?
-
О, спасибо, со спаном все получилось!
-
В общем, как задать цвет подчеркивания для ссылки? Ссылки — пункты меню, которое выполнено, как горизонтальный список. Свойство задать нужно ТОЛЬКО(!) для 2 и 3 пункта меню (Каталог, Контакты)
Html:
<ul>
<li><a href="#" id="current">О компании</a></li>
<li><a href="#">Каталог</a></li>
<li><a href="#" style="width: 115px;">Контакты</a></li>
</ul>
CSS:
ul li a {
display:block;
float:left;
color: #666666;
width: 130px;
text-align:center;
padding:12px 32px 12px 32px;
height:25px;
font-family: ArialBold;
font-size: 16pt;
background-color: black;
}
ul li a:hover {
color:white;
}
ul li a#current {
text-align: center;
background-color:#dc261c;
width: 129px;
height: 24px;
Color: white;
text-decoration: none;
font-size: 14pt;
}
-
Добрый вечер! Имеется: 3 ссылки, над каждой ссылкой картинка. Что нужно сделать:
Допустим, первая ссылка «Деревянные дома» над ней картинка дома. Вторая ссылка «Бани» над ней картинка бани. и 3 ссылка «беседки» над ссылкой картинка беседки. Вот что теперь нужно сделать:
Когда мы находимся в разделе сайта «Бани», то, фон ссылки становится другим по отношению к тем двум ссылкам, а картинки над теми двумя ссылками становятся размытыми. Как с помощью css/html такое сделать — если нельзя, то скажите, как с помощью JS сделать. Пример прикладываю:
-
Вот недавно встретился с интересным приложением на Facebook'е. Называется «Static HTML: iframe tabs» Позволяет вставлять на страницу HTML код. Но дело в том, что туда можно залить код только главной страницы своего макета. А если, допустим, у меня макет состоит из 3,4,n страниц, где есть меню? Как сделать так, чтобы у меня была главная страница, опубликованная на ФейсБуке, а при нажатии на ссылку в меню на этой главной, открывалась другая страница макета в том же окне на ФБ? Или это возможно, если только залить все остальные страницы макета на хостинг?
-
вам необходимо просто сверстать или же у вас есть разметка, которую генерирует система и под нее надо уже сделать стили?
Нет, мне просто нужно сверстать точь в точь так, как на картинке, которую я скинул
-
Может быть вы меня не так поняли. Но результат должен быть, как на картинке:
https://lh6.googleusercontent.com/-65_pLitisng/TntqzFPqNuI/AAAAAAAAACA/72R5qZtyRNw/%25255Bp.png
-
Спасибо, помогло. Но все-такие не совсем то, что нужно.
<form>
Создать аккаунт Войти в ваш аккаунт: ваш e-mail:
<input style="float:right" type="text">
пароль
</input>
<input style="float:right" type="text">
выход
</input>
</form>
Теперь весь текст получился слева от форм. А мне нужно, чтобы «Пароль» был между формами, а «Выход» за ними, т.е. справа. Как код теперь исправить?
-
Хэй, ну что, никто не знает что-ли? Мне просто очень срочно это нужно.
-
Добрый вечер. Уже в который раз обращаюсь за вашей помощью. суть проблемы:
Есть див:
<div> Создать аккаунт войти в ваш аккаунт: ваш e-mail: <form> <input type="text"> </input> пароль <input type="text"> </input> выход </div>
Короче все это должно находится в одном диве в одну линию. Какое свойство нужно задать тегу <form> или <input> чтобы они не переходили на другую строку? И какое свойство нужно задать тексту, чтобы он выравнивался относительно середины высоты формы. А то получится, что текст будет чуть ниже формы.
Большое спасибо заранее!
-
Да можно, в принципе и на клик сделать...
Клик - http://www.cssplay.co.uk/menus/cssplay-click-click.html или http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html#url
Ховер с анимацией - http://www.cssplay.co.uk/menus/css3-slide-menu.html#url
В принципе, на том сайте множество примеров. Выбирайте наиболее подходящий и допиливайте под себя.
Спасибо большое!
-
В dropbox'е нужно в папку public бросать фото для того, что бы расшарить. Вашу картинку не видно. Да и не нужна она, т.к. CSS не умеет обрабатывать клики, по этому "нажимаешь на кнопочку — выезжает" не получится, только через :hover эффект (наведение курсора).
Хорошо, а как тогда через наведения курсора сделать?
-
Добрый день, дорогие форумчане. Получил вот недавно заказ на верстку простенького сайта. Но есть одно но. В нем должно быть выпадающее меню. Приложу картинку, чтобы было понятно: (https://dl-web.dropbox.com/get/Photos/%D0%BC%D0%B5%D0%BD%D1%8E.jpg?w=fb31becf) Т.е. нажимаешь на кнопочку — выезжает дополнительное меню. Нажимаешь еще раз — она убирается.
Все бы ничего, но я всегда думал, что такое делается с помощью JS. А заказчик настаивает, что можно сделать на CSS. К сожалению, раньше никогда не сталкивался с таким.
Подскажите, можно ли сделать это на CSS? Если да, то как?
-
Заметил вот такую штуку: Тег margin и пробел ( ) по разному отображается в хроме и опере. Допустим, у меня есть две картинки, которые стоят рядом с друг другом. Для 2ой я прописываю (margin-left: 15px) И вот это расстояние разное получается в браузерах. Как так? Или это верстка такая кривая?
-
И еще, подскажите, пожалуйста, как рамку сделать с закругленными углами? Как правильно бордер-радиус прописать?
Т.е. Мне нужно отдельно скруглить только верхние правый и левый углы. И отдельно нижние правый и левый.
-
Т.е. сделать таблицу из 5 строк и 5 столбцов. Причем 2 и 4 столбец сделать с рамкой на все 5 строк. Правильно?
-
Всем доброго времени суток! Возникла проблема при верстке. Пример: http://a.yfrog.com/img863/3923/ytrb.jpg
Не знаю, как правильно расположить элементы. Думал, что два элемента сделать блоками. Указать им рамку с бордер-радиусом, а сверху наложить белый див (Про покупку и регистрацию).
Тогда как расположить те элементы, что слева? Получается, мы на них слоем наложим блоки, верно? Их взять тоже в блок? Или как вообще лучше сделать, дайте совет, пожалуйста.
Заранее спасибо.
Проблемы с фоном на маленьких разрешениях
in HTML Coding
Posted · Edited by Sedacove
Всем привет. Собственно, вопрос:
Так получилось, что в шапке должна быть картинка шириной в 1800 пикселей, она не тянется и всегда стоит по центру. Весь контент сайта умещается в 960 пикселей, а вот в шапке и футере должен быть непоторяющийся фон в 1800.
Т.е. в любом случае приходится задавать:
#head{
width: 1800px;
}
Естественно, что при маленьком разрешении экрана появляется скролл, и сайт отображается не по центру. Так вот. Как сделать, чтобы фон масштабировался? Чтобы не было этого скролла, а фон как бы по бокам обрезался? И при любом разрешении сайт всегда был по центру.
В общем, нужно сделать как на: http://ofs21.ru/ сделана шапка. Смотрите в разных разрешениях.
Заранее спасибо!