CSS Code for links

**philips** · 06-12-2011, 04:47 PM

Hello all,

Do you have a code that can produce a result similar to the attached image?

I need one for my website. It allows me to add links to useful websites.

Looking forward to your help.

Thank you.

**coothead** · 06-13-2011, 01:01 AM

Hi there philips,

and a warm welcome to these forums.

Does this help...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>multi links</title>

<style type="text/css">
body {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
 }
#container {
    width:1001px;
    border:1px solid #999;
    margin:auto;
    overflow:hidden;
    background-color:#fcfcfc;
 }
ul {
    float:left;
    width:160px;
    padding:0 0 0 5px;
    margin:30px 0;
    border-left:1px solid #999;
    list-style-type:none;
 }
li {
    line-height:0.9;
 }
#nb {
    border-left:0;
 }
.title {
    line-height:1.2;
    font-size:75%;
    font-weight:bold;
    color:#999;
 }
a {
    font-size:65%;
    font-weight:bold;
    color:#333;
    text-decoration:none;
 }
a:hover {
    color:#633;
    text-decoration:underline;
 }
</style>

</head>
<body>

<div id="container">

<ul id="nb">
 <li class="title">Rubriken</li>
 <li><a href="#">Politik</a></li>
 <li><a href="#">Panorama</a></li>
 <li><a href="#">Sport</a></li>
 <li><a href="#">Kultur</a></li>
 <li><a href="#">Wirtschaft</a></li>
 <li><a href="#">Auto</a></li>
 <li><a href="#">Gesundheit</a></li>
 <li><a href="#">Lifestyle</a></li>
 <li><a href="#">Digital</a></li>
 <li><a href="#">Wissen</a></li>
 <li><a href="#">Reise</a></li>
 <li><a href="#">Video</a></li>
 <li><a href="#">Fotographie</a></li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
</ul>
<ul>
 <li class="title">stern-Online-Welt</li>
 <li><a href="#">VIEW</a></li>
 <li><a href="#">Sshortlist</a></li>
 <li><a href="#">Blogs</a></li>
 <li><a href="#">sternTV</a></li>
 <li><a href="#">Archiv</a></li>
 <li><a href="#">Themenachiv</a></li>
 <li><a href="#">Shop</a></li>
 <li><a href="#">Hefte</a></li>
 <li><a href="#">Wissenscommunity</a></li>
 <li><a href="#">Nachrichten-Ticker</a></li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
</ul>
<ul>
 <li class="title">Ratgeber</li>
 <li><a href="#">Allergie</a></li>
 <li><a href="#">Diabetes</a></li>
 <li><a href="#">Erkättung &amp; Grippe</a></li>
 <li><a href="#">Ernährung</a></li>
 <li><a href="#">Haut</a></li>
 <li><a href="#">Kinderkrankheiten</a></li>
 <li><a href="#">Kopfschmerzen</a></li>
 <li><a href="#">Rücken</a></li>
 <li><a href="#">Schiaf</a></li>
 <li><a href="#">Sexualität</a></li>
 <li><a href="#">Zähne</a></li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
</ul>
<ul>
 <li class="title">Tools</li>
 <li><a href="#">Partnersuche</a></li>
 <li><a href="#">Headhunter</a></li>
 <li><a href="#">Bankenvergleich</a></li>
 <li><a href="#">Gehaltsrechner</a></li>
 <li><a href="#">Arbeitsrecht-Datenbank</a></li>
 <li><a href="#">Unterhaltsrechner</a></li>
 <li><a href="#">Scheidungsrechner</a></li>
 <li><a href="#">Versicherungsvergleich</a></li>
 <li><a href="#">Gasanbieter-Vergleich</a></li>
 <li><a href="#">Stromanbieter-Vergleich</a></li>
 <li><a href="#">DSL-Vergleich</a></li>
 <li><a href="#">Stellenangebote</a></li>
 <li><a href="#">Krankenkassen-Vergleich</a></li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
</ul>
<ul>
 <li class="title">Top-Themen</li>
 <li><a href="#">Bilder des Tages</a></li>
 <li><a href="#">Geldanlage</a></li>
 <li><a href="#">Versicherung</a></li>
 <li><a href="#">Energiesparen</a></li>
 <li><a href="#">Miete</a></li>
 <li><a href="#">Südafrika</a></li>
 <li><a href="#">New York</a></li>
 <li><a href="#">Männermode</a></li>
 <li><a href="#">Bunesliga</a></li>
 <li><a href="#">Formel 1</a></li>
 <li><a href="#">Oscar</a></li>
 <li><a href="#">Eurovision Song Contest</a></li>
 <li><a href="#">Filmfestival in Cannes</a></li>
 <li><a href="#">Berlinale</a></li>
 <li><a href="#">Webreporter</a></li>
 <li><a href="#">Altersvorsorge</a></li>
</ul>
<ul>
 <li class="title">Services</li>
 <li><a href="#">Newsletter</a></li>
 <li><a href="#">RSS-Feeds</a></li>
 <li><a href="#">Mobil</a></li>
 <li><a href="#">iPhone</a></li>
 <li><a href="#">Twitter</a></li>
 <li><a href="#">Bildschirmschoner</a></li>
 <li><a href="#">Toolbar</a></li>
 <li><a href="#">iGoogle</a></li>
 <li><a href="#">Netvibes</a></li>
 <li><a href="#">Facebook</a></li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
</ul>

</div>

</body>
</html>

coothead

**philips** · 06-13-2011, 12:54 PM

Hello my friend and thank you for your warm welcome.

You did an excellent job on the code... thank you very much... you are really a code master

I am trying actually to make the footer fit well into the bottom of the following template (which I have downloaded and have heavily edited) from the following website: http://www.templatescreme.com/free-w...shion-magazine

In this post, I am attaching the CSS code and the HTML Code of the template.

I would like to know where I need to insert the code which you have kindly provided.

Thank you very much

**philips** · 06-13-2011, 12:57 PM

I am learning a lot here

**coothead** · 06-13-2011, 01:55 PM

Hi there philips,

check out the attachment and see if it meets your requirements.

coothead

**philips** · 06-13-2011, 02:06 PM

Hi there, Thank you very much... is there a way whereby you can actually cause the code you created to be separate from where it says Your company name here cell?

**coothead** · 06-13-2011, 02:12 PM

Hi there philips,

Are you saying that you took the templatemo_style.ccs file out of the css folder and placed it next to the index.html file?

coothead

**philips** · 06-13-2011, 02:14 PM

Hi... no it is working now... I just made a mistake in unzipping the folder... my bad...

is there a way whereby you can actually cause the code you created to be separate from where it says Your company name here cell?

Thank you

**coothead** · 06-13-2011, 02:17 PM

I thought you said that you wanted it in the footer.

So where do you want it to go?

**philips** · 06-13-2011, 02:22 PM

actually... I would like it to be in the white area after the footer...

I like the original design you created very much... I just would like to be able to place it in the white area-after the footer. In that way I can place ads or banners between the footer of the template and your code

Thank you very much

Thread: CSS Code for links

Thread Tools

Search Thread

CSS Code for links

Insertion

Bookmarks

Bookmarks

Posting Permissions