Проблемы с резиновой версткой.

[Fantastic]

Здравствуйте форумчане. Это моя вторая верстка, была сделана больше недели назад, но на другом форуме не помогают, надеюсь здесь помогут.

 

Вот что я сделал http://primer-primer.esy.es/Вот шаблон: https://yadi.sk/d/eoBIgxqejmdDB

 

Как сделать маску для верхней картинки, что бы она сжималась и увеличивалась так как положено? (пробовал разными способами, но у меня криво выходит)

 

Почему в div class=fact-one, текст и фотография в одном section, хоть я их ставил в разные? (пробовал float делать, не помогло, не пойму что я упускаю то)

[andrey7287]

  По первому вопросу 

header {  background-size: 100%} 

  По второму не понятно о чем речь. Думаю проще написать что нужно получить в итоге.

[Fantastic]

  По первому вопросу 

header {  background-size: 100%} 

  По второму не понятно о чем речь. Думаю проще написать что нужно получить в итоге.

 

Так вроде эффект лучше и вся картинка видать (хотя чем то и то было хорошо) НО я имел в виду не это, а белая маска, внизу картинки, она обрезается, В общем уменьшите ширину до минмума (786px) и увидите как обрезается левый белый треугольник слева!

 

Второй вопрос такой, у меня где:

<div class="fact-one">        <section>          <h2>Настоящий городок.</h2>          <p>Седона не атракцион для турсистов, там своя жизнь</p>        </section>        <section>          <img src="pig/photo-for-factone.jpg">        </section></div>

Вот текст и картинка в разных section, в css прописано для первого 33% для второго (где должна была быть картинка) 67% но картинка появляется с лева. Вот так В общем должно быть : http://savepic.su/6304004.png

 

P.S. И при background-size: 100% при сильном уменьшении, меньше чем рассчитан сайт, сверху маски видать синий прямоугольник. но решается это наверно чем то сложным, что я еще не знаю.

Edited October 28, 2015 by Fantastic

[andrey7287]

  По второму вопросу. 33% присвоили контейнеру а не первому элементу.

 

 

 По первому. Именно в той реализации что у вас квест получился ещё тот, я сам новичок, хз как такое решить.

 

Можно конечно  для .netmask1 задать width 100% чтоб он не обрезался, но тогда симметрия  пропадёт.

 

PS Синий прямоугольник - это ваш фоновый цвет просвечивает, тк картинка не вписывается. Решается через background-position, например  center.  

[Fantastic]

По второму вопросу. 33% присвоили контейнеру а не первому элементу.

 

Вот как так, если в коде вот так:

.fact-one{	height: 255px;	overflow: hidden;}.fact-one:first-child{	float: left;	width: 33%;	background: #81b3d2;}.fact-one:last-child{	float: right;	width: 67%;}

В firebag у меня тоже показывается типо контейнеру, что не так то? И как сделать нормально?  делал первый сайт, примерно так же (только не резиновый был) и там все нормально было.

 

Насчет маски, есть одна, с этими элиментами 1200px, так если ей поставить width 100%, она справа обрезается и получаеться еще хуже!

 

P.S. Спасибо за попытки помощи   (лайкать пока не могу, так что так написал)

Edited October 28, 2015 by Fantastic

[andrey7287]

Как то так 

.fact-one section:first-child{	float: left;	width: 33%;	background: #81b3d2;}.fact-one section:last-child{	float: right;	width: 67%;}

[Fantastic]

 

Как то так 

.fact-one section:first-child{	float: left;	width: 33%;	background: #81b3d2;}.fact-one section:last-child{	float: right;	width: 67%;}

 

Во спасибо, а то я что то запутался, для меню прописывал (для другого сайта) контейнер и к нему  :first-child, к ссылкам понадобилось так (а то не работало) контейнер:first-child a   здесь же контейнер section :first-child . Где как писать не понял + немного внимательности не хватило и такую маленькую ошибку не решил блин Еще прописать самому контейнеру overflow: hidden; и нормально. Осталось решить проблему с маской

[andrey7287]

  А смысл  такую пирамиду городить.  Одно изображение сделать и поставить в CSS( через background ) куда требуется. И разметка чище и запросов к серверу меньше. 

  Либо вообще вырезать из макета вместе с этими углами.

[Fantastic]

  А смысл  такую пирамиду городить.  Одно изображение сделать и поставить в CSS( через background ) куда требуется. И разметка чище и запросов к серверу меньше. 

  Либо вообще вырезать из макета вместе с этими углами.

 

Ну вырезал я одной картинкой и было хуже, может backgrount-size поможет, что то про него не говорилось, там где я смотрел. Я и сам такую "пирамиду" не хотел, просто так получше получилось!

 

———————— update ———————————————--

 

Во, почти все решено http://primer-primer.esy.es/и всего за один день. А то пока решить не мог, постоянно отвлекался на него и толком не учился. А сейчас почти все трудные моменты решены.

Edited October 30, 2015 by Fantastic

[Fantastic]

Нужна еще помощь (рановато что ли взялся за резину я) В общем надо что бы картинка в section class = fact-one при уменьшении меняла пропорции, но оставалась шириной 67% и высотой 256px. (из html у нее убирал width=100% и ставил background-size: 100%; не помогло) или это надо только через css прописывать картинку, как и верхнюю, у нее же остается одна высота? (Если не понятно что сказал, вверху в первом сообщении есть ссылка на шаблон, там есть для разрешения 768 и 1280 + описание как нужно)

И еще, если вы посмотрите шаблон, вот под словами Настоящий городок, стоит №1 и там слева и справа полоски, как их можно сделать?