Как привязать рисунок в Css чтоб он не плавал ?

bobot · Непрочитанное сообщение **bobot** » 2013-02-13 0:12:06

Вот код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>?????????? ????????</title>
<meta name="generator" content="">
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
}
</style>
</head>
<body>
<div id="wb_Shape1" style="margin:0;padding:0;position:absolute;left:21px;top:19px;width:1200px;height:511px;text-align:center;z-index:0;">
<img src="images/img0001.gif" id="Shape1" alt="" title="" style="border-width:0;width:1200px;height:511px"></div>
</body>
</html>

Это код обычной рамки !! И в завмсимости от размера монитора изображение плавает (смещается)

Как от этого избавиться ?

Хостинг HostFood.ru · **Хостинг HostFood.ru**

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

tom.cat · Непрочитанное сообщение **tom.cat** » 2013-02-13 16:01:19

Пример есть плавания/смещения?

bobot · Непрочитанное сообщение **bobot** » 2013-02-13 16:35:11

tom.cat писал(а):Пример есть плавания/смещения?

Вот код !!!

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>yura</title>
<meta name="generator" content="yurec">
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
</head>
<body>
<style>
body {

    background: url(images/img0001.gif) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }
  </style>


</body>
</html>

Этот код растягивает фоновый рисунок по размеру экрана (фоновый рисунок обычный квадрат)

ПОлучается что я квадрат растягиваю по размерам экрана, но получается буква "П " т.е. нижней границы нету

tom.cat · Непрочитанное сообщение **tom.cat** » 2013-02-14 8:17:36

Код: Выделить всё

background: url(images/img0001.gif) repeat top left;

Я так полагаю черный квадрат это img0001.gif?
=====================
Только не понимаю, зачем остальное в блоке body?

Код: Выделить всё

   -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */

tom.cat · Непрочитанное сообщение **tom.cat** » 2013-02-14 8:53:45

Пардон, я тебя неправильно понял. Вот решение, как раз рамки, фона рамки, стиля обрамления рамки)))

Код: Выделить всё

<!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>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
   .brd {
    border: 2px dotted red; /* Параметры границы */
    background: gray; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>

  <div class="brd">
Это код обычной рамки !! И в завмсимости от размера монитора изображение плавает (смещается) Как от этого избавиться ?
  </div>

 </body>
</html>

http://www.draac.com/htmltester.html можешь скопировать код и протестировать. Рамка никуда не уезжает, если растянуть на полный экран.

SviZ · Непрочитанное сообщение **SviZ** » 2013-03-16 20:04:50

Смотрите работу с CSS. У вас в HTML указан блок с центрированием текста и в этот блок вставлен IMG без float или position. По этому изображение просто центрируется. Уберите text-align: center или позиционируйте изображение явным способом.

forum.lissyara.su

Как привязать рисунок в Css чтоб он не плавал ?

Как привязать рисунок в Css чтоб он не плавал ?

Услуги хостинговой компании Host-Food.ru

Re: Как привязать рисунок в Css чтоб он не плавал ?

Re: Как привязать рисунок в Css чтоб он не плавал ?

Re: Как привязать рисунок в Css чтоб он не плавал ?

Re: Как привязать рисунок в Css чтоб он не плавал ?

Работа CSS