div фон

[morgusha]

Подскажите пожалуйста ! Есть контейнер в нём все дивы в цсс пытаюсь сделать так,что бы у див лефт картинка была растянута и что бы это по ИЕ 7 подходило , но никак не получается...кто подскажет ???

#left{
	        background:url(i/170.jpg) center no-repeat;
			/*background: url(i/170.jpg) no-repeat;*/
			/*background-color: #0ff;*/
			background-size: 100% 100%;            /*расстягиваем картинку под див*/
			/*border:		1px solid #000000;*/
			width: 		70%;
            height:     400px;
			float: 		left; /*обтекание блока по правой стороне другим блоком*/
	}

<div id="container"><!--CONTAINTER STARTS-->
<div id="header">header</div>	
<div id="left"></div>
<div id="right"> right</div>
<div id="clear">clear</div>
<div id="content">content</div>
<div id="footer">footer</div>
		</div><!--CONTAINER ENDS-->

[alekseyk24]

#left{
	        background:url(i/170.jpg) center no-repeat;
			/*background: url(i/170.jpg) no-repeat;*/
			/*background-color: #0ff;*/
			background-size: 100% 100%;            /*расстягиваем картинку под див*/
                        behavior: url(PIE.htc); /*for IE*/
                        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg', sizingMethod='scale');
                        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg', sizingMethod='scale')"; 
			/*border:		1px solid #000000;*/
			width: 		70%;
            height:     400px;
			float: 		left; /*обтекание блока по правой стороне другим блоком*/
	}

PIE.htc -положить к файлам html

[morgusha]

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg', sizingMethod='scale');
                        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg',
 sizingMethod='scale')";

извините, но что это за строчка ? )

Edited November 22, 2012 by morgusha

[alekseyk24]

Это чтоб по ИЕ 7 подходило.

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg',

sizingMethod='scale')";-это можете убрать если для IE8 тоже нужно.

Edited November 22, 2012 by alekseyk24

[morgusha]

-ms

— этого нет в коде ? это нужно или нет ???

и по ИЕ сайты прям строго подстраиваются или нет ? а то из-за одного браузера весь код ворочить прийдётся ?

Edited November 22, 2012 by morgusha

[alekseyk24]

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg',

sizingMethod='scale')";

всю строчку можно убрать.

что бы во всех браузерах работало нужно прописать:

-webkit-background-size:100% 100%;

-moz-background-size:100% 100%;

-o-background-size:100% 100%;

-ms-background:100% 100%;

[morgusha]

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg', sizingMethod='scale'); /*for IE */
			background-size: 100% 100%;    

вставил эту строчку в цсс и ИЕ стал боле менее норм отображать и на хостинг никакие ПИЕ файлы не заливал ...как это так ? )

http://morgusha.hut2.ru/

Edited November 22, 2012 by morgusha

[alekseyk24]

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/170.jpg', sizingMethod='scale'); /*for IE */
			background-size: 100% 100%;    

вставил эту строчку в цсс и ИЕ стал боле менее норм отображать и на хостинг никакие ПИЕ файлы не заливал ...как это так ? )

http://morgusha.hut2.ru/

незнаю у меня без ПИЕ не работает.

[morgusha]

а почему фон то в ИЕ основной не расстягивается как надо ?

[alekseyk24]

а почему фон то в ИЕ основной не расстягивается как надо ?

потому что все что добавили в #left нужно добавить везде где есть background-size.

[morgusha]

оп оп спасибо за волшебную строчку )))

http://morgusha.hut2.ru/

[alekseyk24]

оп оп спасибо за волшебную строчку )))

http://morgusha.hut2.ru/

пожалуйста))

кстати если хотите что бы растягивалось еще и по высоте нужно убрать height и использовать padding-bottom в %

Edited November 22, 2012 by alekseyk24

[morgusha]

спасибо ) а ещё вопросик ! Как вообще положено делать ? вот мне в диве надо написать текст мне этот текст писать в хтмл файле ? или делать для него новый вложенный див и там уже писать текст ???

[alekseyk24]

спасибо ) а ещё вопросик ! Как вообще положено делать ? вот мне в диве надо написать текст мне этот текст писать в хтмл файле ? или делать для него новый вложенный див и там уже писать текст ???

как положено точно не скажу, сам еще начинающий верстальщик, я бы сделал в диве вложенный див с классом "text" и в нем уже теги <p>

[morgusha]

а мне нужно посреди картинки которая является фоном для блока и уже растянута была полупрозрачная линия ! я вот так вот сделал :

#line{
	background-color: #652301;
	border:		1px solid #652301;
	position: absolute; /* Абсолютное позиционирование */
	bottom: 300px; 
	height: 50px;
	width: 905px;
	opacity: 0.3;
	}

<div id="container"><!--CONTAINTER STARTS-->
<div id="header">header</div>	
<div id="left"><div id="line"></div></div>
<div id="right"> right</div>
<div id="clear">clear</div>
<div id="content">content</div>
<div id="footer">footer</div>
		</div><!--CONTAINER ENDS-->
		</body>

в IE полный бардак тогда получается линия заходит за границу с другим блоком и по высоте позиционирование сбивается в ие и мозиле ((( другой способ может есть какой то ? и при таком способе если браузер менять по ширине эта колонка вообще не сужается вместе с родительской ...почему так ???

и я не понимаю, что неужели ток один IE не понимает CSS3

Edited November 22, 2012 by morgusha

[alekseyk24]

нжно для #left прописать position:relative;

и я не понимаю, что неужели ток один IE не понимает CSS3

на то он и ослик))

[psywalker]

нжно для #left прописать position:relative;

и я не понимаю, что неужели ток один IE не понимает CSS3

на то он и ослик))

Не совсем так. Идеи некоторых модулей CSS3 позаимстовованы от ослов, но большинство новых модных модулей, да, ослами не поддерживается)

Кстати, CSS3 - миф

[morgusha]

я сейчас вот сделаю сайт на дивах,а потом он на joomla переноситься будет ! сложно будет структуру перенести ???

и вообще структура переносится или прийдётся верстать всё заново ???

Edited November 23, 2012 by morgusha

[morgusha]

приём приём !

[FEL]

нет IE - нет проблем...эх мечты мечты

[morgusha]

#content{
			line-height: 1;  /*межстрочный отступ*/
			background-color: #ede2c5;
			border:		3px solid #000000;
			height: 100px auto;
			margin: 10px auto;

	}

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

[mrnobody]

border: 3px solid rgba(0,0,0,.5);

[hypnocolor]

https://www.google.ru/search?q=transparent+border+css&oq=transparent+border+css&aqs=chrome.0.57j60j62l2.11395&sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8

[morgusha]

нифига не получается (((

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

Edited November 24, 2012 by morgusha

[alekseyk24]

нифига не получается (((

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

Все работает вам mrnobody правильно посоветовал.

#content {

line-height: 1; /*межстрочный отступ*/

background-color: #ede2c5;

border: 3px solid rgba(0, 0, 0, 0.5);

height: 100px auto;

margin: 10px auto;

}

[morgusha]

борджер становится не прозрачным,а серым , если делать как вы пишите (((

http://morgusha.hut2.ru/

вот нужно вокруг контента сделать линию такую же как и на главной картинке полупрозрачную !