Разорвать бордер...

[Nanto]

Есть такая проблема:

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

clip не поможет - блок в нормальном потоке и позиционировать его низя. был вариант поверх бордера налепить кусок скопированый с бэкграунда... Но вёрстка полу-резиновая (1024-1280), проценты точно не обсчитаешь - боюсь будет разъезжаться...

Какие нибудь варианты есть?

[Veseloff]

Не очень понятно что именно надо. Можно как-нибудь схематично нарисовать или сделать скриншот?

[Great Rash]

Именно бордер "разорвать" нельзя. Как вариант - накладывать поверх картинку с куском бекграунда. Чтобы не ломалось на "резине" этот кусок должен быть вставлен в прозрачную картинку шириной как у бекграунда. Тогда, по-идее, сломаться не должно.

[Nanto]

Вот для примера:

  On 11/9/2011 at 9:34 AM, Great Rash said:

Именно бордер "разорвать" нельзя. Как вариант - накладывать поверх картинку с куском бекграунда. Чтобы не ломалось на "резине" этот кусок должен быть вставлен в прозрачную картинку шириной как у бекграунда. Тогда, по-идее, сломаться не должно.

да... надо попробовать!

Придумал! Убрать бордер у хэдера и запихнуть через absolute три пустых блока, у тех что по краям поставить бордер... Но надо поиграться с процентами

[Searcher]

проще уж дополнительный блок с бордером положить под картинку при помощи z-index

[Nanto]

Блин! Не получается вписать в резину...

Пример:

<div class="main">
 <div class="header"></div>
 <div class="header_space"></div>
</div>
<style type="text/css">
.main{
 position:relative;
 margin:0 auto;
 max-width:1280px;
 min-width:1000px;
 min-height:100%;
 background:transparent url("/background.jpg") no-repeat 50% 0;
}
.header{
 min-width:960px;
 height:12px;
 padding:4px 20px;
 overflow:hidden;
}
</style>

Либо скролл раньше времени (на 1279 уже), либо фикс...

  On 11/9/2011 at 10:19 AM, Searcher said:

проще уж дополнительный блок с бордером положить под картинку при помощи z-index

Поподробнее... Это как? Картинка перекроет бордер целиком - это жпег почти на всё окно, просто на картинке есть логотип, одна буква которого сильно выступает вверх, вот и хотелось её бордером "обтравить", а не перечеркнуть...

P.S. Сложность ещё в том, что шаблоны сквозные - я могу менять только html внутри основного блока, т.е. изменять контент непосредственно после хэдера (стили, понятное дело, могу переопределить для всего...)

[Nanto]

Уф! Сделал...

.main{
	position:relative;
	background:transparent url(/background.jpg) no-repeat 50% 0;
	overflow:hidden;
}
#header_space1{
	position:absolute;
	top:0;
	left:0;
	height:12px;
	width:50%;
	padding:4px 30px 4px 0;
	border-bottom:1px solid #fff;	
}
#header_space2{
	position:absolute;
	top:0;
	left:50%;
	height:12px;
	width:50%;
	margin-left:140px;
	padding:4px 0;
	border-bottom:1px solid #fff;	
}

Ну и повозиться пришлось, я Вам скажу! Всё гадство не из-за "резины" было, а из-за того что бэкграунд центруется (background-position:50% 0;)... И надо было отсчёт позиционирования блоков делать от середины (не сразу дошло).

Но теперь новая проблема с IE (со всеми) - для основного контейнера "position:relative" в сочетании с "overflow:hidden" даёт непонятное смещение вправо... Откуда уши растут? может просто хакнуть (через жёстко заданные поля-отступы)?

[sigma77]

Nanto,

http://jsfiddle.net/j7XfZ/

Вместо :after, если надо можно и обычный блок вставить.

[Nanto]

Нафиг-нафиг!.. Три часа убил! IE не поддаётся (из-за марджина дочернего блока background-position смещается...)!

Тупо взял картинку бэкграунда, расширил до 1280px и нарисовал бордер прямо на картинке!

Всем отписавшимся спасибо!

[Justnewone]

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

[Switch74]

а если так попробовать?..

Пример

[Nanto]

Ребят ну сказал же уже - сделал картинкой! Нафиг всякую ересь писать типа "background:#fff;"? тему вообще никто не читает?

Если интересно заморочиться - вот вводные:

body{

background:transparent url(/background.jpg) no-repeat 50% 0;

}

background.jpg - это картинка 1280x700 (не на белом фоне! - грубо говоря фотография)... как в определённом месте бэкграунда (а оно смещается при 1024<x<1280, и при этом бэкграунд центруется /background-position:50% 0;/) сделать разрыв бордера...