Member Avatar for HLA91

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

  • 6 Contributors
  • 21 Replies
  • 158 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by reen.blom

Recommended Answers

All 21 Replies

Member Avatar for kaung

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.

Member Avatar for jaepi

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

Member Avatar for jbennet

Here is my first css style . Made it myself.

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

Member Avatar for HLA91

ok thanks, that would help because that looks confusing.

Member Avatar for jbennet

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
 
<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="[URL]http://www.google.com[/URL]" class="green">site2</a> 
  </p>
  <p>
   <a href="[URL]http://www.daniweb.com[/URL]" class="green">site3</a> 
  </p>
  <p>
   <a href="[URL]http://www.google.com[/URL]" class="green">site4</a> 
  </p>
  <p>
   <a href="[URL]http://www.google.com[/URL]" class="green">site5</a> 
  </p>
  <p>
   <a href="[URL]http://www.google.com[/URL]" class="green">site6</a> 
  </p>
  <hr>
  <h4> More sites</h4>
 
  <hr>
 
  <p>
   <a href="[URL]http://www.google.com[/URL]" class="green">more1</a> 
  </p>
  <p>
   <a href="[URL]http://www.google.com[/URL]" class="green">more2</a> 
  </p>
  <p>
   <a href="[URL]http://www.google.com[/URL]" 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="[URL]http://www.daniweb.com/certificates/badge33110.jpg[/URL]"
 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 &copy <a href="[EMAIL="james.bennet1@ntlworld.com"]mailto:james.bennet1@ntlworld.com[/EMAIL]" class="white"> James Duncan Bennet 2007</a>
 </div>
 
</div>
 
</body>
</html>
Member Avatar for HLA91

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?

Member Avatar for jbennet

Dont worry. Use it however you want im glad to have helped :)

Member Avatar for jaepi

haha...you earn a reputation point!

Member Avatar for jbennet

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.

site.zip (6.68 KB)
Member Avatar for roryt

Like Kaung said earlier on the best way of practising css is through trial and error. And like most computer related things there are tones of tutorials online. i think you will get a much bigger sense of self accomplishment if you do it yourself rather than use templates.

If you have a spare few hours one night you might find it useful trying csszengarden.com, you will be amazed about how much you will learn by just doing that simple task.

Member Avatar for HLA91

thanks for that, by the way how do you place writing on the buttons?

Member Avatar for roryt

If you are refering to jbennet's example site. That (i think) is just normal html text. So the button is actually set as a background image with text over the top of it. This effects the load time of the page significantly.

Member Avatar for HLA91

k thanks for your help

Member Avatar for jbennet

Yeah the button names are HTML. There not on the images themseleves so that you can have 1 image for all the butttons.

Member Avatar for HLA91

What creates the shaded part behind the buttons? I looked but I dont know what Im looking for, what I did was removed one of the buttons and now I want the shaded part to close in because at the moment it still thinks a button is there, what do I modify?

Many Thanks its another great template

HLA91

Member Avatar for jbennet

to delete a button remove the bits that say

<li>......</li>

Member Avatar for HLA91

I did that but I deleted the far right button and the Grey "bar" behind the buttons is still stretched out as if the button is still there.

Member Avatar for roryt

If you look in the css you may find that there is a width set for this grey bar. You just need to change that so it fits round that buttons you have left. It will probably look like this:

#greyBack {width: xxxPX; background-color: #c0c0c0;}

you simply change the numbers that my lowercase x's represent.

Member Avatar for HLA91

I cant find that anywhere in the css and the html file.I can just hide it by setting its colour to white, but here is the code anyway can you try and find the property for me please.

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    font-size: 80%;
    font-weight: bold;
    padding:0;
    line-height: 1.5em;
    color: #000000;
    
    }

b{font-size: 110%;}

em{color: red;}

#maincontainer{
width: 840px;
margin: 0 auto;
}

#topsection{
background: #EAEAEA;
height: 50px;
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 220px;
}

#leftcolumn{
float: left;
width: 220px;
margin-left: -840px;
}

#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
background: #EAEAEA;
}

#footer a{
color: #000000;
}

.innertube{
margin: 10px;
margin-top: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

img {
    border: none;
}

#menu {
    width: 200px;
    margin: 10px;
    }
    
#menu li a {
    height: 32px;
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }    
    
#menu li a:link, #menu li a:visited {
    color: #FFF;
    display: block;
    background:  url(menu.gif);
    padding: 8px 0 0 35px;
    }
    
#menu li a:hover {
    color: #FFF;
    background:  url(menu.gif) 0 -32px;
    padding: 8px 0 0 35px;
    }

#tabs {
      float:left;
      width:100%;
      font-size:93%;
      }
    #tabs ul {
          margin:0;
          padding:10px 10px 0 50px;
          list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("tableft.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
       #tabs10 a span {float:none;}
       #tabs9 a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }

      #tabs #current a {
              background-position:0% -42px;
      }
      #tabs #current a span {
              background-position:100% -42px;
      }
Member Avatar for roryt

where you see the id #tabs in the style sheet just set a width there is pixels that works for you.

Then put

margin: auto;

That will make it look a bit better. because I wouldnt change the width of the grey bit because it lines up with the bottom grey piece.

Member Avatar for reen.blom

Thank you guys for thge links and the templates!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.