XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Community Support forums / 
  3. XOOPS general usage questions 
  4.  / Theme Problem: Block height exceeded
Register
1
limap5
Theme Problem: Block height exceeded

  • 2007/12/11 15:18

  • limap5

  • Just popping in

  • Posts: 27

  • Since: 2005/12/6


Hello,

I'm am a bit newbie to XOOPS themes coding but I had problem with my XOOPS theme.I had searched the forum but I'm afraid that I can't find any solution. I used the Gold theme and my site is located at http://www.geng92.com/portal.

As you can see at the centre block area, there was another block under the "Selamat Datang" block. It is unneeded. How I could remove it? Also, the block entitled "Selamat Datang" has exceeded height. You can see the bottom of the block overflows from the block itself.

My theme.html code:

xml version="1.0" encoding="iso-8859-1"?>



" />
" />
" />
" />
" />
" />
" />
" />

<{$xoops_sitename}> - <{$xoops_pagetitle}>
/favicon.ico" rel="SHORTCUT ICON" />










bg-tab-menu.gif">        

hr.gif">
header.gif" bgcolor="#202020">



hr.gif">

bg-tab-menu.gif">        

hr.gif">





<{foreach item=block from=$xoops_lblocks}>





bg-tab-menu.gif" class="blockTitle"> <{$block.title}>        

hr.gif">

<{$block.content}>
        



<{/foreach}>



<{if $xoops_showcblock == 1}>



<{foreach item=block from=$xoops_clblocks}>



        

bg-tab-menu.gif" class="blockTitle"> <{$block.title}>
        

hr.gif">

<{$block.content}>



<{/foreach}>



<{foreach item=block from=$xoops_crblocks}>



        

bg-tab-menu.gif" class="blockTitle"> <{$block.title}>
        

hr.gif">

<{$block.content}>



<{/foreach}>



<{foreach item=block from=$xoops_ccblocks}>



        

bg-tab-menu.gif" class="blockTitle"> <{$block.title}>
        

hr.gif">

<{$block.content}>



<{/foreach}>

<{/if}>





        

bg-tab-menu.gif" class="blockTitle"> "><{$xoops_sitename}> / <{$xoops_pagetitle}>
        

hr.gif">

<{$xoops_contents}>






<{if $xoops_showrblock == 1}>    
    

<{foreach item=block from=$xoops_rblocks}>





bg-tab-menu.gif" class="blockTitle"> <{$block.title}>        

hr.gif">

<{$block.content}>
        



<{/foreach}>

<{/if}>
        


hr.gif">

bg-tab-menu.gif" align="center">
"><{$xoops_sitename}> - Powered by XOOPS © 2007 Geng92.Com Webteam - All Right Reserved




Hope you can help me on this. If you need extra infos, please inform me.

Regards,
limap5.
2
BlueStocking
Re: Theme Problem: Block height exceeded

First,
I am not a themer, I have never built a theme.

BUT

I took the code you provided and made a copy on my site, and this is the picture I got.

I am guessing here but I believe that if you rearranged your blocks on the html version from this type of view you may be able to get what it is you want.

IF this works, then I can say I helped with my first theme.

Possibility you can weight your blocks differently so the lower center block is placed above the two empty blocks

Good luck to us both...
and I will keep watching while someone with real expertise weighs in on the subject and gives you a legimate fix.

BlueStocking
hhttps://xoops.org/modules/repository .. It is time to get involved - XOOPS.ORG
3
Will_H
Re: Theme Problem: Block height exceeded

  • 2007/12/11 22:06

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


Your code structure is all wrong.

Lets knock out the content frame to start.

change

<table border="0" cellpadding="1" cellspacing="1" bgcolor="#EE9E5B" width="100%">
<tr><td bgcolor="#FFFF94" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="1" width="100%" bgcolor="#202020">
<tr><td valign="top" bgcolor="#333333" width="100%">        
<table border="0" cellpadding="0" cellspacing="1" width="100%" height="20" bgcolor="#202020">
<tr><td background="<{$xoops_imageurl}>bg-tab-menu.gif" class="blockTitle">&nbsp;<a class="mma" href="<{$xoops_url}>"><{$xoops_sitename}>a> / <{$xoops_pagetitle}>
td>tr>table>        
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="2" bgcolor="#202020">
<tr><td background="<{$xoops_imageurl}>hr.gif">td>tr>table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td valign="top" class="blockContent" width="100%"><div id="content"><{$xoops_contents}>div>td>tr>table>
td>tr>table>td>tr>table>
<br>


To:
<{if $xoops_contents}>

<table border="0" cellpadding="1" cellspacing="1" bgcolor="#EE9E5B" width="100%">
<tr><td bgcolor="#FFFF94" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="1" width="100%" bgcolor="#202020">
<tr><td valign="top" bgcolor="#333333" width="100%">        
<table border="0" cellpadding="0" cellspacing="1" width="100%" height="20" bgcolor="#202020">
<tr><td background="<{$xoops_imageurl}>bg-tab-menu.gif" class="blockTitle">&nbsp;<a class="mma" href="<{$xoops_url}>"><{$xoops_sitename}>a> / <{$xoops_pagetitle}>
td>tr>table>        
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="2" bgcolor="#202020">
<tr><td background="<{$xoops_imageurl}>hr.gif">td>tr>table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td valign="top" class="blockContent" width="100%"><div id="content"><{$xoops_contents}>div>td>tr>table>
td>tr>table>td>tr>table>
<br>
<{/if}>


Now lets talk about the best way to code up a graphic block.

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="1%" align="left"><img src="<{$xoops_imageurl}>images/cc_tl.gif" width="29" height="21" alt="" />td>
    <td width="98%" style="background-image: url(<{$xoops_imageurl}>images/cc_tc.gif);"><div class="blockTitle"><{$block.title}>div>td>
    <td width="1%" align="right"><img src="<{$xoops_imageurl}>images/cc_tr.gif" width="29" height="21" alt="Designed by MrTheme.com" />td>
  tr>
  <tr>
    <td colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="background-image: url(<{$xoops_imageurl}>images/cc_lbg.gif);"><div align="left"><img src="<{$xoops_imageurl}>images/cc_lbg.gif" width="6" height="1" alt="" />div>td>
        <td width="100%"><div class="blockContent"><{$block.content}>div>td>
          <td align="right" style="background-image: url(<{$xoops_imageurl}>images/cc_rbg.gif);"><div align="right"><img src="<{$xoops_imageurl}>images/cc_rbg.gif" width="6" height="1" alt="" />div>td>
        tr>
      table>td>
  tr>
  <tr>
    <td colspan="3">
       <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="1%" valign="top"><div align="left"><img src="<{$xoops_imageurl}>images/cc_bl.gif" width="29" height="21" alt="" />div>td>
            <td width="98%" style="background-image: url(<{$xoops_imageurl}>images/cc_bc.gif);">td>
               <td width="1%" valign="top"><div align="right"><img src="<{$xoops_imageurl}>images/cc_br.gif" width="29" height="21" alt="" />div>td>
           tr>
      table>td>
  tr>
table>
<br />


So your block header is broken down into 3 images. TL TC TR

TC repeats across the top.
<tr>
    <td width="1%" align="left"><img src="<{$xoops_imageurl}>images/cc_tl.gif" width="29" height="21" alt="" />td>
    <td width="98%" style="background-image: url(<{$xoops_imageurl}>images/cc_tc.gif);"><div class="blockTitle"><{$block.title}>div>td>
    <td width="1%" align="right"><img src="<{$xoops_imageurl}>images/cc_tr.gif" width="29" height="21" alt="Designed by MrTheme.com" />td>
  tr>


Then your block's content area is broken down into 3 parts as well.

Two border images and your block_content
<tr>
    <td colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="background-image: url(<{$xoops_imageurl}>images/cc_lbg.gif);"><div align="left"><img src="<{$xoops_imageurl}>images/cc_lbg.gif" width="6" height="1" alt="" />div>td>
        <td width="100%"><div class="blockContent"><{$block.content}>div>td>
          <td align="right" style="background-image: url(<{$xoops_imageurl}>images/cc_rbg.gif);"><div align="right"><img src="<{$xoops_imageurl}>images/cc_rbg.gif" width="6" height="1" alt="" />div>td>
        tr>
      table>td>
  tr>


And then the footer
Guess what, 3 images

<tr>
    <td colspan="3">
       <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="1%" valign="top"><div align="left"><img src="<{$xoops_imageurl}>images/cc_bl.gif" width="29" height="21" alt="" />div>td>
            <td width="98%" style="background-image: url(<{$xoops_imageurl}>images/cc_bc.gif);">td>
               <td width="1%" valign="top"><div align="right"><img src="<{$xoops_imageurl}>images/cc_br.gif" width="29" height="21" alt="" />div>td>
           tr>
      table>td>
  tr>


HTH
4
limap5
Re: Theme Problem: Block height exceeded

  • 2007/12/12 1:07

  • limap5

  • Just popping in

  • Posts: 27

  • Since: 2005/12/6


Hi!
Thanks for replying. :)

First of all, I try BlueStocking suggestion to put blocks as instructed by the code. I put two blocks above the "Selamat Datang" block but the bottom of these blocks also exceeded (overflow).

I also tried Will_H suggestion correcting the wrong page structure but this don't seem to solve my problem. Actually, I know nothing about XOOPS Theme's structure. But based on my little experience, I think this theme is not 3 images based as you can see at my site I stated above. This theme only use bh_header image and the main folder (themes/Gold) didn't have any images folder inside it. So there weren't any image named cc_bc, cc_tl, cc_... etc. Its look weird.

By the way, my problem was not solved yet. Could someone help me?

Thanks for helping.

Regards,
limap5

// My current theme.html code (after correcting as suggested):
xml version="1.0" encoding="iso-8859-1"?>



" />
" />
" />
" />
" />
" />
" />
" />

<{$xoops_sitename}> - <{$xoops_pagetitle}>
/favicon.ico" rel="SHORTCUT ICON" />










bg-tab-menu.gif">        

hr.gif">
header.gif" bgcolor="#202020">



hr.gif">

bg-tab-menu.gif">        

hr.gif">





<{foreach item=block from=$xoops_lblocks}>





bg-tab-menu.gif" class="blockTitle"> <{$block.title}>        

hr.gif">

<{$block.content}>
        



<{/foreach}>



<{if $xoops_showcblock == 1}>



<{foreach item=block from=$xoops_clblocks}>



        

bg-tab-menu.gif" class="blockTitle"> <{$block.title}>
        

hr.gif">

<{$block.content}>



<{/foreach}>



<{foreach item=block from=$xoops_crblocks}>



        

bg-tab-menu.gif" class="blockTitle"> <{$block.title}>
        

hr.gif">

<{$block.content}>



<{/foreach}>



<{foreach item=block from=$xoops_ccblocks}>



        

bg-tab-menu.gif" class="blockTitle"> <{$block.title}>
        

hr.gif">

<{$block.content}>



<{/foreach}>

<{/if}>

<{if $xoops_contents}>




        

bg-tab-menu.gif" class="blockTitle"> "><{$xoops_sitename}> / <{$xoops_pagetitle}>
        

hr.gif">

<{$xoops_contents}>




<{/if}>


<{if $xoops_showrblock == 1}>    
    

<{foreach item=block from=$xoops_rblocks}>





bg-tab-menu.gif" class="blockTitle"> <{$block.title}>        

hr.gif">

<{$block.content}>
        



<{/foreach}>

<{/if}>
        


hr.gif">

bg-tab-menu.gif" align="center">
"><{$xoops_sitename}> - Powered by XOOPS © 2007 Geng92.Com Webteam - All Right Reserved


5
Will_H
Re: Theme Problem: Block height exceeded

  • 2007/12/12 1:27

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


Well, yeah... those were just examples... I didn't code it for you.
6
BlueStocking
Re: Theme Problem: Block height exceeded

Resized Image

I don't see what you are talking about.
It looks fine to me... All the text apprears to be there in its proper place.

Maybe the browser you are using is displaying it wrong.
I use IE6
hhttps://xoops.org/modules/repository .. It is time to get involved - XOOPS.ORG
7
limap5
Re: Theme Problem: Block height exceeded

  • 2007/12/12 1:57

  • limap5

  • Just popping in

  • Posts: 27

  • Since: 2005/12/6


Thanks.

Is my problem seems to be with the CSS? Looks like Firefox browser could not render the pages well. I try opening the site using IE 6 and the problem disappear. Also, I just know the header has yellow stripes above and underneath it. This is my Firefox screenshot.
Resized Image


My CSS:
@charset "iso-8859-1";

body {background-color:#202020; font-family: Trebuchet MS, Helvetica, sans-serif; color: #FFFFFF; font-size: 12px}

a { font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #FFFF94; font-style: normal; font-weight : bold; }
a:hover { text-decoration: underline overline;  font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px; color: #EE9E5B; font-style: normal; font-weight : bold;}
a.mma { font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #000000; font-style: normal; font-weight : bold; }
a.mma:hover { text-decoration: underline overline;  font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px; color: #333333; font-style: normal; font-weight : bold;}

td {font-family: Trebuchet MS, Helvetica, sans-serif; color: #FFFFFF; font-size: 12px;}

input { background-color : transparent; color : #FFFFFF; font-family : TTrebuchet MS, Helvetica, sans-serif; font-size : 12px; font-weight : normal; border-color : #000000;  border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px;text-indent : 2px;  }
textarea {color: #FFFFFF; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;background-color : transparent; font-weight : bold; border-color : #000000; border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px; text-indent : 2px;}
select {font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;font-weight : bold; background-color:#F5F5F5; } 

img { border: 0;}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: disc inside; color:FFFF94;}

div#content { margin: 2px; padding: 2px; text-align: left; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;}
div#content td {margin: 2px; padding: 2px; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;}

.odd { background-color: #444444; margin: 2px; padding: 2px; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;font-weight : bold; color: #FFFFFF;}
.outer { background-color: #202020; margin: 2px; padding: 2px; }
.even { background-color: #333333; margin: 2px; padding: 2px; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;font-weight : bold; color: #FFFFFF;}
th { background-color: #333333; text-align: left; margin: 2px; padding: 2px; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;font-weight : bold; color: #FFFFFF;}
.head { background-color: #202020; margin: 2px; padding: 2px; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;font-weight : bold; color: #FFFFFF;}
.foot { background-color: #202020; margin: 2px; padding: 2px; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;font-weight : bold; color: #FFFFFF;}

.itemHead {background-color: #404040; color: #FFFF94; padding: 2px; font-weight: bold; text-align: left;}
.itemInfo {text-align: right; padding: 0px; margin: 0px; background-color: #444444; color: #FFFF94;}
.itemPoster {font-size: 90%; font-style:italic; color: #FFFF94;}
.itemPostDate {font-size: 90%; font-style:italic; color: #FFFF94;}
.itemStats {font-size: 90%; font-style:italic; color: #FFFF94;}
.itemBody { padding: 2px; margin: 2px; text-align: left}
.itemText {font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 12px;font-weight : bold; color: #FFFFFF; margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot {text-align: right; padding: 0px; margin: 0px; background-color: #444444; color: #FFFF94;}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}

.blockTitle {background-color: #E2DBD3; color: #202020; padding: 0px; font-weight: bold}
.blockContent {background-color: #404040; font-family: Trebuchet MS, Helvetica, sans-serif; color: #FFFFFF; font-size: 12px; padding: 2px; margin: 2px;}

Regards,
limap5.
8
BlueStocking
Re: Theme Problem: Block height exceeded

Maybe this will help

Validate << your site 35 errors scroll down to see where.

http://validator.w3.org/

Click show source
hhttps://xoops.org/modules/repository .. It is time to get involved - XOOPS.ORG
9
mboyden
Re: Theme Problem: Block height exceeded

  • 2007/12/12 6:09

  • mboyden

  • Moderator

  • Posts: 484

  • Since: 2005/3/9 1


I ran into this before. I'm going to assume you're using positioning in CSS to align the layout areas (div's and such) in you blocks. When you float a block inside another, it does something to remove the containment of the "contained" container. The way to get the outer containing container to be sized correctly is to add an empty div tag after the inner one and before the closing outer that clears both, like this:



That should fix the overflow issue. Let me know if this isn't clear.
Pessimists see difficulty in opportunity; Optimists see opportunity in difficulty. --W Churchill

XOOPS: Latest | Debug | Hosting and Web Development
10
limap5
Re: Theme Problem: Block height exceeded

  • 2007/12/12 8:39

  • limap5

  • Just popping in

  • Posts: 27

  • Since: 2005/12/6


Hi!

Thanks mboyden. I understand your statement but I don't know where to put the tag. When I open theme.html, it is like haunted to me. HEHE

Actually, I don't know where the center block's code end. Can you highlight the locations to put the tag for me based on my latest theme.html code in my past post?

And for BlueStocking, I realize it the problems but I'm afraid if I retouched the code, it will get corrupt and the rendering will worse than before.

Regards,
limap5
(1) 2 »

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

376 user(s) are online (303 user(s) are browsing Support Forums)

Members: 0

Guests: 376

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits