Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Need help creating a website :-)

Started by Matt T , Oct 04 2006 11:55 PM

  • Please log in to reply

#1
Matt T
Posted 04 October 2006 - 11:55 PM

Matt T

    Member

  • Member
  • PipPipPip
  • 674 posts
Hey,

I am going to create a website. I have basic to moderate HTML knowledge but I just need help setting it out. Attached is a picture of what I would like it to look like (I drew one but it looked too dodgy to post) :-). If anyone is out there that thinks they could lend some time to make me a template you'd be my friend forever :whistling:

Has anyone seen this design in free template places or anything like that, or maybe a site that looks like this? If you have could you please say :blink:

~Matt :-)

Attached Thumbnails

  • website_design_computer.PNG

  • 0

Advertisements

#2
thenotch
Posted 05 October 2006 - 08:08 AM

thenotch

    Member

  • Retired Staff
  • 668 posts
I can set this up as a VERY basic CSS template that you can use...

I'll PM you with the code, use it if you like...
  • 0

#3
thenotch
Posted 05 October 2006 - 08:54 AM

thenotch

    Member

  • Retired Staff
  • 668 posts
I'm going to post my code that I sent matty3 via PM here just for future reference for anyone who is interested in this simple layout.

Here is the code... it's just a very basic layout but should give you an idea of what you can do. Look at the code closely to get a feel for how it is laid out, at which point you can modify as needed.

Save this bit as template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample CSS Layout by Notch</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="border">
  <div id="wrapper">
	<div id="header">This is where your header image, text will go </div>
	<div id="navwrap">
	  <div id="navbar">This is where your navigation or links will go </div>
	</div>
	<div id="contentwrap">
	  <div id="content">
		<p>This is where your content will go (what you specified as "body")</p>
		<p> </p>
		<p> </p>
		<p> </p>
	  </div>
	  <div id="sidebar">
		<p>This is where your sidebar information will go. </p>
		<p>You can create additional css div's here to give a box look if desired. </p>
	  </div>
	</div>
	<div id="footer">This is the footer area... it can be left blank or you can insert your footer information here </div>
  </div>
</div>
</body>
</html>

Now, save this bit as default.css
body {
	background-color: #999999;
}
#border {
	width: 780px;
	padding: 8px;
	margin-right: auto;
	margin-left: auto;
	background-color: #efefef;
}
#wrapper {
	width: 770px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
}
#header {
	height: 100px;
	width: 770px;
	background-color: #FFFFFF;
}
#navwrap {
	height: 40px;
	width: 770px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #EFEFEF;
}
#navbar {
	height: 40px;
	width: 770px;
	text-align: center;
	background-color: #FFFFFF;
}
#contentwrap {
	width: 770px;
	background-color: #FFFFFF;
}
#content {
	float: left;
	width: 570px;
	padding-left: 8px;
	padding-right: 8px;
	background-color: #FFFFFF;
}
#sidebar {
	width: 176px;
	float: right;
	padding-right: 8px;
	background-color: #FFFFFF;
}
#footer {
	clear: both;
	width: 770px;
	background-color: #FFFFFF;
}

Attached Thumbnails

  • example3.jpg

Edited by thenotch, 05 October 2006 - 08:59 AM.

  • 0

#4
Matt T
Posted 05 October 2006 - 07:03 PM

Matt T

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 674 posts
Thanks The Notch :whistling:

Is there anyway to make the boxes sort of rounded like my image and make the content load in the box without having to reload the whole page? Also is there a way to make the sidebar and footer bits seperate?

Does anyone have any ideas for colours?

Sorry if I'm being a pain :blink:

~Matt :-)

Edited by matty3, 05 October 2006 - 07:06 PM.

  • 0

#5
thenotch
Posted 05 October 2006 - 07:28 PM

thenotch

    Member

  • Retired Staff
  • 668 posts
There are ways to do everything you said, but again, this was just a VERY basic layout.

Short of designing the site for you (which I get paid for) I would suggest taking this basic design and seeing what you can do with it.

Images for backgrounds can assist in your "look" as can tweaking the CSS.

ANother suggestion is taking a look at www.w3schools.com and taking a basic course in CSS to get a better understanding.
  • 0

#6
Matt T
Posted 05 October 2006 - 09:57 PM

Matt T

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 674 posts
What course would have the information I am looking for in it? Can you tell me? I am taking a course in it at Html Dog. :whistling:

~Matt :-)
  • 0

#7
thenotch
Posted 06 October 2006 - 07:18 AM

thenotch

    Member

  • Retired Staff
  • 668 posts

What course would have the information I am looking for in it? Can you tell me? I am taking a course in it at Html Dog. :whistling:

~Matt :-)


Thats a good place to learn from...

The course at W3Schools is http://w3schools.com/css/default.asp
  • 0
Back to Web Development · Next Unread Topic →




Similar Topics

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP