3 equalizing col layout +header +footer

[EvM-Mike]

Hi Mike,

I notice you have typed the recent additions incorrectly so you need to re-type them the same as my post above (and ALSO take out that 100% as mentioned above ).

Paul

Crap I totally missed that...I was stuck on the image div and did a quick cut and paste. I will clean it up tonight. Whew, at least I am seeing the light at the end of the tunnel....

Thanks again for all the help......Mike

[EvM-Mike]

I just went to your site and it looks great.
I did find that when I hover over the menu bar
across the top, the items drop down behind the
subheader and rest of the page.
I used IE 6.0 /sp1 (full description 6.0.2800.1106 XPSP2.030422-1633)
Thought you might want to know what I see.
Seems like the rest works great! Good job.

Thanks....Paul has been a great help....and yes I know about the drop downs...I just put that in to get something in there, now I need to figure out that portion....but i love the menu...i got it from BrainJar...

Thanks.....Mike

[ClevaTreva]

Hi Paul/Mike

I haven't yet posted the rvised version of the tool because I had a brainwave yesterday and was working today. I suddenly realised a better way of doing the headers.

It means a code re-write of my php, so it will take a day or so. I've tested it by hand-coding the html/css and it works much better.

Paul, did you know that Safari is undergoing some fixes and min-height is now supported, although not all elements are yet supported (as of 25th April 2004), it shouldn't be long.

In the meantime, try this:

#saftest{
display:table-cell;
height:100px;
}

And Safari will treat the div as a table cell and expand it. IE ignores the display setting.




Trevor

[EvM-Mike]

Paul,

I was thinking, if you want to include my generic layout with your others, it might be helpful to others. The layout is basically your design, using Doug's margin idea for unique column colors.

All I did was copy your layout and kept Doug's configuration for the outer div.

So if someone is looking for a layout that does not need an image for fill color, this may work.

But then again, it may have other issues.

Thanks...mike

[Paul O'B]

Hi Mike,

I'll put in a link to your page so people can have a look at it I need to add a few others that people have done as well.

Paul

[EvM-Mike]

Hi Mike,

I'll put in a link to your page so people can have a look at it I need to add a few others that people have done as well.

Paul

OK, when I eventually get the site live, I will leave a generic layout out there for everyone to see....

Any luck on the drop-down menu problem? Could it be the fact that I am including it from a file??? It looks like the drop downs are over my outer div, but under the right, left and center divs.

Thanks....Mike

[Paul O'B]

HI Mike,

Cheers Mike

I had a quick look at the drop downs but I haven't been in much today. They work ok in firefox but Ie is displaying them over the background and under the text - a very strange effect they look almost transparent.

I'm in all today tomorrow so I'll take another look the if you haven't sorted it by then.

One thing I did notice was that if you took your menu out of the flow and placed it absolutely in its place then the menu worked fine.

Paul

[EvM-Mike]

HI Mike,

Cheers Mike


I'm in all today tomorrow so I'll take another look the if you haven't sorted it by then.

One thing I did notice was that if you took your menu out of the flow and placed it absolutely in its place then the menu worked fine.

Paul

Thanks...I will mess around with it tonight. Worst case I will place it absolutely, since my header will be fixed. I was batting around the possibility of going with a fixed header and content first, but not sure if I have the strength for that

Hopefully tonight I can figure it out, if not absolute is the way to go.

Thanks...Mike

[kzap]

Hi, I've been following this thread for quite some time, and have been using your content first style Paul. I am desperately looking for a way to have the menus not drop in IE in small widths. There has to be some way to get around this feature/bug.

http://vanguard.ogaming.com/ is the site I used the CSS for. The menus both drop in 800x600 on IE.

Isn't there a wrap code or something?

[Paul O'B]

Hi,

Which menu is dropping? I couldn't really notice anything untoward unless I'm looking at the wrong thing

Paul

[kzap]

umm I implemented a fix at that web address
i basically put in a spacer image for the menus and then put absolutely positioned menus over it.

[Paul O'B]

umm I implemented a fix at that web address

Well a link to page that exhibits the fault you mentioned would have been better

Sometimes the float drop is unavaoidable because that's what floats do. Occassionally you can get around it by enclosing the floated content in another float.

I would need to see a link to the page in question to determine if this is possible as I haven't got time at the moment to deconstruct your page with the fix in .

Paul

BTW that's a nice looking page

[EvM-Mike]

HI Mike,

One thing I did notice was that if you took your menu out of the flow and placed it absolutely in its place then the menu worked fine.

Paul

Paul,

I have been messing around with this, this weekend and I cannot seem to get the menubar to work. I even started playing around with the absolute placement you were talking about and that seems to have problems as well.

Should I place the menubar absolutely? or the header itself?

http://www.evolutionmsport.com/monda...L/Mike-427.php

Thanks...Mike

[Paul O'B]

Hi Mike,

This should fix it:
css:

* html #header {height:1px;z-index:200;}/* ie needs this*/

html

<div id="outer"> 
  <div id="header">
  <img  src="http://www.evolutionmsport.com/monda...eader-2004.gif" width="760" height="72" border="0">
<!-- EvM Menu bar  -->
<div class="menuBar" 
><a class="menuButton"
	href=""
	onclick="return buttonClick(event, 'aboutMenu');"

Replace the blocks of code exactly as above and it works properly in ie and in firefox.

Paul

[EvM-Mike]

Hi Mike,

Replace the blocks of code exactly as above and it works properly in ie and in firefox.

Paul

Paul,

That worked like a charm, but when I remove the div around the header image the problem with the right column text falling off the right column background comes back, when sizing the window smaller.

With that said, I would rather have the menu work. I can live with the text dropping off the background. If I can get the min-width to be 760, that would solve the problem. I have tried the javascript:

width:expression(document.body.clientWidth < 760 ? "760px" : "auto" );

but can never seem to get it to work in IE 6.0. Either IE 6 is flakey or I apply the width to the wrong items. I figure on my page it should be applied to the outer div, but it doesn't work.

Nevertheless, thanks for the help. With the menu working I can start moving ahead.

Thanks...Mike

[Paul O'B]

I forgot about that Just add something like this back in:

 <div style="height:75px"><img style="position:absolute" src="http://www.evolutionmsport.com/monda...eader-2004.gif" width="760" height="72" border="0"></div>

Paul

[EvM-Mike]

I forgot about that Just add something like this back in:
Paul

Paul,

When I added the enclosing div back in the page will size down to the width of the header image, then stop and hang the page. I checked for typos and even tried the positioning you highlighted before....No luck....

Thanks...Mike

[Paul O'B]

width:expression(document.body.clientWidth < 760 ? "760px" : "auto" );

I always have problems with expressions crashing my page or not working. Sometimes I think they need quirks mode. (try forcing quirks mode by using the xml prologue just to check.)

(I also have multiple ie versions installed and this cause problems with conditional comments.)

Paul

[EvM-Mike]

Sometimes I think they need quirks mode. (try forcing quirks mode by using the xml prologue just to check.)

(I also have multiple ie versions installed and this cause problems with conditional comments.)
Paul

Wow, did you ever watch charlie brown and when the teacher talks, you just hear noise....thats what I just felt....

How do I do such a thing?

Regardless, I removed that expression and put in the fixes and everything works. I thought I was still having problems, but all is well again.

So this quirks thing, may allow me to set the minimum width, or should I just avoid it?


Thanks....Mike

[Paul O'B]

Hi Mike,

The xml prologue :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It sits above the doctype and is the way that xhtml documents should be described. However IE6 has a problem with it and changes the browser from standards mode into quirks mode. The prologue is actually optional so most people leave it out anyway and is valid code either way.

In quirks mode your expressions will work (although they won't validate). Quirks mode uses the broken box model among other things so you may notice some slight differences.

Try it and see if it does what you want.

* html body (width:expression(document.body.clientWidth < 760 ? "760px" : "auto" );}

Hope that makes more sense lol

Paul

[EvM-Mike]

Hope that makes more sense lol

Paul

Yep...I did a little searching after I posted. I will try it out and see if everything still works nicely...otherwise i leave everything as it is....

Thanks again....Mike

[jive]

I'm learning quite a bit from Paul O' B's sample layouts (Thanks Paul!!) . I've put together a page based on Pauls simple 3 column layout found here:

http://www.pmob.co.uk/temp/3column_simple_1.htm

I've run into an issue that seems to be a real stumper. Heres the address:

http://www.cyberpatch.net/jonas/sced...ceda_home.html

My problem is the header image in the middle column. I've tried to create a nested div box that will hold an image that tiles across the box at 100%

.middle_header_wrap {
border: 1px solid #164375;
background-image:url(images/middle_header.gif) ;
width: 80%; /* was 100% */
height: 28px;
margin: 0px;
padding: 0px;

}


.middle_header {
border: 0px solid #164375;
background-image:url(images/header_welcome.gif) ;
width: 101px;
height: 30px;
margin:0px;
padding: 0px;

html:
<div class="middle_header_wrap"><div class="middle_header">
</div>
</div>

I'm having some strange bugs... If I put it at 100% width the whole box pushes down. Is there a way to make a image tile across the middle column?

Please help, I'm stumped.

[Paul O'B]

Hi,

I think this particular problem can be solved with the following code:

.middle_header_wrap {
border-bottom: 2px solid #164375;
background-image:url(http://www.cyberpatch.net/jonas/sced...dle_header.gif) ;
width: 100%;
height: 28px;
margin: 0px;
padding: 0px;
} 
#left {margin-right:-3px}

Ie has some problems with floats and adds too much padding around them. Using the negative right margin on the left column brings it back into line.

Also you can't add borders on to a 100% element otherwise it will be bigger than 100% and drop down. So I've just added the bottom border instead.

I should warn you that large foreground images in the centre column will cause a float drop which is a drawback of floats (and not my particular layout) so choose your image sizes carefully.

You can make the side columns drop instead by using the content first method but that just makes it a little more complicated than it needs to be. If you can stick with the current method it will be easier.

Hope that helps.

Paul

[jive]

ok, that seemed to work in ie. But it did funky things to Mozilla and netcape 6 & 7. Check it out:


http://www.cyberpatch.net/jonas/sced...ceda_home.html

[Paul O'B]

Hi,

Sorry I was in a rush it needs to be hidden from other browsers of course:

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

Apologies

Paul