10 Replies - 5973 Views - Last Post: 23 July 2012 - 10:54 PM

#1 JK666  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-July 12

First time coding website in notepad++

Posted 22 July 2012 - 11:48 PM

Hi im coding my first website for course im doing useing notepad++ its working perfectly fine in IE but in firefox it stacks the columns insted of them being side by side and wont it use the background colors specified if anyone could take a look at the code for me i will be forever greatfull i have spent a whole day just trying to get this solved and my assignment is due in a few days

so here is the code i know images wont show but you still shuld see the problem

/*Main Page*/

<html>

<head>
<title>Home</title>
<link rel= Stylesheet TYPE= "text/css" HREF= "style2.css"> 

</head>

<body;>

<div id='wrapper'>

<div id='header'>
<h1>Your company name</h1>
</div>

<div id='nav'>

<a href='./'><a href='./Index.html'>Home</a></a>
<a href='.#'><a href='./Company.html'>Company</a></a>
<a href='.#'>Services</a>
<a href='.#'>Products</a>
<a href='.#'>Clients</a>
<a href='.#'>Downloads</a>
<a href='.#'>Site Map</a>
<a href='.#'>Contact Us</a>

</div> 

<div id='content'>

<div id='left'>
<h2>Company News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet justo eget nibh volutpat volutpat eu eget sapien. Phasellus neque diam, interdum in auctor ac, egestas a purus. Vivamus lobortis, est nec interdum hendrerit, nibh odio.</p>
<p> Phasellus ac leo eget nisi tempor interdum. Integer justo orci, venenatis ac cursus ut, molestie id lacus. Nullam erat nisl.</p>

</div>

<div id='right'>
<img src="images/main.png" alt="main picture" style="width:570px; height:140px;"/>
<h3>Welcome to Company Website!</h3>
<p>In lacinia, erat at vulputate dapibus, nibh lectus tempor leo, vel rutrum erat dui ut nunc. Donec malesuada, est sit amet adipiscing cursus, metus dolor ornare elit, aliquam porttitor risus eros sit amet ligula. Aenean eros ipsum, eleifend ultricies tincidunt eget, dapibus nec ligula. Maecenas purus augue, malesuada et tincidunt posuere, volutpat sit amet est. Suspendisse diam est, cursus eget vestibulum a, aliquet a libero. Phasellus a sagittis odio. Fusce vel lectus eget nibh faucibus tristique ut vitae elit. Mauris tortor erat, adipiscing quis laoreet vitae, mattis at tellus. Morbi fringilla viverra facilisis. Suspendisse velit tortor, consequat quis aliquet et, commodo fermentum diam. Praesent imperdiet, orci id mattis sodales, metus diam porta velit, at vestibulum arcu risus sed nibh. Etiam et lorem sem.</p>
<p>Nullam dolor quam, dictum sed mollis eget, ornare eu nulla. Maecenas vitae nisl sed nulla consectetur dignissim. Vivamus elementum eros eu purus venenatis id iaculis magna ornare. Etiam vel libero risus, id eleifend lacus. Fusce faucibus laoreet eros in feugiat. Fusce vitae felis sem, tempus bibendum purus. Aenean in erat nisi. Suspendisse odio dolor, aliquam eget mattis vitae, dapibus eu ante. Sed metus arcu, pulvinar ac euismod eu, hendrerit quis dolor. Vestibulum congue, augue ac pretium sollicitudin, augue massa sagittis metus, a condimentum dolor nulla non lorem. Aenean condimentum, sapien vel rutrum accumsan, justo quam sodales eros, </p>
</div>

<div class='clear'></div> 

</div>

<div id='footer'><a href="mailto:[email protected]">[email protected]</a></div>

</div>

</body>

</html>


/*......................CSS style sheet CODE*.............................../


*{
font-family: Verdana, Arial, Helvetica, Sans-serif;

}

body{
background-color: #999999;
width: 780px;
margin: 5px;
}

#wrapper{
width: 780px;
background-color: none;
height: 850px;
margin-left: auto;
margin-right:auto;
}
#wrapper #header{
height: 60px;
width: 780px; 
padding-left: 10px;
padding-top: 12px;
background-image: url(./images/header.png);
background-repeat: no-repeat;
} 
#wrapper #nav{
text-align: center;
list-style: none;
height: 15px;
width: 780px;
font-size: 10px;
background-color: #FFCC66;

}
#wrapper #content{
text-align: left;
} 
#wrapper #footer {
text-align: center;
height: 50px;
width: 780px;
padding-top: 10px;
background-image: url(./images/header.png);
background-repeat: no-repeat;
} 


/*FONTS*/

H1 {font: bold 26pt Verdana, Arial, Helvetica, Sans-serif; color: #AEC3E5}
H2 {font: bold 9pt Verdana, Arial, Helvetica, Sans-serif; color: black}
H3 {font: bold 18pt Verdana, Arial, Helvetica, Sans-serif; color: #5678BB}
H4 {font: bold 16pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}



P {font: 11pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}



/*COLUMS*/

#wrapper#content#left{
background-color: #CCCCCC;
width: 190px;
height: 650px;
float: left;
padding: 10px;
}

#wrapper#content#right{
background-color: white;
width: 590px;
height: 650px;
float: right;
padding: 10px;
}

.clear{
clear: both;
}


/*NAV*/

#wrapper #nav a{
padding: 3px;
}




a:link{color:#333333;text-decoration:underline;}
a:visited{color:#333333;text-decoration:underline;}
a:hover{color:#333333;text-decoration:none;}
a:active{color:#0000CC;text-decoration:underline;} 




Is This A Good Question/Topic? 0
  • +

Replies To: First time coding website in notepad++

#2 Skydiver  Icon User is online

  • Code herder
  • member icon

Reputation: 5923
  • View blog
  • Posts: 20,252
  • Joined: 05-May 12

Re: First time coding website in notepad++

Posted 22 July 2012 - 11:48 PM

And how is this a C/C++ question?
Was This Post Helpful? 0
  • +
  • -

#3 JK666  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-July 12

Re: First time coding website in notepad++

Posted 22 July 2012 - 11:50 PM

Sorry must have clicked the wrong topic how do i change topic
Was This Post Helpful? 0
  • +
  • -

#4 no2pencil  Icon User is offline

  • Professor Snuggly Pants
  • member icon

Reputation: 6560
  • View blog
  • Posts: 30,699
  • Joined: 10-May 07

Re: First time coding website in notepad++

Posted 22 July 2012 - 11:52 PM

** Moved to HTML **
Was This Post Helpful? 0
  • +
  • -

#5 Lazy Vulpes  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 91
  • Joined: 02-May 12

Re: First time coding website in notepad++

Posted 23 July 2012 - 12:41 AM

You have a ; in your body tag.
You need a white-space between your ids under columns in your css.

If it still acts a little weird, try playing around with the width value of ether #wrapper, #left or #right.

This post has been edited by Lazy Vulpes: 23 July 2012 - 12:50 AM

Was This Post Helpful? 0
  • +
  • -

#6 JK666  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-July 12

Re: First time coding website in notepad++

Posted 23 July 2012 - 02:23 AM

Thanks for the reply im geting someware now but still not working it will only work in FF now if i change on of the column widths by -50px then if i load it in IE there is a gapbetween the columns

here is updated code

<html>

<head>
<title>Home</title>
	<link rel= Stylesheet TYPE= "text/css" HREF= "style2.css">   
			
</head>

	<body>
	
		<div id='wrapper'>
		
			<div id='header'>
					<h1>Your company name</h1>
			</div>
		
			<div id='nav'>
			
					<a href='./'><a href='./Index.html'>Home</a></a>
					<a href='.#'><a href='./Company.html'>Company</a></a>
					<a href='.#'>Services</a>
					<a href='.#'>Products</a>
					<a href='.#'>Clients</a>
					<a href='.#'>Downloads</a>
					<a href='.#'>Site Map</a>
					<a href='.#'>Contact Us</a>
				
			</div>	
		
			<div id='content'>
			
			<div id='left'>
					<h2>Company News</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet justo eget nibh volutpat volutpat eu eget sapien. Phasellus neque diam, interdum in auctor ac, egestas a purus. Vivamus lobortis, est nec interdum hendrerit, nibh odio.</p>
						<p> Phasellus ac leo eget nisi tempor interdum. Integer justo orci, venenatis ac cursus ut, molestie id lacus. Nullam erat nisl.</p>
					
				</div>
			
			<div id='right'>
				<img src="images/main.png" alt="main picture" style="width:560px; height:140px;"/>
					<h3>Welcome to Company Website!</h3>
						<p>In lacinia, erat at vulputate dapibus, nibh lectus tempor leo, vel rutrum erat dui ut nunc. Donec malesuada, est sit amet adipiscing cursus, metus dolor ornare elit, aliquam porttitor risus eros sit amet ligula. Aenean eros ipsum, eleifend ultricies tincidunt eget, dapibus nec ligula. Maecenas purus augue, malesuada et tincidunt posuere, volutpat sit amet est. Suspendisse diam est, cursus eget vestibulum a, aliquet a libero. Phasellus a sagittis odio. Fusce vel lectus eget nibh faucibus tristique ut vitae elit. Mauris tortor erat, adipiscing quis laoreet vitae, mattis at tellus. Morbi fringilla viverra facilisis. Suspendisse velit tortor, consequat quis aliquet et, commodo fermentum diam. Praesent imperdiet, orci id mattis sodales, metus diam porta velit, at vestibulum arcu risus sed nibh. Etiam et lorem sem.</p>
						<p>Nullam dolor quam, dictum sed mollis eget, ornare eu nulla. Maecenas vitae nisl sed nulla consectetur dignissim. Vivamus elementum eros eu purus venenatis id iaculis magna ornare. Etiam vel libero risus, id eleifend lacus. Fusce faucibus laoreet eros in feugiat. Fusce vitae felis sem, tempus bibendum purus. Aenean in erat nisi. Suspendisse odio dolor, aliquam eget mattis vitae, dapibus eu ante. Sed metus arcu, pulvinar ac euismod eu, hendrerit quis dolor. Vestibulum congue, augue ac pretium sollicitudin, augue massa sagittis metus, a condimentum dolor nulla non lorem. Aenean condimentum, sapien vel rutrum accumsan, justo quam sodales eros, </p>
			</div>
			
					<div class='clear'></div>	
			
			</div>

			<div id='footer'><a href="mailto:[email protected]">[email protected]</a></div>
				
		</div>
				
	</body>

</html>



/*.............................CSS style sheet*................................./



*{
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	
}

body{
	background-color: #999999;
	width: 780px;
}

#wrapper{
	width: 780px;
	background-color: none;
	height: 850px;
	margin-left: auto;
	margin-right:auto;
}

#wrapper #header{
	height: 60px;
	width: 780px;	
	padding-left: 10px;
	padding-top: 12px;
	background-image: url(./images/header.png);
	background-repeat: no-repeat;
}	

#wrapper #nav{
	text-align: center;
	list-style: none;
	height: 15px;
	width: 780px;
	font-size: 10px;
	background-color: #FFCC66;
	
}

#wrapper #content{
	text-align: left;
}
	
#wrapper #footer {
	text-align: center;
	height: 50px;
	width: 780px;
	padding-top: 10px;
	background-image: url(./images/header.png);
	background-repeat: no-repeat;
}	


/*FONTS*/
 
H1 {font: bold 26pt Verdana, Arial, Helvetica, Sans-serif; color: #AEC3E5}
H2 {font: bold 9pt Verdana, Arial, Helvetica, Sans-serif; color: black}
H3 {font: bold 18pt Verdana, Arial, Helvetica, Sans-serif; color: #5678BB}
H4 {font: bold 16pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}



P {font: 11pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}



/*COLUMS*/

#wrapper #content #left{
	background-color: #CCCCCC;
	width: 190px;
	height: 700px;
	float: left;
	padding: 10px;
}

#wrapper #content #right{
	background-color: white;
	width: 590px;
	height: 700px;
	float: right;
	padding: 10px;
}

.clear{
	clear: both;
}


/*NAV*/

#wrapper #nav a{
	padding: 3px;
}

	


a:link{color:#333333;text-decoration:underline;}
a:visited{color:#333333;text-decoration:underline;}
a:hover{color:#333333;text-decoration:none;}
a:active{color:#0000CC;text-decoration:underline;}


This post has been edited by no2pencil: 23 July 2012 - 02:28 AM
Reason for edit:: Corrected code tags

Was This Post Helpful? 0
  • +
  • -

#7 Lazy Vulpes  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 91
  • Joined: 02-May 12

Re: First time coding website in notepad++

Posted 23 July 2012 - 04:02 AM

Your wrapper width is 780. your left column is 190 and your right column is 590. Both columns have padding:10px, so that's a total width of 210 and 610.
610+210=820
780-820 is -40

Try changing one of the column width by -40 instead.
or both by -20, or remove the padding, or change the site width to 820.

This post has been edited by Lazy Vulpes: 23 July 2012 - 04:16 AM

Was This Post Helpful? 0
  • +
  • -

#8 JK666  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-July 12

Re: First time coding website in notepad++

Posted 23 July 2012 - 03:18 PM

OK changing the column width by 40px fixed it in FF but now there is a 40px gap when run in IE
Was This Post Helpful? 0
  • +
  • -

#9 JK666  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-July 12

Re: First time coding website in notepad++

Posted 23 July 2012 - 04:01 PM

Here are some screens

Posted Image

Posted Image

This post has been edited by GunnerInc: 23 July 2012 - 04:08 PM
Reason for edit:: Fixed images

Was This Post Helpful? 0
  • +
  • -

#10 Lazy Vulpes  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 91
  • Joined: 02-May 12

Re: First time coding website in notepad++

Posted 23 July 2012 - 09:47 PM

Okay, let's go through all of your code and make sure it's 100% valid.

First of all, you need a <!DOCTYPE> declaration.

A <!DOCTYPE> declaration helps the browser to display a web page correctly. A browser can only display a document correctly, if it knows what kind of document it is. There are many different versions of HTML, and a browser can only display an HTML page 100% correctly if it knows the exact HTML version used in the page. This is what <!DOCTYPE> is used for. <!DOCTYPE> is not an HTML tag. It is an information (a declaration) to the browser about what version the HTML is written in. I will be using XHTML 1.0 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Next thing we need is a xmlns attribute in <html>. The xmlns attribute specifies the xml namespace for your document. The xmlns attribute is required in XHTML, but invalid in HTML. This is because HTML unlike XHTML isn't a XML document. XML namespaces provide a simple method for qualifying element and attribute names used in XML documents by associating them with namespaces identified by URI references.
<html xmlns="http://www.w3.org/1999/xhtml">

Now we need a character encoding. It is very important that the character encoding of any XML or (X)HTML document is clearly labeled, so that clients can easily map these encodings to Unicode. You can read more about character encoding at www.w3.org
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Next on the list is a title, you already have this, but it is important to notice that it is mandatory in XHTML documents. Now we're ready to actually serve the page to a client correctly. This is what we have so far.
<!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=utf-8" />
		<title>Home</title>	
	</head>

No we need to link to your stylecheet. You have a few errors here.

This is your code
<link rel= Stylesheet TYPE= "text/css" HREF= "style2.css">

In XHTML every element and attribute should be lowercase, an attribute value must be enclosed by the " or ' symbol, and all elements must be closed probably.
<link rel="stylesheet" type="text/css" href="style2.css"/>

Next on the list is your nav bar. you have a few errors here.
<div id='nav'>
<a href='./'><a href='./Index.html'>Home</a></a>
<a href='.#'><a href='./Company.html'>Company</a></a>
<a href='.#'>Services</a>
<a href='.#'>Products</a>
<a href='.#'>Clients</a>
<a href='.#'>Downloads</a>
<a href='.#'>Site Map</a>
<a href='.#'>Contact Us</a>
</div>

In the first two links, you have a link within a link. just remove the outer a tags.
<div id='nav'>
<a href='./Index.html'>Home</a>
<a href='./Company.html'>Company</a>
<a href='.#'>Services</a>
<a href='.#'>Products</a>
<a href='.#'>Clients</a>
<a href='.#'>Downloads</a>
<a href='.#'>Site Map</a>
<a href='.#'>Contact Us</a>
</div>


That's it, your xhtml document is now 100% valid! Next up is your css document.

This is the complete xhtml document
<!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=utf-8" />
		<title>Home</title>
		<link rel="stylesheet" type="text/css" href="style2.css"/>   	
	</head>

	<body>
		<div id='wrapper'>
			<div id='header'>
				<h1>Your company name</h1>
			</div>
			<div id='nav'>
				<a href='./Index.html'>Home</a>
				<a href='./Company.html'>Company</a>
				<a href='.#'>Services</a>
				<a href='.#'>Products</a>
				<a href='.#'>Clients</a>
				<a href='.#'>Downloads</a>
				<a href='.#'>Site Map</a>
				<a href='.#'>Contact Us</a>
			</div>	
			<div id='content'>
				<div id='left'>
					<h2>Company News</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet justo eget nibh volutpat volutpat eu eget sapien. Phasellus neque diam, interdum in auctor ac, egestas a purus. Vivamus lobortis, est nec interdum hendrerit, nibh odio.</p>
					<p>Phasellus ac leo eget nisi tempor interdum. Integer justo orci, venenatis ac cursus ut, molestie id lacus. Nullam erat nisl.</p>	
				</div>
			<div id='right'>
				<img src="images/main.png" alt="main picture" style="width:560px; height:140px;"/>
				<h3>Welcome to Company Website!</h3>
				<p>In lacinia, erat at vulputate dapibus, nibh lectus tempor leo, vel rutrum erat dui ut nunc. Donec malesuada, est sit amet adipiscing cursus, metus dolor ornare elit, aliquam porttitor risus eros sit amet ligula. Aenean eros ipsum, eleifend ultricies tincidunt eget, dapibus nec ligula. Maecenas purus augue, malesuada et tincidunt posuere, volutpat sit amet est. Suspendisse diam est, cursus eget vestibulum a, aliquet a libero. Phasellus a sagittis odio. Fusce vel lectus eget nibh faucibus tristique ut vitae elit. Mauris tortor erat, adipiscing quis laoreet vitae, mattis at tellus. Morbi fringilla viverra facilisis. Suspendisse velit tortor, consequat quis aliquet et, commodo fermentum diam. Praesent imperdiet, orci id mattis sodales, metus diam porta velit, at vestibulum arcu risus sed nibh. Etiam et lorem sem.</p>
				<p>Nullam dolor quam, dictum sed mollis eget, ornare eu nulla. Maecenas vitae nisl sed nulla consectetur dignissim. Vivamus elementum eros eu purus venenatis id iaculis magna ornare. Etiam vel libero risus, id eleifend lacus. Fusce faucibus laoreet eros in feugiat. Fusce vitae felis sem, tempus bibendum purus. Aenean in erat nisi. Suspendisse odio dolor, aliquam eget mattis vitae, dapibus eu ante. Sed metus arcu, pulvinar ac euismod eu, hendrerit quis dolor. Vestibulum congue, augue ac pretium sollicitudin, augue massa sagittis metus, a condimentum dolor nulla non lorem. Aenean condimentum, sapien vel rutrum accumsan, justo quam sodales eros,</p>
			</div>
				<div class='clear'></div>	
			</div>
			<div id='footer'><a href="mailto:[email protected]">[email protected]</a></div>	
		</div>		
	</body>
</html>



First on the list is how you point to your elements. When defining style for elements with an ID you don't need to define element that the element is enclosed by

e.g.
#wrapper #content #left
This is because each ID can only be used by one element. (if #left was a class, and you wanted to make sure that it was only the .left in #content that the style applied to you would need to include #content before .left.)

There's a exceptions to this though, if you want #left to be styled only when you hover over #content you would need to write #content:hover #left.

In body you're defining it's width. this is not needed.

In #wrapper you're saying background-color:none; There is no such thing as a none color. You can say background-image:none; but not background-color:none; Just remove it. you're also defining it's height. This is not needed as it will adjust to the height of the elements inside of it. You're also defining it's left and right margin to be auto. What this does is centring it, but since your body had a width the same as wrapper this had no visual effect. if you want your website to be centred, keep it, otherwise remove it.

Next is your style of #header. You start by defining the height. This is not needed as it will automatically adjust it's height according to the size of the elements inside of it (h1). Then you define it's width. This is not needed ether as #header is a div element and div is a block element. (it's width acts as if it's 100% by default) so #header's width will automatically be equivalent to the width of #wrapper.


Next is your styling of h and p elements.

This is your code.
H1 {font: bold 26pt Verdana, Arial, Helvetica, Sans-serif; color: #AEC3E5}
H2 {font: bold 9pt Verdana, Arial, Helvetica, Sans-serif; color: black}
H3 {font: bold 18pt Verdana, Arial, Helvetica, Sans-serif; color: #5678BB}
H4 {font: bold 16pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}
P {font: 11pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}


You use pt to define your font size, this is wrong. Point values are only for print CSS. A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. One inch = one real-life inch like-on-a-ruler. Not an inch on a screen, which is totally arbitrary based on resolution. you can read more about font sizes here.

You're also defining the font family to use. This is unnecessary since it's the same font family you've set on all elements in the start of your css. Since we're no longer defining the font family, we need to use both font-weight and font-size to style the font correctly. All of your h tags needs to be bold, so let's just make it so in one selection, by pointing to all your h elements in one statement like this: h1,h2,h3,h4{}

So this is what we'll end up with instead.
h1,h2,h3,h4{font-weight:bold}
h1 {font-size:48px; color: #AEC3E5}
h2 {font-size:12px; color: black}
h3 {font-size:24px; color: #5678BB}
h4 {font-size:20px; color: #333333}
p {font-size: 14px; color: #333333}
h elements have a default top and bottom margin, you might want to remove it.

That is all. This is what you should end up with.
*{
font-family: Verdana, Arial, Helvetica, Sans-serif;
}

body{
	background-color: #999999;
}

#wrapper{
	width: 780px;
}

#header{
	padding-left: 10px;
	padding-top: 12px;
	background-image: url(./images/header.png);
	background-repeat: no-repeat;
}	

#nav{
	text-align: center;
	list-style: none;
	height: 15px;
	width: 780px;
	font-size: 10px;
	background-color: #FFCC66;
	
}

#content{
	text-align: left;
}
	
#footer {
	text-align: center;
	height: 50px;
	width: 780px;
	padding-top: 10px;
	background-image: url(./images/header.png);
	background-repeat: no-repeat;
}	


/*FONTS*/
h1,h2,h3,h4{font-weight:bold}
h1 {font-size:48px; color: #AEC3E5}
h2 {font-size:12px; color: black}
h3 {font-size:24px; color: #5678BB}
h4 {font-size:20px; color: #333333}
p {font-size: 14px; color: #333333}


/*COLUMS*/
#left{
	background-color: #CCCCCC;
	width: 150px;
	height: 700px;
	float: left;
	padding: 10px;
}

#right{
	background-color: white;
	width: 590px;
	height: 700px;
	float: right;
	padding: 10px;
}

.clear{
	clear: both;
}

/*NAV*/
#nav a{
	padding: 3px;
}

a:link{color:#333333;text-decoration:underline;}
a:visited{color:#333333;text-decoration:underline;}
a:hover{color:#333333;text-decoration:none;}
a:active{color:#0000CC;text-decoration:underline;}

This post has been edited by Lazy Vulpes: 23 July 2012 - 10:04 PM

Was This Post Helpful? 1
  • +
  • -

#11 JK666  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 22-July 12

Re: First time coding website in notepad++

Posted 23 July 2012 - 10:54 PM

Massive thanks to Lazy Vulpes everything you went through was spot on you are a life saver everything is solved
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1