3 equalizing col layout +header +footer

**Paul O'B** · Jun 23, 2004 11:12

Hi,

Well you could either look at SSI (server side includes) to include your menu on every page and then you only need one copy.

As for the content appearing in the centre then you are limited to a)Frames (very bad) , b iframes (better), or c) just a normal page.

If its only a small bit of content you could hide and show elements etc but that soon gets messy.

Either way its not really a css question that I can help more with

Paul

**SteveBamford** · Jun 24, 2004 05:07

OK so i persevered and its finally getting there - with no tables and i think i have fixed the validation errors !

Couple of questions if you have time ... example is at http://www.spikeopaths.org.uk/

1) Looks fine in IE6 but in Opera 7.5 the menu and calendar boxes seem to be moved towards the centre (in IE6 they are aligned with the header)

2) In the calendar section - the calday SPAN doesn't seem to be using the defined width so the right-hand columns aren't lined up !

3) The search form DIV seems too big ? is there a way of specifying size etc (to be honest - not looked at this yet but any advice would be most welcome) - HAVE SORTED THIS - JUST ADDED margin:0px to the FORM

4) Could you suggest another popular browser to have a quick check with ? (navigator maybe)

Thanks for your help so far

Steve

**mike7896** · Jun 24, 2004 06:40

Originally Posted by Paul O'B

Hi,

Well you could either look at SSI (server side includes) to include your menu on every page and then you only need one copy.

As for the content appearing in the centre then you are limited to a)Frames (very bad) , b iframes (better), or c) just a normal page.

If its only a small bit of content you could hide and show elements etc but that soon gets messy.

Either way its not really a css question that I can help more with

Paul

Paul,

Thanks for pointing me in the right direction. Upon searching the forums, I discovered that quite a few people are looking for this solution. So, for anyone else looking for an answer, here's the info that helped me:

http://www.sitepoint.com/article/save-hours-ssis

And for anyone who uses PHP:

Yes, SSI (Server Side Includes) is what you want. So if the site is PHP it is simply

<? include ('menu-file.php');?>

where menu-file.php is a single file that can be included anywhere on any php page.

And if the pages are .html it is



same deal, but call the parent pages with the extension .shtml

and so on for other languages.

That last bit was posted by gdape on May 11, 2004 here:
http://www.sitepoint.com/forums/show...+side+includes

Worked like a charm for me!

**Paul O'B** · Jun 24, 2004 06:46

Thanks for letting us know you got it sorted

SSI 's are very useful.

If you have DW you can use their template system which allows the update of all your pages through just changing the main template. However you still have to upload all the pages after you've changed them.

Withh SSI you just upload the one file and away you go

Paul

**Paul O'B** · Jun 24, 2004 07:07

Hi Steve,

) Looks fine in IE6 but in Opera 7.5 the menu and calendar boxes seem to be moved towards the centre (in IE6 they are aligned with the header)

I'll work through these as I get to them.

Take the padding out of middle and put it in to contents

Code:

#middle		{border-width: 0px;}
.contents{padding:15px;}

Paul

**Paul O'B** · Jun 24, 2004 07:18

2) In the calendar section - the calday SPAN doesn't seem to be using the defined width so the right-hand columns aren't lined up !

Lined up with what? I'm not sure what I'm looking for.

Anyway you can't define width for a span because its an inline element and won't accept widths. You need to use a block level tag such as <p>. etc or more semantically perhaps a list (ul, li etc).(you could turn the span into display:block and then itr would accept widths and give a linefeed but other tags will do that anyway )

You shouldn't need breaks at all to make line feeds if you code correctly.

Paul

**Paul O'B** · Jun 24, 2004 07:23

4) Could you suggest another popular browser to have a quick check with ? (navigator maybe)

These are what I use when testing:

ie5
ie5.5.
ie6
mozilla 1.2+
firefox
Opera7

When I'm happy with those then I will work on minor browsers such as.

Netscape 6.2
(Maybe also ie5 mac. - but nothing works properly in that)
Opera 6 (but not too bothered)

Paul

**SteveBamford** · Jun 24, 2004 07:32

Originally Posted by Paul O'B

Hi Steve,

I'll work through these as I get to them.

Take the padding out of middle and put it in to contents

Code:

#middle		{border-width: 0px;}
.contents{padding:15px;}

Paul

excellent - sorted - thanks !

**Amirsan** · Jun 24, 2004 12:15

is there any simpler tutorials? This one is soo large and complicated. I read half way through and I was completely lost... can someone help me?

anyone come on AIM; Emperor Amirsan

**Paul O'B** · Jun 24, 2004 15:31

Hi Amirsan,

Iv'e replied in your other thread so hopefully that will help you

paul

**SteveBamford** · Jun 25, 2004 03:50

Originally Posted by SteveBamford

Thanks paul

yep it was the 3px jog.....sorted !

now wading through the zillions of errors !

thanks for the tips

Steve

Hello - sorry to raise this again but the 3px job has come back (http://www.spikeopaths.org.uk/skills.php) - dunno what i did but i think i still have the fix in the css file ! could it be anything to do with adding the padding to the contents div rather than the middle div ?

any ideas ??

thanks

steve

**Paul O'B** · Jun 25, 2004 11:12

Hi,

If you're talking abot the space between the column and the content then that is also the 3 pixel jog.
Try:

Code:

* html #left {margin-right:-3px}
* html #right{margin-left:-3px}

Paul

**SteveBamford** · Jun 25, 2004 11:33

Originally Posted by Paul O'B

Hi,

If you're talking abot the space between the column and the content then that is also the 3 pixel jog.
Try:

Code:

* html #left {margin-right:-3px}
* html #right{margin-left:-3px}

Paul

sorted - thanks a bunch !!! think i have my format sorted out with SSI and other goodies - now to the content - thanks for all your help Paul !

**SteveBamford** · Jun 30, 2004 23:32

Hello - sorry but heres another strange one. Problem can be seen at http://www.spikeopaths.org.uk

Happens in IE6 - but when i move the mouse over the menu links on the right - the footer jumps up into the middle column

bizarre ! any ideas ?

thanks

steve

**Paul O'B** · Jul 1, 2004 01:13

Happens in IE6 - but when i move the mouse over the menu links on the right - the footer jumps up into the middle column

Seems to be an ie bug caused by your links turning to bold on hover and upsetting the layout. If you take the bold out of the hover then the footer stays still.

Haven't found a fix yet but I suspect its something to do with the bold stretching the layout so that ie looses positioning. I will have a play around with it later.

Paul

**Paul O'B** · Jul 1, 2004 15:24

Hi,

It looks as though you've gone back to tables lol

Anyway in case you still need a solution I've just noticed you've been using my negative margin technique but you don't need to because you aren't using equalising columns.

Your layout can be simplified a bit and the jumping footer will go away.

Change the left and right styles to just this.

Code:

#left		  {float:left; width:150px; padding-left:0px; position:relative;}
#right		 {float:right;width:150px; padding-right:0px;position:relative;}

* html .contents {height:1%}
* html #left {margin-right:-3px}
* html #right{margin-left:-3px}

Then just move the left and right elements out of the middle div by moving it downwards around the content.

Code:

	  <div id="middle"> 
  <div id=contents> 
	  <H1>Welcome To The Spikeopaths !</H1>
	  <IMG SRC="images/p_maintop1.jpg" alt="" align=left class=mainpagetop>

The layout should be ok now.

Sorry I didn't get back earlier but my computers been playing up all day.

Paul

BTW your table layout is showing some serious jumping when the left nav links are rolled over - so its not just css that has problems

**Krieger** · Jul 22, 2004 16:02

Hello.

Here is a version of Paul's 3 column that I adapted for my site. I put a bit of whitespace around the entire layout (without breaking it, me=CSS tard). I really like this layout.

See it here.

Paul, I do have a question though. Is there a way give your "Another 3 col" layout a, say, 10px margin all the way around (just to add whitespace) and still connect the r/l edges of the header and footer with a 1px solid border? I tried to to that, but was unable to and still maintain the look.

Cheers.

**Paul O'B** · Jul 23, 2004 03:39

HI Kreiger,

Glad you found the layout useful and I like your layout

Is there a way give your "Another 3 col" layout a, say, 10px margin all the way around (just to add whitespace)

I would think if you changes the bits of code below then you should get close to what you want.

Code:

body {
padding:0;
margin:0;
background:#FFFFFF url(images/ezoralbg.gif) repeat-y left top;
color: #000000;
border-left:10px solid white;
border-right:10px solid white;
}
#outer{
height:100%;
min-height:100%;
min-width:500px;
background:transparent url(images/ezorarbg.gif) repeat-y right top;
margin-bottom:-61px;
color: #000000;
}
#footer {
height:50px;
clear:both;
border-top:1px solid #FFF;
border-bottom:10px solid #fff;
background-color: green;
color: #FFF;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:61px;/* for ie5 */
he\ight:50px;/* for ie6 */
}

You can also do the same for header but there's white space there already in that design. You will probably have to tweak the margins and stuff in the left column as they will probably be put out a bit by the 10px border.

e.g.

Code:

#left {
position:relative;/*ie needs this to show float */
width:200px;
float:left;
display:inline;/*fix for ie double margin-bug*/
margin-left:2px;
}
* html #left {height:1%}

The background images will probably need to be altered slightly to match up as well.

Code:

body {
padding:0;
margin:0;
background:#FFFFFF url(images/ezoralbg.gif) repeat-y 10px 0;
color: #000000;
border-left:10px solid white;
border-right:10px solid white;
}

example:
http://www.pmob.co.uk/temp/ezora_whiteborder.htm

I haven't had time to test it out fully but ie6 and firefox seem ok with it

Hope that helps.

Paul

**Krieger** · Jul 23, 2004 06:26

Thanks much. I'll try that this weekend, and see how I well I do with it.

**kzap** · Jul 25, 2004 21:21

Was there a 4 column layout in here?
I'm sort of lazy to go through all the pages again
I'm looking for a 4 column layout with the last column, the 4th as the fluid one, and the first 3 are fixed width, with a footer that moves down ofcourse.

**Egor** · Jul 25, 2004 21:44

Read the thread title.

**Egor** · Jul 25, 2004 21:45

What you are looking for is a two column layout, with the right column being fluid.

Then you can use nested div's to split the fixed one into 3.

**Paul O'B** · Jul 26, 2004 10:40

Hi,

I've just rone this very quickly as I've been busy

but this should give you the idea.

http://www.pmob.co.uk/temp/4_columns.htm

You'll need to make bg images for the columns and repeat it on the body.

Hope that helps.

Paul

**jasmanac** · Aug 2, 2004 13:53

Hello folks,

I have one very urgent problem with 3 columns layout. I can't make left column to be the same height as right in Firefox

In IE 6.0 looks great but when I test it on Firefox left column is not 100% height with other 2 columns. And I need to be 100% in height and filled with some color. Please help me with this because I don't want to use tables any more. This is my first step in tabless design so please give me some assistance to solve mentioned problem. Below is a links to html and css files.

html file: http://www.damjanator.ch/css/layout.html
css file: http://www.damjanator.ch/css/layout.css

thanks in advance,
Jazz

**Paul O'B** · Aug 3, 2004 02:33

Hi,

The first thing you need to do is set the background of #middle by using the background of #wrapper otherwise you will not get full height columns is mozilla.

Code:

#wrapper {
margin:0px;
padding:0px;
background : #CCCCCC url(http://www.damjanator.ch/css/images/left_column_bgd.gif) repeat-y left top;
}

Next you need to change your cleaner id to a class and change the code to this:

Code:

.cleaner {
clear: both;
height:1px;
overflow:hidden;
margin-top:-1px;
}

Then you need to add another clear to enable the outer columns to extend.

Code:

<div id="main"> 
<div id="padder">Main Content</div>
<div class="cleaner"></div>
</div>
<!-- Main content end here -->
</div>
<!-- Container end here -->
<div class="cleaner"></div>
</div>
<!-- Wrapper end here -->
<!-- Footer start here -->
<div id="footer">Footer</div>
<!-- Footer start here -->
</body>
</html>

That should get it working. You obvously need to sort out the header when the screen is resized but I'm sure you are working on that.

Hope the above helps

Paul

User Tag List

Thread: 3 equalizing col layout +header +footer

Thread Tools

Display

Footer jumps around in 3col format

Another example of Paul's design in use

Bookmarks

Bookmarks

Posting Permissions