How to change the width of a spud

[staypuftman]

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;
}

[wyndwoman]

I build my sites with tables (haven't graduated to CSS layout yet) and found that all of the spuds will adjust themselves automatically to the size (width) of the cell they are placed in. Easy!

[Jill]

Our development team suggests that you might want to try this:

<div id="content">

instead of

<div class="content">

[staypuftman]

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!

[wyndwoman]

Cool. Thanks John for posting that explanation. I'd said earlier I haven't graduated to CSS layout yet, but seeing the code for your page design makes me a little braver about trying it sometime soon.

Lorraine