Hi,
I am trying to develop a Joomla Template which for the most part is going well except for this one issue.
The best way to demonstrate the issue is to visit the following site…
http://74.53.184.170/~wwwuncl/
please view in IE or Firefox where you will see it working fine then take a look in Chrome and you will see my problem. For the life of me I cant figure out why the left column is collapsing an why the brown navigation area is repeating.
Thanks in advance,
Cheers,
Kevin.
Hi,
I’d need to see the page to answer specifically but if you have floated the left and right columns then you don’t need to set heights on them but just ensure that content underneath is cleared. let the content of the columns dictate their height.
If you are looking for an equal column effect with full dividing borders and different background colours for each column then things are not so simple. It depends on the exact requirements/design etc.
To collapse a column you could use this overflow method assuming that one column has a width and then the other column takes up the rest of the space whether the column is there or not.
It may be easier if you need all the above then just to use a two celled table for those specific effects.
Sorry I actually mean dynamic height. The site will be very simple. the bottom bar is behaving as I would expect its just everthing above it is not.
Ok, I am bitting the bullet and switching to using divs insead of tables.
I know I still have to clean up the css into cleasses which I will do but I just need to focus on getting the div elements to behave and there are two areas I am not sure on.
Firstly the length of the two dynmic div elements being ‘left’ and ‘right’ which make up the main content areas of the site. As these can be variable length based on the page. I need the elements below to be positioned relative to the length of the elements above, i.e they move down if the element is longer.
the second issue is the right element is the main content and on some pages I dont want teh left element to be visible and the right element to streach arcosss the entire page.
Any tips would be very welcome.
Reagrds,
Kevin.
What I am trying to achieve is the right and left columns have a dynamic width so the content stays in the midle regardless of the width of the browser.
That’s not what I see in Firefox whch you said was working. Firefox shows a fixed width table of 975px centred in the screen. If you add the code I gave you above then all other browsers behave the same also with a centred layout of fixed width.
I’m not sure what you mean by dynamic width of the columns either. Assuming you want columns to expand to accommodate content then they would eventually be 100% wide if stretched by text content and never be centred anyway.
I don’t see that you have any real column content at present anyway as the content text spans full width of the table anyway but I guess this is a work in progress.
I may be missing the point of what you want though and getting the wrong end of the stick 
Hi,
That is rather a lot of code for such a simple effect and could be done in a few lines of neat css and no tables. The problem is exacerbated by all the presentational attributes and old school mark up which make it hard to debug.
e.g.
<td align="right" width="100%" class="buttonheading">
You already have a class so let that do the styling and not the other presentational attributes.
<td w[B]idth="635" height="83" [/B]colspan="2" [B]background="http://74.53.184.170/~wwwuncl/templates/UncleJosh/images/nav.gif[/B]"><ul class="menu">
That should all be css also.
Anyway, I’m guessing that the real issue is that you need the fixed table algorithm as you have sized all the cells.
#Table_01{table-layout:fixed}
I would suggest that you try and make this much simpler and strip out any inline or presentational mark up and handle it from css. This will keep the code clean and easier to work with.
There is no need for tables to achieve the page you have shown but I guess you are at the mercy of the cms.
Hope it helps anyway
Thanks for the advice. I would sooner have used div tags but I am not sure how to achieve a dynamic layout given its a CMS.
I see your point with the CSS classes and will look to tidy that up.
What I am trying to achieve is the right and left columns have a dynamic width so the content stays in the midle regardless of the width of the browser.
Clearly I have got it wrong.
Cheers,
Kevin.
Hi, Thanks for the reply.
Yes, it is still in design so there are areas I am still working on however this issues is clear to see when you view in chrome and then IE/.
I must confess I am not a Joomla guru. I usually take other templates and rip them apart to get the desired result however I thought I would have a play in designing my own from scratch.
If anyone else who has both Chrome and IE/FF could take a quick look it would be very much appreciated.
Kind Regards,
Kevin.
I’d have said welcome to Sitepoint Kevin, but then I saw that you already registered almost a year ago.
I can’t test the difference between Firefox and Chrome here as I don’t have chrome installed, though it doesn’t look very well on Firefox either - but maybe that is because we’re still in development - also you should rename the images/banner file, it’s blocked by default by AdBlock.
I’m also wondering whether Joomla still holds on to a table layout. It used to be a pain getting rid of all those tables and you never really could with Joomla’s template system only by hacking its core, I thought they changed that with Joomla 1.5?
Sorry, I can’t help you with your problem, but table-based layouts are a pain.
Also, you might want to notify a mod to move this topic to a more appropriate subforum (web design, html, or CSS - not sure where it fits best, but this one, General Development Issues, isn’t quite right). To do this, click on the little orange flag on the left and just write a message there.