ksa, gods33 показываю фокус:
<style type="text/css">
td {position: fixed;}
td img {width: 100%; height: 100%;}
div {background: red; font: 35px/35px sens; margin: 0px auto; position: relative; text-align: center; width: 200px; height: 300px;}
</style>
<table>
<tr>
<td>
<img src="http://javascript.ru/forum/attachments/xhtml-html-css/592d1291988280-razreshenie-ehkrana-i-sootvetstvuyushhijj-emu-fonovyjj-risunok-img132b85a11a73x8e9868bc-jpg" alt="" />
</td>
</tr>
</table>
<div>text</div>
<style type="text/css">
td img {width: 100%; height: 100%;position: fixed;}
div {background: red; font: 35px/35px sens; margin: 0px auto; position: relative; text-align: center; width: 200px; height: 300px;}
</style>
<table>
<tr>
<td>
<img src="http://javascript.ru/forum/attachments/xhtml-html-css/592d1291988280-razreshenie-ehkrana-i-sootvetstvuyushhijj-emu-fonovyjj-risunok-img132b85a11a73x8e9868bc-jpg" alt="" />
</td>
</tr>
</table>
<div>text</div>
И тот и другой варианты подстраиваются под ширину экрана, только первый сохраняет пропорции (он и нужен), а второй растягивается на всю ширину относительно контейнера (теряет пропорции) |
Цитата:
Спасибо. :) |
Ребят, извините что морочил вам голову. Я тут просто посидел на досуге и прикинул: А нафига изобретать велосипед? Решил вобщем картинкой 3х3 пикселя заполнить область. Почитал форумы, статейки, посмотрел примеры... Но чего-то не получается. Вот мой... моё подобие на код :)
#top {
background-image: url('img/bg.gif');
background-repeat: repeat;
margin: 0;
height: 100px;
}
P.S. Я не быдлокодер, я только учусь... на него :D |
Вmonolithed,
Фокусы Internet Explorer не показывает ))) Вариант фона под любое разрешение ...
<!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">
p {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height: 50px;
width: 300px;
color: #FFFFFF;
font-size: 2em;
}
* html p {
position: absolute;
}
</style>
<script type="text/javascript">
var i = new Image,
b;
function get(a) {
var c = document,
d = c.body,
e = c.documentElement,
f = "client" + a;
a = "scroll" + a;
return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;
function fon() {
i.src = "http://imgs.su/tmp/1292024913.jpg";
i.style.position = "absolute";
i.style.left = "0px";
i.style.top = "0px";
i.style.width = get("Width") + "px";
i.style.height = get("Height") + "px";
i.style.zIndex = -999;
i.id="img"
document.body.appendChild(i)
}
window.onresize = function () {
var i = document.getElementById("img");
if(i) document.body.removeChild(i);
window.clearTimeout(b);
b = window.setTimeout(function () {
fon()
}, 20)
};
</script>
</head>
<body>
<p>Всякая всячина</p>
</body>
</html>
|
рони,
Спасибо огромное, это именно то, что нужно :) Все работает так как хотел |
monolithed, эх...
просто надо дизайн делать в расчете на то, что он в браузере будет отображаться... A Dao of Web Design |
рони, x-yuri вчера не было возможности проверить в IE: :)
<style type="text/css">
table {width: 100%; height: 100%; position: absolute;}
td img {width: 100%; height: 100%;}
#wrap {overflow: hidden;}
#main {background: green; font: 35px/35px sens; margin: 0px auto; overflow: hidden; position: relative; text-align: center; width: 200px; height: 300px;}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrap {text-align: center;}
</style>
<![endif]-->
<table>
<tr>
<td>
<img src="http://www.alfabank.ru/f/1/retail/cards/standart/classic/Simple2.jpg" alt="" />
</td>
</tr>
</table>
<div id="wrap">
<div id="main">text</div>
</div>
Плюс моего способа в том, что основной контейнер с текстовым содержимым расположен относительно, а не абсолютно! |
monolithed, я не про то. Я про то, что "придумали себе проблему и мужественно ее решаем" ;)
|
Достиг желаемого! Огромное спасибо всем, кто откликнулся и протянул свою руку помощи.
|
Цитата:
background: url('url_картинки');
|
ksa,
смотри. Вот код страницы
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/core.css">
</head>
<body>
<div id="left">
</div>
<div id="top">
<table style="margin: auto;">
<tr>
<th><h1>Ого!</h1></th>
</tr>
</table>
</div>
<div id="right">
<table align="right">
</table>
</div>
</body>
а вот код css
div#top {
background-image: url(img/bg.gif);
background-repeat: repeat;
margin: 0;
height: 100px;
}
но не пашет. Работает только если css непосредственно в страницу "вшить" но это как-то не красиво.. :) |
Цитата:
<telepath-mode>в css нужно указывать пути относительно css файла</telepath-mode> |
x-yuri,
когда я говорил "вшить", я имел ввиду вот это
<html>
<head>
<title></title>
<style type="text/css">
div#top {
background-image: url(img/bg.gif);
background-repeat: repeat;
margin: 0;
height: 100px;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="top">
<table style="margin: auto;">
<tr>
<th>
<h1>Ого!</h1>
</th>
</tr>
</table>
</div>
<div id="right">
</div>
</body>
</html>
то тогда все работает как надо. А по поводу пути относительно css файла. По подробнее можно? То есть если я там указываю файл картинки, то должен писать типа background-image: url(../img/bg.gif);? |
x-yuri,
спасибо, telepath-mode сработал так как надо ;) все заработало. Появилась еще одна проблема, но это уже другая тема. |
| Часовой пояс GMT +3, время: 04:52. |