Problem with menu height [Solved]

[Frankvanlogten]

Hello,

I use CMS Made simple, which works perfect.
I have installed Guestbook 1.1.9, which works also.

I have only a problem with the layout of this.
The content/guestbook height is different then the menu height, which is not nice.


Can is set with PHP code the "height of menu = height of content/guestbook"
or is there an other work around to fix this problem?

I have set now in ccs the height of menu and content to 1000px.
The last message starts before this 1000px end, but with the message itself it goes over the 1000px!

[KO]

Do you have link to this problematic page? without seeing it's difficult to say.

br, K

[Frankvanlogten]

I have attached a screen capture of the problem.

[KO]

I think this is more css issue than php.
What browser is creating this broblem?
How does it behave if you don't set any height for content? Content expands further but menu dont follow as it is set to 1000px.
Do you have some kind of "content wrapper " that has both left menu and content inside?
Most likely "copyright 2007" is footer in your template. Does that has "clear:both" in its css? if it don't have it - try to add it.

[Dr.CSS]

That is an IE browser shot...

Good chance the guestbook is set out side all other blocks...

A link would clear this up quick...

[KO]

If it's IE you might need to put at the end of content block just before it's closing

But yes this is pretty much impossible to be be sure without seeing code.

[Frankvanlogten]

Yes, it's with IE.

True! Without the code is hard to solve, so i attach this time the template and the css what i use for the Guestbook.
Don't think it's nessary for the other pages!

I have put in the code: just before it's closing ,
but this dosn't help!

[Dr.CSS]

http://multiintech.com/index.php/frank.html

[Frankvanlogten]

@Mark,

I have clicked on your link, but don't know what to do with it!
It just shows the layout of my webpage, but without the guestbook.
What do i have to do with your link?

[KO]

If you add more content to template that Mark made - footer is pushed down with content in IE6 which I tested. Or is it IE7? I have to open another computer to check that. If it's IE6 then you need to save source code from problematic page unless Mark allready fixed the problem.

br, K

[Frankvanlogten]

KO,

I view it with IE7.
The source code i added is from the problematic page!

[KO]

First you could try wrapping your "menu" and "content" inside one that does not have height. That probably helps with IE7 as it can freely expand which is problem in "content" and keeps footer below..

Now if your page strecthes further than 1000px then menu will not follow and it stays 1000px. there is no way in Xhtml to force it 100% (without Javascript) but if you use that Faux column idea it looks like it does. So place background image with same color and width to "wrapper" and give bagkground: url(yourimage) repeat-y 0 0; overflow:auto;) this works in all of the browsers I've tried.

Now you could actually remove width from "content" as your left menu keeps it at 1000px. But you  might want to put margin-left:200px to "content" which is same as menu width or othervice things go under menu in long page.

Hope this helps.

K

[Frankvanlogten]

@KO.

Oke, i'm going to try that. Don't know exactly how to do with .
I'm going to try this this weekend and let you know.

[KO]

Code: Select all

</__body>

<div class="layout"> 
       <div class="header">
          <p align="center">
          <img src="logo.jpg" align=CENTRE>
       </div>

<div class="wrapper">
       <div class="menu">
       {bulletmenu}   
       </div>
       
       <div class="content"> 

           {content}
       <div style="clear:both;font-size:0em"></div>
       </div>
</div>

       {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   
   <div class="footer">
      {global_content name='footer'}


   </div>   
   {* End Footer  *}

</div>
<__body>

This is how body in your template should look.

then styles:

div.wrapper {background:url(pathtoyourimage) repeat-y 0 0;overflow:auto}

and changes to content as earlier. Image could be 10px height and same width and color as menu background color.

br, K

[Frankvanlogten]

KO,

It works.
Thanks all.