#1 2007-08-14 12:34:39
- allan16
- Member
- Registered: 2007-08-09
- Posts: 13
- I've been thanked 1 times.
-
menu creation and text
Hello,
I have seen on may sites where they have a menu created on the left side with round corners and text over it. From what I've seen the text is not part of the image because you can copy the text. If it would have been a image then I don't think you should be able to copy the text ( am I correct ? ).
In order to do this do I just create the image with the round corners for example and just align the test specifically where I want over the image?
Thanks a lot!
Offline
#2 2007-08-14 14:40:43
- joe
- Member
- From: USA
- Registered: 2007-05-02
- Posts: 42
- I've been thanked 0 times.
-
Re: menu creation and text
Background images and CSS is what you're looking for. Take a look at this, perhaps it will be helpful. http://www.highdots.com/css-tab-designer/
Knoxville Web Design and Search Engine Optimization Services
Offline
#3 2007-08-15 02:37:32
- Northie
- Moderator
- From: Yorkshire, UK
- Registered: 2006-08-19
- Posts: 2592
- I've been thanked 62 times.
-
Re: menu creation and text
CSS has a background-image property, which means that for almost any html element (including the list item that your nav resides in) you can make an image appear behind the content
Your nav is in a list, isn't it?
Here's some sample code to get you going 
Code: html
<div id='nav'>
<ul>
<li><a href='#'>Nav Link</a></li>
<li><a href='#'>Nav Link</a></li>
<li><a href='#'>Nav Link</a></li>
<li><a href='#'>Nav Link</a></li>
</ul>
</div>
the css for the above code then becomes really simple,
for the container
Code: css
#nav {
}
for the list block
Code: css
#nav ul {
//using display:inline will change form a vertical list to a horizontal list
}
for each list item
Code: css
#nav ul li {
padding:5px 5px 5px 5px;
margin-bottom:2px;
background-image:url(nav.jpg);
}
for the links
Code: css
#nav ul li a {
}
Last edited by Northie (2007-08-15 02:41:27)
Now taking free-lance inquiries; Please contact me for more details
Internet Marketing Books
Promote Yourself on Site Reference!
Offline
| Never |
- Sponsored Results
|
|