Форум Сайтостроение Веб-строительство

Вопрос по картинке и таблице CSS

12
eleronnet
На сайте с 24.02.2013
Offline
79
eleronnet
967

Вот таким кодом CSS я растягиваю фоновый рисунок:

#layer1 {
z-index: 1; /* Порядок слоев */
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
}
#layer2 {
position: absolute; /* Абсолютное позиционирование */
z-index: 2; /* Порядок слоев */
}

В html пишу так:

</head>

<center>
<div id="layer1" aling="center">
<img src="97932888.jpg" width="100%">
</div>

<div id="layer2" aling="center">
.... и.т.д....

Только вот беда, на фоновом рисунке стоит таблица, рисунок растягивается слева направо а таблица, хоть убей, по центру не стает, смещается влево при уменьшении масштаба в браузере.

Помогите плиз кто знает, как ее поставить по центру? Дело все в коде выше, до растягивания рисунка такого не было. Нужно чтоб фоновый рисунок растягивало в обе стороны одинаково, а не только слева направо!

Лучшая партнерка для вебмастеров ЗДЕСЬ! (http://eleronnet.cc.ua/klik.html) Бурение скважин на воду (http://evoda.cc.ua/burenie.html) в Украине.
eleronnet
На сайте с 24.02.2013
Offline
79
eleronnet
#1

Помогите пожалуйста, кто знает, вот что получается:

Таблица не выравнивается по центру экрана.

L
На сайте с 16.10.2014
Offline
108
lexter
#2
eleronnet:
Помогите пожалуйста, кто знает, вот что получается:



Таблица не выравнивается по центру экрана.

таблица фиксированной ширины ? пробовали margin:auto; ?

Купить автомобиль из США можно тут (https://us-car.com.ua)
grayCat777
На сайте с 02.09.2015
Offline
5
grayCat777
#3

eleronnet, давайте по порядку разбираться с вашим кодом.

В блоке id="layer1" задана картинка img - это фон? Если да, то это неправильно. Фон нужно задавать в css, для этого есть свойство background. Если нужно фон растянуть, задайте ему background-size.

Дальше, чтобы блок выровнять по центру страницы нужно ему задать ширину и свойство margin: auto;

И уберите из кода абсолютное позиционирование, он там не нужно.

HTML-верстка по доступной цене (/ru/forum/923505)
Joomla, подвал, CSS Как закрепить фон на Брендинг сайта, css
eleronnet
На сайте с 24.02.2013
Offline
79
eleronnet
#4

Ставлю вот сейчас в выше указанный код margin: auto; -не помогает.

---------- Добавлено 05.09.2015 в 11:39 ----------

height: auto; /* Высота слоя с фоном */ - тоже не помогает.

Может можно поменять как-то вот эти команды:

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

---------- Добавлено 05.09.2015 в 11:40 ----------

grayCat777:
eleronnet, давайте по порядку разбираться с вашим кодом.
В блоке id="layer1" задана картинка img - это фон? Если да, то это неправильно. Фон нужно задавать в css, для этого есть свойство background. Если нужно фон растянуть, задайте ему background-size.
Дальше, чтобы блок выровнять по центру страницы нужно ему задать ширину и свойство margin: auto;
И уберите из кода абсолютное позиционирование, он там не нужно.

Напишите код CSS пожалуйста, если можно.

Не работает шаблон в Положение на странице Отвечу на вопросы по
grayCat777
На сайте с 02.09.2015
Offline
5
grayCat777
#5
eleronnet:
Ставлю вот сейчас в выше указанный код margin: auto; -не помогает

И не поможет, он же абсолютно спозиционирован. Удалите position: absolute. Блоку ширина задана?

---------- Добавлено 05.09.2015 в 10:45 ----------

Вы не ответили

grayCat777:
В блоке id="layer1" задана картинка img - это фон?
eleronnet
На сайте с 24.02.2013
Offline
79
eleronnet
#6

Убрал position: absolute; вот что получилось:

А фоновая картинка у меня: 97932888.jpg и она закрыла таблицу и анимашку над таблицей.

Как прописать правильно коды:

<style type="text/css">
#layer1 {
min-height: 100%;
min-width: 1024px;
z-index: 1; /* Порядок слоев */
width: 100%; /* Ширина слоя с фоном */
height: auto; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
margin: auto;
}



#layer2 {

z-index: 2; /* Порядок слоев */
margin: auto;
}
</style>


</head>

<center>
<div id="layer1" >
<img src="97932888.jpg" width="100%">
</div>

<div id="layer2" aling="center">

---------- Добавлено 05.09.2015 в 12:02 ----------

grayCat777:
И не поможет, он же абсолютно спозиционирован. Удалите position: absolute. Блоку ширина задана?

---------- Добавлено 05.09.2015 в 10:45 ----------

Вы не ответили

Да, это фон.

Как правильно растянуть по Необычная верстка Вопрос по iframe
grayCat777
На сайте с 02.09.2015
Offline
5
grayCat777
#7
eleronnet:
А фоновая картинка у меня: 97932888.jpg и она закрыла таблицу и анимашку над таблицей

Потому что у этого блока тоже нужно убрать position: absolute; и z-index тоже уже не нужен.

Почитайте про background

Примерно такой должен быть код:

html 


<div id="layer1" > <!-- блок с фоном -->

	<div id="layer2" ></div> <!-- блок, который вы пытаетесь центрировать -->

</div>

css 


#layer1 {

		background: url(путь_к_картинке/97932888.jpg) no-repeat 50% 0;

		height: 100%;

		width: 1024px;

		margin: auto;

	}

#layer2 {

		width: ?px;

		margin: auto;

	}
eleronnet
На сайте с 24.02.2013
Offline
79
eleronnet
#8

Сделал точно так, дак картинку не растягивает, стоит по центру, а блок который центрирую по центру так откинуло вообще пикселей на 900 вниз от фоновой картинки.

L
На сайте с 16.10.2014
Offline
108
lexter
#9

http://htmlbook.ru/faq/kak-rastyanut-fon-na-vsyu-shirinu-okna

grayCat777
На сайте с 02.09.2015
Offline
5
grayCat777
#10

eleronnet, дайте ссылочку на страничку

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий