|
Как сделать ... ? Вопросы только по операторам юКоз (uCoz)
|
|
|
2013-11-08Дата: Пятница, 08.11.2013, 19:54 | Сообщение # 76 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
yanat, Здравствуйте, помогите плиз...
Есть картинка на сайте, размещённая с помощью css. Как сделать из неё ссылку?
Добрый)
Чуть-чуть не так, но мысли верные ) - вот так:
Код #overlay{
background:#04173F url(http://failblog.at.ua/reklama/huffson.jpg) no-repeat 50% 100%;
display:block;
width:100%;
height:500px;
}
Код <a id="overlay" href="http://google.com/"> </a>
И необходимо обязательно задать высоту.
| | |
|
|
2013-11-08Дата: Пятница, 08.11.2013, 23:07 | Сообщение # 77 |
Сержант
Группа: Проверенные
Статус: Offline
|
Да ссылка заработала, но картинка взлетела в верх.
ВОТ
А нужно чтоб было так, а как её опустить в нужное место, что то не получается...
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 03:56 | Сообщение # 78 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
yanat, Да ссылка заработала, но картинка взлетела в верх.
ВОТ
А нужно чтоб было так, а как её опустить в нужное место, что то не получается...
Сделать ее фоном для того где должна быть.
Либо - position:absolute; - координаты, и z-index:-1; - что бы не висела на переднем плане.
Лучше первое.
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 12:32 | Сообщение # 79 |
Сержант
Группа: Проверенные
Статус: Offline
|
Либо - position:absolute; - координаты, и z-index:-1; - что бы не висела на переднем плане.
Вот сделала как вы и сказали, но действие ссылки пропало
Код
#overlay{
background:#04173F url(http://failblog.at.ua/reklama/huffson.jpg) no-repeat 50% 100%;
display:block;
position:absolute;
z-index:-1;
width:100%;
height:595px;
}
Сделать ее фоном для того где должна быть.
Честно говоря, не совсем поняла...
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 16:58 | Сообщение # 80 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
yanat, Вот сделала как вы и сказали, но действие ссылки пропало
Ну, тут надо выбирать - либо картинка кликабельная, но висит на переднем плане, либо не кликабельная, но ничему не мешает.
Я что-то не очень что именно вы хотите? Вы хотите что бы по клику по любому месту вы переходили по ссылке?
А по любому - потому что, судя по скриншотам, у вас эта картинка вроде всего сайта.. ну во всяком случае больше половины экрана..
Если картинка будет кликабельная - вы не сможете кликнуть ни на что другое кроме как на нее ..
Если вас это устроит, то вот так:
Код #overlay{
background:#04173F url(http://failblog.at.ua/reklama/huffson.jpg) no-repeat 50% 100%;
display:block;
position:absolute;
z-index:999;
width:100%;
height:595px;
}
..и она будет загораживать собой все что за ней - ибо она выше по слою.
Если сместить ниже по порядку слоев, то она будет НЕ кликабельной, зато не будет мешать.
Тут либо одно, либо другое.
А по большому счету, я не понимаю зачем это вообще нужно? Это что, типа рекламы? накрутки ссылок или для чего это?
..вы хоть объясните толком..
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 19:21 | Сообщение # 81 |
Сержант
Группа: Проверенные
Статус: Offline
|
Это картинка реклама, называется брендирование сайта.
Получила заказ на рекламу, а установить не выходит. Сроки поджимают.
Кликабельной должна быть лишь картинка, пример вы видели. Живой пример на тестовом сайте тут
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 19:30 | Сообщение # 82 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
yanat,
Кликабельной должна быть лишь картинка, пример вы видели. Живой пример на тестовом сайте тут
- это там где черное должна быть картинка?
..
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 19:46 | Сообщение # 83 |
Сержант
Группа: Проверенные
Статус: Offline
|
Да
-------------------
Я только что открывала на IE, так там ссылка работает, а на остальных браузерах нет, странно...
Сообщение отредактировал yanat - Суббота, 09.11.2013, 19:48 | | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 20:18 | Сообщение # 84 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
А нужно чтоб было так, а как её опустить в нужное место, что то не получается...
Так просто не получится..
Вам нужно обернуть первый блок wrapper в другой блок, с ретив позиционированием, и в него вложить ссылку, или саму картинку в ссылке..
Сложно объяснить на пальцах..
Короче, находите первый блок:
Код <div class="wrapper"> <div id="casing">
и заменяете это на вот это:
Код <!--Start:wrapperBg--> <div id="wrapperBg"> <div class="wrapper"> <div id="casing">
И самое главное !!! находите где он закрывается, а закрывается он сразу перед вторым таким же блоком, и заменяете:
на
Код </div> <a id="overlay" href="http://likbezz.ru/forum/69-389-29321-16-1383937669"></a> </div> <!--//End:wrapperBg-->
Ну и стили:
Код #wrapperBg{
position:relative;
}
#wrapperBg div.wrapper{
position:relative;
z-index:2;
}
#overlay{
background:#04173F url(http://failblog.at.ua/reklama/huffson.jpg) no-repeat top center;
width:100%;
height:595px;
position:absolute;
left:0;
top:-170px;
z-index:1;
cursor:pointer;
}
Типа: http://likbezz.ru/_example/sites/_rest/p1/untitled_v2.html
..
Вариант с картинкой - вместо пустой ссылки - ссылка с картинкой - разница есть - картинка масштабируется.
Код <a id="overlay" href="http://likbezz.ru/forum/69-389-29321-16-1383937669"><img src="http://failblog.at.ua/reklama/huffson.jpg" alt=""></a>
И стили чуть-чуть другие:
Код #wrapperBg{
position:relative;
}
#wrapperBg div.wrapper{
position:relative;
z-index:2;
}
#overlay{
width:100%;
position:absolute;
left:0;
top:-170px;
z-index:1;
cursor:pointer;
}
#overlay img{
position:relative;
width:100%;
height:auto;
}
Типа: http://likbezz.ru/_example/sites/_rest/p1/untitled_v1.html
..
Как-то так
- То бишь, картинку делаем выше боди по индексу - z-index:1; , а блок контента выше картинки - z-index:2; ..
постарайтесь вникнуть в смысл, когда вкурите - поймете что все не оч сложно.
..
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 20:35 | Сообщение # 85 |
Сержант
Группа: Проверенные
Статус: Offline
|
Что то оно одно на другое понаехало...
Вот в HTML вставила
Код <body> $ADMIN_BAR$ <a id="overlay" href="http://google.com/"> </a> $GLOBAL_AHEADER$ <!--Start:wrapperBg--> <div id="wrapperBg"> <div class="wrapper"> <div id="casing"> <div id="cas-s"<?if($MODULE_ID$='forum')?> class="forum-cas"<?endif?>> <!-- <middle> --> <section> <div id="content"> $GLOBAL_SLIDER$ <!-- <body> -->$CONTENT$<!-- </body> --> </div> <a id="overlay" href="http://likbezz.ru/forum/69-389-29321-16-1383937669"></a> </div> <!--//End:wrapperBg--> </section> <aside> <div id="sidebar"> $GLOBAL_CLEFTER$ </div> </aside> <!-- </middle> --> <div class="clr"></div> </div> </div> </div>
А вот в CSS
Код
body {margin:0;padding:0;background:#e6e2e3;font-family:Georgia, "Times New Roman", Times, serif;color:#6b6161;font-size:13px;}
img,form {border:0;margin:0;}
a,input {outline:none;}
a {text-decoration:underline;}
a:hover {text-decoration:none;}
h1,h2, h3, h4, h5, h6 {font-weight:normal;margin:5px 0;padding:0;}
h1 {font-size:26px;}
h2 {font-size:21px;}
h3 {font-size:19px;}
h4 {font-size:17px;}
h5 {font-size:15px;}
h6 {font-size:13px;}
ul {list-style:square;}
hr {border:none;border-top:1px dashed #c6c6c6;}
.clr {clear:both;}
.wrapper {width:980px;margin:0 auto;}
#wrapperBg{
position:relative;
}
#wrapperBg div.wrapper{
position:relative;
z-index:2;
}
#overlay{
background:#04173F url(http://failblog.at.ua/reklama/huffson.jpg) no-repeat top center;
width:100%;
height:595px;
position:absolute;
left:0;
top:-170px;
z-index:1;
cursor:pointer;
}
#header {height:65px;margin:0 0 170px 0;}
.site-names {float:left;}
.site-n {font-size:32px;text-align:left;display:block;}
.site-n a {text-decoration:none;color:#fff;}
.site-d {text-align:right;font-style:italic;font-size:10px;display:block;position:relative;padding:0 4px 0 0;margin:-3px 0 0 0;}
#catmenu {height:36px;padding:9px 0 0 50px;float:left;}
Что я не так сделала ???
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 20:38 | Сообщение # 86 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
yanat, .wrapper {width:980px;margin:0 auto;}
- потеряли.
Просто добавить, а не заменить.
где вот это:
Код .wrapper {width:980px;margin:0 auto;}
в ваших стилях?
Вы пост читали?
Куда нужно вставить рекламную ссылку?
- После закрывающего wrapper
дайте шаблон главной, целиком.
и в самом верху удалите прошлый код:
Код <a id="overlay" href="http://google.com/"> </a>
- он не нужен уже.
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 20:50 | Сообщение # 87 |
Сержант
Группа: Проверенные
Статус: Offline
|
Ну уже что то  , но меню пропало под картинкой... уффф..
Всё исправила top:-170px; на top:70px;
Вам памятник нужно поставить пожизненный, за терпение ко мне 
Спасибо !!!
Сообщение отредактировал yanat - Суббота, 09.11.2013, 20:55 | | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 20:51 | Сообщение # 88 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
yanat, Ну уже что то cry , но меню пропало под картинкой... уффф..
и в самом верху удалите прошлый код:
Код <a id="overlay" href="http://google.com/"> </a>
- он не нужен уже.
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 20:55 | Сообщение # 89 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
..кашмар..
лишний закрывающий удалите:
Цитата Code </div> <a id="overlay" href="http://likbezz.ru/forum/69-389-29321-16-1383937669"></a>
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 20:57 | Сообщение # 90 |
Сержант
Группа: Проверенные
Статус: Offline
|
<a id="overlay" href="http://google.com/"> </a>
Забыла про него, растяпа...
| | |
|
