VPF::текст над фоновым рисунком. - Форум программистов

svip

Дата 27.1.2008, 22:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 27.3.2007

Репутация: нет
Всего: нет

Проблема в том что есть несколько фоновых рисунков. один под другим. и нужно над ними разместить текст. но текст то ли вылажить по краям, то при сужении окна - вылазит вниз. Как сделать чтобы он был в контейнере с фоновой заливкой??
Вот то что я сделал

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Cache-Control" content="no-cache">
<title></title>

<STYLE type="text/css">
body {
margin:0 0 0 0;
}
.all{
height:100%;
}
</STYLE>
</head>
<body bgcolor="#e3e3e3">
<table border="1" cellspacing="0" cellpadding="0" align="center" class="all" id="container">
  <tr height="100%">
    <td width="17" style="background-image: url('images/bkg_left.jpg'); background-repeat:repeat-y"></td>
    <td>
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr><td align="center" width="905" height="138" style="background-image: url('images/bkg1.jpg'); background-repeat:no-repeat;"></td></tr>
      </table>
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr valign="top">
          <td align="left" width="905" height="212" style="background-image: url('images/bkg2.jpg'); background-repeat:no-repeat;"></td>
        </tr>
        <tr valign="top">
          <td align="left" width="905" height="100%" style="background-color:#f2e9d0;"></td>
        </tr>
        <tr valign="middle">
          <td align="left" width="905" height="401" style="background-image: url('images/bkg3.jpg'); background-repeat:no-repeat;"></td>
        </tr>
        <tr valign="top">
          <td align="left" width="905" height="100%" style="background-color:#f2e9d0;"></td>
        </tr>
      </table>
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr valign="middle">
          <td align="left" width="905" height="381" style="background-image: url('images/bkg4.jpg'); background-repeat:no-repeat;"></td>
        </tr>
      </table>
    </td>
    <td width="17" style="background-image: url('images/bkg_right.jpg'); background-repeat:repeat-y;"></td>
  </tr>
</table>

<div style="position:absolute; top:200px; left:5px; width:905; height:100%;z-index:1;">
              <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
                <tr valign="top">
                  <td width="250">меню1 меню1 меню1 меню1 меню1 меню1 меню1 меню1 меню1 меню1 меню1 меню1 </td>
                  <td width="*">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </td>
                  <td width="200">меню2 меню2 меню2 меню2 меню2 меню2 меню2 меню2 меню2 меню2 меню2 меню2 </td>
                </tr>
              </table>
            </div>

</body>
</html>

и то что получается

Присоединённый файл ( Кол-во скачиваний: 15 )

1.gif 109,45 Kb

svip

Дата 27.1.2008, 22:57 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 27.3.2007

Репутация: нет
Всего: нет

и вот при длинном тексте

Присоединённый файл ( Кол-во скачиваний: 10 )

2.gif 106,63 Kb

smartov

Дата 29.1.2008, 00:46 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

svip, текст всегда поверх backgorund - почему бы не поместить его просто в таблицу?

svip

Дата 29.1.2008, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 27.3.2007

Репутация: нет
Всего: нет

потому что два разных backgorund один под другим. и нужно чтобы текст был поверх обоих
нужно чтобы текст был над вот этой таблицей

Код


<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr valign="top">
          <td align="left" width="905" height="212" style="background-image: url('images/bkg2.jpg'); background-repeat:no-repeat;"></td>
        </tr>
        <tr valign="top">
          <td align="left" width="905" height="100%" style="background-color:#f2e9d0;"></td>
        </tr>
        <tr valign="middle">
          <td align="left" width="905" height="401" style="background-image: url('images/bkg3.jpg'); background-repeat:no-repeat;"></td>
        </tr>
        <tr valign="top">
          <td align="left" width="905" height="100%" style="background-color:#f2e9d0;"></td>
        </tr>
      </table>

smartov

Дата 29.1.2008, 17:23 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

Цитата(svip @ 29.1.2008, 16:02

)

потому что два разных backgorund один под другим

Вот вам два background один над другим и текст сверху обоих. Не вижу проблемы.

Код


<html>
<body>

<table style="background: red" cellpadding="10" cellspacing="10">
<tr>
    <td style="background: green; color: white;">
        Preved
    </td>
</tr>
<table>

</body>
</html>

Обьясните конкретнее что вам надо.

Добавлено через 3 минуты и 20 секунд

Цитата(svip @ 29.1.2008, 16:02

)

нужно чтобы текст был над вот этой таблицей

Так у вас проблема в том, что ваш background раскидан по ячейкам таблицы, а нужно чтобы текст был как бы поверх всех ячеек? Если так - то это совсем другое дело. И к наслоению background-ов никакого отношения не имеет.

Значит вам придется применить другую верстку. Объединить все это в одну ячейку, а в ней создать подэлементы - div или table со своим backgorund. Итд итп.

svip

Дата 29.1.2008, 19:59 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 27.3.2007

Репутация: нет
Всего: нет

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

smartov

Дата 29.1.2008, 21:02 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

ТО есть объединить ячейки в одну. Бэкгрануды тоже объединить в одну картинку и текст написать

svip

Дата 29.1.2008, 22:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 27.3.2007

Репутация: нет
Всего: нет

фоны объеденить в один не получится, потому что по задумке идет верхний фон - картинка - после ного фон - заливка. Далее фон - картинка который всегда посередине страницы. далее опять фон - заливка. Вот и пролема в том что центральный фон - картинка всегда должен быть подвижный - посередине (valign=middle)

smartov

Дата 29.1.2008, 23:03 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

Текст должен быть поверх всех фонов?

svip

Дата 29.1.2008, 23:12 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 27.3.2007

Репутация: нет
Всего: нет

вся структура фонов:
фон №1 - картинка
фон №2 - картинка
фон №3 - заливка цветом (растягивается по вертикали)
фон №4 - картинка - всегда в центре (valign=middle)
фон №5 - заливка цветом (растягивается по вертикали)
фон №6 - картинка.

все должно быть между фоном №1 и фоном №6. То есть поверх фоном №2 №3 №4 №5 должна находится таблица - три столбца. в левом столюце - меню. в центральном текст в правом - фото.

smartov

Дата 30.1.2008, 00:01 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

У меня вышло вот так. Без JavaScript не обошлось.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body {
    margin: 0;
    overflow: hidden;
}
</style>
</head>
<body>

<div id="blockMain" style="background: red;position: relative;"><!-- фон этого блока - фоны #3 и #5 -->

    <div style="top: 0; left: 0; height: 50px; position: absolute; width: 100%; background: #111; color: white;">фон #1</div>

    <div style="top: 50px; left: 0; position: absolute; width: 100%; background: yellow">фон #2</div>

    <div style="top: 50%; left: 0; position: absolute; width: 100%; background: green">фон #4</div>

    <div style="bottom: 0; left: 0; position: absolute; width: 100%; background: purple">вдруг понадобится фон X</div>

    <div style="position:absolute;top:50px;left:0;width : 100%; overflow : auto;" id="blockText">
    
    <table border="1">
        <tr>
            <td style="width: 100px;">Menu</td>
            <td>
                A plenty of text<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <p></p>sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna <p></p>aliquam erat volutpat. <br><br>Ut wisi enim ad minim veniam, quis nostrud exerc<br>i tation ullamcorper suscipit <br>lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
                A plenty of text<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <p></p>sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna <p></p>aliquam erat volutpat. <br><br>Ut wisi enim ad minim veniam, quis nostrud exerc<br>i tation ullamcorper suscipit <br>lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
                A plenty of text<br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <p></p>sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna <p></p>aliquam erat volutpat. <br><br>Ut wisi enim ad minim veniam, quis nostrud exerc<br>i tation ullamcorper suscipit <br>lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
            </td>    
            <td style="width: 200px;">Photos</td>
        </tr>
    </table>
    
    </div>

</div>

<div style="background: #666;height: 50px;">&nbsp;фон №6</div>

<script>

function correctSizes() {
    var newheight = (document.documentElement.clientHeight - 50); //минус высота фона 1
    if (newheight<1) { 
        newheight = 1;
    }
    
    document.getElementById('blockMain').style.height = newheight + 'px';
        
    var newheight = (document.documentElement.clientHeight - 100); //минус (высота фона 1 + высота фона 6)
    if (newheight<1) { 
        newheight = 1;
    }
        
    document.getElementById('blockText').style.height = newheight + 'px';
}

window.onload = function () {
    correctSizes();
}

window.onresize = function() { 
    correctSizes();
}
</script>

</body>
</html>

Это сообщение отредактировал(а) smartov - 30.1.2008, 00:02

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »