Форум Flasher.ru - Резиновый background

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - Резиновый background (http://www.flasher.ru/forum/showthread.php?t=74838)

CAM	30.01.2006 02:11

Резиновый background

ets' idei?

backgrond doljen rastyagivatsa v zavisimosti ot vlojenogo img-a
pol dnya potratil nenasel varianta :(

sorry za lat ne iz doma :)

deathstorm

30.01.2006 10:08

знаешь как сделать позитион фиксед для эксплорера
то есть это будет див с прокруткой и абсолютным позиционированием где будет весь текст страницы
позади этого дива ставишь рисунок с высотой и шириной экрана и тоже абсолютным позиционированием

see here
<html>
<style>
body{margin:0;overflow:auto}
#body{position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:auto}
#fixPos{position:absolute;top:10px;left:10px;width:500px;height:50px;border:black solid 1px;background-color:gray}
#fixBG{position:absolute;0px;left:0px;width:100%;height:100%;overflow:auto}
</style>
<body>
<img src=1.gif id=fixBG>
<div id=body>
qwee<br>qwee.....<br>qwee<br>qwee<br>qwee<br>
</div>
<div id=fixPos></div>
</body>
</html>

CAM	30.01.2006 12:22

thx man но через absolute position я пробывал :) лажа
background c absolute position не видит вписанный в него имж,
а должен тянуться или сжиматься в зависимости от размера имжа

помоему ето тупик :confused:

Код:

<div style="width:???; position:relative; margin:0 auto;">

        <img src="image/freebgimg.gif" width="1" height="1" alt="freenight"

        style="width: 100%; height: 166px; position: absolute; top: 0; left: 0;" />

        <div style="position: relative; margin:0; padding:8px 0 0  2px;">

             <a href="#"><img src="image/mother.gif"/></a>

        </div>

</div>

CAM	30.01.2006 12:29

высота fixed 150px
width варирует +- 5px

deathstorm

30.01.2006 12:41

упс, извини голова болит, понедельник все-таки, могу тупить :)
расскажи-ка мне идею и желаемую реализацию твоего полета мысли
а то смотрю на сорц и не фига не понимаю
зачем 2 картинки, а дива вкладенный/вложенный зачем?

CAM	30.01.2006 18:39

Вложений: 1

это bg

"я хмеля люди в курсе.." :D

размеры imga(mother.gif) ты знаеш (height:150px/width~100-110px резиновый)

вот и весь полет мысли Ж)

KidsKilla

30.01.2006 19:10

по русски можешь объяснить?
картинку того что нужно покажи...

я так понимаю нужна картинка по центру и какой-то фон вокруг. так?

поможет:
IMG{border:3px solid red;}
? =))

CAM	31.01.2006 02:28

Вложений: 2

аха пошутил :) border

bg с тенью, border не поможет

ну вот пример imgs вставленых в background

че скажеш?

CAM	31.01.2006 02:30

table не предлогать
извините ;)

KidsKilla

31.01.2006 14:39

но картинка-то по центру?

CAM	31.01.2006 14:49

картинка по центру.

и в чём идея?

KidsKilla

31.01.2006 15:21

дада, я знаю, что я гений, но у меня вроде как вышло
до сих пор сам не верил =)))

работает в:
FF 1.5
opera 8.5
IE 6.0
IE5.5
IE 5.01 -- не пашет.

Код:



<div style="width:100%;text-align:center; border:1px solid red;">

<span style="margin:auto; display:inline-block;">

<div style="background:green; padding:1em;display:table-cell;">

<div style="width:100px;height:100px; display:block;background:lightblue;  /* на самом деле этот див в роли картинки. */"></div>

</div>

</span>

</div>

или скриптами =)))

CAM	31.01.2006 17:06

krut'ko :)

когда img width:105px пашет
а так нет :(

sorry man

Код HTML:

<div style="width:100%;text-align:center; border:0 solid red;">

                <span style="margin:auto; display:inline-block;">

                <div style="background:url(image/freebgimg.gif); padding:.5em; display:table-cell;">

                <img src="image/film.gif" style="display:block; width:105px; height:150px; background:lightblue;"> 

                </div>

                </span>

        </div>

KidsKilla

31.01.2006 18:00

чевота ты попутал, бро.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

        <title>Untitled</title>

<style>

#wrapper{text-align:center;}

#aligner{margin:auto;display:inline-block;}

#pad{display:table-cell;}

#container{display:block;}

/**** VISUAL ***/

#wrapper{border:1px solid red;}

#aligner{}

#pad{background:green;padding:1em;}

#container{background:lightblue;text-align:left;}



</style>

</head>

<body>

<div id="wrapper"><span id="aligner"><div id="pad"><div id="container">



<div style="float:left;width:30px;height:30px;background:red;"></div>

Interpreter<br>

A minimal JavaScript interactive interpreter <br>

showing off some MochiKit.DOM functionality. <br>

Play with MochiKit right in your browser!

<br style="clear:both;">



</div></div></span></div>



</body>

</html>

CAM	31.01.2006 18:55

...#pad{background:url(image/freebgimg.gif);padding:1em;}...

...<div style="float:left;width:30px;height:30px;background:red;"><img src="image/vasya.gif">
</div>Interpreter<br>...

?? че-то попутал Ж) ??

Часовой пояс GMT +4, время: 23:28.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.