CSS Positioning

@CassiusFeb 14.2008

Hi,

I have created a template and the attached pic, is the basic layout of my design. I am including that template on every page via the include function of php. Therefore any web page i create for this side, will start by including that template, and then following by the actual content (text) of the page. As you can see from the image, I am planning to place the content on the right hand side of the left menu. How can I possibly achieve to position content exactly in that portion of the page using CSS? Kindly note that the template has been created to be of fixed width in the center of the browser window.

My first guess was to use the top and left properties and position the content their by stating the top and width in pixels … this worked fined at first glance (with the window maximized), but as soon as i adjusted the window dimension, my idea was defeated.

Any suggestions are greatly appreciated … perhaps on the design as well.

Thank you

~~[upl-file uuid=f26e674b-7ab4-45cc-a615-b2ed67d9e9d4 size=35kB]~~Image1.jpg[/upl-file]

to post a comment

CSS

14 Comments(s) _↴

@Frank62Feb 14.2008 — #Cassius,

Here you go:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Malta Stamps</title>
 <style type="text/css">
 body { 
 overflow: auto; /* prevents unnecessary multiple vert. scrollbars in IE; needs quirks mode */}
 #grandContainer { 
 width: 900px;
 height: 500px;}
 #headerSection { 
 height: 100px;
 background: lightblue;}
 #menuSection { 
 width: 200px;
 height: 375px;
 float: left;
 background: yellow;}
 #mainSection { 
 width: 700px;
 height: 375px;
 float: left;
 text-align: left;
 overflow: auto; /* this creates 1 scrollbar in case main content too long */
 background: white;}
 #clearFloat { 
 clear: both;}
 #footerSection { 
 height: 25px;
 background: red;}
 </style>
 </head>
 <body>
 <div align="center">
 <div id="grandContainer">
 <div id="headerSection">Malta Stamps</div>
 <div id="menuSection">Menu</div>
 <div id="mainSection">Main Content. Put a really long text here.</div> 
 <!-- nothing may come in between the mainSection and clearFloat divs -->
 <div id="clearFloat"></div> 
 <div id="footerSection">Footer</div>
 </div>
 </div>
 </body>
 </html>
 [/code]

Be sure to leave the doctype line unchanged. And padding and border increases the outer dimensions, so have to be subtracted from height and/or width declarations.

Take care.

@CassiusauthorFeb 14.2008 — #Hi Frank,

Many thanks for your reply. So far my basic setup is almost as you suggested ... i just didn't have the clearfloat div, which i will include.

My main concern here is, if i create a page and start it <?php include(path); ?>, to include all this in the other page, then how can i get to the position to write in the mainsection div. The reason why i am trying to do this is that since the menu and header/footer are going to be the same across all pages, i would prefer not to have the same code in many pages (keeping future editing in mind).

@r0k3tFeb 14.2008 — #If I get what you are saying... I usually do this with two includes, one that has everything in the top up until the main div, which I usually call contentDiv or something (back in the old days it was the opening tag of a table). Then at the very end of each PHP file I have the include that calls the bottom code.

Unless I have totally misconstrued what you are asking for then that should help.

@CassiusauthorFeb 14.2008 — #Hi r0k3t,

Thanks for your reply. What you just said makes perfect sense and i normally take that approach too, however, this time next to the content div, i have a side menu, and my main problem is how can i get the content div placed next to the side menu, and not just with a top and bottom divs.

I hope i managed to explain the situation and did not get lost in divs ?

@r0k3tFeb 14.2008 — #The side menu goes in the top include... The the main content div uses the "float:left" property. Check this...

[CODE]
 <html>
 <head>
 <title>This is a div example</title>
 <style>
 body {
 background-color: #cdc4c5;
 margin: 0px;
 font-family: Arial;
 font-size: 11px;
 }
 
 .topMainDiv {
 background-color: #26c6c6;
 height: 130px;
 width:100%;
 }
 .leftNavDiv {
 float:left;
 border-right: 1px;
 border-right-style: solid;
 height: 450px;
 padding-right: 4px;
 width: 158px;
 padding: 10px 10px 10px 10px;
 }
 .mainContentDiv {
 float: left;
 width: 400px;
 height: 600px;
 backgroun-color: #c4c2c9;
 }
 .bottomDiv {
 clear: both;
 background-color: #FFFFc6;
 height: 130px;
 width:100%;
 }
 
 
 </style>
 </head>
 
 <body style="margin: 0px 0px 0px 0px;>
 <div class='topMainDiv'>I am the top div.. I go in the top include!</div>
 <div class='leftNavDiv'>I am the left nav div... I also go in the top include</div>
 <div class='mainContentDiv'>This is the end of the top include
 <!-- End top include -->
 [/CODE]

Now - for the bottom include, notice how the top includes "mainContentDiv's" closing </div> tag is in the bottom include!!!

[CODE]
 </div>
 <div class='bottomDiv'>This all goes in the bottom include (including the closing div tag for the mainContentDiv</div>
 [/CODE]

- just let me know if you have anymore questions...

@Frank62Feb 14.2008 — #Cassius (I like the name ? ),

The easiest way to configure your site is to mimic a parent page with an iframe in which child pages are loaded. With the following code: put this in the head of the index page:

[code=php]<?php 
 if (!isset($_GET['mC'])) {
 $file = "home.php";
 } else {
 $file = $_GET['mC'];
 }
 ?>[/code]

And this in the mainContent div, as you already did:
[code=php]<?php include($file); ?>[/code]
The link to e.g. the catalogue page (displayed in the parent page) then becomes: http://stamps.freefronthost.com/index.php?mC=catalogue.php . Be sure that the catalogue.php file only contains the body text. No head, not even a <body> tag, and no closing tags </body> or </html>. Just the stuff what it's all about. In case no mC (mainContent) is given in the url, as in just http://stamps.freefronthost.com , the server puts the home page in.

Capiche?

@CassiusauthorFeb 15.2008 — #Thank you very much both for your help, finally I managed to solve the problem using the iframe as suggested.

Thank you ?

@CassiusauthorFeb 15.2008 — #Hi Frank,

Just a last small question. You suggested me not to use any html tags in the content pages. If I need to link those pages to a CSS file, would it be advisable to include the tags in these files as well ?

Thank you

@Frank62Feb 15.2008 — #Thank you very much both for your help, finally I managed to solve the problem using the iframe as suggested.

Thank you[/quote]

You're welcome.

One final thing, and we need the help of others for this.

If Google puts one of your content files up as search result, and people click it, they will get to see the text, but they won't be able to surf on because it isn't shown in the parent page.

There are two methods to have such files always displayed in the applicable parent frame. One is configuring the server so that it recognizes requests for child files and replies with parent + child files answer. The other is through taking up a php command at the top of the child files that it needs the parent file to be displayed in.

Now, I know exactly how this is done with real iframes, but I only have the above-described rough idea of how it is done with php includes. Does anyone know how this is done exactly in this case?

@Frank62Feb 15.2008 — #
Just a last small question. You suggested me not to use any html tags in the content pages. If I need to link those pages to a CSS file, would it be advisable to include the tags in these files as well ?
[/QUOTE]

No, Cassius. The style rules can and should be included in the index page or the external style sheet 'behind' the index page. The server puts the text of the content files into the index page, and sends the whole lot to the browser. To the browser, this is as if you had put the integrated file on the server.

@CassiusauthorFeb 15.2008 — #Thanks, it worked a treat ?

It's true, about what you said on the Google thing, I will try to search a little around for any way around ... maybe in the meantime, i will always put a link back to home, until I find a way about it.

Thank You

@Frank62Feb 23.2008 — #Cassius,

Regarding the system, I found out.

It's done with mod_rewrite in an .htaccess file. If your server is an Apache server, this can in principle always be done.

Further info can be found on:

1. http://www.freewebmasterhelp.com/tutorials/htaccess/1

2. http://corz.org/serv/tricks/htaccess2.php

3. http://www.javascriptkit.com/howto/htaccess.shtml

4. http://perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/

@CassiusauthorFeb 25.2008 — #Hi Frank,

Thanks very much for the info. I will try to find out more about your suggestion.

Thank You

@Frank62Feb 25.2008 — #Cassius,

I forgot to explain the principle.

The servers gets a request for catalogue.php, e.g. because Google produces that file as a hit. However, because the server first checks the .htaccess file, it sees that in case of a request for that file, it should rewrite the request to http://stamps.freefronthost.com/index.php?mC=catalogue.php. And generate the output accordingly.

Good luck.

Also in #CSS _↴

Getting Background Image to Line Up Cross Browser pulldown/popouts ala Charles Wyke-Smith CSS on IE vs Mozilla/Firefox.

Success!

Help @Cassius spread the word by sharing this article on Twitter...

Tweet This

CSS Positioning

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Positioning

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴