Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






#1 24.02.2011 01:41

Artemius
Новичок
Зарегистрирован: 15.02.2011
Сообщений: 8

Не тянется заливка

Вот столкнулся с проблемой: http://taom.ru/www/taom/css-version/index-2.html серые полоски не растягиваются вниз.


Код:

*  {
   margin:  0;
   padding:  0;}
html{
       height:100%;}
body{
    margin:0;
      padding:0;
      height:auto !important;
     height:100%;
     min-height:100%;
       background-color:#eee;
    font: 8pt "Tahoma", Trebuchet MS;}
#main{
    width:778px;
    margin:0 auto;
    padding:0 16px; /* Отступы, сквозь которые видно тени */
    background:url(img/content-bg.png) repeat-y;}
#header{
    height:142px;
    background:url(img/bg-top.png) repeat-x;}
#name{
    float:left;
    position:absolute;
    background:url(img/taom.png) no-repeat;
    top:38px;
    width:417px;
    height:50px;}
#logo{
    float:right;
    background:url(img/logo.png) no-repeat;
    margin:0 16px 0 0;
    width:209px;
    height:107px;}
#menu{
    position:absolute;
    top:117px;
    left:203px;
    font-size:9pt;
    color:#FFF;}
#menu a{
    color:#FFF;
    text-decoration:underline;}
#menu a:hover{
    color:#FFF;
    text-decoration:none;}
#photo{
    position:absolute;
    top:142px;
    background:#719fd4;
    width:778px;
    height:165px;}

Не подскажите в чём подвох!?

Отредактированно Artemius (24.02.2011 22:32)

Нет на форуме

 

#2 24.02.2011 10:01

tapazukk
Опытный
Зарегистрирован: 16.01.2010
Сообщений: 162

Re: Не тянется заливка

Не очень ясна задача,что требуется.Но вот два варианта:
-Попробуйте убрать  position:absolute; у фотографии.
Но,похоже, у вас задумка была в другом ... растянуть контент?
Тогда так:

Код:

*  {
   margin:  0;
   padding:  0;}
html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
       background-color:#eee;
    font: 8pt "Tahoma", Trebuchet MS;}
#main{
    width:778px;
    margin:0 auto;
    padding:0 16px;
    background:red url(content-.png) repeat-y;
     position: relative;
  min-height: 100%;
}
* html  #main {
  height: 100%;
}
#header{
    height:142px;
    background:url(bg-top00.png) repeat-x;}
#name{
    float:left;
    position:absolute;
    background:url(taom0000.png) no-repeat;
    top:38px;
    width:417px;
    height:50px;}
#logo{
    float:right;
    background:url(logo0000.png) no-repeat;
    margin:0 16px 0 0;
    width:209px;
    height:107px;}
#menu{
    position:absolute;
    top:117px;
    left:203px;
    font-size:9pt;
    color:#FFF;}
#menu a{
    color:#FFF;
    text-decoration:underline;}
#menu a:hover{
    color:#FFF;
    text-decoration:none;}
#photo{
    position:absolute;
    top:142px;
    background:#719fd4;
    width:778px;
    height:165px;}

Осталось только подправить нестыковки в header, рекоммендую обойтись без абсолютного позиционирования и жестко заданных размеров (это так ..имхо)

ЗЫ:Пользуйтесь поиском по сайту и форуму,похожие проблемы обсуждались не однократно.

Отредактированно tapazukk (24.02.2011 10:03)

Нет на форуме

 

#3 24.02.2011 17:35

Artemius
Новичок
Зарегистрирован: 15.02.2011
Сообщений: 8

Re: Не тянется заливка

Большое спасибо! Убрал position:absolute и серые полоски стали растягиваться. Это мне и нужно было.

Прошу прощения за столь глупый вопрос (

Нет на форуме

 

#4 24.02.2011 22:17

Artemius
Новичок
Зарегистрирован: 15.02.2011
Сообщений: 8

Re: Не тянется заливка

Еще одна проблема: http://taom.ru/www/taom/css-version/index-2.html Когда делаешь размер окна меньше, текст в меню, начинает съезжать. Что я сделал не так!?

Код:

*  {
   margin:0;
   padding:0;}
html{
       height:100%;}
body{
    margin:0;
      padding:0;
      height:auto !important;
     height:100%;
     min-height:100%;
       background-color:#eee;
    font: 8pt "Tahoma", Trebuchet MS;}
#main{
    width:778px;
    margin:0 auto;
    padding:0 16px; /* Отступы, сквозь которые видно тени */
    background:url(img/content-bg.png) repeat-y;}
#header{
    height:142px;
    background:url(img/bg-top.png) repeat-x;}
#name{
    float:left;
    position:absolute;
    background:url(img/taom.png) no-repeat;
    top:38px;
    width:417px;
    height:50px;}
#logo{
    float:right;
    background:url(img/logo.png) no-repeat;
    margin:0 16px 0 0;
    width:209px;
    height:107px;}
#menu{
    position:absolute;
    top:116px;
    left:200px;
    font: bold 8pt "Tahoma", Trebuchet MS, sans-serif;
    color:#FFF;}
#menu a{
    color:#FFF;
    text-decoration:underline;}
#menu a:hover{
    color:#FFF;
    text-decoration:none;}
#photo{
    top:142px;
    background:url(img/photo-01.jpg) no-repeat;
    width:778px;
    height:243px;}

Нет на форуме

 

#5 25.02.2011 00:28

tapazukk
Опытный
Зарегистрирован: 16.01.2010
Сообщений: 162

Re: Не тянется заливка

Дело в том что у вас в меню применяется правило  position:absolute; и оно позиционируется относительно body а не блока контейнера, для того что бы оно никуда не уезжало задайте для #main  position:relative
(дерзайте и реккомендую что нибуть почитать про свойства css и о стандартах)

Нет на форуме

 

#6 25.02.2011 00:40

Artemius
Новичок
Зарегистрирован: 15.02.2011
Сообщений: 8

Re: Не тянется заливка

Спасибо.

Про css читаю smile

Нет на форуме

 

#7 25.02.2011 16:55

Artemius
Новичок
Зарегистрирован: 15.02.2011
Сообщений: 8

Re: Не тянется заливка

Может быть не совсем в тему, но вы не знаете как можно реализовать выпадающую форму как на: http://extendio.ro/ Ссылка: Want to say "Hello"?

Нет на форуме

 

#8 25.02.2011 21:38

tapazukk
Опытный
Зарегистрирован: 16.01.2010
Сообщений: 162

Re: Не тянется заливка

можно осуществить на javascript
но здесь не тот раздел форума, поэтому моя магия бессильна smile

Отредактированно tapazukk (25.02.2011 21:43)

Нет на форуме

 

#9 25.02.2011 22:28

Artemius
Новичок
Зарегистрирован: 15.02.2011
Сообщений: 8

Re: Не тянется заливка

Я уже понял, что это делается на яваскрипте. Но, что-то найти не могу его.

Нет на форуме

 

#10 25.02.2011 23:43

tapazukk
Опытный
Зарегистрирован: 16.01.2010
Сообщений: 162

Re: Не тянется заливка

Ну можно вот так, глянул на тод код, и ничего там не понял, предлагаю вот такой вот вариант:

Код:

вот



как вариант

кликни меня
кликнул ;)




Увы не дока вэтих вопросах, могу предложить только переделаный скрипт выпадающего меню. Лучше создать отдельную тему. Т.к. решенеие не совсем верное для поставленной задачи.

Отредактированно tapazukk (26.02.2011 00:57)

Нет на форуме

 

Board footer