Jump to content
  • 0

Фоновый рисунок в таблице

kino_Jgor

Asked by kino_Jgor,

 Share

Question

23 answers to this question

Recommended Posts

  • 0
kino_Jgor Explorer

kino_Jgor

Posted
  • Author
Posted (edited)

А может кто поможет разобраться на этом коде:

<html>

<head>
<title>неважно</title>
</head>

<body>

<div align="center">
	<table border="0" width="100%" style="border-collapse: collapse; border-width: 0px" cellpadding="0">
		<tr>


<td background-images="index.files/landlost_l.jpg"> </td>  - вот эта ячейка, тут и необходимо фоновый рисунок сделать справа налево и что бы не повторялось


			<td width="774" height="900" background="index.files/landlost_m.jpg">
			<p> </td>
			<td background="index.files/landlost_r.jpg"> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</table>
</div>

</body>

</html>

И сразу ещё один вопрос: как эту таблицу привязать к самому верху и низу окна браузера?

Edited by kino_Jgor
Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
А может кто поможет разобраться на этом коде:

А что в нем не понятно?

И сразу ещё один вопрос: как эту таблицу привязать к самому верху и низу окна браузера?

В каком смысле привязать?

Link to comment
Share on other sites
  • 0
Payne Explorer

Payne

Posted
Posted (edited)
<td background-images="index.files/landlost_l.jpg"> </td> - вот эта ячейка, тут и необходимо фоновый рисунок сделать справа налево и что бы не повторялось

<td style="background-image: url('index.files/landlost_1.jpg'); background-position: right; background-repeat: no-repeat">...Содержимое...</td>

Конечно, лучше всё это вынести в css.

И сразу ещё один вопрос: как эту таблицу привязать к самому верху и низу окна браузера?

html, body {padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px}

Edited by Payne
Link to comment
Share on other sites
  • 0
kino_Jgor Explorer

kino_Jgor

Posted
  • Author
Posted

Вот результат моих действий:

mir2.jpg

Над этим кодом:

<html>

<head>
<title>1</title>
</head>


<body> {padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px} - это код для "приклеивания" таблицы ко всем краям окна браузера


<div align="center">
	<table border="0" width="100%" style="border-collapse: collapse; border-width: 0px" cellpadding="0">
		<tr>


<td style="background-image: url('index.files/landlost_1.jpg'); background-position: right; background-repeat: no-repeat"> </td> - эта та самая ячейка


			<td width="774" height="900" background="index.files/landlost_m.jpg" >
			<p align="center"> </td>
			<td background="index.files/landlost_r.jpg"> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</table>
</div>

</body>

</html>

:rolleyes:

Link to comment
Share on other sites
  • 0
Payne Explorer

Payne

Posted
Posted
<body> {padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px} - это код для "приклеивания" таблицы ко всем краям окна браузера

Это не код для "приклеивания" таблицы ко всем краям окна, а какая-то хрень. Я думал ты имеешь хотя бы небольшое представление о CSS и их взаимодействии с HTML.

Если уж ты собираешься использовать это в самом html-документе, то нужно писать не так, как ты, а так:

<body style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px">

Если ты всё же хочешь приклеить таблицу ко всем краям, а не только к нижнему и верхнему, то лучше написать короче:

<body style="padding: 0px; margin: 0px">

А вот это: body {padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px} - так пишется в каскадных таблицах стилей.

<td style="background-image: url('index.files/landlost_1.jpg'); background-position: right; background-repeat: no-repeat"> </td> - эта та самая ячейка

Ты тупо скопировал то, что я написал. Но файл-то у тебя называется не landlost_1.jpg, а landlost_l.jpg. Думай хоть немного - из-за чего может пропасть картинка?

Link to comment
Share on other sites
  • 0
silverworld Explorer

silverworld

Posted
Posted

кто знает, как стандартными средствами языка html сделать так, чтобы фоновый рисунок всегда занимал ровно весь экран, т.е. автоматически сжимался или увеличивался, в зависимости от размера экрана?

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted
кто знает, как стандартными средствами языка html сделать так, чтобы фоновый рисунок всегда занимал ровно весь экран, т.е. автоматически сжимался или увеличивался, в зависимости от размера экрана?

Никак.

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
кто знает, как стандартными средствами языка html сделать так, чтобы фоновый рисунок всегда занимал ровно весь экран, т.е. автоматически сжимался или увеличивался, в зависимости от размера экрана?

html + css

А вообще не рекомендую, броузеры сильно искажают картинку при масштабировании. К тому же с такой графикой нужно сохранять пропорции, а с этим уже сложнее. Все мастера делают многослойно. Надо найти фрагменты, которые можно размножать по вертикали, которые по горизонтали. Эти фрагменты заключить в соответствующие растягивающиеся блоки, а все остальное размещать в блоках поверх или между тянущимеся.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

Да, вот типа того, как сделано тут: Четыре блока с картинками разбросаны по углам, а при заполнении содержимым низ и верх просто остаются на месте, а середина тянется, что и требовалось доказать! :D

http://psywalker.ru/SAITS/Izoprint/main-page.html

Edited by psywalker
Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
У меня такая-же проблема с фоном, только этот код не помогает.

http://fightcraft.ru/sait2.html

Вот, левые горы начинают слезать, если брать меньший размер экрана.

На мой взгляд, Вам лучше сделать шапку длинной и поставить ее в бекграундом куда-нить во всю ширину, по середине, и при изменении ширины тогда будут безболезненно появляться и исчезать концы.

Link to comment
Share on other sites
  • 0
lenster Explorer

lenster

Posted
Posted
На мой взгляд, Вам лучше сделать шапку длинной и поставить ее в бекграундом куда-нить во всю ширину, по середине, и при изменении ширины тогда будут безболезненно появляться и исчезать концы.

Нет, так получается, что шапка справа налево скрывается, а не с двух сторон одновременно.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Нет, так получается, что шапка справа налево скрывается, а не с двух сторон одновременно.

Грустно что так у Вас получилось, раз не осилили - тогда делайте как посчитаете нужным

Link to comment
Share on other sites
  • 0
lenster Explorer

lenster

Posted
Posted
Грустно что так у Вас получилось, раз не осилили - тогда делайте как посчитаете нужным

Спасибо, по-мучался с день и получилось всё, только вот 1 маленькая проблема осталась в браузере (опера), съезжает контент и меню, я их сделал на середине градиента, и получается, что немного съезжает почему-то!

Вот адрес http://fightcraft.ru/sait4.html

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Спасибо, по-мучался с день и получилось всё, только вот 1 маленькая проблема осталась в браузере (опера), съезжает контент и меню, я их сделал на середине градиента, и получается, что немного съезжает почему-то!

Вот адрес http://fightcraft.ru/sait4.html

в FF тоже, думаю, во многих браузерах будет так, потому что надо задать min-width ("кроссбраузерный min-width" у гугла)

Link to comment
Share on other sites
  • 0
lenster Explorer

lenster

Posted
Posted
в FF тоже, думаю, во многих браузерах будет так, потому что надо задать min-width ("кроссбраузерный min-width" у гугла)

Решил проблему так, взял тот же метод, сделал фон меню и контента и объединил. Сделал стайл "центр" Поставилось по центре, но проблема такая.

По центру теперь не только по горизонтали, но и по вертикали, и получается, что фон синий не видно.

Можно ли сделать так, чтобы по центру вставало, только вертикально?

http://fightcraft.ru/sait4.html

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Решил проблему так, взял тот же метод, сделал фон меню и контента и объединил. Сделал стайл "центр" Поставилось по центре, но проблема такая.

По центру теперь не только по горизонтали, но и по вертикали, и получается, что фон синий не видно.

Можно ли сделать так, чтобы по центру вставало, только вертикально?

http://fightcraft.ru/sait4.html

Напишите вместо "центер" - "центр топ" или как там...

Link to comment
Share on other sites
  • 0
dmitro_off Explorer

dmitro_off

Posted
Posted

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Растягиваемый фон</title>

<style type="text/css">

#layer1 {

z-index: 1; /* Порядок слоев */

width: 100%; /* Ширина слоя с фоном */

height: 100%; /* Высота слоя с фоном */

position: absolute; /* Абсолютное позиционирование */

left: 0; /* Положение от левого края окна */

top: 0; /* Положение от верхнего края */

}

#layer2 {

position: absolute; /* Абсолютное позиционирование */

z-index: 2; /* Порядок слоев */

}

</style>

</head>

<body>

<div id="layer1">

<img src="help.gif" width="100%" alt="">

</div>

<div id="layer2">

Основное содержимое веб-страницы

</div>

</body>

</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept