Шаблон PW

Всем привет) Начал изучать HTML5/CSS3 и всё идёт хорошо, захотелось сделать собственный сайт на тематику PW, и вот возникла проблемка. Навигация сверху находится в левой стороне, а я пробовал сделать в центре, но что то не получается. Помогите пожалуйста.

тебе нужно задать размеры навигации(блоку div) например width: 650px;
и потом для этому блоку задать margin: 0 auto;
тогда будет у тебя блок по центру
--- добавлено: 8 ноя 2013 в 22:28 ---
<div class="nav">
....
</div>

в файле css:
.nav {
width: 650px;
margin: 0 auto;
}

вот мой код css:

Если я правильно понял то это блок в которой находится навигация.

Код:

.menu {
font-family: Arial,Tahoma,Times;
font-size: 18px;
background:#191970;
height:46px;
border-bottom: 3px solid #1E90FF;
font-weight: normal;
margin:0 auto;
}

добавь ширину

Код:

width: 650px;

Спасибо за помощь, но я сделал вот так "padding-left:190px;" и всё выровнилось по центру))

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

Проверь мой шаблон у себя, если будет что то криво сообщи))

Первое
п.1 Чтоб проверить как сайт выглядит у других(т.е. на отличных от твоего разрешениях экрана) пользуйся ctrl+прокрутка колеса мыши

• Норма - когда содержимое сайта отображается примерно одинаково всегда, независимо от разрешения экрана

п.2 Еще стоит проверить сайт в разных браузерах (Internet Explorer, Chrome, Opera, Firefox, Safari)

• Норма - когда содержимое сайта отображается примерно одинаково всегда, независимо от браузера

.
Второе
У тебя на сайте есть одна проблема - все блоки съезжают при изменении разрешения экрана(см. п.1)

Почему? Потому что им не заданы какие либо особенные параметры.

п.3 Разберемся с меню

Код:

.menu {
    font-family: Arial,Tahoma,Times;
    font-size: 18px;
    background:#191970;
    height:46px;
    border-bottom: 3px solid #1E90FF;
    font-weight: normal;
    margin: 0 auto;

 
}
.menu ul {
    margin:0px;
    padding:px;
    list-style:none;
}

• .menu - это весь блок с меню, включая текст и рамки, позиционировать его нет смысла (еще вернусь к этому вопросу)*
• .menu ul - это список, содержащий пункты меню, как раз его нам нужно позиционировать.

Зададим ему абсолютное позиционирование, чтобы никакие другие элементы на него не влияли, для этого впишем в стиль .menu ul следующее
(но все изменения позиции будут происходить относительно родительского блока .menu, т.е. список уже знает, что он стоит сверху в блоке menu, и уходить без параметров left, right, top, bottom оттуда не будет)

Код:

position:absolute;

Теперь можно двигать его в любые стороны и никакие другие элементы не будут ему каким-либо образом мешать, изменяя его позицию, супр)
Начинаем двигать!
Нам нужно отцентрировать его, т.е. чтоб на каждом мониторе меню было точно по центру, для этого добавим к абсолютной позиции еще отступ от левого края окна браузера 50%

Код:

position:absolute;
left:50%;

(
В этом случае компьютер производит примерно следующие вычисления:

Окно моего браузере имеет ширину 1024 точек,
Этот список нужно сдвинуть влево на 50% от ширины браузера..
1024 - 100%
x - 50%

x=512 точек

Следтельно список нужно сдвинуть на 512 точек от края браузера

Эврика!(с)​

)

Видно, что сдвинул на 50% первый пункт списка, а остальные за ним, выглядит некрасиво..Выравниваем отступом от левого края элемента величиной равной половине всей ширины списка
(я подбирала на глаз методом научного тыка)

Код:

position:absolute;
left:50%;
margin-left:-450px;

Конечный код:

Код:

.menu ul {
    position:absolute;
    margin:0px;
    padding:px;
    list-style:none;
    left:50%;
    margin-left:-450px;
 

}

Так же и с блоками(правым и левым), но там двигать нужно сами блоки и позицию выставить не absolute, а relative
С этим сам разберись и отпишись сюда почему так


*Если двигать весь блок, то он уже не будет растянут по всей ширине браузера, т.к. был сделан отступ (left:50%, как-бы сместили границу окна браузера для этого элемента.

.