Advanced Website Creator

Web development tools
It is currently Fri Dec 15, 2017 12:20 pm

All times are UTC




Post new topic Reply to topic  [ 11 posts ] 
Author Message
 Post subject: Collapsible Divs
PostPosted: Thu May 15, 2008 12:42 am 
Hi guys, First thanks for a great product.

I've bought it and tried it out on my table layout and it converts everything fine, except for the collapsible div which you can see here: http://finalfantasy-xiii.net/test/
Here is my converted layout (which I'm still working on in temporary .html form): http://finalfantasy-xiii.net/test/index.html

As you can see, the div just goes behind the other divs instead of pushing them down. Right now I'm using a floating layout. Is there anything I can do to get it working like it does in the first example again? I don't mind adding a table into my tableless layout :P. One out of 100 isn't bad.

Thanks a lot!


Report this post
Top
  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 7:12 am 
Offline
Site Admin

Joined: Thu Jan 04, 2007 1:57 pm
Posts: 303
Hi Kitmitsu,
First thank you for the compliment regarding Table2CSS.

I tried to find which DIV is problematic, but there are quite a few DIVs in the converted page, so I decided it would be better to ask you for a clarification :-)

In which browser did you see the problem? Also where on the page is located that problematic DIV? Or if you could tell me what text content does it have, I guess it would help me to locate the culprit.

Regards,
Vesselin


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 10:47 am 
Sorry about that :P The div has the id "mydiv" and uses moogle.js to perform it's animated collapsing and expanding. You expand and collapse it using this button here highlighted in red. It's located above this button:
http://img411.imageshack.us/img411/1535 ... le1xo0.gif

and then it should look like this when it's expanded by pushing all the underneath content down:
http://img185.imageshack.us/img185/7990 ... le2na5.gif

but as you can see here it just goes underneath the other divs:
http://img161.imageshack.us/img161/5474 ... le3cy4.gif

This problem is present in all the browsers I've tried unfortunately.


Report this post
Top
  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 10:55 am 
Offline

Joined: Thu May 15, 2008 10:52 am
Posts: 3
Sorry, that was me above. Signed up an account to make things easier.


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 11:15 am 
Offline
Site Admin

Joined: Thu Jan 04, 2007 1:57 pm
Posts: 303
Hi Kitmitsu,
Thank you for the clarification. I have completely missed the expand/collapse button.

It seems that the javascript itself is having a problem after the conversion. At least in Firefox it logs some errors in the error console.

I will check this issue in more detail now and will let you know, how to solve the problem with this overlapping DIV.

Regards,
Vesselin


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 4:50 pm 
Offline
Site Admin

Joined: Thu Jan 04, 2007 1:57 pm
Posts: 303
Hi Kitmitsu,
I took a more detailed look at the expand/collapse issue. It turned out that the issue is caused by the fact that the converter fixes all box heights. While the conversion is performed the collapsable DIV has one height and after that when one clicks on the expand button the DIV has a different height. However since heights of DIV parent elements are fixed, they are not expanded to adjust to the new size of "mydiv"

The easiest workaround is to remove the "height" CSS property from the parent of mydiv, from the parent's parent, from the parent's parent's parent, and so on.

I have uploaded a corrected version of the index file at:
http://www.table2css.com/final-fantasy-8/index.html
so you can see how the problem has been solved in practice.

It is the page from
http://finalfantasy-xiii.net/test/
converted using a floating layout and then the styles for mydiv's parents have had their "height" attributes removed. Specifically in this case I have removed the heights of ts_46, ts_48 and ts_117

I have also fixed manually the styles of the text inside the expandable box, however if you want you can directly replace it with a table like you did in the sample page that you posted earlier.

Regards,
Vesselin


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 9:57 pm 
Offline

Joined: Thu May 15, 2008 10:52 am
Posts: 3
Thank you soo much for your help :D

I do have one more question though. I've been working on the index you made for me and I don't know how to make the content area expand automatically. For example, I want news articles which reach the bottom of the div to stretch the page, pushing down the footer. Also the blocks on the right don't expand it either, just go over the footer as you can see here:

http://img187.imageshack.us/img187/1323/divcb9.gif

http://finalfantasy-xiii.net/test/css/index.html

How do I make that div stretch to fit the content within it?

Sorry for all these questions but I've always been comfortable with the way tables work and I'm pretty new to this :P. Thanks!


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 11:26 pm 
Hi Kitmitsu,
I took a look at the new version of your web page. Basically the problem appeared because you have added a new table manually inside the div using css class ts_108. Since ts_108 has its height set explicitly to 768px it cannot freely expand so its content (the table that you added manually) overflows.

To solve the issue just edit the CSS definition for ts_108 - currently it looks like:
.ts_108 {
border: none;
float: left;
height: 768px;
padding: 0px;
width: 352px;
}

Just remove the line saying "height: 768px;"
This should solve the overflow problem.

If you are using Firefox while developing your page you can activate the DOM inspector (CTRL-SHIFT-I) I am not sure if you have used it before, but if you haven't, you can check it - it is a very useful tool which can save you a lot of time, especially when investigating issues with overlapping elements. When you select some box on the screen, the dom inspector highlights its boundaries so fixing overlapping items is much easier.

I plan to add something similar to the next release of Table2CSS - I think resolving these issues should be much simpler and faster from within Table2CSS.

Now regarding the other issue - I am not sure if I correctly understood what do you mean by "Also the blocks on the right don't expand it either"

Is this problem still present after you remove the fixed height of ts_108 ?

Best regards,
Vesselin[/quote]


Report this post
Top
  
Reply with quote  
 Post subject:
PostPosted: Thu May 15, 2008 11:27 pm 
Offline
Site Admin

Joined: Thu Jan 04, 2007 1:57 pm
Posts: 303
Well, it seems that I forgot to login before replying too :-)


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Mon May 26, 2008 9:36 pm 
Offline

Joined: Thu May 15, 2008 10:52 am
Posts: 3
Sorry for not replying sooner. I've finally finished my layout :P.

I couldn't convert the whole site even with your help because I kept coming across new problems. I've finished it now by just converting everything separately. Here's the result: http://finalfantasy-xiii.net/test/

Thanks again for you're great program :D.


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Tue May 27, 2008 6:37 am 
Offline
Site Admin

Joined: Thu Jan 04, 2007 1:57 pm
Posts: 303
Hi Kitmitsu,
Many thanks for the information. I am glad that you finally managed to convert the page. However I did not fully understand what do you mean by "converting everything separately". Do you mean that you split the page into parts, then converted these parts separately and after that merged them again into a single page?

By the way - I noticed that yesterday you tried to download the program from Plimus but it refused the download. Plimus expires the download links a few days after the purchase. So if you want to download the program again please use the customer area at table2css.com. You can login there and download the latest version and/or any future releases of the program.

Actually I am not 100% sure if it was you but I guess so - after all we do not have many customers whose email is kitmitsu@some-domain :-)

Best regards,
Vesselin


Report this post
Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 11 posts ] 

All times are UTC


You can post new topics in this forum
You can reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron