Linkup

**Mike4x4** · Jul 25, 2006, 03:54

Does anyone kno how to get my links like in the picture where http://www.ninechat.com/images/temp.jpg where it links up to all the links?

**c2uk** · Jul 25, 2006, 04:43

CSS is the way to go, and I would recommend to use an unordered list to present you links, similar to this (first html and then separate css):

HTML Code:

<div id="membernav">
	<h2>Members Only</h2>
	<ul>
		<li><strong><a href="#">Forums</a></strong></li>
		<li>...</li>
		<li id="lastitem"><strong><a href="#" class="new">Top Sites</a></strong></li>
	</ul>
</div>

Code:

div#membernav {
    background-color: #000000;
}
div#membernav h2 {
	color: #FFFFFF;
	font-size: 0.8em;
	padding: 0 0 0 15px;
	background: #000000 url(user.gif) no-repeat left center;
}
div#membernav ul {
	margin: 0;
	padding: 0;
	list-style: none;	
}
div#membernav li {
	padding: 0 0 0 15px;
	background: #000000 url(linkitems.gif) no-repeat left center;
}
div#membernav li#lastitem {
	padding: 0 0 0 15px;
	background: #000000 url(lastlinkitem.gif) no-repeat left center;
}
div#membernav a.new {
	padding: 0 15px 0 0;
	background: #000000 url(new.gif) no-repeat right center;
}

Haven't tested the code, it might need some more tweaking.

**Mike4x4** · Jul 25, 2006, 05:36

can you please tell me where to put this code on the site?

**c2uk** · Jul 25, 2006, 05:43

I assume you know where to put the html code? The css gets its own separate file, e.g. styles.css - you then have to link to it from within your document, put this somewhere between <head> and </head>:

HTML Code:

<link href="layout/screen.css" rel="stylesheet" type="text/css">

You might want to learn more about CSS in Sitepoints own subforum dedicated to CSS as well as going through the css tutorials on http://www.w3schools.com/ - it's easy and helps you immensely to get a better understanding, especially because I didn't check the code and I'm sure you need to improve on it.

User Tag List

Thread: Linkup

Thread Tools

Display

Linkup

Bookmarks

Bookmarks

Posting Permissions