[How to change the width of a spud]

Ha- that did it. Awesome - so easy. I feel kinda dumb now but oh well - its not the first time.

Basically, php (or asp, jsp) can dynamically grab different elements for a website and throw them altogether. In my site for example, I have the HTML head and the titlebar in one php block and I have the body in another php block and the footer is in yet another block. Each one of the pages you see on a dynamic site is really a mashup of these blocks. When all the blocks come together, they make a functional webpage.

In the example we were working with, that piece of code I showed you was part of this larger page:

 

<?php
//included code for page header
include ('/home/hplmt/public_html/header.inc.php'); 
?>

<div id="content">
	<script type="text/javascript" language="javascript" src="http://www.trumba.com/k.aspx?calendar=upcoming_telepresence_events"></script>
</div>

<?php
//included code for page footer
include ('/home/hplmt/public_html/footer.inc.php'); 
?>

Youll notice I 'call' a php header block, code the middle of the page and then call a php footer block - when a browser reads the page it will all read as one piece. This way, I dont have to code the damn header and footer on each page i create (because they are the same on every page anyway).

Getting back to your question of how the colums are created - the top block in my system also references a stylesheet (CSS2). This stylesheet sets the actual containers for each column on the site. The code in the stylesheet that references how the page will look is here:

 

/***********************************************/
/* Layout Divs								 */
/***********************************************/

#container{
width: 880px;	
}

#masthead{
padding: 5px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
float: left;
width: 190px;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#content{
float: left;
width: 485px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding-top: 15px;
}

#headlines{
  	float: left;
width: 190px;
padding-right: 15px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

 

You'll notice I have a 'container' tag set at '880px' - that means the entire site will sit inside of an 880px wide space. So way up in the first PHP block I have, I call a <div> (short for division) that will be open in my entire site - ensuring all content sits inside of the 880px width I have defined.

The div will look like

 

<div id="container">

I then have three other div containers - navbar, content and headlines. Notice each one has its own width. All I do is sequencially open each div up underneath the container div like this:

 

<div id="navbar">

Then you close the navbar div and open another one (like content) ON THE SAME LEVEL as navbar. The system will line up all the divs as similar block-line elements - putting all three (navbar, content and headlines) next to each other INSIDE of the container div. The container acts like a table and the three other divs act like columns in the old HTML table/column/row system.

At the end of the code in my footer php block I close the container div, just like you would close a table. When a browser interprets all this code, it will only see one giant page.

 

Hope this helps you understand how it works!

[How to change the width of a spud]

I need to adjust the sizes of the these spuds so that they fit into the existing structure of my website - is this possible?

I use CSS-based design on my website and every other element I use on my website conforms to the structure I have created. My site is written in PHP but its not all that complicated really - all the PHP does is it dynamically 'grabs' a set width header (which includes the left column of our page) sticks the main page in the middle and closes the page with a set width right column and footer.

The code looks like this:

<?php
//included code for page header
include ('/home/hplmt/public_html/header.inc.php'); 
?>

<div class="content">
    <script type="text/javascript" language="javascript" src="https://www.trumba.com/k.aspx?calendar=upcoming_telepresence_events"></script>
</div>

<?php
//included code for page footer
include ('/home/hplmt/public_html/footer.inc.php'); 
?>
 

The php files being referenced work everywhere else so I doubt they are the problem - below is the CSS code for the center content block of my site - is that the problem? That's the only style there is being applied to the page.

 

#content{
float: left;
width: 485px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding-top: 15px;
}