Помогите создать страницу

DDX · November 24, 2009

Прошу помощи.

Как можно сделать размер HTML страницы фиксированным? То есть мне необходимо установить размер 1024х768 пикселей.

Я сначала пытался делать страницу при помощи тега table, но когда я начал добавлять в код html выпадающее меню, сразу после таблицы, которое делалось через тег div, то страница стала ломаться, что привело к тому, что страница увеличилась в размерах вертикально, а ниже изображения заднего плана появилось белое поле. Потом я полностью удалил таблицу и сделал всё через тег div, всё уместилось нормально, но теперь при открытии страницы задний план почему то отображается не полностью.

Памагите!!!

Код:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
   BODY { 
       background-color:#FFF;
       background-image:url(main.JPG);
       background-repeat:no-repeat;
	   margin:0;
   }
   .letter {
       color:#006;
       font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   P {
	   color:#333;
	   font-size:18px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   a.active {
	   color:#F00;
   }
   a.link {
	   color:#080E44;
   }
   a.visited {
	   color:#080E44;
   }
   .tel {
	   position:absolute;
	   top:55px;
	   left:490px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#080E44;
   }
   .email {
	   position:absolute;
	   top:115px;
	   left:550px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:20px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#080E44;
   }
   .maintext {
	   position:absolute;
	   top:335px;
	   left:350px;
	   right:50px;
	   width:624px;
	   height:348px;
   }
   .hmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position:absolute;
	   z-index:100;
	   left:300px;
	   top:300px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:relative;
	   z-index:100;
	   left:50px;
	   top:320px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
  </style>
</head>

<body>
<div class="tel">+7 (495) xxxxxxxxxxx</div>
<div class="email"><a href="mailto: info@xxxxxxxxxx.ru">info@xxxxxxxxxxx.ru</a></div>
<div class="hmenu">
<ul>
    <li><a class="hide" href="">Главная</a></li>
    <li><a class="hide" href="">О компании</a></li>
    <li><a class="hide" href="">Прайс</a>
        <ul>
            <li><a href="" title="">CHEVROLET</a></li>
            <li><a href="" title="">CADILLAC</a></li>
            <li><a href="" title="">OPEL</a></li>
            <li><a href="" title="">SAAB</a></li>
            <li><a href="" title="">HUMMER</a></li>
        </ul>
        </li>
    <li><a class="hide" href="">Оплата</a></li>
    <li><a class="hide" href="">Доставка</a></li>
    <li><a class="hide" href="">Контакты</a></li>
    <li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="vmenu">
<ul>
    <li><a class="hide" href="">Главная</a></li>
    <li><a class="hide" href="">О компании</a></li>
    <li><a class="hide" href="">Прайс</a>
        <ul>
            <li><a href="" title="">CHEVROLET</a></li>
            <li><a href="" title="">CADILLAC</a></li>
            <li><a href="" title="">OPEL</a></li>
            <li><a href="" title="">SAAB</a></li>
            <li><a href="" title="">HUMMER</a></li>
        </ul>
        </li>
    <li><a class="hide" href="">Оплата</a></li>
    <li><a class="hide" href="">Доставка</a></li>
    <li><a class="hide" href="">Контакты</a></li>
    <li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="maintext"><p>«<span class="letter">X</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><span class="letter">X</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div>
</body>
</html>

Clayton · November 24, 2009

Памагите!!!

Никричити)

Какой задний фон стоит?

background-repeat:no-repeat; для чего?)

Edited November 24, 2009 by Clayton

DDX · November 24, 2009

"Никричити)"

Никричу.

"Какой задний фон стоит?"

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

"background-repeat:no-repeat; для чего?)"

Это для того, чтобы задний фон не имел вертикальных повторений, в случае если страничка будет больше необходимого размера.

Ещё хотелось бы узнать, может кто в курсе. Вот сначала я страницу эту делал с помощью тега table, таблицы, которая имела фиксированные размеры 1024х768 пикселей, а когда я начал код обоих меню располагать в коде после таблицы то тоже начало появлятся белое поле заднего фона (я всё делаю через последнюю версию дримвьювера), вот я понять никак не могу, почему страница ломается, хотя меню то как указанно, находится не после таблицы, а можно сказать наложено на неё, а код почему то криво считается и появляется белое поле ниже. Вот если кто знает, можно ли поместить меню, сам код меню, непосредственно в ячейки таблицы, чтобы белое поле прекратило вылезать снизу, я уже пробовал такой фокус, худо бедно и очень криво получилось это сделать с вертикальным меню, а с горизонтальным не получается никак. Хоть плач.

Clayton · November 25, 2009

background-repeat:no-repeat; в данном случае вообще запрещает повторения, вам именно это нужно? Не вижу проблем, все отображается нормально)

DDX · November 25, 2009

"background-repeat:no-repeat; в данном случае вообще запрещает повторения, вам именно это нужно? Не вижу проблем, все отображается нормально) "

Да, это необходимо, чтобы сделать чётко фиксированные границы у страницы, а то при разрешении 1024х768 оно конечно хорошо смотрится, а если будет другое разрешение у монитора то вся конструкция ломается и появляются вертикальные и горизонтальные повторения, а мне бы этого не хотелось, я делаю не резиновый сайт, не хочу с этим заморачиваться да и пока не знаю как это делать, я только начал изучать html и css.

Но дело то собственно не в параметре background-repeat:no-repeat;, а в том как заверстать страницу таким образом, чтобы не появлялись белые полосы, я думаю это реально сделать, но вот как, пока что не знаю. Вот код этой же страницы с использованием тега table, таблицы которая создаёт каркас страницы, что позволяет иметь чёткие границы.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
   BODY { 
	   background-color: #FFF;
	   background-image: url(main.JPG);
	   background-repeat: no-repeat;
	   margin: 0;
   }
   .letter {
	   color: #006;
	   font-size: 36px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   P {
	   color:#333;
	   font-size:18px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   a.active {
	   color: #F00;
   }
   a.link {
	   color: #080E44;
   }
   a.visited {
	   color: #080E44;
   }
   .tel {
	   margin-top: 20px;
	   margin-bottom: 0px;
	   margin-left: 190px;
	   font-style: normal;
	   font-variant: normal;
	   font-weight: bold;
	   font-size: 36px;
	   font-family: Arial, Helvetica, sans-serif;
	   color: #080E44;
   }
   .email {
	   margin-top: 17px;
	   margin-bottom: 130px;
	   margin-left: 270px;
	   font-style: normal;
	   font-variant: normal;
	   font-weight: bold;
	   font-size: 20px;
	   font-family: Arial, Helvetica, sans-serif;
	   color: #080E44;
   }
   .maintext { 
	   margin-left: 50px;
	   margin-right: 50px;
   }
   .hmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position:relative;
	   z-index:100;
	   margin-left:300px;
	   bottom:468px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:relative;
	   z-index:100;
	   margin-left:50px;
	   bottom:458px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
  </style>
</head>

<body>
<table width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td width="300" height="300"> </td>
	<td width="724" height="300"><div class="tel">+7 (495) хххххххххххххх</div><div class="email"><a href="mailto: info@хххххххххххххх.ru">info@хххххххххххх.ru</a></div></td>
  </tr>
  <tr>
	<td width="300" height="391"> </td>
	<td width="724" height="391"><div class="maintext"><p>«<span class="letter">Х</span>ххххххххххххххххххххххххххххххххххххххх
	ххххххххххххххххххххххххххххх</p>
<p><span class="letter">Х</span>хххххххххххххххххххххххххххххххххххххххххххххххххххххххххх</p></div></td>
  </tr>
  <tr>
	<td height="70"> </td>
	<td height="70"> </td>
  </tr>
</table>
<div class="hmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="vmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
</body>
</html>

А вот код этой страницы с вертикальным и горизонтальным меню внутри таблицы, но получилось как то очень криво в коде, как мне кажется и почему то в разных версиях IE визуально по разному отображается, в 8 версии всё нормально, а в 7 версии появляется снизу белое поле.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
   BODY { 
	   background-color:#FFF;
	   background-image:url(main.JPG);
	   background-repeat:no-repeat;
	   margin:0;
   }
   .letter {
	   color:#006;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   P {
	   color:#333;
	   font-size:18px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   a.active {
	   color:#F00;
   }
   a.link {
	   color:#080E44;
   }
   a.visited {
	   color:#080E44;
   }
   .tel {
	   margin-top:20px;
	   margin-bottom:0px;
	   margin-left:190px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#080E44;
   }
   .email {
	   margin-top:17px;
	   margin-bottom:130px;
	   margin-left:270px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:20px;
	   font-family:Arial, Helvetica, sans-serif;
	   color: #080E44;
   }
   .maintext { 
	   margin-left:50px;
	   margin-right:50px;
   }
   .hmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position: absolute;
	   z-index:100;
	   top:300px;
	   left:300px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:relative;
	   z-index:100;
	   margin:0px;
	   padding-left:50px;
	   padding-bottom:325px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
  </style>
</head>

<body>
<table width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td width="300" height="300"> </td>
	<td width="724" height="300"><div class="tel">+7 (495) хххххххххх</div><div class="email"><a href="mailto: info@ххххххххххх.ru">info@хххххххххххх.ru</a></div></td>
  </tr>
  <tr>
	<td width="300" height="391">
	<div class="vmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
</td>
	<td width="724" height="391">
	<div class="hmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="maintext"><p>«<span class="letter">Х</span>хххххххххххххххххххххххххххххххххххххххххххххххх</p>
<p><span class="letter">Х</span>ххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх</p></div></td>
  </tr>
  <tr>
	<td height="70"> </td>
	<td height="70"> </td>
  </tr>
</table>
</body>
</html>

Edited November 25, 2009 by DDX

gesandte · November 25, 2009

Ага, прямо так и хочется копаться в этой кучи хлама.

Может вам всего лишь нужно повесить width на body?

DDX · November 25, 2009

"Ага, прямо так и хочется копаться в этой кучи хлама. laugh.gif "

Где там хлам?

"Может вам всего лишь нужно повесить width на body?"

Не помогло, я выставил width 1024px и height 768px, но это не помогло.

Сейчас, как я уже и говорил до этого, наблюдается такая ситуация, дримьювер (последняя версия) отображает всё правильно, нигде ничего не вылезает, браузеры IE8, Mozilla Firefox 3, Opera 10 отображают всё верно, поля нигде нет, но вот стоит перекинуть файл страницы и заднего фона на другой компьютер и открыть в любом браузере как начинает вылезать белое поле снизу. Даже стоит положить данную страничку с задним фоном на общий диск в локальной сети и сразу же начинает вылезать поле, а у меня на компьютере всё нормально отображается.

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

Searcher · November 25, 2009

Да, табличная основа верстки уже себя изжила.

Ну и первое, что бросается в глаза. Атрибут height для таблицы при вашем доктайпе игнорируется всеми броузерами полноценно поддерживающими стандарты. С ИЕ как всегда полный бардак, где-то поддерживает, где-то по-своему все понимает... Сумма высот строк = 761. При игнорировании атрибута высоты таблицы высота складывается из высот ячеек, отсюда лишние 7 пикселей будут вылезать.

Никогда не используйте редакторы по типу WYSIWYG! Дримвьювер с вашим уровнем знаний настоятельно рекомендую не использовать. Пишите все ручками в Notepad++ например. Вы не представляете как плохо выглядит ваш код. Там столько хрени всякой...

Внимательно почитайте основы верстки.

DDX · November 25, 2009

"Да, табличная основа верстки уже себя изжила."

А вроде как есть мнение, что табличная вёрстка допустима. Иногда она позволяет сделать страницу проще чем при применении тега div.

"Ну и первое, что бросается в глаза. Атрибут height для таблицы при вашем доктайпе игнорируется всеми броузерами полноценно поддерживающими стандарты."

А где это можно посмотреть, что атрибут height при таком доктайпе игнорируется всеми браузерами? Что в нём не так? Игнорирование началось только после добавления горизонтального и вертикального меню после таблицы, до этого всё корректно отображалось.

"С ИЕ как всегда полный бардак, где-то поддерживает, где-то по-своему все понимает... Сумма высот строк = 761. При игнорировании атрибута высоты таблицы высота складывается из высот ячеек, отсюда лишние 7 пикселей будут вылезать."

С браузерами проблема только на других компьютерах, на моём компьютере все браузеры корректно всё отображают.

"Никогда не используйте редакторы по типу WYSIWYG! Дримвьювер с вашим уровнем знаний настоятельно рекомендую не использовать. Пишите все ручками в Notepad++ например. Вы не представляете как плохо выглядит ваш код. Там столько хрени всякой..."

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

Вот если бы у меня были хорошие знания в HTML/CSS то я бы может и отказался от дримвьювера и сидел бы в одном блокноте плюс плюс, может я тогда бы сразу представлял как будет выглядеть страница, а в данный момент мне гораздо удобней визуальным редактором пользоваться.

Мой код плохо выглядит? Что там необходимо изменить, оптимизировать? Какой именно хрени?

Памагите!!!

_

Прочитал на htmlbook и в википедии о различии в спецификациях xHTML (который как оказалось я использую), и HTML. Интересно.

Сменил доктайп тот, что был на новый, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, не помогло.

Белое поле всё равно вылезает если открывать страничку на других компьютерах или если открывать на моём, но из папки расположенной на сетевом ресурсе. Ну может быть тут хоть кто нибудь знает чем можно помочь в такой ситуации, может у кого похожие случаи были.

Памагите!!!

_

Сменил доктайп на <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, не помогло.

Пересчитал высоту таблицы, ну вот как так может быть? Я задавал размеры по высоте 768, а таблица создалась с высотой 761. А самое главное, что я вот уменьшил в визуальном режиме масштаб страницы с наложенной на неё таблицей, вот картинка заднего фона 1024х768 пикселя, я несколько раз перепроверил только что, а таблица 1024х761 пиксель и ОНИ В ГРАНИЦАХ СХОДЯТСЯ! Накладываются в акурат один к одному, то есть по цифрам размеры разные, а когда накладываются то оказывается, что размеры их равны!!!

Edited November 25, 2009 by DDX

gesandte · November 25, 2009

Мой код плохо выглядит? Что там необходимо изменить, оптимизировать? Какой именно хрени?

Вот например

    <td width="300" height="391">
    <div class="vmenu">
<ul>
    <li><a class="hide" href="">Главная</a></li>
    <li><a class="hide" href="">О компании</a></li>
    <li><a class="hide" href="">Прайс</a>
        <ul>
            <li><a href="" title="">CHEVROLET</a></li>
            <li><a href="" title="">CADILLAC</a></li>
            <li><a href="" title="">OPEL</a></li>
            <li><a href="" title="">SAAB</a></li>
            <li><a href="" title="">HUMMER</a></li>
        </ul>
        </li>
    <li><a class="hide" href="">Оплата</a></li>
    <li><a class="hide" href="">Доставка</a></li>
    <li><a class="hide" href="">Контакты</a></li>
    <li><a class="hide" href="">Новости</a></li>
</ul>
</div>
</td>

div и td, если нормально делать, здесь не нужны.

Все параметры можно на ul повесить

Пересчитал высоту таблицы, ну вот как так может быть? Я задавал размеры по высоте 768, а таблица создалась с высотой 761. А самое главное, что я вот уменьшил в визуальном режиме масштаб страницы с наложенной на неё таблицей, вот картинка заднего фона 1024х768 пикселя, я несколько раз перепроверил только что, а таблица 1024х761 пиксель и ОНИ В ГРАНИЦАХ СХОДЯТСЯ! Накладываются в акурат один к одному, то есть по цифрам размеры разные, а когда накладываются то оказывается, что размеры их равны!!!

Плохо накладываеш значит, 768 ни как не может быть равно 761, это же элементарная математика

Edited November 25, 2009 by gesandte

DDX · November 25, 2009

Я не понимаю как так вышло, но задавал я точно таблицу 1024х768 и почему тогда она идеально ложиться на границы заднего плана? Хотя конечно там в параметре всей таблицы указано 768, но почему тогда не указывается, в каком месте автоматом приплюсовывают пиксели.

Добавил я эти 7 пикселей к нижней строке таблицы, не помогло, всё равно белое поле на чужих компьютерах вылезает.

"div и td, если нормально делать, здесь не нужны.

Все параметры можно на ul повесить"

Ок, а почему ты рассматриваешь только последний вариант? Я же там написал, что код скорее всего наиболее кривой из всех трёх вариантов. Я ведь сделал всё без тега table, таблицы, потом, используя тег div.

А теперь по существу, какие параметры можно повесить на ul? Я не давно начал изучать HTML/CSS и не видел таких примеров.

Каким образом можно обойтись и без td и без div? Не будь голословным и покажи как можно это было бы сделать. Мне интересно какой третий вариант есть. Не видел ещё пока таблиц без тега td.

Edited November 25, 2009 by DDX

gesandte · November 25, 2009

Имеется ввиду если делать вообще без таблиц, а показывать я тебе нечиго не обязан, так что ты не зарывайся

На ul можно повесить все то же самое что и на div

Один хрен какой там вариант смотреть, смыл одинаков

panig · November 26, 2009

разрешение 1024x768 пишется же не width="1024px" а width="955px". Я всегда так делал.

Searcher · November 26, 2009

Совершенно не понимаю, что за поле у вас там вылезает?

Возникло ощущение, что вы просто делаете фиксированную высоту под размер окна броузера, и не понимаете, что размеры окна броузера могут быть у всех совершенно разные, особенно, если другое разрешение экрана.

DDX · November 26, 2009

gesandte

"Имеется ввиду если делать вообще без таблиц, а показывать я тебе нечиго не обязан, так что ты не зарывайся"

Обязан, просто обязан, если не хочешь показать свою голословность и бессмысленность сообщения.

"На ul можно повесить все то же самое что и на div wink.gif"

А смысл? Особенно в данном конкретном случае.

"Один хрен какой там вариант смотреть, смыл одинаков"

Там разные варианты, в первом вообще нет td.

panig

"разрешение 1024x768 пишется же не width="1024px" а width="955px". Я всегда так делал. "

А почему 955 пикселей? Это за минусом панели задач win и окна браузера?

Searcher

"Совершенно не понимаю, что за поле у вас там вылезает?"

От нижней границы фонового изображения, до нижней границы браузера вылезает белое поле, это начало появляться после того как добавил код вертикального и горизонтального меню. На скриншотах пример того как должно быть (так оно у меня на компьютере, в дримвьювере и браузерах) и как оно не должно быть (на чужих компьютерах и если открывать через локальную сеть с общей папки).

"Возникло ощущение, что вы просто делаете фиксированную высоту под размер окна броузера, и не понимаете, что размеры окна броузера могут быть у всех совершенно разные, особенно, если другое разрешение экрана."

Да, я делаю страничку с фиксированными размерами, насчёт того, что разрешение и размер окна у всех могут быть разными я понимаю, просто хочу сделать сайт под разрешение 1024х768 пикселя.

Немного правда ошибся насчёт разрешения когда почему то решил, что страница 1024х768 пикселя будет полностью отображаться на мониторе с разрешением 1024х768 пикселя.

Edited November 26, 2009 by DDX

DDX · November 26, 2009

Проблема решена!

Загвоздка во первых заключалась в том, что оказывается я использовал вместо XHTML вместо более простого HTML.

Дримвьювер по умолчанию предлагает создать страницу именно в этом языке, а, чтобы выбрать HTML 4 Strict необходимо зайти в меню Файл => Создать и там уже указав формат документа HTML выбрать его нужную разновидность в выпадающем списке, а во вторых после того как я вчера заменял доктайп с XHTML на HTML то не заметил, что в документе XHTML тег <html> имеет дополнительный параметр, а именно <html xmlns="http://www.w3.org/1999/xhtml">, если убрать дополнительный параметр, то всё начинает превосходно работать.

До этого правда тоже всё превосходно работало, но были почему то проблемы с нижнем полем на чужих компьютерах. Теперь всё отлично.

Опробовано на версии где вёрстка производилась тегом div, без использования table.

Edited November 26, 2009 by DDX

panig · November 26, 2009

» А почему 955 пикселей? Это за минусом панели задач win и окна браузера?

Дада.

В вашем коде нет никакого блока чтобы все элементы объединить. кстати.

а чтобы убрать внизу «белое» нужно у блока с классом vmenu убрать padding-bottom:325px; и сделать выравнивание по вертикали top.

Проблема решена!
Загвоздка во первых заключалась в том, что оказывается я использовал вместо XHTML вместо более простого HTML.
Дримвьювер по умолчанию предлагает создать страницу именно в этом языке, а, чтобы выбрать HTML 4 Strict необходимо зайти в меню Файл => Создать и там уже указав формат документа HTML выбрать его нужную разновидность в выпадающем списке, а во вторых после того как я вчера заменял доктайп с XHTML на HTML то не заметил, что в документе XHTML тег <html> имеет дополнительный параметр, а именно <html xmlns="http://www.w3.org/1999/xhtml">, если убрать дополнительный параметр, то всё начинает превосходно работать.
До этого правда тоже всё превосходно работало, но были почему то проблемы с нижнем полем на чужих компьютерах. Теперь всё отлично.
Опробовано на версии где вёрстка производилась тегом div, без использования table.

а это, простите, чушь.

DDX · November 26, 2009

panig

"В вашем коде нет никакого блока чтобы все элементы объединить. кстати."

А зачем все элементы объединять и что за блок нужен? Код должен так выглядеть?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
   BODY{ 
	   background-color:#FFF;
	   background-image:url(main.JPG);
	   background-repeat:no-repeat;
	   margin:0;
	   width:1024px;
	   height:768px;
   }
   .letter{
	   color:#006;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   P{
	   color:#333;
	   font-size:18px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   a.active{
	   color:#F00;
   }
   a.link{
	   color:#080E44;
   }
   a.visited{
	   color:#080E44;
   }
   .tel{
	   position:absolute;
	   top:55px;
	   left:490px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#080E44;
   }
   .email{
	   position:absolute;
	   top:115px;
	   left:550px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:20px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#080E44;
   }
   .maintext{
	   position:absolute;
	   top:335px;
	   left:350px;
	   right:50px;
	   width:624px;
	   height:348px;
   }
   .hmenu{
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position:absolute;
	   z-index:100;
	   left:300px;
	   top:300px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:relative;
	   z-index:100;
	   left:50px;
	   top:320px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .main{
	   width:1024px;
	   height:768px;
	   margin:0px;
   }
  </style>
</head>

<body>
<div class="main">
<div class="tel">+7 (495) xxxxxxxxxxxxx</div>
<div class="email"><a href="mailto: info@xxxxxxxxxxxx.ru">info@xxxxxxxxxxxxxx.ru</a></div>
<div class="hmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="vmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="maintext"><p>«<span class="letter">X</span>»xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><span class="letter">X</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div>
</div>
</body>
</html>

"а чтобы убрать внизу «белое» нужно у блока с классом vmenu убрать padding-bottom:325px; и сделать выравнивание по вертикали top."

В каком из вариантов кода?

"а это, простите, чушь. "

Что конкретно чушь?

panig · November 26, 2009

1. да, сейчас этот тег есть. так удобней кажется. если что и выровнять по центру можно ну в общем так.

2. во втором варианте. выравнивание у td вот свойством vertical-align: top;

3. ну доктайп создает некие правила, правильно так скажем. если начали делать по правилам зачем их отменять и сделать так «чтоб работало».

Просто нужно найти ошибку в коде.

DDX · November 26, 2009

panig

"1. да, сейчас этот тег есть. так удобней кажется. если что и выровнять по центру можно smile.gif ну в общем так."

Да, я не подумал о необходимости этого тега, у меня небольшой совсем опыт в html/css и я не знал можно ли вкладывать один тег div в другой, но я честно говоря в данном конкретном случае не вижу удобства, ничего же не изменилось, а остальные теги div иметь ведь своё позиционирование на странице, у них ведь и так отступы от краёв заданы. Или смысл в этом теге был, что он позволяет ограничить размеры страницы?

"2. во втором варианте. выравнивание у td вот свойством vertical-align: top;"

Только это не второй, а третий вариант, ну не суть. Убрал padding-bottom:325px, поставил vertical-align: top, теперь вижу следующее, нижнее белое поле исчезло, но вертикальное меню упало на середину ячейки таблицы в которую заключено. Вопрос, зачем мне это? Или необходимо теперь другими тегами его обратно поднимать?

"3. ну доктайп создает некие правила, правильно так скажем. если начали делать по правилам зачем их отменять и сделать так «чтоб работало».

Просто нужно найти ошибку в коде. "

Я новичок, я новичок, я новичок, я новичок. Сколько раз повторить стоит? Я прочитал о спецификациях HTML и XHTML и понял, что XHTML подходит скорее более продвинутым, более знающим, более опытным пользователям поскольку имеет более жёсткие правила вёрстки и является переходным этапом к XML, и скорее всего новичкам не подходит. Я и на HTML то не умею верстать, вот только начал, а мне предлагается продолжить работу с XHTML, зачем? Ведь лучше же от простого к сложному, а не наоборот.

Сначала освоим HTML, а потом продолжим по нарастающей, перейдём на XHTML.

panig · November 26, 2009

» Или смысл в этом теге был, что он позволяет ограничить размеры страницы?

Ну да, можете например через стили задать width: 955px; height: 768px;

» Вопрос, зачем мне это? Или необходимо теперь другими тегами его обратно поднимать?

вообще-то vertical-align: top; нужно прописать через стили НЕ у блока с классом vmenu а у td в который вложено все меню. Тогда оно должно подняться.

Justnewone · November 26, 2009

Я новичок, я новичок, я новичок, я новичок. Сколько раз повторить стоит? Я прочитал о спецификациях HTML и XHTML и понял, что XHTML подходит скорее более продвинутым, более знающим, более опытным пользователям поскольку имеет более жёсткие правила вёрстки и является переходным этапом к XML, и скорее всего новичкам не подходит. Я и на HTML то не умею верстать, вот только начал, а мне предлагается продолжить работу с XHTML, зачем? Ведь лучше же от простого к сложному, а не наоборот.
Сначала освоим HTML, а потом продолжим по нарастающей, перейдём на XHTML.

Не занимайтесь HTML вообще, им не надо заниматься. Вам надо учить CSS, пока его не будете знать, 100%-ое знание HTML и XHTML не имеет никакого смысла. Изучение отдельно HTML или XHTML вообще смысла не имеет.

И новичек Вы именно поэтому. а не потому что еще не знаете XHTML, тем более что определение их разницы Вами дано в корне неверное. Разница между ними только в том, что у XHTML синтаксис похож на XML.

Пройдите тут на сайте СSS по шагам.

Searcher · November 26, 2009

Объясняю.

Html - описывает структуру данных, а css - описывает все свойства оформления этой структуры. Так что изучение css отдельно от html нецелесообразно. Тем более, что вы даже не знаете правил вложенности тэгов. Начинайте с простых вещей, и как сказал Justnewone внимательно почитайте раздел Шаг за шагом.

DDX · November 26, 2009

"Ну да, можете например через стили задать width: 955px; height: 768px;"

Толково, потом попробую такой фокус.

"вообще-то vertical-align: top; нужно прописать через стили НЕ у блока с классом vmenu а у td в который вложено все меню. Тогда оно должно подняться."

Не совсем понимаю как можно прописать стиль только для одного тега td, только для одной ячейки.

Попробовал так сделать, вот, что получилось. У меня то на компе всё нормально, а у остальных поле вылезает.

Там поставил кроме того общий тег div, нижним ячейкам задал ширину и недостающие 7 пикселей высоты, у параметра BODY в CSS сменил с буквы с заглавных на строчные, читал, что xhml работает только со строчным кодом HTML, о CSS ничего сказано не было, но на всякий случай уменьшил их.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
   body {
	   background-color:#FFF;
	   background-image:url(main.JPG);
	   background-repeat:no-repeat;
	   margin:0;
   }
   .letter {
	   color:#006;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   P {
	   color:#333;
	   font-size:18px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   a.active {
	   color:#F00;
   }
   a.link {
	   color:#080E44;
   }
   a.visited {
	   color:#080E44;
   }
   .tel {
	   margin-top:20px;
	   margin-bottom:0px;
	   margin-left:190px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#080E44;
   }
   .email {
	   margin-top:17px;
	   margin-bottom:130px;
	   margin-left:270px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:20px;
	   font-family:Arial, Helvetica, sans-serif;
	   color: #080E44;
   }
   .maintext {
	   margin-left:50px;
	   margin-right:50px;
   }
   .hmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position: absolute;
	   z-index:100;
	   top:300px;
	   left:300px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:relative;
	   z-index:100;
	   margin:0px;
	   padding-left:50px;
	   padding-bottom:325px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .td{
	   vertical-align:top;
   }
   .main{
	   width:1024px;
	   height:768px;
   }
  </style>
</head>

<body>
<div class="main">
<table width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td width="300" height="300"> </td>
	<td width="724" height="300"><div class="tel">+7 (495) хххххххххх</div><div class="email"><a href="mailto: info@ххххххххххх.ru">info@хххххххххххх.ru</a></div></td>
  </tr>
  <tr>
  <div class="td">
	<td width="300" height="391">
	<div class="vmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
</td>
</div>
	<td width="724" height="391">
	<div class="hmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="maintext"><p>«<span class="letter">Х</span>хххххххххххххххххххххххххххххххххххххххххххххххх</p>
<p><span class="letter">Х</span>ххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх</p></div></td>
  </tr>
  <tr>
	<td height="77" width="300"> </td>
	<td height="77" width="724"> </td>
  </tr>
</table>
</div>
</body>
</html>

Justnewone и Searcher

Ну я естественно ещё и CSS параллельно осваиваю, иначе бы я страницу только средствами HTML делал.

Edited November 26, 2009 by DDX

Searcher · November 26, 2009

У вас стандартный 2-х колоночный сайт, это легко делается блоками, изучите способы верстки блоками:

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

http://csstemplater.com/

panig · November 26, 2009

давай постепенно.

вот ты код предоставил.

1. убери padding-bottom:325px; у vmenu в нем.

2. находишь меню и добавляешь у td class какой нравится ну давай например class="td_vmenu".

В css добавишь .td_vmenu {width: 724px; height: 391px; vertical-align: top;}. (пиши размеры в css!)

пока такой способ тебе подойдет.

	<td class="td_vmenu">
	<div class="hmenu">
<ul>
	<li><a class="hide" href="">Главная</a></li>
	<li><a class="hide" href="">О компании</a></li>
	<li><a class="hide" href="">Прайс</a>
		<ul>
			<li><a href="" title="">CHEVROLET</a></li>
			<li><a href="" title="">CADILLAC</a></li>
			<li><a href="" title="">OPEL</a></li>
			<li><a href="" title="">SAAB</a></li>
			<li><a href="" title="">HUMMER</a></li>
		</ul>
		</li>
	<li><a class="hide" href="">Оплата</a></li>
	<li><a class="hide" href="">Доставка</a></li>
	<li><a class="hide" href="">Контакты</a></li>
	<li><a class="hide" href="">Новости</a></li>
</ul>
</div>
<div class="maintext"><p>«<span class="letter">Х</span>хххххххххххххххххххххххххххххххххххххххххххххххх</p>
<p><span class="letter">Х</span>ххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх</p></div></td>

Edited November 26, 2009 by panig

Sign In

Помогите создать страницу

Question

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information