Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Need help creating a website :-)


  • Please log in to reply

#1
Matt T

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

thenotch

    Member

  • Retired Staff
  • 667 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

thenotch

    Member

  • Retired Staff
  • 667 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

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

thenotch

    Member

  • Retired Staff
  • 667 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

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

thenotch

    Member

  • Retired Staff
  • 667 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






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP