Jump to content
  • 0

Резиновый блок из 2 картинок!


BSandro
 Share

Question

Возник такой вот вопрос!

Думал сам не додумался, искал в google,yandex (P.S тоже не чего, может плохо искал...)

Сообственно вот картинка

71fc4da49c1f.jpg

Я убрал:

1.Текст.

2.полоски

3.верхнею бгешку где написано меню сайта.

4.конечно же эффект при наведений

получилось вот так:

5ebdec79bbfc.jpg

Теперь я порезал эту картинку на 2 части:

0db71553cbef.jpg

и

6be57209cefd.jpg

В итоге я хочу сделать так что бы при добавления пунктов меню данный блок расширялся;

Я понимаю что там верхний блок надо еще чуток по высоте пределать ему!

Но как реализовать все это увы не могу понять!

Как просто фикс могу сверстать а так не могу додуматся!

Заранее спасибо.

Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0

Попробуйте верхний голубой фон отрезать так же как нижний, а серединку оставить в 1px высотой:

верх и них у вас будут стоять как есть, фон под любым количеством пунктов меню будет множиться и тем самым получиться резиновое меню по вертикали

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

Edited by Switch74
Link to comment
Share on other sites

  • 0

Проще всего серединку банально сделать с приличным запасом, пикселей в 250. Если сохранять в PNG, разница в размере файла должна быть невелика. Но имхо в наши дни разумнее сделать этот фон CSS-градиентом (с откатом до сплошной заливки центральным цветом), а законцовки и др. украшения положить поверх с прозрачностью.

Link to comment
Share on other sites

  • 0

Вы меня не понял :-)

Как это все в css записать ?

на счет вырезать я не парюсь, я не могу 2 картинки прописать к 1 div не знаю как!

И вообще где не лазил, не нашел!

Поэтому зарегистрировался на форуме что бы задать данный вопрос.

для 1 картинки да могу прописать

допустим


.bg-menu {background:url(image.png) no-repeat; width:150px; height: 340px;}

Вот примерно так а как 2 картинку прописать не знаю

Link to comment
Share on other sites

  • 0

если кроссбраузерностью не париться, то что-то вроде


background:
url(image1.png) no-repeat,
url(images2.png) no-repeat,
url(images3.png) repeat-y;

Спасибо щас попробую!

Эм а как для каждого файла прописать высоту и ширену?

Сама ширина и высота не задастся же )

Edited by BSandro
Link to comment
Share on other sites

  • 0

1. логично иметь фоновые картинки подогнанные под блок

2. вы зашли на форум хорошего справочника (я бы сказал очень хорошего) в котором все есть

http://htmlbook.ru/css/background

Link to comment
Share on other sites

  • 0

Попробуйте вот так:

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

Edited by cupWebCode
Link to comment
Share on other sites

  • 0

Попробуйте вот так:

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

Картинки то 3 ))

Link to comment
Share on other sites

  • 0

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

background: url(../images//*Здесь ваша нижняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

.bg-menu:before {

content: "";

background: url(../images//*Здесь ваша верхняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

Link to comment
Share on other sites

  • 0

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

background: url(../images//*Здесь ваша нижняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

.bg-menu:before {

content: "";

background: url(../images//*Здесь ваша верхняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

Верхняя и нижняя картинка встала, центральная картинка вверху, текст не накладывается!

То есть лежит под картинками )))

Даже закинул сюда http://jsfiddle.net/tns5b/

Edited by BSandro
Link to comment
Share on other sites

  • 0

у вас ошибка в следующей строке:


background: url url(http://savepic.su/3529436.png) 0 100% no-repeat; /*низ*/

Спасибо, невнимательность у меня немножко ( скорей всего из за того, то что я уделяю верстке по 14 часов в день.)

у вас ошибка в следующей строке:


background: url url(http://savepic.su/3529436.png) 0 100% no-repeat; /*низ*/

а сделать не как нельзя, что бы этих полосок по середине видно не было

Link to comment
Share on other sites

  • 0

Можно, надо правильно разрезать и сохранить картинки. Или, например, вообще убрать основной фон из верхней и нижней картинок, оставив только неповторяющиеся элементы http://jsfiddle.net/Cath_kb/QuJDE/2/.

Link to comment
Share on other sites

  • 0

Можно, надо правильно разрезать и сохранить картинки. Или, например, вообще убрать основной фон из верхней и нижней картинок, оставив только неповторяющиеся элементы http://jsfiddle.net/Cath_kb/QuJDE/2/.

Спасибо но я сам уже пере резал картинки ))

Еще раз благодарю тех кто помог решить проблему!

Тему можно закрыть!

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

×
×
  • 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