Log in

View Full Version : 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...


<!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 :cool:

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-website-fashion-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:)

philips
06-13-2011, 02:25 PM
sorry for the confusion...

coothead
06-13-2011, 02:28 PM
No problem, check out the revised attachment and use it instead of the original. ;)

coothead

philips
06-13-2011, 03:29 PM
Thank you very much my friend. Most thankful to your help. :)

I wish you an excellent day :)

coothead
06-13-2011, 06:21 PM
No problem, you're very welcome. ;)

philips
06-22-2011, 05:27 PM
Hello

It's me again,

I am looking to amend the "Subscribe Newsletter" form so it can have a field for the name as well. I am talking about the template. ;)

Apart from that I was wondering what code is need in order for the form to actually work. I would like the form to direct the visitor to a "Thank you" page when they hit the Subscribe button.

Looking for your good advice and help.

Thank you :)

philips
06-22-2011, 05:39 PM
I was able to make the following amendment to the HTML document:

<input name="Name" type="text" id="Name" value="Name..." />
<input name="E-mail" type="text" id="E-mail" value="E-mail..." /><input type="submit" E-mail="Submit" value="Subscribe" />

However I have difficulty in making the form actually work.

philips
06-22-2011, 08:05 PM
Hello to you my friend,

I was able to make it work :)

philips
06-23-2011, 11:18 AM
I would like to add the below code which I found on your website instead of the one that is inside the CSS document (please see attachment) I do not know which part of the CSS code pertains to the form. :confused:



<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;
background:url(media/formbg.gif) repeat-x left top;
}

</style>