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

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>

Searcher · November 26, 2009

"Ну да, можете например через стили задать width: 955px; height: 768px;"
Толково, потом попробую такой фокус.

Это не фокус, это единственно верное. Все размеры задаются через стили. Вы как-будто читаете только часть того, что вам пишут. Я же четко написал html - только структура данных, без визуального оформления вообще! А css - все оформление этой структуры данных.

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

Задаете класс этой ячейке, а в стилях уже описываете этот класс, вы же уже все так делаете, а тут почему-то не понимаете...

это что такое???

  </tr>
  <tr>
  <div class="td">
	<td width="300" height="391">

между <tr> и <td> ничего не должно быть

DDX · November 26, 2009

Searcher

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

Как только закончу с этим сайтом, то начну осваивать на примерах.

panig

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

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

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

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

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

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

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

Насчёт того, что можно применять стиль в CSS не с тегом div или span не знал. Или знал, но забыл.

Но тем не менее, xhtml пока что более сложен для меня, поэтому всё таки остановлюсь на обычном html, а этот вариант был просто интересен, как можно было решить задачу. Спасибо за практическую помощь.

<!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;
	   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;
   }
   .td_vmenu{
	   width:300px;
	   height:391px;
	   vertical-align:top;
   }
  </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>
	<td class="td_vmenu" 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="77" width="300"> </td>
	<td height="77" width="724"> </td>
  </tr>
</table>
</div>
</body>
</html>

Searcher

"Это не фокус, это единственно верное. Все размеры задаются через стили. Вы как-будто читаете только часть того, что вам пишут. Я же четко написал html - только структура данных, без визуального оформления вообще! А css - все оформление этой структуры данных."

Я уже говорил, что новичок и могу многие вещи не знать, и не понимать, по мере возможностей стараюсь освоить. Читаю я всё, что пишут.

"Задаете класс этой ячейке, а в стилях уже описываете этот класс, вы же уже все так делаете, а тут почему-то не понимаете..."

Я не знал, что так можно делать, читал, что стили в CSS применяются для тегов div и span.

"это что такое???

между <tr> и <td> ничего не должно быть"

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

Edited November 26, 2009 by DDX

Justnewone · November 26, 2009

Как только закончу с этим сайтом, то начну осваивать на примерах.

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

Несмотря на советы, принципиального прогресса в освоении не видно.

Большая просьба, не нужно "начну осваивать на примерах" тут, попробуйте для начала пройти хотя бы тут "по шагам", чтобы общаться можно было более продуктивно и не разжевывать самые азы. Так, на будущее, от себя лично попросил.

Searcher · November 26, 2009

Круто, это Вы называете "как только закончу", что за Вас тут тупо все делают другие люди. Прелестно, говорите и далее всем что "я новичек" и все, ключ к любой помощи.
Несмотря на советы, принципиального прогресса в освоении не видно.
Большая просьба, не нужно "начну осваивать на примерах" тут, попробуйте для начала пройти хотя бы тут "по шагам", чтобы общаться можно было более продуктивно и не разжевывать самые азы. Так, на будущее, от себя лично попросил.

Да, присоединяюсь. Почитайте короткий начальный курс по HTML и CSS.

DDX · December 3, 2009

Justnewone

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

За меня этого пока никто не делает, это делаю я сам и в случае когда окончательно попадаю в тупиковую ситуацию то спрашиваю у знающих людей. Я говорю о том, что новичок, чтобы люди которые читают сообщения, примерно понимали мой уровень знания html/css.

"Несмотря на советы, принципиального прогресса в освоении не видно."

На какие советы? Пока что тут советы непосредственно по теме вопроса дал только один человек, в остальном же я слышу только предложения пойти учить дальше, а потом приходить и спрашивать.

"Большая просьба, не нужно "начну осваивать на примерах" тут, попробуйте для начала пройти хотя бы тут "по шагам", чтобы общаться можно было более продуктивно и не разжевывать самые азы. Так, на будущее, от себя лично попросил."

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

Searcher

Почитаю.

Justnewone · December 3, 2009

Justnewone
"Круто, это Вы называете "как только закончу", что за Вас тут тупо все делают другие люди. Прелестно, говорите и далее всем что "я новичек" и все, ключ к любой помощи."
За меня этого пока никто не делает, это делаю я сам и в случае когда окончательно попадаю в тупиковую ситуацию то спрашиваю у знающих людей. Я говорю о том, что новичок, чтобы люди которые читают сообщения, примерно понимали мой уровень знания html/css.
"Несмотря на советы, принципиального прогресса в освоении не видно."
На какие советы? Пока что тут советы непосредственно по теме вопроса дал только один человек, в остальном же я слышу только предложения пойти учить дальше, а потом приходить и спрашивать.
"Большая просьба, не нужно "начну осваивать на примерах" тут, попробуйте для начала пройти хотя бы тут "по шагам", чтобы общаться можно было более продуктивно и не разжевывать самые азы. Так, на будущее, от себя лично попросил."
А ты разжёвывал самые азы? О какой продуктивности может быть речь если мы люди с разным опытом в познании данного языка? От себя просить стоит, если была продемонстрирована хоть какая то практическая помощь, а не общие советы о том, что надо продолжать учить язык.
Searcher
Почитаю.

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

panig
"давай постепенно.
вот ты код предоставил.

Да, круто Вы сами, достойно.

Половина советов тут - это разжевывание.

И далее, и я же не одинок. Обратите внимание. Что Вы только мне высказались?

PS: и не ТЫкайте мне, пожалуйста.

DDX · December 3, 2009

Justnewone

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

Да не уж то и впрямь грубо? Нет, не заметил, но судя по упоминанию об этом, это главное и ключевое слово, обычно об этом упоминают когда сказать уже совсем нечего.

"Да, круто Вы сами, достойно.

Половина советов тут - это разжевывание."

Да, мы сами, я же ведь не пришёл со словами: "создайте мне страницу", - а лишь спросил помощи по сложному участку.

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

"И далее, и я же не одинок. Обратите внимание. Что Вы только мне высказались?"

Я высказываюсь тому кто является участником разговора. Какая мне необходимость высказываться кому то ещё?

"PS: и не ТЫкайте мне, пожалуйста."

Не хочешь, чтобы тыкали? Просто не обращайся ко мне. Это очень просто, никто ведь никого не принуждает помогать и разговаривать. Всё делается по собственному желанию.

Justnewone · December 3, 2009

Тема переросла в беспредменый срач

Sign In

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

Question

DDX

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

DDX

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

DDX

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

DDX

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Обсуждения

Forums

Important Information