[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Проблема со структурой дизайна!
Форум PHP программистов > Дизайн и верстка
sodroot
18.04.2011 - 17:15
Решил попробовать сверсать дизайн, столкнулся с проблемой... (дизайн делаю в dreamweaver... удобно)

Не могу прижать футер к низу окна....

Вот скрин чтобы долго не объяснять что не получается :rolleyes:
http://s001.radikal.ru/i194/1104/83/7faaaaceafac.png

Вот код HTML:
Свернутый текст
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<link href="css/div_style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td width="487"><img src="../Auto/images/logo.png" width="300" height="100" class="logo"></td>
    <td colspan="2"><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td height="90" align="center"><img src="../Auto/images/baner_200x80.png" width="200" height="80"></td>
        <td height="90" align="center"><img src="../Auto/images/baner_200x80.png" width="200" height="80"></td>
        <td height="90" align="center"><img src="../Auto/images/baner_200x80.png" width="200" height="80"></td>
        <td height="90" align="center"><img src="../Auto/images/baner_200x80.png" width="200" height="80"></td>
        <td height="90" align="right"> </td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="46" colspan="3" align="left" valign="bottom" class="menu"><table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="36" align="right" valign="top" class="menu_active_left"><img src="../Auto/images/m3.jpg" alt="" width="6" height="6"></td>
              <td height="36" align="center" valign="middle" class="menu_active_center">Объявления</td>
              <td align="left" valign="top" class="menu_active_right"><img src="../Auto/images/m4.jpg" alt="" width="6" height="6"></td>
            </tr>
          </table></td>
          <td><table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="4" height="100%"> </td>
              <td class="menu_neactive_center" height="36">Подать объявление</td>
              <td width="4"> </td>
            </tr>
          </table></td>
          <td><table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="4" height="100%"> </td>
              <td class="menu_neactive_center" height="36">Правила</td>
              <td width="4"> </td>
            </tr>
          </table></td>
          <td><table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="4" height="100%"> </td>
              <td class="menu_neactive_center" height="36">Обратная связь</td>
              <td width="4"> </td>
            </tr>
          </table></td>
        </tr>
    </table></td>
  </tr>

  <tr>
    <td class="content" height="100%" colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="100%" valign="top" class="snippet"><table cellspacing="0" cellpadding="0">
            <tr>
              <td width="160" rowspan="2" class="snippet_image">no photo</td>
              <td height="40" class="snippet_title"><a href="./">1996 Audi A6</a>, Кишинёв</td>
              <td width="10%" height="40" align="center" class="snippet_cena">6 100 €</td>
            </tr>
            <tr>
              <td class="snippet_text" colspan="2" valign="bottom"><p>210000 км, хорошее состояние, 1.6 л., механика, бензин, передний привод<br />
                <font color="#737373">16 апреля 2011 г.</font></p></td>
            </tr>
          </table>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" valign="bottom">1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ... 55</td>
              </tr>
            </table>
          <p> </p></td>
          <td height="100%"><table width="340" cellpadding="0" cellspacing="0">
            <tr>
              <td width="340" height="40" class="search_title">Поиск объявлений</td>
            </tr>
            <tr>
              <td width="340" class="search_text">210000 км, хорошее состояние, 1.6 л., механика, бензин, передний привод</td>
            </tr>
          </table></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td class="footer_tags" colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="footer_tags_text"><strong><font size="4" color="#737373">Ключевые фразы:</font></strong><br>
          <strong>auto md</strong>, <em>www auto md</em></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="50" colspan="3" class="footer_left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="60%" height="36" class="footer_1"><a href="/">AutoMD.Su</a> © 2011, Все права защищены.</td>
        <td width="40%" height="40" align="right" class="footer_2"> </td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Вот код CSS:
Свернутый текст
@charset "utf-8";
HTML, body {
	font-family: Tahoma, sans-serif;
	background: #FFF;
	margin: 0;
	padding: 0;
	color: #000;
	height: 100%;
}

a, a:visited {
color: #217da2;
text-decoration: none;
}

a:hover {
color: #217da2;
text-decoration: underline;
}

.logo {
	padding-left: 20px;
}

.menu {
	background-image:url(../../Auto/images/bg_menu.jpg);
	repeat: repeat-x;
	border-bottom: 4px solid #217da2;
	padding-left: 20px;
}

.menu_active_left {
	background-color: #217da2;
	width: 4px;
}

.menu_active_center {
	background-color: #217da2;
	padding-left: 10px;
	padding-right: 10px;
	color: #FFF;
}

.menu_active_right {
	background-color: #217da2;
	width: 4px;
}

.menu_neactive_center {
	padding-left: 10px;
	padding-right: 10px;
	color: #217da2;
}

.content {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.snippet {
	padding-right: 20px;
}

.snippet_image {
	padding: 5px;
	border: 1px solid #217da2;
}

.snippet_title {
	border-bottom: 1px solid #217da2;
	padding-left: 10px;
	color: #737373;
	padding-top: 0px;
}

.snippet_title h4 {
	font-weight: normal;
}

.snippet_cena {
	border-bottom: 1px solid #217da2;
	margin-left: 10px;
	margin-right: 10px;
	color: #217da2;
	font-weight: bold;
}

.sidebar {
	padding-right: 20px;
	margin-right: -200px;
}

.snippet_text {
	padding-left: 10px;
	padding-rught: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 12px;
}

.search_title {
	border-bottom: 1px solid #217da2;
	padding-left: 10px;
	padding-right: 10px;
	color: #737373;
	font-weight: bold;
}

.search_text {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 12px;
}

.footer_tags {
	border-top: 1px solid #217da2;
}

.footer_tags_text {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 12px;
	height: auto;
}

.footer_tags_text strong, .footer_tags_text em {
	color: #217da2;
}

.footer_left {
	background-color: #f0f0f0;
	border-top: 4px solid #217da2;
}

.footer_1 {
	padding-left: 20px;
	font-size: 12px;
}

.footer_2 {
	padding-right: 20px;
	font-size: 12px;
}




Спустя 14 минут, 57 секунд (18.04.2011 - 16:30) Zerstoren написал(а):
Огорчу Вас.
Футер прижать к дну не когда не получится, чтоб он всегда был на дне страницы, а не снизу экрана.

А еще вам руки оторвать нужно. Не верстайте на таблицах!
Учитесь с самого начала верстать на div`ах

Таблицы гауно. Как для чтения так и для поисковиков.

А вообще есть Гугл

Спустя 5 минут, 45 секунд (18.04.2011 - 16:36) sodroot написал(а):
Zerstoren, Я пробовал те варианты что выходят в гугле, не получается, у меня не такая структура...... Мне не нужно чтобы он всегда был в низу, мне нужно чтобы при малом контенте он не поднимался выше а упирался в низ окна, при большем количестве футер уйдётв в скрол....
Помогите пожалуйста...

Спустя 1 минута, 7 секунд (18.04.2011 - 16:37) sharki написал(а):
Zerstoren
Всё можно прижать smile.gif

Вот например можно глянуть тут http://csstemplater.com/

Спустя 7 минут, 22 секунды (18.04.2011 - 16:44) Zerstoren написал(а):
Хммм... Пашет.

Няяяя!

Вот это я тоже искал)))
Сегодня установлю на свой сайтец)

Но чет логический разбор стилей мне не помог понять почему он прижат.
UPD

Вот причина)

#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

Спустя 8 секунд (18.04.2011 - 16:44) sodroot написал(а):
sharki, Я не знал с чего начать, мне показалось что таблицами проще...
Там пример в div'ах, ладно переделаю попробую на div'ах построить....
Спасибо за совет: Zerstoren, sharki.

Спустя 2 минуты, 36 секунд (18.04.2011 - 16:47) sodroot написал(а):
Zerstoren

"Но чет логический разбор стилей мне не помог понять почему он прижат."

Я читал инфу что там зафисит от DOCTYPE.... При 4.01 не получится прижать.........

Буду делать дивами...... smile.gif

Спустя 39 секунд (18.04.2011 - 16:47) Zerstoren написал(а):
Поставьте на table
style="min-height:100%;"

Но для ИЕ старых это не запашет)

Спустя 16 секунд (18.04.2011 - 16:48) inpost написал(а):
sodroot
Информативность сайта надо повышать, а не футер прижимать ко дну smile.gif

Спустя 15 минут, 36 секунд (18.04.2011 - 17:03) sodroot написал(а):
inpost, Это я тоже предполагал...
Но возьмём допустим правила, там не хватает текста чтобы до низа окна достать, что делать?
Не парьтесь попробую переверстать дивами.... smile.gif

Спустя 1 минута, 16 секунд (18.04.2011 - 17:05) Zerstoren написал(а):
Цитата (sodroot @ 18.04.2011 - 14:03)
inpost, Это я тоже предполагал...
Но возьмём допустим правила, там не хватает текста чтобы до низа окна достать, что делать?
Не парьтесь попробую переверстать дивами.... smile.gif

Будут траблы, спрашивай)

Наведем порядок в голове разработчиков, а то тейбл верстальщики уже достали.

Спустя 9 минут, 26 секунд (18.04.2011 - 17:14) sodroot написал(а):
Zerstoren Ок, понял... smile.gif

Спустя 5 часов, 57 секунд (18.04.2011 - 22:15) sodroot написал(а):
Zerstoren, Кинь мне в личку пожалуйста свою асю или скайп....
Есть пару вопросов по построению дизайнов, был бы очень благодарен помощи профессионалов... smile.gif

Спустя 24 минуты, 56 секунд (18.04.2011 - 22:40) inpost написал(а):
sodroot
А чем тебе не подходит у нас тут спрашивать? Или ты думаешь, что если он помог в одном вопросе, то эксперт во всех?! smile.gif

Спустя 7 минут, 10 секунд (18.04.2011 - 22:47) sodroot написал(а):
inpost, можешь и ты помочь мне, не удобно создавать тему на форуме....
Я хотел бы задать пару вопросов по построению (конструкции) дизайнов....

Спустя 29 минут, 23 секунды (18.04.2011 - 23:16) inpost написал(а):
sodroot
Я даю консультации только на форуме и только в темах, которые мне интересны (бесплатно).

Спустя 2 часа, 25 минут, 16 секунд (19.04.2011 - 01:42) sodroot написал(а):
inpost, Помоги пожалуйста не правильно отображается в explorer'е...
snippet_title должен быть высотой в 40 пикселей, а snippet_text растягивается в зависимости от количества текста... В опере и мазиле всё отлично отображается... :)

Вот код CSS:
.snippet_image {
	padding: 5px;
	border: 1px solid #217da2;
}
.snippet_title {
	border-bottom: 1px solid #217da2;
	padding: 0 0 0 10px;
}
.snippet_cena {
	border-bottom: 1px solid #217da2;
	padding: 0 10px 0 0;
}
.snippet_text {
	padding: 10px 10px 5px 10px;
}




Вот код HTML:
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td class="snippet_image" width="160" rowspan="2"><img src="images/example.jpg" width="160" /></td>
    <td class="snippet_title" height="40">gfhdf gdhdfg dfghdfgh dfghdfg dfghdfgh</td>
    <td class="snippet_cena" width="150" height="40" align="right"> </td>
  </tr>
  <tr>
    <td class="snippet_text" colspan="2" valign="top">gfhdf gdhdfg dfghdfgh dfghdfg dfghdfghgfhdf gdhdfg dfghdfgh dfghdfg dfghdfghgfhdf gdhdfg</td>
  </tr>
</table>

Спустя 3 минуты, 26 секунд (19.04.2011 - 01:45) inpost написал(а):
помещай в <div>, ему указывай ширину в CSS.

Спустя 1 минута, 41 секунда (19.04.2011 - 01:47) sodroot написал(а):
inpost, не понял твоих слов....

Спустя 48 секунд (19.04.2011 - 01:48) sodroot написал(а):
inpost, приведи пример в коде что ты имел в виду.... smile.gif

Спустя 20 часов, 36 минут, 3 секунды (19.04.2011 - 22:24) sodroot написал(а):
Всем спасибо за помощь... wink.gif
Сам разобрался... mad.gif
Быстрый ответ:
Powered by dgreen

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