4 replies [Last post]
EsorOne
Offline
Regular
Last seen: 8 years 6 weeks ago
Timezone: GMT+2
Joined: 2005-12-09
Posts: 30
Points: 9

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]

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

EsorOne
Offline
Regular
Last seen: 8 years 6 weeks ago
Timezone: GMT+2
Joined: 2005-12-09
Posts: 30
Points: 9

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

Anonymous
Anonymous's picture
Guru

3 column layout but not the same height

I'd try faux columns

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 column layout but not the same height

EsorOne wrote:
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