Помогите советом

[nerei]

Добрый вечер!

 

Помогите советом касательно этого сайта testing-field.68edu.ru, хотел сделать его "резиновым", получилось шальное верхнее меню... 

 

Хотелось бы послушать, Ваше мнение, что не так, какие ошибки (не только меню), где фатальные ошибки, где тихий ужас ) Может там всё тихий ужас )

 

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

[advokatua]

.content {  background-color: #F7F7F9;  min-height: 600px;  max-height: 100%;  border: solid 2px #E9EDF1;  width: 100%;  margin: auto;  padding: 3px;  overflow: auto;  font-size: 16px;  word-wrap: break-word;  box-shadow: 0 0 5px rgba(0,0,0,0.5);

 

Фаталити.

С таким кодом вы будете очень долго строить этот сайт. Наймите профи, либо беритесь за книги. 

Edited November 5, 2013 by advokatua

[nerei]

Наймите профи, либо беритесь за книги. 

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

Это не совсем сайт на продажу, это мои мытарства, практика, обучение на практике если угодно ) 

Напомню, раздел: Для начинающих 

[advokatua]

 

 

Это не совсем сайт на продажу,

Я о таком и не осмелился подумать. Понятно было только, что это какой-то свой проект. Если же это тупо черновичок, то так лучше и указывать сразу 

 

Пока хорошее настроение:

.layer3 {

  border: 3px solid #2B332F;

  max-width: 100%;

  min-width: 787px;

  margin: 2px auto;

  min-height: 50px;

  border-bottom-right-radius: 40px 30px;

  border-bottom-left-radius: 40px 30px;

  box-shadow: 0 0 10px rgba(0,0,0,0.5);

  overflow: hidden;

}

Edited November 5, 2013 by advokatua

[nerei]

Пока хорошее настроение:

Ну тут я пытался нагло привязать ширину блока оставив её "резиновой" стояло просто width: 100%; падинг врапера прижимал блок с 2-х сторон.

.wraper {padding:0px 15%;overflow:auto;}

При уменьшение масштаба браузера меню в блоке .layer3 съезжает в лево, я не могу его привязать к центру блока.

Может не стоило злоупотреблять свойствами padding margin ? Слишком много обёрток ? Убрав рамку и overflow конечно много проще бы стало ...

 

На самом деле я "игрался" с элементами пока в конец всё не запуталось ) 

[rus]

а так?

.wraper {    margin: 0 auto;    padding: 0 15%;    width: 80%;}

вам бы действительно не мешало подучить св-ва css, очень много лишнего в правилах.

[nerei]

.wraper { margin: 0 auto; padding: 0 15%; width: 80%; }

Ну тогда это получается обращение к #top-menu{

 

Всё таки я наверное сглупил в том, что попытался css кнопки зажать дивом, но по сути это текст в блоке, кнопки не привязанны к друг другу и о того рушуться при ctrl+ ctrl-  если бы это была картинка она бы ровно встала по центру зажатая padding'ами, а если я хочу css конпку (как текст), то ограничивать его узким блоком нельзя иначе либо кнопки сыпятся либо вылезают за пределы дива ... получается, что так :\

[rus]

Ну тогда это получается обращение к #top-menu{

 

у вас в первом посту был вопрос именно про меню.

резиновое меню (особенно списками) вообще трудно ровнять по центру.

как вы вообще себе представляете выравнивание резины по центру?

хотя... если в процентах и не 100%, а скажем 80-90% там... то можно в принципе.

[nerei]

если в процентах и не 100%, а скажем 80-90% там... то можно в принципе.

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

 

как вы вообще себе представляете выравнивание резины по центру?

Меня мучала мысль, что как это так все блоки выровнял, а блок с меню нет, то он выезжает за пределы, то упирается в бок и разъежается. :\

Да всё верно тут не обмануть браузер, особенно список не станет "железным" на "резинке" ...

Edited November 6, 2013 by nerei

[rus]

Всегда! Нужно начинать с продумывания структуры, каркаса кода, потом css для правильного поведения этого каркаса во всех браузерах, потом наполнение контентом, как небольшим, так и избыточным - для тестирования, ну а потом уже все остальное.

[nerei]

Всегда! Нужно начинать с продумывания структуры, каркаса кода, потом css для правильного поведения этого каркаса во всех браузерах

 

Да, на первом этапе я не думал про валидность кода и кроссо браузерность, просто игрался с кодом смотря "как", "что","зачем","почему", потом после того, как тот бы заработал в основных браузерах, хотел отлавливать ошибки, погрузить его в ietester'e, посмотреть как он себя поведёт, куда съедет, посмотрел бы на свои ошибки, потом адаптация, что в css для ie писать, какие "костыли" придумывать, что любит, что не люит ... да я знаю в htmlboor всегда указывается где что работает, а где нет, но я лучше запоминаю на практике. Меню вывело меня из калеи, я зациклился и хорошо, что спросил здесь на форуме.

 

Я очень сильно "не подумал", что это списки, что элементы списка привязаны друг к другу флоатом и отступами, что конечно он посыпится, если я попытаюсь его зажать.

Можно было бы сдеалть вертикальное меню, прижать его к левой стенке к примеру, можно даже сделать было бы выпадающие списки ...

 

Вот сейчас думаю ещё с гридами повозится, давно советовали, но всё не как не доходил до них :\

 

Спасибо всем, кто помог советом, рад, что откликнулись ))

Edited November 6, 2013 by nerei