Косяк в вёрстке

  1. Weblancer
  2. Форум фрилансеров
  3. Программирование
Никита К.
1594 сообщения
#16 лет назад
1278714

Вопрос. Как сделать в данном примере footer внизу а не вверху как сейчас.
Всё перепробовал - не могу понять где напортачил
Тут М.
626 сообщений
#16 лет назад
"Данный пример" самому придумать?
Никита К.
1594 сообщения
#16 лет назад


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Сейф - Сайт</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1251" />

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

<meta http-equiv="Pragma" content="no-cache"/>

<link rel="stylesheet" href="./style.css" type="text/css" />

</head>

<body>

<div class="all">

		<div class="head">



<div class="nav">



<a href="#" style="text-decoration: none;"><img src="./img/1.gif" alt="." border="0"/></a><br />



<a href="#" style="text-decoration: none;"><img src="./img/2.gif" alt="." border="0"/></a><br />



<a href="#" style="text-decoration: none;"><img src="./img/3.gif" alt="." border="0"/></a><br />



</div>

		</div>

		<div class="body">

		<div class="center">



<div class="right">



<div id="blok">



<a href="#" class="a">О нас</a>



</div>



<div id="blok">



<a href="#" class="a">Услуги</a>



</div>



<div id="blok">



<a href="#" class="a">Каталог</a>



</div>



<div id="blok">



<a href="#" class="a">Контакты</a>	



</div>



</div>



<div class="centr">



<div id="blok">



<div class="header">



Тема: &laquo;Апериодический подвес: методология и особенности&raquo;



</div>



<div class="text">



<img src="./img/pict_1.png" alt=" " style="width: 127px;"/>



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.<br /><br />



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.			



</div>



</div>



<div id="blok">



<div class="header">



Тема: &laquo;Апериодический подвес: методология и особенности&raquo;



</div>



<div class="text">



<img src="./img/pict_2.png" alt=" " style="width: 127px;"/>



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.<br /><br />



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



</div>



</div>



</div>



<div class="left">



<div id="blok">



<u>Телефон:</u><br />



<i>(012) 123 45 67</i>



</div>



<div id="blok">



<u>E-Mail:</u><br />



<i>***</i>



</div>



<div id="blok">



<u>ICQ:</u><br />



<i>123456789</i>



</div>



</div>



</div>


	</div>

	  <div class="foot">

		<span style="position: relative; color: #ecd8a8; font-family: Verdana; font-size: 10pt; left: 20px; top: 10px;">Дизайн сайта - Лобанова Наталия</span>

		<span style="position: relative; color: #ecd8a8; font-family: Verdana; font-size: 10pt; left: 350px;  top: 10px;">© 2009 Надежная защита Вашего сейфа. All right reserved.</span>

	</div>

</div>

</body>

</html>
Никита К.
1594 сообщения
#16 лет назад


Body

{

 background-color: black;

 width: 1024px;

 height: Auto;

 margin: 0px auto;

}


.all

{

 position: absolute;

 text-align:center;

 width: 1024px;

 height: auto;

}


.head

{

 position: relative;

 margin: 0px auto;

 top: 0;

 left: 0;

 width: 1024px;

 height: 243px;

 background-image:url(./img/head.png);

 background-repeat:no-repeat;

 text-align:left;

}


.nav

{

 position: absolute;

 width: 24px;

 height: 57px;

 top: 0;

 left: 986px;

 padding-top:6px;

 background-image:url(./img/back_nav.png);

 background-repeat:no-repeat;

}


.nav img

{

	position: relative;

  width:10px;

  left: 7px;

  margin-bottom: 5px;

}


.body

{

 position: absolute;

 top: 243px;

 left: 0;

 width: 1024px;

 height: auto;

}


.foot

{

 position: relative;

 width: 1024px;

 height: 39px;

 background-image:url(./img/foot.png);

 background-repeat:no-repeat;

 text-align: left;

}


.right

{

 position: absolute;

 width: 215px;

 height: auto;

 top: 42px;

 background-image: url(./img/border_right.png);

 background-repeat: no-repeat;

 padding-top:3px;

 padding-bottom: 3px;

}


.right #blok

{

 position:relative;

 left: 0;

 width: 215px;

 height: 47px;

 margin-bottom: 9px;

 text-align: center;

}


.right #blok a

{

 position:relative;

 display: block;

 padding-top: 10px;

 width: 215px;

 height: 47px;

 color:#9a774d;

 font-family: Verdana;

 font-size: 12pt;

 font-weight: bolder;

 text-decoration: none;

 background-image: url(./img/back_right.png);

 background-repeat: no-repeat;

}


.right #blok a:hover

{

 position:relative;

 display: block;

 padding-top: 10px;

 width: 215px;

 height: 47px;

 color:#ecd8a8;

 font-family: Verdana;

 font-size: 12pt;

 font-weight: bolder;

 text-decoration: none;

 background-image: url(./img/back_act.png);

 background-repeat: no-repeat;

}


.left

{

 position: absolute;

 width: 215px;

 height: auto;

 top: 42px;

 left: 809px;

 background-image: url(./img/border_left.png);

 background-repeat: no-repeat;

 padding-top:3px;

 padding-bottom: 3px;

}


.left #blok

{

 position:relative;

 width: 215px;

 height: 47px;

 margin-bottom: 9px;

 text-align: center;

 background-image: url(./img/back_left.png);

 background-repeat: no-repeat;

}


.left #blok u

{ 

 color:#9a774d;

 font-family: Verdana;

 font-size: 10pt;

 text-decoration: underline;

}


.left #blok i

{ 

 color:#d9c595;

 font-family: Times New Roman;

 font-size: 18pt;

 font-style: italic;

}


.centr

{

 position: absolute;

 width: 510px;

 height: auto;

 top: 0px;

 left: 245px;

}


.centr #blok

{

 position: relative;

 width: 510px;

 height: auto;

 margin-top: 25px;

 padding-left: 10px;

 text-align: justify;

}


.centr #blok img

{

 float: left;

 margin-right: 15px;

 margin-bottom: 10px;

}


.centr #blok .text

{

 position: relative;

 text-align: justify;

 color: #bca180;

 font-family: Verdana;

 font-size: 8pt; 

 line-height: 11px;

}



.header

{

 position:relative;

 width: 510px;

 height: 40px;

 background-image: url(./img/line_header.png);

 background-repeat: no-repeat;

 background-position: top center;

 text-align: center;

 padding-top: 10px;

 color: #ecd8a8;

 font-family: Verdana;

 font-size: 9pt;

 font-weight: bolder;

 text-transform:uppercase;

}


.center

{

 position:relative;

 width: 1024px;

 height: auto;

}
Никита К.
1594 сообщения
#16 лет назад
1278715



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Сейф - Сайт</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1251" />

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

<meta http-equiv="Pragma" content="no-cache"/>

<link rel="stylesheet" href="./style.css" type="text/css" />

</head>

<body>

<div class="all">

		<div class="head">



<div class="nav">



<a href="#" style="text-decoration: none;"><img src="./img/1.gif" alt="." border="0"/></a><br />



<a href="#" style="text-decoration: none;"><img src="./img/2.gif" alt="." border="0"/></a><br />



<a href="#" style="text-decoration: none;"><img src="./img/3.gif" alt="." border="0"/></a><br />



</div>

		</div>

		<div class="body">

		<div class="center">



<div class="right">



<div id="blok">



<a href="#" class="a">О нас</a>



</div>



<div id="blok">



<a href="#" class="a">Услуги</a>



</div>



<div id="blok">



<a href="#" class="a">Каталог</a>



</div>



<div id="blok">



<a href="#" class="a">Контакты</a>	



</div>



</div>



<div class="centr">



<div id="blok">



<div class="header">



Тема: &laquo;Апериодический подвес: методология и особенности&raquo;



</div>



<div class="text">



<img src="./img/pict_1.png" alt=" " style="width: 127px;"/>



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.<br /><br />



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.			



</div>



</div>



<div id="blok">



<div class="header">



Тема: &laquo;Апериодический подвес: методология и особенности&raquo;



</div>



<div class="text">



<img src="./img/pict_2.png" alt=" " style="width: 127px;"/>



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.<br /><br />



Регулярная прецессия, например, даёт большую проекцию на оси, чем механический кожух, пользуясь последними системами уравнений. Ракета нестабильна. Механическая природа, в первом приближении, переворачивает прецессионный волчок, рассматривая уравнения движения тела в проекции на касательную к его траектории. Гироинтегратор, например, даёт более простую систему дифференциальных уравнений, если исключить гироскопический стабилизатоор, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами.



</div>



</div>



</div>



<div class="left">



<div id="blok">



<u>Телефон:</u><br />



<i>(012) 123 45 67</i>



</div>



<div id="blok">



<u>E-Mail:</u><br />



<i>***</i>



</div>



<div id="blok">



<u>ICQ:</u><br />



<i>123456789</i>



</div>



</div>



</div>


	</div>

	  <div class="foot">

		<span style="position: relative; color: #ecd8a8; font-family: Verdana; font-size: 10pt; left: 20px; top: 10px;">Дизайн сайта - Лобанова Наталия</span>

		<span style="position: relative; color: #ecd8a8; font-family: Verdana; font-size: 10pt; left: 350px;  top: 10px;">© 2009 Надежная защита Вашего сейфа. All right reserved.</span>

	</div>

</div>

</body>

</html>
Никита К.
1594 сообщения
#16 лет назад
=)
И плз не ругайтесь на "плохой|кошмарный|ужасный код", не надо писать что автор - мудак и т.д - сам знаю =)
Михаил В.
2195 сообщений
#16 лет назад

Дмитрий Прокопенко
70 сообщений
#16 лет назад
Если добавить таблицу, то кода станет в полтора раза меньше, и совместимость повысится.
И почему всем так нравится бестабличная верстка?
Виталий Б.
2 сообщения
#16 лет назад
Потому что проще и легче...
Евгений Б.
5330 сообщений
#16 лет назад
Ой не всегда... и почему то заказчик, который принципиально хочет блочную приносят самые геморойные макеты.
Михаил Фурзиков
40 сообщений
#16 лет назад
По поводу дивово и табличной верстки.
Если сайт резиновый с резиновыми и фиксированными блоками то тут нужно юзать таблицу как каркас.
А если все фиксированное то дивы отлично помогут.
Михаил В.
2195 сообщений
#16 лет назад
Цитата:
Если сайт резиновый с резиновыми и фиксированными блоками то тут нужно юзать таблицу как каркас.

Обоснуйте.
Вячеслав К.
424 сообщения
#16 лет назад
Цитата ("Sir_Michael"):
Цитата:
Если сайт резиновый с резиновыми и фиксированными блоками то тут нужно юзать таблицу как каркас.

Обоснуйте.


Обосновываю — надёжнее сетка (не развалится) и тянуть проще пропорционально, без пересечения элементов (ячеек).

Хотя к каждой задаче своя вёрстка. Универсально нельзя заявить.
Михаил В.
2195 сообщений
#16 лет назад
hitryi-pryanik
Цитата:
Обосновываю — надёжнее сетка (не развалится) и тянуть проще пропорционально, без пересечения элементов (ячеек).

Сетка - опасный термин. Верстка сеткой к табличному каркасу отношения не имеет.

"bulletproof" многоколоночные layout'ы без использования таблиц придумали уже лет пять назад. "Сломать" подобный css layout нужно очень постараться.
Тут проблема в том, что уровень большинства верстальщиков чудовищно низок, отсюда и возникает уверенность, что табличный каркас дает надежность.
А на самом деле дает надежность только в индивидуальном порядке для верстальщика, который не знает как защитить макет от опасностей типа пользовательского wysiwyg'а.
Егор Ф.
658 сообщений
#16 лет назад
Согласен с LexFRZ! ))
Михаил В.
2195 сообщений
#16 лет назад
gopal
А вы чем мотивируете?)
Михаил Фурзиков
40 сообщений
#16 лет назад
Проблем с табличным каркасом у меня не возникало НИКОГДА.
Сколько работаю с html столько и смешиваю обе технологии вместе, чем и добиваюсь совершенных результатов...
Таблица это надежный проверенный способ, создавать сетку в которой некоторые блоки могут быть фиксированными а остальные занимают все доступное пространство (если у таблицы style="width:100%;".
Михаил В.
2195 сообщений
#16 лет назад
LexFRZ
Я спросил не о проблемах, а о категоричности с которой в утверждаете, что прямо таки нужно использовать таблицу. Так как вот этого "нужно" как раз не следует, подобная обертка мешает последующей доработке шаблона.
Проблем же вы разумеется не увидите - проблемы верстки видит верстальщик, которому приходится дорабатывать чужой layout (задачи вида убрать-добавить колонку) - будь то разовые задачи или работа в команде.
Михаил Фурзиков
40 сообщений
#16 лет назад
Я не говорил что прямо "Надо и все" просто это вполне логично и очень удобно.
В таблицах очень и очень легко можно добавлять, удалять и изменять блоки так как вам удобно.
Антон Ф.
3557 сообщений
#16 лет назад
Оффтопик
Цитата ("Anexroid"):
не надо писать что автор - мудак и т.д - сам знаю =)

о_о самооценка на высоте...
12
Последняя