# Placing YouTube Video Code



## Acer2000 (Sep 17, 2006)

Hello all,

I am working with a CSS based template. 

I would like to post the following YouTube video code:





V

INTO THE FOLLOWING CODE (PICTURE IS TO BE REMOVED):

<div id="templatemo_content_right">
<div class="content_right_section_01" style="width: 308px; height: 227px">
<center><font color="#CD0021">On your IPad</font><p>
<img border="0" src="images/ipad-appstore.jpg" width="308" height="192"></p>
</center>
</div>

<div id="templatemo_content_right">
<div class="content_right_section_01" style="width: 308px; height: 227px">
<center><b>Video of the Week</b><p>
<img border="0" src="images/ipad-appstore.jpg" width="308" height="192"></p>
</center>
</div>V



my question to you is: Where exactly do I place the YouTube video code?

Thank you very much.

:wave:


----------



## Laxer (Dec 28, 2010)

It all depends where you want it.

if it were me i would put it right above the line "<center><b>Video of the Week</b><p>"

This would put Video of the Week below the actual video itself.

If you want you can take a screenshot and describe where you want it and i will give you a better answer.


----------



## Acer2000 (Sep 17, 2006)

Hi Laxer, Thank you very much indeed. That is exactly what I have originally thought. Thank you. Cheers


----------



## Acer2000 (Sep 17, 2006)

Hi Laxer,

I would like to learn how to use CSS to create a website. I have question: Is a website created in HTML and then styled with CSS or am I getting the wrong end of the stick?

I used to create websites using MS FP 2003. All I had to do is use tables and cells and add content. Now I learn that this is outdated and frowned upon. So I am going to learn CSS coding. 

I plan on creating a website from scratch. I will start with the simple editor. Do I write the HTML code first or the CSS. 

I look forward to your good advice. Thank you!


----------



## Laxer (Dec 28, 2010)

Yes you are correct with your assessment about html and css.

I always start off writing the html.

something simple like:


```
<!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>Untitled Document</title>
<style type="text/css">
<!--

-->
</style>
</head>
<body>
    <div id="wrapper">
    <div id="header">HOME</div>
    <div id="nav">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div id="content">
    <h1>Home</h1>
    	<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
        <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
    </div>
    <div id="footer"></div>
</div>
</div>
</body>
</html>
```

I then go through and add my css in, first i do it embedded using the <style> tag in the head. I then transition it to its own file and include it.

For the above example here is some simple css:

```
body {
	font-family: arial, helvetica, verdana, Tahoma, sans-serif;
	font-size: 10px;      /* set base font in pixels here. Use em's every else  */
	padding: 0;	margin: 0;	    /* for cross browser compatibiity */
	background-color:#4F4F4F ;
}

h1,h2,h3,h4,h5,p,div,table,td,th,ul,ol,li,blockquote {
	padding: 0; 
	margin: 0;	   /* for cross browser compatibility */
}

h1 {
	font-size:3em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h2 {
	font-size:2.2em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h3 {
	font-size:1.6em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h4 {
	font-size:1.33em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h5 {
	font-size:1.1em;
	margin: 0 0 .5em 0 ;
}

h6 {
	font-size:.75em;
}

p {
	display: block;
	margin: 1em 0px;
}

#wrapper {
	width:680px;
	border:1px solid black;
	background-color:#EEE9BF;
	padding:10px;
	margin:auto auto;
}



#header {
	width:628px;
	height:65px;
	border:0px solid black;
	background-color:red;
	margin:10px auto 20px auto;
	padding:10px;
	font-size:7.2em;
}

#nav {
	width:80px;
	height:180px;
	border:0px solid black;
	background-color:none;
	float:left;
	padding:0px 10px 10px 10px; /*Top Right Bottom Left*/
	font-size: 1.2em;
}

#nav li{
	list-style:none;
	margin-bottom:3px;
}

#nav li a {
	display:block;
	background-color: #4f4f4f;
	color: #ffffff;
	font-weight:bold;
	width: 85px;
	height:17px;
	text-decoration:none;
	text-align:right;
	padding:3px;
}

#content {
	width:514px;
	border:0px solid black;
	background-color:blue;
	float:left;
	margin-left:10px;
	margin-bottom:20px;
	padding:0px 10px 0px 10px;
	font-size:1.2em;
}


#footer {
	width:628px;
	height:80px;
	border:1px solid black;
	clear:both;
	margin: 0px auto 10px auto;
	padding:10px;
}
```
As you can tell from above I set the browser defaults first then go through the divs.

*Final result before including the css:*











```
<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
	font-family: arial, helvetica, verdana, Tahoma, sans-serif;
	font-size: 10px;      /* set base font in pixels here. Use em's every else  */
	padding: 0;	margin: 0;	    /* for cross browser compatibiity */
	background-color:#4F4F4F ;
}

h1,h2,h3,h4,h5,p,div,table,td,th,ul,ol,li,blockquote {
	padding: 0; 
	margin: 0;	   /* for cross browser compatibility */
}

h1 {
	font-size:3em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h2 {
	font-size:2.2em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h3 {
	font-size:1.6em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h4 {
	font-size:1.33em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h5 {
	font-size:1.1em;
	margin: 0 0 .5em 0 ;
}

h6 {
	font-size:.75em;
}

p {
	display: block;
	margin: 1em 0px;
}

#wrapper {
	width:680px;
	border:1px solid black;
	background-color:#EEE9BF;
	padding:10px;
	margin:auto auto;
}



#header {
	width:628px;
	height:65px;
	border:0px solid black;
	background-color:red;
	margin:10px auto 20px auto;
	padding:10px;
	font-size:7.2em;
}

#nav {
	width:80px;
	height:180px;
	border:0px solid black;
	background-color:none;
	float:left;
	padding:0px 10px 10px 10px; /*Top Right Bottom Left*/
	font-size: 1.2em;
}

#nav li{
	list-style:none;
	margin-bottom:3px;
}

#nav li a {
	display:block;
	background-color: #4f4f4f;
	color: #ffffff;
	font-weight:bold;
	width: 85px;
	height:17px;
	text-decoration:none;
	text-align:right;
	padding:3px;
}

#content {
	width:514px;
	border:0px solid black;
	background-color:blue;
	float:left;
	margin-left:10px;
	margin-bottom:20px;
	padding:0px 10px 0px 10px;
	font-size:1.2em;
}


#footer {
	width:628px;
	height:80px;
	border:1px solid black;
	clear:both;
	margin: 0px auto 10px auto;
	padding:10px;
}
-->
</style>
</head>
<body>
    <div id="wrapper">
    <div id="header">HOME</div>
    <div id="nav">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div id="content">
    <h1>Home</h1>
    	<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
        <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
    </div>
    <div id="footer"></div>
</div>
</div>
</body>
</html>
```
I can't tell you the last time i had to build a simple site like that 

All of the work i do now i script, test, clean up, then add style.

Hope that answered everything :wave:


----------



## Acer2000 (Sep 17, 2006)

Hi Laxer,

Thank you very much for this. I will study this. :wave:


----------



## Laxer (Dec 28, 2010)

No problem, I just noticed i have one too many closing divs

Just remove one of the </div> from the end of the body.


----------



## Acer2000 (Sep 17, 2006)

Thank you for letting me know.


----------

