•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 375,168 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,267 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser:
Views: 4850 | Replies: 21 | Solved
 |
•
•
Join Date: Oct 2006
Location: South Wales
Posts: 134
Reputation: 
Rep Power: 0
Solved Threads: 2
Junior Poster
Simple css templates Hi everyone
I just started using css and I was wondering if anyone knows of some SIMPLE yet nice templates I can get hold of that are easy for newbie to modify. I looked at the site dexterz suggested but they were a bit confusing. Can anybody tell me where to go to get the templates I need please.
Many Thanks
HLA91
I just started using css and I was wondering if anyone knows of some SIMPLE yet nice templates I can get hold of that are easy for newbie to modify. I looked at the site dexterz suggested but they were a bit confusing. Can anybody tell me where to go to get the templates I need please.
Many Thanks
HLA91
You know your a geek, if you introduce your wife as "mylady@home.wife"
•
•
Join Date: May 2007
Location: 949 OC, CA
Posts: 25
Reputation:
Rep Power: 2
Solved Threads: 1
Light Poster
if you want to start something from scratch, you can try dreamweaver or frontpage and by trial and error test the various css styles.
or you can go to http://www.freecsstemplates.org/ and donwlaod templates and tweak the style sheet for testing purpose. There should be many free/sample out there. Try googling for it.
or you can go to http://www.freecsstemplates.org/ and donwlaod templates and tweak the style sheet for testing purpose. There should be many free/sample out there. Try googling for it.
•
•
Join Date: Jul 2006
Location: Oblivion
Posts: 647
Reputation:
Rep Power: 3
Solved Threads: 4
Practically a Master Poster
you can study some codes and techniques used here -> http://cssplay.co.uk
i was once a noob...css codes here helped me to polish my skills...lol...OA
i was once a noob...css codes here helped me to polish my skills...lol...OA
Retreat!!!
•
•
Join Date: Apr 2005
Location: Old Hampshire, Old England (LOL)
Posts: 11,937
Reputation:
Rep Power: 30
Solved Threads: 263
Here is my first css style . Made it myself.
i will include a HTML page soon to show you how it is used
body
{
margin: 0;
padding: 0;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #000099;
}
#container
{
margin: 1em 5%;
background-color: #FFF;
border: 1px solid #333;
}
#banner
{
color: #FFF;
background-color: #0066CC;
border-bottom: 1px solid #333;
}
#banner h1
{
margin: 0;
padding: .5em;
}
#nav
{
background-color: #FFF;
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#nav p { margin-top: 0; }
#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
}
#content h2 { margin-top: 0; }
#content h4 { margin-top: 0; }
#footer
{
color: #FFF;
clear: both;
background-color: #0066CC;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}
a,white:link {
color: #FFFFFF; text-decoration: underline;
}
a.white:active {
color: #FFFFFF; text-decoration: underline;
}
a.white:visited {
color: #FFFFFF; text-decoration: underline;
}
a.white:hover {
color: #FF0000; text-decoration: none;
}
a.green:link {color: #008000; text-decoration: underline; }
a.green:active {color: #008000; text-decoration: underline; }
a.green:visited {color: #008000; text-decoration: underline; }
a.green:hover {color: #ff0000; text-decoration: none; }
i will include a HTML page soon to show you how it is used
TRY MY SUGGESTIONS AT YOUR OWN RISK!
james.bennet1@ntlworld.com
james.bennet1@ntlworld.com
•
•
Join Date: Oct 2006
Location: South Wales
Posts: 134
Reputation:
Rep Power: 0
Solved Threads: 2
Junior Poster
ok thanks, that would help because that looks confusing.
You know your a geek, if you introduce your wife as "mylady@home.wife"
•
•
Join Date: Apr 2005
Location: Old Hampshire, Old England (LOL)
Posts: 11,937
Reputation:
Rep Power: 30
Solved Threads: 263
Easier than it looks 
Here is a page making use of that stylesheet. Copy and paste the HTML below into notepad and save it with the extension .HTML . Do the same with the CSS file above. THE CSS FILE MUST BE CALLED STYLE.CSS
Here is a page making use of that stylesheet. Copy and paste the HTML below into notepad and save it with the extension .HTML . Do the same with the CSS file above. THE CSS FILE MUST BE CALLED STYLE.CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>Test Site</title> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> </head> <body> <div id="container"> <div id="banner"> <h1>Test Site</h1> </div> <div id="nav"> <hr> <h4> Links to stuff</h4> <hr> <p> <a href="index.html" class="green">Main Menu</a> </p> <p> <a href="sitemap.html" class="green">site1</a> </p> <p> <a href="http://www.google.com" class="green">site2</a> </p> <p> <a href="http://www.daniweb.com" class="green">site3</a> </p> <p> <a href="http://www.google.com" class="green">site4</a> </p> <p> <a href="http://www.google.com" class="green">site5</a> </p> <p> <a href="http://www.google.com" class="green">site6</a> </p> <hr> <h4> More sites</h4> <hr> <p> <a href="http://www.google.com" class="green">more1</a> </p> <p> <a href="http://www.google.com" class="green">more2</a> </p> <p> <a href="http://www.google.com" class="green">more3</a> </p> <p><a href="<A href="http://www.daniweb.com/techtalkforums/member33110.html"><img">http://www.daniweb.com/techtalkforums/member33110.html"><img src="http://www.daniweb.com/certificates/badge33110.jpg" border="0" alt="jbennet has contributed to our community" width="125" height="125" /></a></p> </div> <div id="content"> <h2>Welcome to my opensource software site</h2> <h4>Why did you make this site?</h4> <p>I made it to experiment with and learn about Apache and something called CSS. In the field of computing, CSS (Cascading Style Sheets) are used to describe the presentation of a document written in a markup language such as HTML.</p> <h4>What can CSS do for me?</h4> <p> Cascading Style Sheets offer a simple mechanism for adding style (e.g. fonts, colors, layout) to web documents as changing a single stylesheet can mean that you dont have to change all of your pages. Layout with CSS is easy too. If you are used to laying out a page with tables, it may at first appear difficult, but it isn't really. It's just different. In fact, it makes much more sense. In order to understand, you need to think of each part of the page as an individual chunk that can be placed absolutely or relative to another chunk.</p> <h4>What is Daniweb?</h4> <p>Daniweb is a really handy forum for talking about IT related topics such as linux and website creation/managament. DaniWeb is an IT Discussion community which, at only three years old, has already surpassed 200,000 forum posts. It is currently growing at the rate of over 400 new members daily and offers everything Information Technology related in one convenient place, putting a wealth of knowledge at your fingertips. </p> </div> <div id="footer"> Copyright © <a href="mailto:james.bennet1@ntlworld.com" class="white"> James Duncan Bennet 2007</a> </div> </div> </body> </html>
TRY MY SUGGESTIONS AT YOUR OWN RISK!
james.bennet1@ntlworld.com
james.bennet1@ntlworld.com
•
•
Join Date: Oct 2006
Location: South Wales
Posts: 134
Reputation:
Rep Power: 0
Solved Threads: 2
Junior Poster
Thanks for that if I change the look slightly and the text do you mind me using this code for a site and I would place your name as a comment or as the copyright?
You know your a geek, if you introduce your wife as "mylady@home.wife"
•
•
Join Date: Apr 2005
Location: Old Hampshire, Old England (LOL)
Posts: 11,937
Reputation:
Rep Power: 30
Solved Threads: 263
Dont worry. Use it however you want im glad to have helped 
TRY MY SUGGESTIONS AT YOUR OWN RISK!
james.bennet1@ntlworld.com
james.bennet1@ntlworld.com
•
•
Join Date: Jul 2006
Location: Oblivion
Posts: 647
Reputation:
Rep Power: 3
Solved Threads: 4
Practically a Master Poster
haha...you earn a reputation point!
Retreat!!!
•
•
Join Date: Apr 2005
Location: Old Hampshire, Old England (LOL)
Posts: 11,937
Reputation:
Rep Power: 30
Solved Threads: 263
hey if you want another good free one then here you go. Includes css, button images and sample page. Much better than the other one.
Last edited by jbennet : Jun 4th, 2007 at 4:16 pm.
TRY MY SUGGESTIONS AT YOUR OWN RISK!
james.bennet1@ntlworld.com
james.bennet1@ntlworld.com
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb Site Layout and Usability Marketplace
Linear Mode
Other Threads in the Site Layout and Usability Forum
- Previous Thread: 10 CSS Layout Templates For You To Practice
- Next Thread: video on the internet?
