Как подправить блочную резиновую верстку? Разъезжается

@vlad275 · Регистрация: 13.11.2008

Студворк — интернет-сервис помощи студентам

Как подправить блочную резиновую верстку? Разъезжается

stretchfilm.byethost13.com/roadhawksmcc

@gulliver · 18.05.2012, 11:56

при уменьшении ширины все блоки падают, это ?

@vlad275 · 18.05.2012, 11:59 **[ТС]**

Да, и при увеличении они уменьшаются.

Что-бы при изменении масштаба центральный фон(изображение дороги) был того же размера, что и блок пролома в стене нужно сделать вот так? Но в IE он не работает.

CSS

background: url(‘1.jpg’)no-repeat center center fixed;
background-position 0px,100px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

@gulliver · 18.05.2012, 12:18

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

http://jsfiddle.net/JLZaX/
вот, посмотри, блоки статические по бокам, а центр динамический. В принципе то что тебе и нужно.

делаешь так, только min-width:960 ставишь.

@Lane · 18.05.2012, 12:18

Укажите min-width для body

@vlad275 · 18.05.2012, 12:28 **[ТС]**

Сообщение от gulliver

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

http://jsfiddle.net/JLZaX/
вот, посмотри, блоки статические по бокам, а центр динамический. В принципе то что тебе и нужно.

делаешь так, только min-width:960 ставишь.

А что делать с фоновым изображением дороги в центре? Оно не тянется. Еще почему-то не получилось к border-left привязать свойства
background: url(left.png) left repeat-y;
Почему-то left.png сместился вверх и не размножился по вертикали

Добавлено через 4 минуты
Фоном ставить очень большую картинку и центрировать ее?

<p></p>

HTML5

1
2
3

<div class="background"><img src="фоновое изображение" alt="" width="100%" height="auto"></div>
 
<div class="content"><!--Содержимое--></div>

CSS

.background{
   position: absolute;
   z-index: 0;
   width: 100%;
}
.content{
   position: relative;
   z-index: 1;
}

@gulliver · 18.05.2012, 12:40

Сообщение от vlad275

А что делать с фоновым изображением дороги в центре? Оно не тянется. Еще почему-то не получилось к border-left привязать свойства
background: url(left.png) left repeat-y;
Почему-то left.png сместился вверх и не размножился по вертикали

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

@vlad275 · 18.05.2012, 12:41 **[ТС]**

Да, но изображение дороги не тянется. http://stretchfilm.byethost13.... smcc/1.jpg

@gulliver · 18.05.2012, 12:51

а как оно будет тянутся если у картинки фиксирован размер. Либо делай центральный блок под размером картинки, либо меняй картинку.
или попробуй вот так.

CSS

.center
{
border:1px solid black;
    text-align:center;
    margin-left:170px;
    margin-right:170px;
    background:url(1.jpg);
    background-repeat:no-repeat;
    background-size:100%;
    height:600px;
}

хотя в таком случае если изменять ширину будешь картинка будет себя плохо вести

@vlad275 · 18.05.2012, 12:51 **[ТС]**

Ваш вариант работает, а мой, вот этот, нет. Почему?

HTML5

1 2	<div style="background:url(1.jpg);background-size:100% 100%;background-repeat:no-repeat;">TEXT </div>

Высота блока не выше строки текста. А ширина такая как и нужно - 100%

@gulliver · 18.05.2012, 12:55

Ну или попробуй сделать вот так

CSS

<div class="center">
<p>центер</p>
    <div class="photo">
        <img src="1.jpg">
    </div>
</div>

это будет правильней мне кажется

@vlad275 · 18.05.2012, 12:58 **[ТС]**

Кстати, да. При изменении масштаба - верстка "едет"

Добавлено через 1 минуту

Сообщение от gulliver

Ну или попробуй сделать вот так

CSS

<div class="center">
<p>центер</p>
    <div class="photo">
        <img src="1.jpg">
    </div>
</div>

это будет правильней мне кажется

Тогда уж слоями делать.
z-index:-1; для фонового изображения дороги
z-index:1; для контента блока

@gulliver · 18.05.2012, 13:00

Сообщение от vlad275

Ваш вариант работает, а мой, вот этот, нет. Почему?

HTML5

1 2	<div style="background:url(1.jpg);background-size:100% 100%;background-repeat:no-repeat;">TEXT </div>

Высота блока не выше строки текста. А ширина такая как и нужно - 100%

потому что высота блока не заданна. Картинка укладывается в ту ширину блока, которую создал текст.
просто пропиши height:500px и увидишь картинку )

Добавлено через 57 секунд

Сообщение от vlad275

Кстати, да. При изменении масштаба - верстка "едет"

Добавлено через 1 минуту

Тогда уж слоями делать.
z-index:-1; для фонового изображения дороги
z-index:1; для контента блока

можно попробовать и так) я подсказал, а там уже все дело в вашей фантазии

@vlad275 · 18.05.2012, 13:06 **[ТС]**

А если так?

HTML5

1 2	<div style="background:url(1.jpg) bottom no-repeat;width:50%;height:50%;border: solid 1px black;">TEXT </div>

@gulliver · 18.05.2012, 13:11

лично у меня высота не увеличилась на 50% , лучше сделать в px

CSS

1	height:50%

@vlad275 · 18.05.2012, 13:16 **[ТС]**

Спасибо. Попробую вот так:

HTML5

1 2	<div style="background:url(http://stretchfilm.byethost13.com/roadhawksmcc/1.jpg) bottom no-repeat;width:50%;height:500px;border: solid 1px black;">TEXT </div>

Добавлено через 1 минуту
А что делать с border-left?
Привязывал свойство background: url(left.png) left repeat-y;

Но left.png сместился вверх и не размножился по вертикали

@gulliver · 18.05.2012, 13:34

Сообщение от vlad275

Спасибо. Попробую вот так:

HTML5

1 2	<div style="background:url(http://stretchfilm.byethost13.com/roadhawksmcc/1.jpg) bottom no-repeat;width:50%;height:500px;border: solid 1px black;">TEXT </div>

Добавлено через 1 минуту
А что делать с border-left?
Привязывал свойство background: url(left.png) left repeat-y;

Но left.png сместился вверх и не размножился по вертикали

попробуй пропиши все раздельно.
background-position:...
background-repeat:...
вроде все правильно написал. Попробуй background-repeat: no-repeat repeat.

@vlad275 · 18.05.2012, 18:41 **[ТС]**

Что-то опять не то :-(
http://stretchfilm.byethost13.com/roadhawksmcc/

Добавлено через 30 минут
Не получается сделать высоту блока 100%, блок исчезает.

@vlad275 3 / 3 / 1 Регистрация: 13.11.2008 Сообщений: 219
		1
	Как подправить блочную резиновую верстку? Разъезжается 18.05.2012, 11:54. Показов 3584. Ответов 17 Метки нет (Все метки) Как подправить блочную резиновую верстку? Разъезжается stretchfilm.byethost13.com/roadhawksmcc 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	18.05.2012, 11:56	2
	при уменьшении ширины все блоки падают, это ? 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	18.05.2012, 12:18	4
	Не знаю по поводу ИЕ. Давай сначала разберемся с левым центральным и правым блоком, они у тебя падают при изменение ширины. http://jsfiddle.net/JLZaX/ вот, посмотри, блоки статические по бокам, а центр динамический. В принципе то что тебе и нужно. делаешь так, только min-width:960 ставишь. 0

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	18.05.2012, 12:18	5
	Укажите min-width для body 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	18.05.2012, 12:40	7
	Сообщение от vlad275 А что делать с фоновым изображением дороги в центре? Оно не тянется. Еще почему-то не получилось к border-left привязать свойства background: url(left.png) left repeat-y; Почему-то left.png сместился вверх и не размножился по вертикали в смысле оно не тянется ? твоя дорога, это центральный блок. он при изменении меняет свою ширину. 0

@vlad275 3 / 3 / 1 Регистрация: 13.11.2008 Сообщений: 219
	18.05.2012, 12:41 [ТС]	8
	Да, но изображение дороги не тянется. http://stretchfilm.byethost13.... smcc/1.jpg 0

@vlad275 3 / 3 / 1 Регистрация: 13.11.2008 Сообщений: 219
	18.05.2012, 18:41 [ТС]	18
	Что-то опять не то :-( http://stretchfilm.byethost13.com/roadhawksmcc/ Добавлено через 30 минут Не получается сделать высоту блока 100%, блок исчезает. 0