LINUX.ORG.RU
решено Форум — Web-development  

помогите выловить 3 глюка в еще даже не начатом сайте


0

2

http://artstudio-3d.ru/

белая рамка - это пока оставленный бордер=1 для наглядности. не более.

1 проблема:
отступ между телом шапки (серенький цвет) и верхней границей окна браузера. в одних браузерах он есть, в других нет.

2 проблема:
в ишаке (например 8) все выравнивается по левому краю, а в фф, хроме, опере - по центру (как и задумано)

3 проблема:
отступ между меню «Портфолио / Клиентам» и шапкой.
по верстке его не должно быть. не понимаю откуда он берется.
не должны эти 2 слова быть так далеко от верхней белой границы

хтмлбук.ру - читаю сутками. пока не помогло.
более того, этот сайт я верстаю на основе другого уже готового, и там таких проблем нет.
я 4 раза проверил и сравнил код - не понимаю откуда глюк.

тем кто решит помочь:
код снабжен комментариями.

ксски- постом ниже

с вкл./выкл. «auto» в padding & marign игрался. если убираю - то и в огнелисе все слева становится.

☆

Последнее исправление: dk- (всего исправлений: 1)
← Сетевые игры с клиентскими частями
Как объединить в единое целое несколько файлов закладок для Firefox? →

CSS

* {  margin: 0;  padding: 0;  }

body {
  text-align: justify;										
  margin: 0;  
  font-family: Times New Roman;	
  background: #000;					
  }
  
#header_main_table {				    /* фон шапки */
  width: 100%;
  height: 110px;
  background: #202020;
  } 
  
#header_table {				   			 /* разметка в 1000рх по центру */
  width: 1000px;
  height: 110px;
  margin: 0 auto;
  padding: 0 auto;
  }
		
#header_table_left {				 		   /* левая часть шапки */
  width: 500px;
  height: auto;
  margin: 0 auto;
  float: left;
  }

#header_table_left p  {
  color: #e6e6e6;
  text-align: left;
  font-size: 16px;
  text-indent: 5px;
  }

#header_table_right {					    /* правая часть шапки */
  width: 500px;
  height: auto;
  margin: 0 auto;
  float: right;
  }  

#logo {										/* разметка лого */
  width: 500px;
  height: 70px;
  border: 0;
  }   
  
#header_table .logo {						/* лого сайта слева, ссылка */
  width: 205px;
  height: 60px;
  border: 0;
  margin: 10px 0 0 0;
  float: left;
  }

#phone {										/* разметка под телефон */
  width: 500px;
  height: auto;
  border: 0;
  }   
  
#phone p {									/* текст номера телефона */
  color: #e6e6e6;
  text-align: right;
  font-size: 20px;
  }   

#bookmark {									/* разметка под кнопки закладок */
  width: 500px;
  height: auto;
  border: 0;
  }     
  
#space {				    /* разделитель 10рх пустоты  */
  width: 1000px;
  height: 10px;
  margin: 0 auto;
  }

#menu-1_main_table {				/* главное меню*/
  width: 1000px;
  height: 30px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  }

#menu-1_0 {  width: 30px;  height: 20px;  margin: 0 auto;  border: 0;  float: left;  }   
#menu-1_left {  width: 200px;  height: 20px;  margin: 0 auto;  border: 0;  float: left;  } 
#menu-1_right {  width: 200px;  height: 20px;  margin: 0 auto;  border: 0;  float: left;  }    

#line0 {										/* отступ от меню до линии */
  width: 30px;
  height: 1px;
  border: 0;
  float: left;
  }  
  
#line {										/* линия подчеркивания */
  width: 930px;
  height: 1px;
  border: 0;
  float: left;
  }   
  
#container .line {							/* линия подчеркивания */
  width: 930px;
  height: 1px;
  border: 0;
  margin: 0;
  float: left;
  }  
  
#menu-2_main_table {							/* второстепенное меню */
  width: 1000px;
  height: 40px;
  border: 0;
  } 

#menu-1_main_table a, #menu-1_main_table a:visited {    color: #fff;    text-decoration: none;    font-size: 20px;   }
#menu-1_main_table a:hover {    color: #fff;    text-decoration: underline;    font-size: 20px;   } 
  
#menu-2_main_table a, #menu-2_main_table a:visited {    color: #d0d0d0;    text-decoration: none;    font-size: 16px;  } 
#menu-2_main_table a:hover {    color: #d0d0d0;    text-decoration: underline;    font-size: 16px;  }   

#menu-2_0 {				/* второстепенное меню: отступ от края */
  width: 180px;
  height: 40px;
  margin: 0 auto;
  border: 0;
  float: left;
  }  
  
#menu-2_1 {  width: 160px;  height: 40px;  margin: 0 auto;  border: 0;  float: left;  }    
#menu-2_2 {  width: 160px;  height: 40px;  margin: 0 auto;  border: 0;  float: left;  }   
#menu-2_3 {  width: 160px;  height: 40px;  margin: 0 auto;  border: 0;  float: left;  }   
#menu-2_4 {  width: 160px;  height: 40px;  margin: 0 auto;  border: 0;  float: left;  }     

#container {				/* тело страницы*/
  width: 1000px;
  height: 800px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid white;
  }
dk- ☆
() автор топика

1. Всяческие <link>, <meta>, <title></title> надо класть внутрь <header></header> и точно вне <body>:
<html>
<head><link...><meta...></head>
<body>...</body>
</html>

2. Сразу после начала <body> у Вас какой-то непечатный символ (посмотрите в HEX-режиме исходник)

Nastishka ★★★★★
()

>отступ между телом шапки (серенький цвет) и верхней границей окна браузера. в одних браузерах он есть, в других нет.

не должны эти 2 слова быть так далеко от верхней белой границы

Enjoy your вёрстка дивами. Судя по всему эти отступы - это пустые строки. Которые берутся из \n, пробелов и табуляций.

Ramen ★★★★
()
Ответ на: комментарий от Nastishka

Лол, пользователь гуглохрома детектед. Посмотри в исходник страницы и удивись, что лежит там всё в head как надо. :-)

Ramen ★★★★
()
Ответ на: комментарий от Nastishka

> у Вас какой-то непечатный символ (посмотрите в HEX-режиме исходник)

пздц!!!
да чем пользоваться то.
notepad++ достал уже этим.

посоветуйте редактор с подсветкой под венду?

dk- ☆
() автор топика
Ответ на: комментарий от dk-

Между <body> и <div я вижу только 0D 0A 0D 0A. Это два вендовых перевода строки.

Ramen ★★★★
()
Ответ на: комментарий от anonymous

Кстати, если не брать в расчёт стоимость дримвейвера и не пользоваться его WYSIWYG-ом, то как редактор он вполне себе неплох.

Ramen ★★★★
()
Ответ на: комментарий от dk-

>глюкодром с кодировками.
ЕМНИП, он нормально работает и с юникодом, и с цп1251. По крайней мере раньше работал. Давно я его уже не видел, так что как сейчас не знаю, но сомневаюсь, что что-то поломали.

Ramen ★★★★
()
Ответ на: ... от dk-

Какой символ, ёпт? В этом файле у тебя между <body> и <div уже вообще только один перевод строки, т.е. 0D 0A.

Ramen ★★★★
()
Ответ на: комментарий от dk-

Каких левых символов? EF BB BF? Это не левые символы. И в начале твоего PHP-файла они тоже есть. :-)

Ramen ★★★★
()

ладно, про символ вы мне сказали.

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

dk- ☆
() автор топика
Ответ на: комментарий от dk-

А хотя символ и правда есть, после «<!-- тело страницы, 1000рх ширина, авто высота, выравнивание по центру -->» стоит EF BB BF. :-)
Ты что ли склеивал файл из нескольких? Смени кодировку на UTF-8 без BOM.

Ramen ★★★★
()
Ответ на: комментарий от dk-

>все блоками.

сборка через include

У меня гениальный вопрос - а зачем тебе тогда PHP? Сделал бы с помощью SSI.

Ramen ★★★★
()
Ответ на: спасибо огромное! от dk-

Да не за что.

все вопросы снялись.

И с выравниванием в ишаке тоже? O_o

Ramen ★★★★
()
Ответ на: комментарий от Ramen

я не знаю что такое ssi :)

рнр... его скорее всего вообще не будет на сайте.
галерея на яве и флеше будет.

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

а пока внутри всех рнр 100% хтмл.

dk- ☆
() автор топика

This document was successfully checked as XHTML 1.0 Transitional!

Result:    Passed

dk- ☆
() автор топика
Ответ на: комментарий от Ramen

>Он же вроде сдох много-много лет назад, нет?

ХЗ. Когда-то юзал. Да, гугль пишет, что Эдоуб прекратил поддержку.

Deleted
()
Ответ на: комментарий от dk-

>от нотепада походу пора уже отказываться.
А что с ним не так? ЕМНИП, ни проблем с подсветкой, ни проблем с кодировками у него никогда не было. А что ещё нужно то?

Ramen ★★★★
()
Ответ на: комментарий от Deleted

>ХЗ. Когда-то юзал.
Ну я тоже, когда ещё в школе учился. :-) Примерно в те времена он вроде и загнулся, а вместо него адобы начали пропихивать дримвейвер.
Хотя поддержку может и только недавно прекратили, мне гуглить на этот счёт как-то даже лень.

Ramen ★★★★
()
Ответ на: комментарий от Deleted

я знаю.
notepad++
им и пользуюсь
и в нем и ловил глюки с символами.

там какая-то ошибкак пекодирования в утф. (не в bom дело).

dk- ☆
() автор топика
Ответ на: комментарий от dk-

>там какая-то ошибкак пекодирования в утф. (не в bom дело).
Перекодированием из чего в utf?
И сейчас у тебя дело было исключительно в BOM же.

Ramen ★★★★
()
Ответ на: комментарий от dk-

Какая версия нотепада? Вроде бы (давно не пользовал) была проблема в связке WinXP SP1 + сабж какой-то версии.

Deleted
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Сетевые игры с клиентскими частями
Web-development
Как объединить в единое целое несколько файлов закладок для Firefox? →