[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: height: 100% для фона
Форум PHP программистов > Дизайн и верстка
SnowWind
1.05.2011 - 10:04
Задаю тегу div - height: 100% который лежит в body, для него так же height: 100%;так вот фон diva заливается на 100% т.е при текущем положении экрана, но если есть ещё содержимое и прокрутка вниз, то там уже не будет заливки, только белый фон. Причём в Опере воспринимается всё правильно и фон получается везде, даже если есть прокрутка вниз, при 100% высоты, а в ФФ всё криво. Как можно решить это?



Спустя 5 минут, 3 секунды (1.05.2011 - 09:09) quickxyan написал(а):
как один из тупых вариантов могу предложить сделать задний фон фиксированый, то есть страница прокручивается, а фон остаеться)
за тупой совет просьба не пинать ногами smile.gif

еще помойму можно через js сделать. там есть свойства вся видимая высота, вся высота....


Спустя 9 часов, 25 минут, 58 секунд (1.05.2011 - 18:35) Krevedko написал(а):
задавай min-height:100%
а высота пусть зависит от контента. Т.е. минимум -по высоте окна, а максимум- в зависимости от контента

Спустя 33 минуты, 47 секунд (1.05.2011 - 19:09) sergeiss написал(а):
Если для ДИВа задать в стиле position:fixed, то он не будет прокручиваться. Не знаю, поможет ли это тебе smile.gif, т.к. не знаю точно, что ты хочешь получить. Но в определенных случаях это очень хорошее решение.

Спустя 5 дней, 21 час, 32 минуты, 58 секунд (7.05.2011 - 16:42) SnowWind написал(а):
Цитата
Если для ДИВа задать в стиле position:fixed, то он не будет прокручиваться. Не знаю, поможет ли это тебе smile.gif, т.к. не знаю точно, что ты хочешь получить. Но в определенных случаях это очень хорошее решение.


Я хочу что бы фон заливался на всю страницу, а не на текущие 100%! А добиться этого никак не могу. Что значит при текущем? А то что 100% это высота экрана браузера, а если есть ещё прокрутка вниз, то там фон он не заливает. Т.к BODY закончился уже выше. СМ. рис.

Спустя 4 часа, 37 минут, 23 секунды (7.05.2011 - 21:20) Winston написал(а):
Фоновая картинка никогда не растягивается. Только если фон однотонный можно прописать
background-repeat: repeat;

Спустя 1 час, 19 минут, 37 секунд (7.05.2011 - 22:39) sergeiss написал(а):
SnowWind - покажи целиком весь код (особенно CSS), который используешь. У меня есть подозрение, что ты кое-что не так делаешь...

Спустя 5 часов, 39 минут, 10 секунд (8.05.2011 - 04:18) SnowWind написал(а):
Вот весь код

<body>
  <div class="conteyner">
   <div class="fon">
    <div class="fon2">  
     <div class="green"> 
   
      <div class="name"><img src="/templates/zabdom/images/site_name.png">
      </div>
        <div class="logo"><img src="/templates/zabdom/images/zabdom_logo.png" alt="Забайкальский дом"></div>
         <div class="doska_menu"><div class="menu">Меню</div></div>
  
           <div class="content">
            <div class="content_fon_round_left-top"></div>
             <div class="content_fon_center_top"></div>
              <div class="content_fon_round_right-top"></div> 
               <div class="content_fon_left"></div>
                <div class="content_fon_center">
  Здесь будет контент   
                </div>
                 <div class="content_fon_right"></div>
                  <div class="content_fon_round_left-bottom"></div>
                   <div class="content_fon_center_bottom"></div>
                    <div class="content_fon_round_right-bottom"></div>
         </div>                   
        </div>
       </div>
      </div>
     </div>
  </body>



/* CSS Document */
html {
margin-top:0px;
margin-bottom:0px;
width: 100%;
height:100%;
}

body {
margin-top:0px;
margin-bottom:0px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 10px solid red;
}


div.conteyner {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
position: relative;
background-color:green;
background-repeat:repeat;
border: 10px solid green;
}



div.fon {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-image:url(../images/fon2.jpg);
background-repeat:repeat;
}

div.fon2 {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-image:url(../images/fon.png);
background-repeat:repeat;
}

div.green {
height: 100%;
width: 1200px;
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom:0px;

}

div.name {
width: 700px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
}

div.logo {
width:1024px;
height:768px;
margin-top:20px;
margin-left: auto;
margin-right: auto;
overflow:visible;
}

div.doska_menu {
width:400px;
height:400px;
margin-top: 10px;
margin-left: 0px;
padding: 0px;
float:left;
background-image:url(../images/doska_menu.png);
background-repeat:no-repeat;
}

div.menu {
margin-top:70px; 
padding: 0px; 
font: normal 30px Monotype Corsiva;
color: 1e72be;
}

div.content {
width:800px;
height:90%;
margin-left:400px;
margin-top:10px;
}

div.content_fon_round_left-top {
float:left;
margin-top: 0px;
margin-left: 0px;
background-image:url(../images/round.png);
padding 0px;
width: 50px;
height:50px;
background-repeat:no-repeat;
}

div.content_fon_center_top {
float:left;
width:700px;
height:50px;
margin-left:0px;
margin-top:0px;
padding:0px;
background-image:url(../images/content_fon.png);
background-repeat:repeat;
}

div.content_fon_round_right-top {
float:left;
width: 50px;
height:50px;
margin-top: 0px;
margin-right: 0px;
padding 0px;
background-image:url(../images/round.png);
background-position: right top;
background-repeat:no-repeat;
}



div.content_fon_left {
float:left;
margin-top: 0px;
margin-left: 0px;
background-image:url(../images/content_fon.png);
padding 0px;
width: 50px;
height:90%;
background-repeat:repeat;
}

div.content_fon_center {

float:left;
background-image:url(../images/content_fon.png);
margin-top: 0px;
margin-left: 0px;
padding 0px;
width: 700px;
height:90%;
background-repeat:repeat;
}

div.content_fon_right {
float:left;
margin-top: 0px;
margin-right: 0px;
background-image:url(../images/content_fon.png);
padding 0px;
width: 50px;
height:90%;
background-repeat:repeat;
}



div.content_fon_round_left-bottom {
float:left;
margin-left:0px;
margin-top:0px;
background-image:url(../images/round.png);
background-position:left bottom;
padding 0px;
width: 50px;
height:50px;
background-repeat:no-repeat;
}

div.content_fon_center_bottom {
float:left;
width:700px;
height:50px;
margin-left:0px;
margin-top:0px;
padding:0px;
background-image:url(../images/content_fon.png);
background-repeat:repeat;
}

div.content_fon_round_right-bottom {
float:left;
background-image:url(../images/round.png);
background-position: right bottom;
margin-top: 0px;
margin-left: 0px;
padding 0px;
width: 50px;
height:50px;
background-repeat:no-repeat;
}



p {
margin:0px; 
text-align:center;
}

a {
display:block;
text-decoration:none;
text-align:center;
text-decoration:none;
}

a:link {
color: 1e72be; 
}
a:visited {
color: 1e72be; 
}
a:hover {
color:ffffff;
}

h1 {
text-align:center;
font: normal 45px Monotype Corsiva;
color:#663300;
}  

div.content p {
margin-left:10px;
margin-right:10px; 
text-align:justify;
font: normal 20px Monotype Corsiva;
}

Спустя 3 дня, 21 минута, 9 секунд (11.05.2011 - 04:40) SnowWind написал(а):
mad.gif кто-нибудь читает нет?!

Спустя 2 часа, 44 минуты, 37 секунд (11.05.2011 - 07:24) inpost написал(а):
SnowWind
Cмотря на всё это думаешь у многих появляется желание помочь? Обычно в 2-3 строчки уже лень, а тут...

Спустя 34 минуты, 34 секунды (11.05.2011 - 07:59) SnowWind написал(а):
huh.gif ну так сами попросили я и вставил
Вся проблема в том, что Боди не растягивается по содержимому нифига!

Спустя 23 часа, 44 минуты, 13 секунд (12.05.2011 - 07:43) SnowWind написал(а):
вопрос остаётся ВОПРОСОМ

Спустя 1 день, 8 часов, 29 минут, 41 секунда (13.05.2011 - 16:13) SnowWind написал(а):
Всё всем спасибо, очень помогли! mad.gif
разобрался кое как, тема закрыта!

Спустя 1 час, 3 минуты, 31 секунда (13.05.2011 - 17:16) inpost написал(а):
SnowWind
Ты от меня получил ответ, что никто помогать не будет. И знаешь, я не предсказатель smile.gif

Спустя 18 часов, 35 минут, 9 секунд (14.05.2011 - 11:51) sergeiss написал(а):
inpost - ты не совсем прав... Я пытался разобраться, и даже писал ответ. Но почему я его не отправил? Не знаю. Был у меня глюк с Оперой, может как раз тогда и пропал ответ, сейчас уж не помню. Знаю только, что я сейчас в деревне, занимаюсь копанием земли и посадкой картошки, лука и всякой другой дребедени. Поэтому думать насчет программирования не хочу сейчас smile.gif
Автору я в личке написал, здесь подтвержу, что на следующей неделе буду в городе и заново продумаю ответ.

Спустя 18 часов, 10 минут, 8 секунд (15.05.2011 - 06:01) SnowWind написал(а):
sergeiss
Цитата
заново продумаю ответ.

плюсану только вот за ЭТИ слова smile.gif

Повторяю, вёрстку полностью переделал, результата добился - тема НЕ АКТУАЛЬНА

Спустя 2 дня, 16 часов, 6 минут, 20 секунд (17.05.2011 - 22:08) sergeiss написал(а):
Пусть ты и сделал, но понял ли причину? А если понял, то объясни :)

Я вот что нашел: если убрать строки
      <div class="name"><img src="/templates/zabdom/images/site_name.png">
      </div>
        <div class="logo"><img src="/templates/zabdom/images/zabdom_logo.png" alt="Забайкальский дом"></div>

то тогда всё встаёт на свои места. Всё красиво, всё тянется так, как (вроде бы) и должно тянуться.

Как я понял, эта хреновина просто "выталкивает" то, что находится ниже.

Да и вообще. В целом не правильный подход. Ты используешь ДИВы как простую таблицу. Так не проще ли было сделать "табличный" дизайн? Либо - используй ДИВы более правильно. Например, позиционируй их, указывай, где им разместиться.

Спустя 8 часов, 28 минут, 8 секунд (18.05.2011 - 06:36) SnowWind написал(а):
Да почему же, дивы в основном нужны мне лишь для задания фона 1ый задаёт подложку под швы, второй задаёт фон из картинки с прозрачными краями. Ещё один див нужен что бы задать ширину содержимому в 100 пикс и размещён он по центру. Ну как бы вот так, раньше никогда дивами не делал, это первый опыт.
А почему в том варианте было всё криво, я так и не понял unsure.gif
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.