Консультации и оценка качества html-вёрстки (бесплатно)

Как прижать футер к низу страницы, даже если мало контента - это просто:
<div id="container">
<div id="main">
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="pustoy"></div>
</div>
<div id="footer"></div>
</div>

#main {
height:100%;
margin: 0 0 -150px; /*150px это высота футер*/
}
#pustoy {
clear:both;
height:200px;
}
А остальное как у тебя, получается растягиваешь блок main на всю высоту и задаешь ему отрицательный маргин, что б футер залез на него. А див #pustoy это что бы при увеличении контента, он не залазин под футер, кстати это кустарный способ, можно как-то с помощью CSS, псевдо-класса :after, но я не помню как.
Кстати очень рекомендую:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
 
Может тупой вопрос, но:
Не пойму как это может быть 1-ый 20% 2-ой 80% в сумме 100%, еще 20 px откуда берутся?
И меня тоже интересует, откуда должны браться эти 40px ?
Как говорится: "Impossible is nothing"© Если б не было отступа, не было б и задачи :)
Скажу что решение очень простое, 7 declarations, работает даже в IE6.


А это случайно не ваше объявление висит на rabota.ua...
Да, моё. Ещё на rabota.kharkov.ua, на ХФ, Хабре и МоёмКруге. Вакансия точно будет актуальна до конца недели, а там если и дальше будут резюме идти, подождём. Пока 25 писем за три дня.


Как сделать чтобы футер был внизу если содержимое главной колонки не заполняет всю страницу.
То есть чтобы чтобы оба столбца одинаково вытягивались до самого низа окна браузера.
  • Footer прижатый к низу:
    Тільки зареєстровані користувачі бачать весь контент у цьому розділі
  • Колонки одной высоты - тут куча вариантов, выбирайте что вам больше нравится:
    • труъ колонки через display: table-cell
    • Тільки зареєстровані користувачі бачать весь контент у цьому розділі
    • Тільки зареєстровані користувачі бачать весь контент у цьому розділі
    • если известно что один блок всегда больше другого, то меньший позиционируется абсолютно с top:0 / bottom:0 и таким образом его высота=высота блока родителя=высота соседней колонки
    • тысячи их, кстати в тему:
      Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Ах, да, ещё вариант колонок для эстетов:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
 
Почему нет варианта для футера прижатого к низу с не фиксированной высотой?
 
Как говорится: "Impossible is nothing"© Если б не было отступа, не было б и задачи :)
Скажу что решение очень простое, 7 declarations, работает даже в IE6.

Я интуитивно догадываюсь, но хотелось бы все же уточнить:
эти 40px берутся от процентных колонок или от области просмотра берутся 40px а потом оставшееся пространство делится на 20% и 80%
 
Как говорят - правильно заданный вопрос = половина ответа :)
 
Не пинайте сильно, подзабыл HTML...
Нужно вывести текст в центре экрана для любого браузера
Делаю так, но выводится в верху, по центру:
HTML:
<table width="100%" height="100%" border="0">
  <tr>
    <td width="100%" height="100%" align="center" valign="middle" bgcolor="#00FF00">Текст</td>
  </tr>
</table>
 
Если размеры текста известны:
HTML:
<div style="position: absolute; top: 50%; left: 50%; margin-left: минус половина ширины блока с текстом; margin-top: минис половина высоты">text</div>

Если нет - то: "top: 45%; left: 0; right: 0; text-align: center;"
 
Спасибо, а как такую таблицу отцентрировать?
HTML:
<div style="position: absolute; top: 40%; left: 0; right: 0; text-align: center;">
<table border="1" bgcolor="#00FF00">
  <tr><td>sssssssssssssssssssssssssss</td></tr>
  <tr><td> </td></tr>
  <tr><td>ssssssssssssssssss</td></tr>
  <tr><td> </td></tr>
  <tr><td>ssssssssssssssssssssss</td></tr>
  <tr><td>ssssssssssssssssss</td></tr>
  <tr><td> </td></tr>
  <tr><td>ssssssssssssssssssssss</td></tr>
  <tr><td>ssssssssssssssssss</td></tr>
  <tr><td> </td></tr>
  <tr><td>ssssssssssssssssssssss</td></tr>
  <tr><td>ssssssssssssssssss</td></tr>
  <tr><td> </td></tr>
  <tr><td>ssssssssssssssssssssss</td></tr>
</table>
</div>
по горизонтали можно добавить <table align="center",
но вот по вертикали уползает вниз
 
Например так:

HTML:
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html,body {height: 100%;}
  /*]]>*/
  </style>
</head>
<body>
    <div style="display: table; height: 100%; margin: 0 auto;">
        <div style="display: table-cell; vertical-align: middle;">
            <table bgcolor="#00FF00" border="1">
              <tbody><tr><td>sssssssssssssssssssssssssss</td></tr>
              <tr><td> </td></tr>

              <tr><td>ssssssssssssssssss</td></tr>
              <tr><td> </td></tr>
              <tr><td>ssssssssssssssssssssss</td></tr>
              <tr><td>ssssssssssssssssss</td></tr>
              <tr><td> </td></tr>
              <tr><td>ssssssssssssssssssssss</td></tr>
              <tr><td>ssssssssssssssssss</td></tr>

              <tr><td> </td></tr>
              <tr><td>ssssssssssssssssssssss</td></tr>
              <tr><td>ssssssssssssssssss</td></tr>
              <tr><td> </td></tr>
              <tr><td>ssssssssssssssssssssss</td></tr>
            </tbody></table>
        </div>
    </div>
</body>
</html>
 
все таки второй div пришлось ставить! А я ломал голову с одним...

Спасибо!
 
Я привёл решение в общем виде.
Расскажите больше - фиксирована или нет высота таблицы, фиксирована или нет ширина, внутри чего эта таблица будет располагаться, будут ли её данные динамически меняться... и можно будет попробовать оптимизировать решение.
 
я просто новичек в этом деле
вот собственно задача,
Сделать два резиновых столбца.
Первый - 20% по ширине, второй - 80%, между ними расстояние 20 пикселей, расстояния от краёв страницы слева и справа 10 пискелей.
Без использования таблиц и javascript.
вот я не пойму если 20%+80% как на экрене влезит еще 20 пикселей, если делать например один див обтекает второй, шириной 20%+80% то див с 20пикс. не влазит
может както не понятно описал проблему, извеняйте
 
А такой вариант колонок по 20% и 80% с полями посмотрите пожалуйста:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі
 
А такой вариант колонок по 20% и 80% с полями посмотрите пожалуйста:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Давайте разберём задачку после закрытия вакансии :)
 
Почему ? о_О Вы вроде говорили что уже достаточно кандидатов.
Может тогда в личку ?
Я говорил что отзывов на вакансию очень много, но выше среднего - пока пару человек, вот допроверяю все ответы и буду закрывать вакансию.
 
вакансия актуальна?
 
да, актуальна, т.к. физически не успеваю всё проверить:) очень уж много откликов, я ожидал 20-30, но не 120-130 :)
 
Назад
Зверху Знизу