Имам дизайн, но по натам как?

Post Reply
User avatar
Ivkoni_
Турист
Турист
Posts: 263
Joined: Sun Dec 14, 2008 9:37 am

Имам дизайн, но по натам как?

Post by Ivkoni_ » Sun Dec 14, 2008 12:56 pm

Здравейте значи имам въпросче.
Имам дизайн ( аз съм си го правил ) и как да го осъвършенствам. Смисъл ето вижте как е. Как да сложа работите, които искам.

Image

Това "Последни новини" и "Последни теми" да са от форума.
Между хедъра и последни новини искам да сложа меню за сайта. Ама как ? Мерси предварително ;)

пп. Извинявам се ако не съм уцелил раздела, нов съм тук:)

User avatar
Ivkoni_
Турист
Турист
Posts: 263
Joined: Sun Dec 14, 2008 9:37 am

Post by Ivkoni_ » Sun Dec 14, 2008 4:48 pm

Ем извинявам се...
Има ли някой идея как по темта?

relax
Потребител
Потребител
Posts: 1120
Joined: Fri Dec 22, 2006 8:48 pm
Answers: 49

Post by relax » Sun Dec 14, 2008 5:17 pm

Еми сложно е за обясняване.

Трябва да знаеш HTML и CSS за да го сглобиш. Ще се опитам да ти обясня, но едва ли ще разбереш.

Значи отваряш си фотошопа и почваш да си режеш дизайна, като го правиш на отделни части(header, menu line и останалите блокчета). И после всяка част я слагаш в един div като я визуализираш чрез CSS. В CSS и задаваш размери и къде да се позиционира. За тази цел най-лесно се прави първо един общ div, който да е позициониран посредата това става и така

Code: Select all

*{
margin: 0;
padding:0;
}
правиш си един клас за главния div с размери за сайта. Стига ти само width да зададеш за да може надолу сам да се оразмерява според съдържанието. Демек това имам предвид

Code: Select all

.body{
     width: XXpx; #задаваш пиксели според това колко искаш да ти е широк сайта
     margin: auto; #това го оставяш така ако искаш да ти е посредата на страницата
}
След това... правиш си един клас за хедъра

Code: Select all

.header{
     background: transparent url("пътя-до-картинката") no-repeat;
     margin: XXpx auto;
     width: XXpx; 
     height: XXpx;
}
така сега да обясня. Там където е margin: XXpx auto; тука на XX задаваш някви пиксели според това колко искаш да е отдалечен от върха т.е. да не е залепен за горе, а това auto е за да се позиционира. Ако искаш да ти е залепен за горе както е WT му задаваш 0px auto; .
На width: XXpx задаваш реалните размери които си одрязал в фотошоп, за да може да ти се визуализира целия. На haight: XXpx; пак така.

След това създаваш един клас за менюто като него го float

Code: Select all

.menu{
    width: XXpx;
    float: left;
    padding: XXpx;
}
на width: XXpx; задаваш реалните размери които си изрязал във фотошопа. float: left; ти е за да се залепи за header-а и padding: XXpx; задаваш вътре в лентата на колко пиксела да са навътре линковете.

За останалото ще ти обясня ако разбереш и това.
Image

tema-71362

User avatar
Ivkoni_
Турист
Турист
Posts: 263
Joined: Sun Dec 14, 2008 9:37 am

Post by Ivkoni_ » Sun Dec 14, 2008 5:45 pm

Ще пробвам утре че сега няма да имам време. Мерси много ще се опитам да видя какво ще направя :) Ако стане работата ще пиша :)

Post Reply