Sup all,
Im trying to make a joomla template of my own, and just started to use CSS.
But i'm running too a little problem.
The template is only DIV.
But what happens. I have a three column layout and i would like to have the column automaticaly get the same height.
I did read lots of stuff about this problem, but what i try, i don't get it right.
So i hope you guys could point me in the right direction
Check my problem out at http://www.esorone.nl/cms
Index.php:
<div id="core"> <div id="menu"> <a href="<?php echo $mosConfig_live_site;?>/index.php?option=someforumhere" id="hoofdmenu"></a> <a href="<?php echo $mosConfig_live_site;?>/index.php?option=someforumhere" id="catalogus"></a> <a href="<?php echo $mosConfig_live_site;?>/index.php?option=someforumhere" id="winkel"></a> <a href="<?php echo $mosConfig_live_site;?>/index.php?option=com_login" id="airbrush"></a> <a href="<?php echo $mosConfig_live_site;?>/index.php?option=com_login" id="evenementen"></a> </div> <div id="content"> <div id="sidebar_left"> <?php mosLoadModules ( 'left' ); ?> </div> <div id="sidebar_right"> <?php if (mosCountModules( "right" )) { ?> <?php mosLoadModules ( 'right' ); ?> <?php } ?> </div> <div id="bodytext"> <?php if (mosCountModules( "user1" )) { ?> <?php mosLoadModules ( 'user1' ); ?> <?php } ?> <?php if (mosCountModules( "user2" )) { ?> <?php mosLoadModules ( 'user2' ); ?> <?php } ?> <?php mosMainBody(); ?> <?php mosPathWay(); ?> </div> </div> <div id="footer"></div> <div align="center"> <?php include_once('includes/footer.php'); ?> </div> </div> </div> </div> </body> </html>
CSS:
/* CSS Document */ /* "Creator of Tattoo" Template for Joomla 1.2 / www.esorone.nl /* CSS global reset for all browsers */ * { padding: 0; margin: 0; } /* Background */ body { background-color:#000000; text-align: center; font-family:Georgia, "Times New Roman", Times, serif; color: #FFFFFF; } /* Breedte pagina */ #container { width: 839px; text-align:center; margin-left: auto; margin-right: auto; float: right; background: url(../images/bg.png) no-repeat; } /* Ruimte om de header tekst in te plaatsen */ #header { width: 839px; padding: 0em; margin-top: 50px; margin-left: auto; margin-right: auto; } /* Farhner Image Replacement - the code says its a header with the sitename, so we replace the header text with this header image - sweet :-) )*/ #logo { background: url(../images/header.jpg) top left no-repeat; width: 839px; height: 203px; text-indent: -5000px; } /* Menu bij de hearder-horizontaal */ #core { text-align: left; padding: 0em; } #menu { width: 839px; height: 37px; position: absolute; } /* Workaround voor IE geflikker */ #menu a:hover { top: 0px; left: 0px; } #menu a:active { top: 0px; left: 0px; } /* Menu items */ /* Float voor de snelheid */ #hoofdmenu { height: 37px; width:172px; float: left; background: url(../images/hoofdmenu.jpg) top left no-repeat; text-decoration : none; } #catalogus { height: 37px; width:138px; float: left; background: url(../images/catalogus.jpg) top left no-repeat; } #winkel { height: 37px; width: 116px; float: left; background: url(../images/winkel.jpg) top left no-repeat; text-decoration : none; } #airbrush { height: 37px; width:204px; float: left; background: url(../images/airbrush.jpg) top left no-repeat; } #evenementen { height: 37px; width:209px; float: left; background: url(../images/evenementen.jpg) top left no-repeat; } /* Main content area */ #content { height:200px; padding-left: 1px; padding-top: 38px; padding-right: 1px; } #sidebar_left { width:20%; padding-top: 30px; padding-left:10px; float: left; border-style: solid; border-top:#FFFFFF; border-bottom-width: 15px; background-color: #AC006C; border: #FFFFFF; } #bodytext { width: 55%; padding-top: 30px; border-style: solid; float:left; border-bottom-width: 15px; border: #FFFFFF; background: url(../images/main_content_03.jpg) repeat-y; } #sidebar_right { position:absolute; right:auto; width:20%; padding-top: 30px; padding-left:10px; float:right; border-style: solid; border-top:#FFFFFF; border-bottom-width: 15px; background: url(../images/content_r_t.jpg) no-repeat; background-color: #AC006C; border: #FFFFFF; } /* Make sure the font size for links and paragraphs doesn't break */ p, a { font-size: 0.8em; } /* Footer - */ #footer { background: url(../images/footer_11.jpg) no-repeat ; width: 1024px; padding-top:50px; height: 100%; }[/url]
3 column layout but not the same height
Hi
As far as I can see, the columns all reach down to the footer. So what is the problem.
Maybe you could do a jpg pointing out what needs fixing.
Trevor
3 column layout but not the same height
Hello ClevaTera.
Check out my screenshot.
As you can see the columns don't reach to the bottom.
I' would like the have all tree column have the same hight (the purple section)
http://www.esorone.nl/cms/webpix/kolom.jpg
Thx again
3 column layout but not the same height
I'd try faux columns
3 column layout but not the same height
Hello ClevaTera.
Check out my screenshot.
As you can see the columns don't reach to the bottom.
I' would like the have all tree column have the same hight (the purple section)
http://www.esorone.nl/cms/webpix/kolom.jpg
Thx again
Hi
That link times out.
Trevor