Това, което направихме в предните уроци,
ще го поразчупим и подобрим
Първо ще премахна фонът тук с F8, като го коментирам
също така, margin-bottom ще го направя на нула пиксела.
Отивам на бутоните и ще сложа border-radius
обаче само на top-left да бъде 15 пиксела и се получават 15 пиксела.
Виж как се заоблиха само от горната част, не бях сложил отдолу.
Слагам отдолу и се получава това.
Сега отивам на global.
css
Ще отида на този conteiner тук, където се слайдерите.
Ще сложа също border-radius.
Само в горния край - 80 пиксела.
след това трябва да се върна и от featured, където съм сложил фона, трябва да го махна за да стане прозрачно.
Същото ще направя и тук
за sidebar-а
+border-radius
Този път в долният десен ъгъл.
Сега ще избера
featuredshell и ще махна margin-bottom за да се долепят тези.
Искам съдържанието ми да се застъпва и да влиза вътре.
Това ще го направя, но първо трябва да преместя тези бутони от дясната страна.
Сега ще ги намеря, те бяха в global.
css
pagination и отивам на margin
Вижте това ги центрира, left auto и right auto.
Ако премахна right и сложа 0 пиксела, то ще отиде отдясно,
а пък ако премахна left ще отида отляво.
Затова тук ще сложа 0 пиксела и ще го променя на 15.
Сега вече мога да променя на съдържанието
divconteiner-a content, като му сложа в position, relative.
Както виждате визуланите проблеми в момента са никакви,
но всъщност извадихме този Div на нов слой.
Сега ще мога с тези координати - top, да го преместя нагоре.
Той обаче се покри от горният слой,
за това трябва да му сложа z-index.
Нека пробваме с 10, не стана с 10, затова ще го увелича на 300.
Виждате с 300 стана!
Понеже контейнера отгоре, който идва от скрипта най-вероятно е между 300 и 0 z-index.
Сега на този page title h2 ще му сложа border-radius top-right, 25 пиксела.
Същото ще го направя и за контейнера, понеже тук виждам някакъв ръб.
Сега стана по-добре.
Това което искам да направя в долната част, е само тази кутийка да се качва нагоре.
Затова първо ще увелича height.
Например така,
а пък на другите ще им сложа margin-top.
за да ги преместя да са надолу.
Същият този margin-top, ще го копирам и на другия box.
Сега остана само да преместя тази част нагоре, за да направя това трябва да избера containing.
Избирам Fboxshell и да сложа za position relative.
Сега го извадих на нов слой и top ще работи,
като на top му дам минус координати.
Единственото което трябва да направя е да прилепа footer-a към тях.
margin-bottom
С минусови координати.
Накрая за финал ще сложа тук един border-radius, top right с 80 пиксела.
Страницата се получи малко по-разчупена.
Избирам Save и на двата файла.
Тук давам refresh.
И всичко продължава да си работи.
Kакто виждате успяхме да излезнем, от стандартния редови дизайн,
който беше в предният урок.
Нека видим разликата.
Тук всичко е на редове, имаме един ред тук, един тук.
Това също е един ред и където той свършва почва нов ред.
Докато в този дизайн
преместихме части от тези редове, да застъпват горните редове.
Въпроси и отговори