Tabbed-Links Tutorial (in Cebuano)

I've learned a lot of tricks on the net lately one of my favorite was using CSS to create a Tab-Style Link. Because there are a lot of tutorials out there, I want to be unique... therefore I'll be explaining it in my native tongue... (Cebuano)

Requirement: Basic Knowledge sa CSS (Mag post nlng pud ko CSS Tutorial)

Mao ni ang output nga atong ma buhat.

Sa unang tan-aw ang kada button mura ug usa ka image pero sa tinood composed ni siya og duha ka part:

Left Image

Right Image

Ang rason nganong 2 kabuok image ang gigamit kay para maka allocate ta og sakto nga width para unya sa text or name sa link nga ibutang. lisod man gud kun usa ra imong image nga gamiton kay limited ang space para sa text.

Also, ma noticed pud ninyo ang image nga gigamit kay mura ug naay reflection. Ang usa kay naay border nga gray, ang sa ubos pud ana same nga image pero light blue ang border. Ang gamit ani niya kay ang paghatag og illusion nga ni highlight ang imong image. Although ma achieve ni nimo using javascript pero mas dali ni gamiton kun CSS na ang gamiton

So pag construct na sa page ang atong buhaton.

First Ato sang i structure ang atong link. Pwede raman nato diretso gamiton ang <a> nga tag pero take note nga duha ka bo-ok ang atong himoon nga background image. So ang paagi ani is mo add ta og lain container para sa link.
So: <a> => ang background niya ang left image
<span> => ang background niya ang right image

so ang atong anchor tag unya ingon ani na ug structure:

<a href="samplelink.htm"><span>link name</span></a>

So ato na i construct ang CSS. Para magamit nato ug balik balik ang style ato ni sya i butang ug Class. Note nga kun mag declare ka ug usa ka class sa CSS kinanlan nga magsugod ni og (.) period nga character then ang pangan sa class (ex: .classname)

So, atong nganlan ang atong class og tablink.

.tablink a
{
float: left;
margin:0;
padding-left:4px;
text-decoration:none;
line-height: 30px;
background:transparent url(menuleft.png) no-repeat left top;
}

.tablink a span{
background: transparent url(menuright.png) no-repeat right top;
padding-top:5px;
padding-right:15px;
padding-left:11px;
color:#5b8fbe;
display: block;
float: left;
cursor: pointer;
}

.tablink a:hover { background-position:0% -42px; }
.tablink a:hover span {background-position:100% -42px; }

Ang first block atong gi declare ang style sa anchor nga tag, so mao ni atong buhaton .tablink a nagpasabot nga ang Anchor tag ra ang applyan ani nga style ug wala na siya lain hilabtan. Then ang .tablink a span meaning ang span nga sulod sa anchor tag

Ang float:left nagpasabot nga ang tag naa ani nga class i padaplin sa pina ka kilid (left) ug idikit ang mga tag nga naa pud sa iyang tuo ngadto niya.

Ang margin:0 nagpasabot nga walay margin ang tag nga atong gi apply-an

padding-left:4px nagpasabot nga butangan nato ug padding nga 4px ang left-side sa anchor tag. Ang rason nganong butangan nato kay para makita nato ang background nga image ug aron dili pud mo diki maayo ang text nato sa left side gyud sa anchor tag.

text-decoration:none nagpasabot nga wala'y ibutang underline ani nga tag bisan ug anchor tag atong gitawag.

line-height:30px mao ni ang nagdala sa height or ang barog sa imong link, 30px kay ang height sa image nga akong gusto ipakita is 30px man.

background:transparent url(menuleft.png) no-repeat left top; mao ni ang pag butang sa background sa anchor nga tag, no-repeat para dili mo-tile ang image then left og top ang position niya.

Ang second block maoy nag declare sa span nga tag nga naa sulod sa anchor nga tag background: transparent url(menuright.png) no-repeat right top; ang background niya kay ang right na nga image then instead nga left ang position niya, atong gi butang sa right para pag modikit jud ang image sa pinaka right sa imong span nga tag.

padding mao ni ang nag da ug allowance sa tag para naa siya space sa isig ka kilid (left,right ug top) pero ang left minus 4px nlng kay ang declare man ko sa anchor tag og padding nga 4px.

display:block gigamit ni nako para ang style sa iyang display kay block or mura ug box-type

cursor:pointer kini css-hack ni siya, iyang gi ilad ang html nga mahimong hand ang mouse cursor nimo bisan ug naka point ni sa span nga tag.

ang third nga block mao ni ang nagdala ug effect sa image, diba maong duha ka image akong gigamit kay para maka create ta ug illusion nga ni highlight? So ang technique nga atong gamiton is i change lang ang position sa imong image so mao nang nigamit ko ani nga rule background-position:0% -42px;. Note nga negative (-) value ang akong gigamit kay ang y axis sa imong image gi pa start nimo ug -42px.

So mao na ang atong tutorial regarding sa tabbed styled links, para ma apply na nimo kinanlan nimo ibutang ug container tag imong mga link ex:

<div class="tablink">
<a href="link"><span>a long long link</span></a>
<a href="link"><span>a long long link</span></a>
<a href="link"><span>a long long link</span></a>
</div>

Here is a sample

kageron forum ni kageron website