Нестандарное применение HTML страниц

Pyr0

Человек форума

Вне Форума

Freeze People

Сообщений: 1172

Пол: male

Нестандарное применение HTML страниц
07.03.2011 :: 23:45:04

После основного компа с вин7 мне на ХР на ноутбуке стало нехватать наэкранных виджетов. вот мое решение
в качестве фоновой картинки можно поставить HTML страницу, на которой можно расположить все необходимое, и сделать обои-фон.
пример выложу завтра
И сразу вопрос: Как сделать чтобы Background растягивался(strech) по размеру экрана. все способы подразумевают использование CSS шаблонов.
а как это реализовать вот так в одном файле без пхп в ХТМЛ?

Наверх

IP записан

Ramzies

Администратор

Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male

Re: Нестандарное применение HTML страниц
Ответ #1 - 10.04.2011 :: 20:51:56

Сегодня Pyr0, прислал по skype html пример:

Код:

<html>
<body>
<body background="desk1b.jpg" width="1024" height="768" >
<embed src="http://station20.ru/widget-01.swf" wmode="transparent" width="260" height="430" align="right"></embed>
</body>
</html>

Тебе следует заменить эту строчку: Код:

<body background="desk1b.jpg" width="1024" height="768" >

На вот такую: Код:

<body>
<style>
body {background:#FFF url(desk1b.jpg) repeat scroll left top;}
html,body{margin:0;padding:0;}
</style>

Подробней об этой строчке:
body {background:#FFF url(desk1b.jpg) repeat scroll left top;}
#FF -цвет фона.
repeat - обозначает что мы хотим дублировать картинку, если она меньше рабочего стола. Если нам это не нужно пишем no-repeat

left - говорит о начале показа картинки с левого края, можно использовать center и right
top - говорит о начале показа картинки с верхнего края, насколько я помню можно использовать center и buttom.
Вместо этих left, top можно писать расстояния в точках 20px 50px и так далее.

html,body{margin:0;padding:0;}
Убирает отступы с верхних краев.

Наверх

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума! Вы нуждаетесь в

или

!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...

IP записан

Pyr0

Человек форума

Вне Форума

Freeze People

Сообщений: 1172

Пол: male

Re: Нестандарное применение HTML страниц
Ответ #2 - 10.04.2011 :: 20:56:00

Шило на мыло, у меня картинка немного другого размера и соотношения сторон чем экран, как заставить фон картинки быть по размеру экрана, а то что он поторяет картинку так он изначально так делает.

Наверх

IP записан

Ramzies

Администратор

Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male

Re: Нестандарное применение HTML страниц
Ответ #3 - 10.04.2011 :: 21:43:29

Цитата:

как заставить фон картинки быть по размеру экрана

Ты хочешь растянуть фоновую картинку? По сути css таких возможностей не дает. Ты можешь только дублировать картинку. Но если очень нужно то нужно извращаться через img в котором указывать насколько растянуть ее. Для твоей задачи это вполне должно быть рабочем решением. Но такой пример в сайтостроение я бы не советовал использовать, его не будут поддерживать некоторые браузеры.

Я не тестировал, но должно работать, пробуй Код:

<html>
<body>
<style>
#body{left:0;top:0;position:absolute;}
</style>
<img src="tumblr_l5hzwt1eS71qz8h1t.png"  width="1024" height="768" alt="Angry face" />
<div id="body">

texr
<embed src="http://station20.ru/widget-01.swf" wmode="transparent" width="260" height="430" align="right"></embed>
text

</div>
</body>
</html>

Что касается авто растягивания, здесь нужно JavaScript применять. Вот так:

Попробуй, так же не тестировал Код:

<html>
<body>
<style>
#body{left:0;top:0;position:absolute;}
</style>
<script>
document.write('<img src="tumblr_l5hzwt1eS71qz8h1t.png"  width="'+window.screen.width+'" height="'+window.screen.height+'" alt="" />');
</script>

<div id="body">

texr
<embed src="http://station20.ru/widget-01.swf" wmode="transparent" width="260" height="430" align="right"></embed>
text

</div>
</body>
</html>

Наверх

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума! Вы нуждаетесь в

или

!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...

IP записан

Pyr0 Человек форума Вне Форума Freeze People Сообщений: 1172 Пол:	Re: Нестандарное применение HTML страниц Ответ #4 - 10.04.2011 :: 22:23:00 да, но есть непонятная рамка вокруг картинки,из-за которой она целиком не лезет. а так все да, как надо. а еще где цвет фона тут указан?
Наверх	IP записан

Ramzies Администратор Вне Форума Все что случается имеет причину. Сообщений: 2632 Даугавпилс, Валмиера. Пол:	Re: Нестандарное применение HTML страниц Ответ #5 - 10.04.2011 :: 22:26:23 Код: <style> #body{left:0;top:0;position:absolute;} </style> Замени на: Код: <style> #body{left:0;top:0;position:absolute;} body {background-color:#FFF;} html,body{margin:0;padding:0;} </style> #FFF - цвет фона.
Наверх	Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума! Вы нуждаетесь в или !! Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь... IP записан

Pyr0 Человек форума Вне Форума Freeze People Сообщений: 1172 Пол:	Re: Нестандарное применение HTML страниц Ответ #6 - 11.04.2011 :: 06:58:44 Попробуем А у прозрачного какой номер?
Наверх	« Последняя редакция: 11.04.2011 :: 09:44:26 от Pyr0 » IP записан

Ramzies

Администратор

Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male

Re: Нестандарное применение HTML страниц
Ответ #7 - 11.04.2011 :: 13:59:39

Pyr0 писал(а) 11.04.2011 :: 06:58:44:

А у прозрачного какой номер?

Не совсем понял о чем ты

т.к. фон body по сути не может быть прозрачным. Ну попробуй заменить это:
Код:

body {background-color:#FFF;}

На это Код:

body {background-color:transparent;}

Наверх

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума! Вы нуждаетесь в

или

!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...

IP записан

Pyr0

Человек форума

Вне Форума

Freeze People

Сообщений: 1172

Пол: male

Re: Нестандарное применение HTML страниц
Ответ #8 - 11.04.2011 :: 17:14:48

Так, маленький пункт.
Как прописать путь к картинке если она не лежеит в общем корне с папкой? простой ввод адреса на винте результатов не дал желаемых. все

Наверх

IP записан

Ramzies

Администратор

Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male

Re: Нестандарное применение HTML страниц
Ответ #9 - 11.04.2011 :: 17:45:22

Pyr0 писал(а) 11.04.2011 :: 17:14:48:

Так, маленький пункт.
Как прописать путь к картинке если она не лежеит в общем корне с папкой? простой ввод адреса на винте результатов не дал желаемых. все

Открой браузер, Firefox или Opera. Далее возьми картинку которую хочешь подгрузить и перетащи ее в строку адреса в браузере. Далее нажми Enter, после он ее должен немного переконвертировать и вставь этот адрес в свой html.

Если не получится, выложи сюда отрывок своего html кода. Я посмотрю как ты подгружаешь ее.

Наверх

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума! Вы нуждаетесь в

или

!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...

IP записан