new-dev

как сделать блок с текстом на фоне картинки... У меня header-bg большой, и если я его ставлю center top , отоброжается всё ок по экрану как надо но в высоту получается высокий и отступ большой до header-bg , мне надо текст поднять, как сделать чтоб он виден был на фоне бг? либо что можно с бг сделать? .bg-header { position: relative; height: 784px; width: 100%; background: url(/img/titulinis/header_bg.jpg) center top no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } http://prntscr.com/3hvbm6 http://prntscr.com/3hvbkf если делаю контент делаю relative or absolute , и маргин топ -20% встает как надо, надо экран сужаю когда начинает бг хэдера толкает вниз контент, перепробовал много что не вижу вариантов как решить это

Доброго времени, В общем объясню вкратце что да как) Есть сайт в background у хэдера. Форма его одинаковая на всех страницах с одним отличием что на последующих в отличии титульного добавляется картинка какая либо. При смене страницы я буду подгружать контент новый а верх и подвал остаются как-бы тот-же. Только что бг хэдера заменить надо. Я начал делать, с помощью jquery, нажимаю на меню если это тот раздел что надо я меня бэкграунд хедера на тот что надо. Но проблема появилась что обновить нажмёшь всё падает. Есть вариант использовать куки. Но в javascript, я с этим не сталкивался ещё мануал глянул больно что-то запутано) Может кто подскажет примерчик приведёт. Либо какой-то иной вариант реализации. $(function(){ $('ul.header-menu li').click(function() { var header = $('header'); if($(this).hasClass('menu-item-6')) { $('header').css('background', 'url(../img/vidiniai/apie_studija/header_bg.jpg) center top no-repeat'); $('.about-us').css('display', 'none'); } else { $('header').css('background', 'url(../img/header/bg-header.png) center top no-repeat'); } }); });

function.vv.si/indexx.html вот тут можно посмотреть как у меня сейчас сделано , сузив экран немного) надо сделать border(left,right) и как на картинке сверху как бы уберается часть бордера под этим разделом)

примерчик как это сделать)) что надо для этого?)

Вобщем есть оригинал как надо http://prntscr.com/3ggxiz , а вот как у меня получается http://prntscr.com/3ggwzo как доверстать до оригинала всё) мож кто что подскажет) могу код скинуть

спасибо

не весь блок фотка заливает отступы по краям есть не большие но есть растяни картинку почему-то тоже самое делаю картинка вылазит за рамку, вы вроде overflow: hidden , не используете у вас прячется в чём трабл?

не весь блок фотка заливает отступы по краям есть не большие но есть

что там круглить, если там и так картинка рамка ? потому что у меня есть картинки, а не используя их точно такую не знаю как сделать

http://function.vv.si/pic.7z

http://www.sendspace.com/file/shvs0m - картинки и хтмл файл

Ребята как сделать чтобы картинка не выступала за рамку, не получается наколдовать ни как( <div class="our-news-blocks"> <div class="news-block"> <div class="news-img-1"></div> </div> </div> .news-block { background:url(/img/titulinis/naujienos/naujienu_frame_pic.png) no-repeat; height:166px; overflow:hidden; } .news-block:hover { background:url(/img/titulinis/naujienos/naujienu_frame_pic_hover.png) no-repeat; height:166px; } .news-img-1 { background:url(/img/titulinis/naujienos/naujiena1.jpg) top center no-repeat; background-size:containt; height:145px; } http://prntscr.com/3gdhqn сверху как надо снизу как получается

Такое без яваскрипта осуществимо? Если кому не трудно набросайте шаблон пожайлуста такой менюшки картинка почему не подгружается поэтому вот сыллка на неё. http://pixs.ru/showimage/menujpg_3568372_11922901.jpg

cпасибо) много полезной информации придётся усвоить)) будем работать))

Вы не поняли. Перетаскивание height: 100%; c .content на .main ничего не даст. Потому что предок у .main боди, а для боди не задана высота, и опять блоку .main неоткуда брать высоту в процентах. КОГДА нужна высота окна для всего для обертки, то идет с самого начала- html, body {height: 100%}. потом только .wrap или в вашем случае .main-у указывать {height: 100%}. То есть должна быть цепочка, html берет 100%-ю высоту у окно просмотра, а body у html, а обертка у боди. Но, это когда нужно, а в вашем случае для чего вы берете высоту - 100%, у вас контента и так на две высоты окна? Спасиба, за столь развёрнутый ответ

синие блоки переделал. А схема эта та что Как мы работаем и под картинками? Её стоило через css делать? мудрёжки ведь много а картинка весит мизер? 1. неуместно ставите размеры. Значит не знаете как форматируется блочные элементы. Например, ширина блока .content равна 1350px, значит у потомков если вы не указываете паддингов, бордеров, маргинов такая же. не нужно всем потомкам указывать такую же ширину. По поводу высоты, здесь иная картина, нужно указать предку высоту, чтобы потомку можно было указать высоту в процентах. Поэтому если хотите указать блоку .content высоту 100%, то задайте высоту блоку .main. 2. не правильно используете позиционирование. 3. блоку с абсолютным позиционированием до лампочки на другие блоки, поэтому ему не нужно писать clear: both. 4. http://f6.s.qip.ru/tOAcrHNB.png Спасибо, за объяснения) просветлело маленько? как проверять по поводу сьежает ли верстка? потому что у себя смотрел с ужал экран и в % соотношении всё ок было? вроде поменял так как понял, скролл не проподает

не один в один, также шрифт везде использовался один. Почему скролл появляется?

блин странно, в мозиле, хроме и ие смотрю у себя всё ок ничего не сьежает при уменьшении экрана в % и с ужении, на 2 компе смотрю тоже всё ок Где именно табличную вёрстку не уместно применил? Что такое рыба?)) Формы не сделал да каюсь) упор на саму вёрстку делал) Текст в одном месте поправил где был большими указан. Лорем - использовал так как сайт делал в качестве попрактиковаться, и тратить время на ввод текста попусту не хотелось. Орфография - грамматика согласен))

Доброго времени)) Вобщем верстаю, читаю, видео смотрю, вопросы задаю)) Пытаюсь постигнуть сакральные знание веб девелоперов) Прошу оценить труды, рукоделия)) Готов принять любую критику. http://function.vv.si