Прыгает модуль меню

[xTODx]

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

Вот ссылка на сайт: http://art-delo.com.ua/

[klierik]

у меня при :hover ничего не прыгает.

как сделать что бы прыгало?

[red4pony]

-khtml-

Круто

Тоже не заметил никаких скачков. Возможно это причуды взаимодействия height, margin, vertical-align: top.

P.S. Проверял в IE 8, вся верстка погибает.

P.S.S. Если время не поджимает то пересмотрите весь код, у Вас много ошибок.

[xTODx]

-khtml-

Круто

Тоже не заметил никаких скачков. Возможно это причуды взаимодействия height, margin, vertical-align: top.

P.S. Проверял в IE 8, вся верстка погибает.

P.S.S. Если время не поджимает то пересмотрите весь код, у Вас много ошибок.

можете объяснить в чём ошибка?

и как адаптировать под IE?

Прыгает когда обновляете страничку, допустим перешли куда то, обновите....(

body {
    font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: url(../img/fon2.gif) repeat; /* Путь к фоновой картинке и
                                                 цвет фона, если пользователь
       отключил показ картинок*/
    color: #000;                              /* Цвет текста */
   }

a:link {     /* Цвет ссылки */
color: #FFFFFF;
text-decoration:none;
font-family: Arial,  Helvetica;
}
a:visited {  /* Цвет посещенной ссылки */
color: #fefefe;
text-decoration:none;
font-family: Arial,  Helvetica;
}
a:active {   /* Цвет активной ссылки */
color: #FFFFFF;
text-decoration:none;
font-family: Arial,  Helvetica;
}
a:hover {    /* Цвет ссылки при наведении курсора*/
color: #4f4f4f;
text-decoration:none;
font-family: Arial, Verdana;
}

div.partfolio {     /* парфтолио */
color: #999999;
    height:700px;
width: 648px;
overflow:auto;
    }
.partfolio a{
  color: #999999;
  }
.partfolio a:hover{
  color: #666666;
  }

#partblock { alignment-adjust:central;
             text-align:center;
}
#randompartffolio{
alignment-adjust:central;
padding-left: 40px;
}
.onemat {     /* один материал */
    background: #eee;     /* Цвет фона колонки */    
    padding: 5px;     /* Отступы вокруг текста */
    }

img {
background: #cc0001;
}
.leftblock {
color:#FFFFFF;
}
#allleft { background: url(../img/fonc.gif) 0 100% repeat;
}
.leftblock {
/* background: url(../img/col2.jpg) #eee;     /* Цвет одного левого блока */
border-color:#999999;
    margin: 0;     /* Отступ колонки */
    padding: 15px;     /* Отступы вокруг текста */
    text-align: justify;     /* Выравнивание по ширине */}
ul.menu {  /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b)); */
}
.upblock {
  min-height:40px; min-width:200px; max-height:60px; max-width:100%;
  float:right;
  border: none;
  position: relative;
}
.onecontetn { 
    width: 650px;
    float: left;
    text-align:left;
}
/*Date and time create and adit*/
.datecr {
  border-color:#CCCCCC;
  border:inset;
  float:left;
  width:120px;
  vertical-align:bottom;}

.dateed {
  border-color:#CCCCCC;
  border: inset;
  float:left;
  width:120px;
  vertical-align:bottom;
  }
#up{
  width 600px;
}
/*TOP MENU*/
.menuup{
}
ul.menuup li {
color: #fff;
vertical-align:top;
margin: 2px;
padding: 3px;
float: left;
text-align:center;
height:20px;
min-width: 60px;
max-width: 300px;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cc0000), to(#990000));
    background-image: -webkit-linear-gradient(#cc0000, #990000);
    background-image: -moz-linear-gradient(top, #cc0000, #990000);
    background-image: -ms-linear-gradient(#cc0000, #990000);
    background-image: -o-linear-gradient(#cc0000, #990000);
    background-image: linear-gradient(#cc0000, #990000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc0000', endColorstr='#990000', GradientType=0);
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
list-style: none; 

}
ul.menuup li:hover {
  color: #fff;
  list-style: none;
margin: 2px;
padding: 3px;
float: left;
text-align:center;
height:20px;
min-width: 60px;
max-width: 300px;
background: #2b2b2b;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
.menuup a{
  color: #fff;
  }
/*NEEEEW SHABLON*/
#logo {
color:#CCCCCC;
background: url(../img/logo.gif) 0 0 no-repeat ;
height: 135px;
width: 300px;
float: left;
}
#imghead{
float:right;
width:700;
height: 135px;
}
  #container {
    width: 1000px; /* Ширина слоя */
    margin: 0 auto; /* Выравнивание по центру */
    background: url(../img/fonc.gif) 0 0 repeat #f0f0f0; /* Цвет фона левой колонки */
   }
   #header {
    font-size: 2.2em; /* Размер текста */
    background: #8fa09b; /* Цвет фона шапки */
    color: #ffe; /* Цвет текста */
height:135px;
   }
   #sidebar {
    clear:right;
    margin-top: 0px;
    width: 280px; /* Ширина слоя */
    padding: 0 10px; /* Отступы вокруг текста */
    float: left; /* Обтекание по правому краю */
background: url(../img/col.png) 0 0 no-repeat ;  /* Цвет фона колонки */

    min-height: 800px;
    background-size:contain;
   }
   #content {
    position:relative;
    margin-left: 300px; /* Отступ слева */
    padding: 30px; /* Поля вокруг текста */
    background:  #fff; /* Цвет фона правой колонки */
min-height: 840px;
margin-bottom: -10;
   }
   #onecontent a{
    color: #999999;
    }
#onecontent a:hover{
  color: #666666;
    }
   #footer {
  width:990px;
    background: #990000; /* Цвет фона подвала */
    color: #fff; /* Цвет текста */
    padding: 0px; /* Отступы вокруг текста */
    clear: left; /* Отменяем действие float */
margin:0 0;
  }

#home {
  margin-top: 10px;
   width:600px;
   }
#book {
   width:600px;
   }
#line {
  width:1000px;
  background: url(../img/line.jpg) repeat-x;
  height:7px;
  background-size:contain;
  }
#linedown {
  width:1000px;
  background: url(../img/line.jpg) repeat-x;
  height:7px;
  background-size:contain;
  position: relative;

  }
#leftfooter{ float:left;
width: 280px;
background:#cc0001;
padding: 2 10px;
height: 56px;


}
#rightfooter{
width: 700px;
background:#990000;
position:relative;
margin-left: 300px;
height: 60px;

}
#blockimg{
}

Причину нашёл, добавляет пустую строку.( откуда берётся не могу понять(

помогите пожалуйста, дизайн первый раз делал, укажите ошибки, и как исправить способ напишите по возможности

Edited May 24, 2013 by xTODx

[red4pony]

Спрячьте код под спойлер.

По структуре кода. Тут самые азы.

1. Меньше используйте оберток(т.е. лишние <div>).
   
2. Меню создавайте с помощью списка
   
3. Обращение к элементу с помощью класса. id только для ЯП.
   
4. Все оформление в CSS
   
5. Старайтесь не задавать явно высоту блоку (за исключением явных случаем как с прижатым футером - и тут можно покодавать)
   
6. Вертикальное выравнивание лучше также не использовать, а вытягивать блоки вертикальными отступами и полями.
   
7. Для каждой строки не нужно задавать свой элемент
   
8. Таблицы использовать по назначению.
   
9. Без особой надобности не вырывайте блок из потока (т.е. float, position: absolute и т.д.)
   

Много лишних элементов и неудачная структура.

Зайдите на фриланс, найдите опытного мастера-->его портфолио-->один из его сайтов-->откройте Firebug/другой инструмент и посмотрите код. Наглядно будет понятнее.

P.S. Имена классов задавайте исходя из их предназначения, а не положения и оформления. Транслит - зло. Тем более у Вас же есть опыт задания имен переменных

[xTODx]

Спрячьте код под спойлер.

По структуре кода. Тут самые азы.

1. Меньше используйте оберток(т.е. лишние <div>).
   
2. Меню создавайте с помощью списка
   
3. Обращение к элементу с помощью класса. id только для ЯП.
   
4. Все оформление в CSS
   
5. Старайтесь не задавать явно высоту блоку (за исключением явных случаем как с прижатым футером - и тут можно покодавать)
   
6. Вертикальное выравнивание лучше также не использовать, а вытягивать блоки вертикальными отступами и полями.
   
7. Для каждой строки не нужно задавать свой элемент
   
8. Таблицы использовать по назначению.
   
9. Без особой надобности не вырывайте блок из потока (т.е. float, position: absolute и т.д.)
   

Много лишних элементов и неудачная структура.

Зайдите на фриланс, найдите опытного мастера-->его портфолио-->один из его сайтов-->откройте Firebug/другой инструмент и посмотрите код. Наглядно будет понятнее.

P.S. Имена классов задавайте исходя из их предназначения, а не положения и оформления. Транслит - зло. Тем более у Вас же есть опыт задания имен переменных

хорошо, постараюсь исправить, а как под IE сделать?

А меню и так списком делаю.

Может есть у кого стандартный двухколончатый шаблон?)

Edited May 25, 2013 by xTODx

[red4pony]

а как под IE сделать

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

По поводу шаблонов http://htmlbook.ru/layout.

Не стоит пользоваться тем что Вы до конца не понимаете. Разберитесь и напишите свой код - будет полезнее и конкретно под Ваши нужды.(+ легче поддерживать и скорость загрузки будет выше)

[xTODx]

а как под IE сделать

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

По поводу шаблонов http://htmlbook.ru/layout.

Не стоит пользоваться тем что Вы до конца не понимаете. Разберитесь и напишите свой код - будет полезнее и конкретно под Ваши нужды.(+ легче поддерживать и скорость загрузки будет выше)

дело как раз в том, что я оттуда и взял макет))

если я вам скину Шаблон, кто может помочь?

[red4pony]

если я вам скину Шаблон, кто может помочь?

Макет.

Наверное многие не согласны с дизайном. И задачи как таковой нет. Разместить пару изображений - тривиально, неинтересно.

Я бы посоветовал создать тему в разделе Сделайте мне бесплатно. Написать ТЗ, выложить макет (можно найти бесплатные PSD) или предоставить полную свободу действия и пообещайте возможность размещения этого сайта(он должен потом реально работать) в портфолио исполнителя. Если верить ветке Ищу работу желающие найдутся.