Как это сделано?

188

loed

17 ноября 2009, 09:58

1661

Как сделана такая штука (боковая вертикальная вкладка с сылкой) , где об этом почитать? Максимум что нашел - это вертикальный текст в диве при помощи CSS.

6

yougene

17 ноября 2009, 10:16

#1

похоже, что это просто изображение, у которого задана позиция fixed и отступы по краям

waiting gor the day that never comes

194

BrokenBrake

17 ноября 2009, 10:23

#2

yougene:
похоже, что это просто изображение, у которого задана позиция fixed и отступы по краям

Скорей всего так, код не смотрел.

loed, а что вам даст понимание того, как сделано, если вы не знаете CSS?

А если бы знали, вопрос бы не появился.

118

Елена Бурдюгова

17 ноября 2009, 10:33

#3

function scroll_logo_down() { for (i = 1; i <= 10; i++) setTimeout("document.getElementById('l_img').innerHTML = '<div class=baner_"+i+"><img src=/images/px.gif alt= width=308 height=218 border=0></div>';", (i+1)*delay); }
function scroll_logo_up() { for (i = 10; i >= 1; i--) setTimeout("document.getElementById('l_img').innerHTML = '<div class=baner_"+i+"><img src=/images/px.gif alt= width=308 height=218 border=0></div>';", (9-i+1)*delay); }

Вот кусочек кода, если не ошибаюсь

194

BrokenBrake

17 ноября 2009, 10:34

#4

О, боже! Страх какой. Если это на самом деле сделано так - не нужно подражать.

188

loed

17 ноября 2009, 10:53

#5

BrokenBrake:
О, боже! Страх какой. Если это на самом деле сделано так - не нужно подражать.

Да нет, просто понравилась сама идея, а вот как реализовать попроще не соображу. Так в коде ковырялся, вроде там как то на яваскрипте что то.

78

Кофейник

17 ноября 2009, 11:08

#6

Да что там делать то? :)

<a href="" style="position:fixed;right:0;top:300px;"><img src="" alt=""></a>

Разберётесь или пример сделать?

Кофейник добавил 17.11.2009 в 14:10

Никакого яваскрипта это реализуется на чистом CSS. ;)

Кофейник добавил 17.11.2009 в 14:16


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
<style type="text/css">
.tab{background:#424242;
height:130px;
width:30px;

position:fixed;
right:0;
top:300px;
}
</style>
</head>
<body>
<div class="tab"></div>
</body>
</html>

Вот код, в блок и пихай этот таб.

В IE6 не работает сейчас костыль сделаю.

Вот почитай: http://htmlbook.ru/css/position.html

Кофейник добавил 17.11.2009 в 14:21

Вот эта штука и в IE6 пашет. Блок с классом tab оставляешь в начале страницы, в .contaner загоняешь всю страницу. ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
<style type="text/css">
html{width:100%; height:100%;
overflow:hidden;}

body{width:100%; height:100%;
margin:0; padding:0;
overflow:auto;}

.tab{background:#424242;
height:130px;
width:30px;

position:absolute;
right:15px;
top:300px;
}
</style>
</head>
<body>


<div class="tab"></div>

<div class="contaner">
</div>

</body>
</html>

Кофейник добавил 17.11.2009 в 14:23

loed:
где об этом почитать?

Вот отличная макулатура по этому делу, поможет.

http://softwaremaniacs.org/blog/category/web/primer/

И конкретнее: http://softwaremaniacs.org/blog/2005/08/03/css-layout-positioning/

http://immater1um.livejournal.com/ (http://immater1um.livejournal.com/)

188

loed

17 ноября 2009, 11:53

#7

Кофейник! Спасибо, сейчас попытаюсь.

F4

31

FILA44

17 ноября 2009, 13:32

#8

Если на jquery, то вот грубый код

Сам баннер

</div>

Код js

$(document).ready(function(){

$("#bantest").css("top", parseInt( document.documentElement.scrollTop+document.documentElement.clientHeight/2-parseInt($("#bantest").css("height"))/2, 10) + "px");

$(window).scroll(function () {

$("#bantest").css("top", parseInt( document.documentElement.scrollTop+document.documentElement.clientHeight/2-parseInt($("#bantest").css("height"))/2, 10) + "px");

});

Товарищи программеры, не надо только быковать) сам я не кодер...

225

ewg777

17 ноября 2009, 13:38

#9

$(document).ready(function(){
$("#bantest").css("top", parseInt( document.documentElement.scrollTop+document.documentElement.clientHeight/2-parseInt($("#bantest").css("height"))/2, 10) + "px");
$(window).scroll(function () {
$("#bantest").css("top", parseInt( document.documentElement.scrollTop+document.documentElement.clientHeight/2-parseInt($("#bantest").css("height"))/2, 10) + "px");
});

Товарищи программеры, не надо только быковать) сам я не кодер...

А что тут быковать? Не работает и всё.

78

Кофейник

17 ноября 2009, 15:15

#10

И зачем тут jQ?

Как там ТС, разобрался? :)

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы

Open AI тестирует память для ChatGPT