Форум hotibo.ru

Artemius · #1 24.02.2011 01:41

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

Код:


        
            
            
Об Академии | Образовательные программы | Исследования | Проекты и партнерства | Студенческая жизнь

            
        
        sdf

Код:

*  {
   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)

tapazukk · 24.02.2011 10:01

Не очень ясна задача,что требуется.Но вот два варианта:
-Попробуйте убрать 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)

Artemius · #3 24.02.2011 17:35

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

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

Artemius · #4 24.02.2011 22:17

Еще одна проблема: 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;}

tapazukk · #5 25.02.2011 00:28

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

Artemius · #6 25.02.2011 00:40

Спасибо.

Про css читаю

Artemius · #7 25.02.2011 16:55

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

tapazukk · #8 25.02.2011 21:38

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

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

Artemius · #9 25.02.2011 22:28

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

tapazukk · #10 25.02.2011 23:43

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

Код:

вот




  как вариант
  кликни меня
  
   кликнул ;)
    
      
      name
      

      
      

      message

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

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

Форум hotibo.ru

#1 24.02.2011 01:41

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

Код:

Код:

#2 24.02.2011 10:01

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

Код:

#3 24.02.2011 17:35

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

#4 24.02.2011 22:17

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

Код:

#5 25.02.2011 00:28

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

#6 25.02.2011 00:40

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

#7 25.02.2011 16:55

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

#8 25.02.2011 21:38

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

#9 25.02.2011 22:28

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

#10 25.02.2011 23:43

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

Код:

как вариант

Board footer