liam6
15 Feb 2011, 12:50 PM
Hi Everyone
Can anyone tell me what I'm doing wrong with my HTML and CSS code at the bottom of this post?
I want to have a different home page to my other site pages, so I used a page class suffix to achieve this (Joomla Skin). My normal pages have just one pane 650px wide for the main body content, nice and simple.
My frontpage I wanted content left 450px wide modified by the page class suffix (.contentpaneopen_frontpage) and a right one for a iframe containing a facebook like box. So I used a page class suffix for the front page (suffix is _frontpage) to amend the left pane to make the width 200px less wide on the home page only to make room for the iframe on the right hand side.
But what I got was what appears to be two left hand content panes on my home page! in addition to the right hand iframe, one with the standard width of 650px required for the other site pages and the amended 400px wide for the home page content. The 650px wide pane is blocking my Iframe on the right, pushing it down the page. Any ideas about this?, Am I using the Page Class Suffix correctly?, should the Page Class Suffix surely just amend the width on my content pane for the frontpage only and not create two content panes? Below my HTML and CSS code, as ideas much appreciated.
CSS
#bodycontainer {background-color:#FFF; height:100%; width:753px; padding:0 2px 0 2px; margin:0px auto 0 auto; overflow:auto;}
.leftmain {background-color:#FFF; float:left; width:650px; padding:20px 0px 0 20px;}
.contentpaneopen_frontpage {float:left; width:405px; padding:0px 0px 0 0px;}
.facebook {float:right; margin:35px 15px 0px 0px;}
HTML
<div id="bodycontainer">
<div class="leftmain">
<jdoc:include type="component" />
</div>
<div class="facebook">
<jdoc:include type="modules" name="user2" />
</div>
</div>
Many thanks inadvance for your views.
Liam
Can anyone tell me what I'm doing wrong with my HTML and CSS code at the bottom of this post?
I want to have a different home page to my other site pages, so I used a page class suffix to achieve this (Joomla Skin). My normal pages have just one pane 650px wide for the main body content, nice and simple.
My frontpage I wanted content left 450px wide modified by the page class suffix (.contentpaneopen_frontpage) and a right one for a iframe containing a facebook like box. So I used a page class suffix for the front page (suffix is _frontpage) to amend the left pane to make the width 200px less wide on the home page only to make room for the iframe on the right hand side.
But what I got was what appears to be two left hand content panes on my home page! in addition to the right hand iframe, one with the standard width of 650px required for the other site pages and the amended 400px wide for the home page content. The 650px wide pane is blocking my Iframe on the right, pushing it down the page. Any ideas about this?, Am I using the Page Class Suffix correctly?, should the Page Class Suffix surely just amend the width on my content pane for the frontpage only and not create two content panes? Below my HTML and CSS code, as ideas much appreciated.
CSS
#bodycontainer {background-color:#FFF; height:100%; width:753px; padding:0 2px 0 2px; margin:0px auto 0 auto; overflow:auto;}
.leftmain {background-color:#FFF; float:left; width:650px; padding:20px 0px 0 20px;}
.contentpaneopen_frontpage {float:left; width:405px; padding:0px 0px 0 0px;}
.facebook {float:right; margin:35px 15px 0px 0px;}
HTML
<div id="bodycontainer">
<div class="leftmain">
<jdoc:include type="component" />
</div>
<div class="facebook">
<jdoc:include type="modules" name="user2" />
</div>
</div>
Many thanks inadvance for your views.
Liam