Как прижать текст в DIV к нижней части родительского DIVa?

Тема в разделе "Веб-дизайн", создана пользователем dandandan, 19 апр 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    975
    Симпатии:
    255
    Возник вопрос как прижать текст в DIV к нижней части родительского DIVa?

    Вот кусочек текста:
    В данном коде Div с текстом Ссылка нужно прижать к нижней части <div class="header">
    Сейчас кусок Css имеет вот такой вот вид:
    И еще вопросик. Почему-то у меня в .100_persent_white Текст не центрируется по центру. что не так? :)
     
  2. k16avto

    k16avto Постоялец

    Регистр.:
    4 апр 2009
    Сообщения:
    57
    Симпатии:
    3
    вот примерно так

    HTML:
    
    <html>
    <head>
    <style type="text/css">
    .header{
    width:100%;
    background:url(images/header.jpg) repeat-x;
    height:234px;
    float:left;
    } 
    .persent_white_left{
    width:50%;
    float:left; 
    text-align:left;
    }
    .persent_white_right{
    width:50%;
    float:right;
    text-align:right;
    } 
    .persent_white{
    width:100%;
    margin-top: 195px;
    text-align:center;
    float:left;
    }
    
    </style>
    </head>
    <body>
    <div class="header">
    <div class="persent_white_left">{verh}</div>
    <div class="persent_white_right">Добавить в избранное</div>
    
    <div class="persent_white">Ссылка</div>
    </div>
    </body>
    </html>
    
    и текст ссылка центрируется гуд ;)
     
  3. alexzander69

    alexzander69 Постоялец

    Регистр.:
    27 май 2008
    Сообщения:
    95
    Симпатии:
    46
    для хедера

    position: relative;


    и для нижнего дива


    position: absolute;
    bottom: 0;
     
  4. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    975
    Симпатии:
    255
    Ни первый, ни второй, ни оба сразу не подошли.

    Пример k16avto тоже не дал нужного эффекта.
    Получается, что
    Первые 2 дива по 50% шириной располагаются в одну строку (так и нужно),
    Нижний див, который нужно к низу прижать книзу родительского div'a находится слева под дивом шириной в 50%.
     
  5. k16avto

    k16avto Постоялец

    Регистр.:
    4 апр 2009
    Сообщения:
    57
    Симпатии:
    3
    и не подойдут. каждый способ решает свою задачу. иначе каша получается.

    ниче не понимаю. именно этот кусок кода у меня в FF, Opera, IE6, сафири и хром отображаются гуд.
    что выводит {verh}? весь код с {verh} в студию. телепаты в отпуске. и вообще хоть бы скрин или схему того что в итоге должно получиться.
     
  6. cocacola

    cocacola Постоялец

    Регистр.:
    4 апр 2006
    Сообщения:
    137
    Симпатии:
    48
    ТС покажи на изображении чего нужно!
     
  7. alexzander69

    alexzander69 Постоялец

    Регистр.:
    27 май 2008
    Сообщения:
    95
    Симпатии:
    46

    Все работает, ну за исключением может быть ie5.5
    Проверь имена селекторов

    HTML:
    
    
    
      <style type="text/css">
    
      .header{
          width:100%;
          background:url(images/header.jpg) repeat-x;
          height:234px;
          float:left;
          color:#FFFFFF;
         
         
          position: relative;
      }
      .half_persent_white_left{
          width:50%;
          float:left;
          vertical-align:top;
          text-align:left;
      }
      .half_persent_white_right{
          width:50%;
          float:right;
          vertical-align:top;
          text-align:right;
      } 
      .full_persent_white{
          width:100%;
          vertical-align:bottom;
          text-align:center;
          float:left;
          
          
          position: absolute;
          bottom: 0;
      } 
    
    
      </style>
    
    
    </head>
    
    <body>
      <div class="header">
        <div class="half_persent_white_left">
          {verh}
        </div>
    
        <div class="half_persent_white_right">
          Добавить в избранное
        </div>
    
        <div class="full_persent_white">
          Ссылка
        </div>
      </div>
    
    
    Добавлено через 3 минуты
    Я имел ввиду, что селекторы CSS могут содержать буквы A-Z, числа 0-9, и дефис, но начинаться должны только с буквы,
    потому твой код не читается браузером
     
    dandandan нравится это.
  8. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    975
    Симпатии:
    255
    Понял в чем моя ошибка (селекторы начинаются с цифр). Вечером попробую.
     
  9. k16avto

    k16avto Постоялец

    Регистр.:
    4 апр 2009
    Сообщения:
    57
    Симпатии:
    3
    О_о я даж и не подумал что ты так и используеш классы. учту на будующее что некоторые еще и допускают такие критичные ошибки. я то убирал цифры в классах...
     
  10. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    975
    Симпатии:
    255
    Можно сказать, что это мой первый опыт в верстке дивами.
     
Статус темы:
Закрыта.