Създаване на страница 2 (Меню)

В предния урок стигнахме до създаването на този layout.
Да го запълним, като сложим едно меню.
Всяко меню ще свърши работа в 99% от случаите.
Затова в контейнера на меню, ще сложа , директно линкове.
към разни страници вътрешни или външни на сайта.
На тях ще им сложа class="menulink".
Вътре ще им сложа заглавие.
Например "About me".
Синтаксиса за създаване на линк е този.
Ще копирам няколко пъти.
Ще направя промяна тук.
Може да сложа и един Home бутон.
Когато искаме да сочим към друг сайт, използваме пълния URL адрес с http, А когато искаме да сочим към страница от сайта, например, ако тя се казва в случая Services.
html, то тя трябва да е в същата директория, където е и файла в който се намира.
Ако той е в друга директория, например някоя вътрешна директория, то тогава ще използваме този slash.
Пътят ни ще изглежда така.
Ако той е в предна директория, ще използваме път от сорта на този.
По този начин излизаме от тази директория в която сме и в предната директория ще търсим services.
html .
Ще запиши файла и ще влезна в stylizer Tова което имаме тук сa тези линкове, съвсем прости.
Със Space ще избера един от тях, за да мога да създам това правило - menulink, create.
Ще му сложа фон, например червено и ще се опитам да сложа width.
Например: 100 пиксела.
НО не става! Същото и за Height.
100 пикселa.
Не става понеже елемента е тип Inline.
На inline елементите не можем да слагаме Height и Width.
Те могат да се слагат само на блок елементи.
Затова ще сложа първо display, block.
НО пък всеки блок елемент е на отделен ред.
Затова ще трябва да сложа и float left.
Сега вече и Height и Width работят.
Ще сложа малко Margin, за да се виждат къде се разделят бутоните.
Имаме два пиксела тук, както виждате те са в лявата част.
Затова ще сложа text-align center или може да използваме този бутон тук.
Oт друга страна пък са прилепени отгоре.
Има два варианта единия да сложа padding, като променя top отгоре.
И след това намаля Height, понеже "padding" увеличава Height и Width.
Другия вариант e да използвам Line Height, t.
e.
височина на реда 43 пиксела.
Да ползваме това Padding не ми трябва вече.
Сега цвета на текста ще го променя от тук.
Това което не ми харесва е долната подчерта.
Това може да се смени с font-style: Tрябва да е text-decoration.
Отдолу са опциите, които мога да избера.
Underline е по подразбиране, избирам non.
Съответно изчезна.
Може би ще трябва да сменя и шрифта, в момента е "Тimes".
Както и font size.
Тези CSS правила, които се ползват, в повечето случаи са към 20.
Вече видях всичките.
Не са сложни за запаметяване.
Не ми харесва това, че когато отида върху бутоните, няма никакъв ефект.
Затова ще натисна на .
menulink отново и ще избера makerule.
Tози път два пъти ще натисна тук, след него слaгам :hover .
Сега ще видите какво ще стане когато сложим фон в този hover.
Когато мина отгоре, стила който съм сложил тук, ще бъде вкаран в стила на бутоните.
Това правило тук задава на браузъра, че при hover ще се изпълни този стил.
Тук може да поставя какво искам.
Например: Color.
Не се вижда добре в случая.
или да променя височината на бутоните.
Както се вижда не ви трябва javascript, за да правите такива бутони.
Те се подържат директно от CSS.
Да ги направим още по-добре.
Това е по-добре да го направите първо на Photoshop , за да видите кои цветове и ефекти ви харесват повече.
Сега отстоянието може да се направи по-добре.
Слагаме margins = 0 пиксела, отляво понеже беше преместено а пък от дясно ще сложа 1 пиксел или пък 2 пиксела.
С това поставихме тези бутони.
В следващия урок ще сложим нещо в content.