how to link a specific area in the navigation menu

[hellie]

what’s up guys
hope yall doing just fine,

I’m facing a problem in CSS
and I couldn’t really sort it out.. here is a pic explaining

I want only the selected area to be linked “Home”

any ideas?

[ozee]

Can you provide any code that you are using so that we may help you better?

[hellie]

well, I couldn’t do it
so I sliced the navigation menu into 2 parts
http://178.77.181.44/css/games/
http://178.77.181.44/css/games/css/style.css
http://178.77.181.44/css/games/images/

maybe u can link any tutorial for doing it..

thanks for concerning

[ozee]

It sounds to me like you are wanting to make the navigation click area not touch the bottom of the navigation, is that right? You can create the text in another image or include the font with –

@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
h1 {font-family: "Your typeface", Georgia, serif; }

After you can set a line-height and Margins to judge where and how to place it. Let me know if this helps, I was unable to find a tutorial on what you were asking specifically, however there are a lot of navigation tutorials on http://net.tutsplus.com

[hellie]

hey ozee

man I’m trying the way u posted up there
it’s not working as well

body {

margin:0 auto;

padding:0 auto;

background-color:#afafaf;

}

#container	{

width:970px;

height:1000px;

background:white;

margin-left:140px;

border-right:1px solid gray;

border-left:1px solid gray;

}



#header	{

width:970px;

height:251px;

background:url(images/header.png);

}

#logo	{

width:263px;

height:219px;

background:url(images/logo.gif);

position:relative;

right:-210px;

top:30px;

}

#navbar	{

width:970px;

height:74px;

background-color:black;

-moz-border-radius: 5px;



}

#my	{

width:114px;

height:52px;

background:url(images/myi3lan.png);

display:block;

position:relative;

right:-22px;

top:6px;

}

#sell	{

width:54px;

height:31px;

background:url(images/sell.png);

position:relative;

right:-164px;

top:-28px;

}

#com {

width:160px;

height:32px;

background:url(images/com.png);

position:relative;

right:-264px;

top:-62px;

padding:0;

margin:0;

}

#com:hover	{

background:url(images/comhover.png);

}

#contact	{

width:156px;

height:19px;

background:url(images/contact.png);

position:relative;



}

http://178.77.140.212/exer/
http://178.77.140.212/exer/style.css

[hellie]

thanks for your help man
all what I had to do is make the #a display:block;

thanks again

[Author]

Posts