✔ Problem mit CSS im Joomla Template

Marius-Prehn · 16. März 2011

Hallo liebe Community,

ich habe mich hier angemeldet da ich absolut nicht weiter weiß. Mal kurz zu meinem Problem. Ich habe ein Template für Joomla geschrieben und jetzt, das alt bekannte Problem, ich kriege 2 div tags, die nebeneinander liegen, nicht auf height:100%. Ich weiß es gibt genug Themen und ich habe mich auch schon durch ca. 100 Internetseiten bei google gekämpft, konnte den Fehler aber nicht beheben. Ich habe jetzt die CSS auf den Ursprung gesetzt genauso wie die index.php.

Ich hoffe Ihr könnt mir bei dem Problem helfen. Es geht um den Tag "Left" und "Center".

Index.php

PHP:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="shortcut icon" href="<?php echo $this->baseurl; ?>/images/favicon.ico" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/TUS_default/css/template.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/TUS_default/css/jquery.lightbox.ie6.css" type="text/css" /><![endif]-->
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/TUS_default/script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/TUS_default/script/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/TUS_default/script/jquery.wt-rotator.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/TUS_default/script/settings.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/TUS_default/script/jquery.lightbox.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('.lightbox').lightbox();
  });
</script>
</head>
<body>
<div align="center">
  <div id="header">
    <div id="search">
      <jdoc:include type="module" name="search" />
    </div>
  </div>
  <div id="pillmenu" class="pillmenu">
    <?php if($this->countModules('top')) : ?><jdoc:include type="modules" name="top" style="" /><?php endif; ?>
  </div>
  <div id="short">
    <?php if($this->countModules('short')) : ?><jdoc:include type="modules" name="short" style="" /><?php endif; ?>
  </div> 
  <div id="main">
    <div id="left">
      <?php if($this->countModules('left')) : ?><jdoc:include type="modules" name="left" style="" /><?php endif; ?>
    </div>
    <div id="center">
      <jdoc:include type="component" />
    </div>
  </div>  
</div>
<div id="footer">
  <div style="width:1000px; margin:0 auto;">
    <div id="footer1">
      <?php if($this->countModules('footer1')) : ?><jdoc:include type="modules" name="footer1" style="" /><?php endif; ?>
    </div>
    <div id="footer2">
      <?php if($this->countModules('footer2')) : ?><jdoc:include type="modules" name="footer2" style="" /><?php endif; ?>
    </div>
    <div id="footer3">
      <?php if($this->countModules('footer3')) : ?><jdoc:include type="modules" name="footer3" style="" /><?php endif; ?>
    </div>
  </div>
</div>
</body>
</html>

template.css

Code:

html, body {
	background-color:#3D3D3D;
	background-image:url(../images/bg.png);
	background-repeat:repeat-x;
	margin:0 auto;
	padding:0;
	height: 100%;
	width:100%;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#333;
	text-align:left;
}
#main {
	width:1000px;
	height:100%;	
}
/******************************************************************************/
/*
/* HEADER
/* 
/******************************************************************************/
#header {
	background-image:url(../images/logo_header.png);
	width:1000px;
	height:175px;
	float:none;
}
#header img {
	float:left;
	margin-top:-75px;
}
/******************************************************************************/
/*
/* SHORT
/* 
/******************************************************************************/
#short {
	background-color:#FFF;
	width:998px;
	margin-top:10px;
	margin-bottom:10px;
	color:#FFF;
	padding:10px 0 10px 0;
	border-left:thin solid #111;
	border-right:thin solid #111;
	border-bottom:thin solid #111;
}
/******************************************************************************/
/*
/* LEFT
/* 
/******************************************************************************/
#left {
	background-color:#FFF;
	width:168px;
	padding:10px;
	float:left;
	margin-bottom:10px;
	border:thin solid #111;
	min-height: 100%; /* Mindesthöhe für moderne Browser */
	height:auto !important; /* Important Regel für moderne Browser */
	height:100%; /* Mindesthöhe für den IE */
	overflow: hidden !important; /* FF Scroll-leiste */ 
}
/******************************************************************************/
/*
/* CENTER
/* 
/******************************************************************************/
#center {
	background-color:#FFF;
	width:778px;
	text-align:left;
	padding:10px;
	margin-left:10px;
	float:left;
	margin-bottom:10px;
	border:thin solid #111;
	bottom:10px;
	min-height: 100%; /* Mindesthöhe für moderne Browser */
	height:auto !important; /* Important Regel für moderne Browser */
	height:100%; /* Mindesthöhe für den IE */
	overflow: hidden !important; /* FF Scroll-leiste */ 
}
/******************************************************************************/
/*
/* FOOTER
/* 
/******************************************************************************/
#footer {
	background-image:url(../images/bg_footer.png);
	background-repeat:repeat;
	color:#FFF;
	width:100%;
	height:130px;
	border-top:thin solid #111;	
	list-style-image:url(../images/list_icon.png);
	margin: 0 auto;
	clear:both;
}
#footer a:link {
	text-decoration:none;
	color:#FFF;
}
#footer a:hover {
	text-decoration:none;
	color:#FFF;
}
#footer a:visited {
	text-decoration:none;
	color:#FFF;
}
#footer li  {
	border-bottom:#333 dotted 1px;
	height:20px;
	line-height:20px;
}
#footer li:hover {
	background-color:#141414;
}
#footer1 {
	max-width:333px;
	width:333px;
	float:left;
}
#footer2 {
	max-width:333px;
	width:333px;
	float:left;
}
#footer3 {
	max-width:333px;
	width:333px;
	float:left;
}

/******************************************************************************/
/*
/* NAVIGATION
/* 
/******************************************************************************/
#pillmenu {
	background-color:#333;
	width:1000px;
	height:40px;
}
#pillmenu ul {
	margin:0;
	padding:0;
	list-style:none;
}
#pillmenu li {
	margin: 0;
	text-align:center;
	padding-left:5%;
}
#pillmenu a:hover {
	text-decoration:none;
	background-color:#FFF;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding:0 5px 0 5px;
	color:#06F;
}
#pillmenu a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	display:block;
	height: 40px;
	line-height: 20px;
	color: #FFF;
	text-decoration: none;
	float:left;
	margin-right:10px;
	margin-top:10px;
	padding:0 5px 0 5px;
}
/******************************************************************************/
/*
/*  PAGENAVIGATION
/* 
/******************************************************************************/
.pagenav {
	float: none;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 11px;
	color: #333;
	width: auto;
	line-height: 20px;
	margin: 1px;
	padding: 3px 4px;
}
.pagenav:link {
	color:#FFF;
	background-color:#333;
	text-decoration:none;
	border-radius:4px;
}
.pagenav:hover {
	color:#FFF;
	background-color:#06F;
	text-decoration:none;
	border-radius:4px;
}
.pagenav:focus {
	color:#FFF;
	text-decoration:none;
	border-radius:4px;
}
.pagenav:active {
	color:#FFF;
	text-decoration:none;
	border-radius:4px;
}
.pagenavbar {
	margin-right:10px;
	text-decoration:none;
	float:right;
}
/******************************************************************************/
/*
/* SUCHE
/* 
/******************************************************************************/
#search {
	float:right;
	overflow:hidden;
	margin-top:90px;
	margin-right:5px;
}
.search input {
	height:17px;
	width:155px;
	border:none;
	background-image:url(../images/bg_search.png);
	background-repeat:repeat-x;
	border-radius:0px;
	color:#FFF;
}
/******************************************************************************/
/*
/* VERLINKUNG
/* 
/******************************************************************************/
a:link {
	color:#06F;
	text-decoration:none;
	font-weight:bold;
}
a:visited {
	color:#06F;
	text-decoration:none;
	font-weight:bold;
}
a:hover {
	text-decoration:underline;
	color:#06F;
}
/******************************************************************************/
/*
/* LOGINBEREICH
/* 
/******************************************************************************/
input {
	height:15px;
	width:180px;
	border:none;
	background-repeat:no-repeat;
	background-color:#FFF;
	color:#333;
	border:thin #333 solid;
	padding-left:2px;
}
.button {
	font-size:11px;
	border:solid #333 1px;
	background-color:#06C;
	color:#FFF;
	width:70px;
	height:22px;
	float:right;
	margin-top:-33px;
	text-align:center;
}
form#form-login fieldset { 
	border: 0 none; 
	margin: 0; 
	padding: 0;
}
#form-login ul{
	margin-top:2px;
}
/******************************************************************************/
/*
/* SLIDER
/* 
/******************************************************************************/
.wt-rotator{
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	background-image:url(../images/slider/images/03.png);
	border:1px solid #333;
	position:relative;
	width:825px;
	height:300px;
	overflow:hidden;
}
.wt-rotator a{
	outline:none;
}
.wt-rotator .screen{
	position:relative;
	top:0;
	left:0;
	width:978px;
	height:250px;
	overflow:hidden;
}
.wt-rotator .main-img{
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	border:0;
}
.wt-rotator .preloader{
	position:absolute;
	top:50%;
	left:50%;
	width:36px;
	height:36px;
	margin-top:-18px;
	margin-left:-18px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#000 url(../images/slider/assets/loader.gif) center no-repeat;
	background:rgba(0,0,0,.7) url(../images/slider/assets/loader.gif) center no-repeat;
	z-index:4;
	display:none;
}
.wt-rotator #timer{
	position:absolute;
	left:0;
	height:4px;
	background-color:#FFF;
	-moz-opacity:.5;
	filter:alpha(opacity=50);
	opacity:0.5;
	z-index:4;
	visibility:hidden;
	font-size:0;
}
.wt-rotator .desc{
	color:#000;
	position:absolute;
	top:0;
	left:0;
	z-index:6;
	overflow:hidden;
	visibility:hidden;
	text-align:left;
}
.wt-rotator .inner-bg{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:.7;
	filter:alpha(opacity=70);
	opacity:0.7;
	z-index:0;
}
.wt-rotator .inner-text{
	position:absolute;
	padding:10px;
	z-index:1;
}
.wt-rotator .c-panel{
	position:absolute;
	top:0;
	left:0;
	z-index:7;
	visibility:hidden;
}
.wt-rotator .cp-bg{
	background:#333;
	background:-moz-linear-gradient(top, #999 0%, #333 50%, #000 51%, #111 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#333), color-stop(51%,#000), color-stop(100%,#111));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#111111',GradientType=0);
	border:1px solid #000;
}
.wt-rotator .thumbnails,
.wt-rotator .buttons{
	position:relative;
	float:left;
	overflow:hidden;
}
.wt-rotator .thumbnails ul{
	list-style:none;
	margin:0;
	padding:0;
}
.wt-rotator .thumbnails li,
.wt-rotator .play-btn,
.wt-rotator .prev-btn,
.wt-rotator .next-btn{
	list-style:none;
	display:block;
	float:left;
	margin-right:4px;
	overflow:hidden;
	width:24px;
	height:24px;
	line-height:24px;
	text-align:center;
	color:#FFF;
	background-color:#333;
	border:1px solid #000;
	cursor:pointer;
	font-weight:bold;
}
.wt-rotator .thumbnails li.thumb-over{
	color:#FFF;
	background-color:#0066FF;
}
.wt-rotator .thumbnails li.curr-thumb{
	color:#333;
	background-color:#FFF;
	cursor:default;
}
.wt-rotator .thumbnails li.image{
	background-color:#000;
}
.wt-rotator .thumbnails li.image.curr-thumb,
.wt-rotator .thumbnails li.image.thumb-over{
	border-color:#06F;
}
.wt-rotator .thumbnails li.image a,
.wt-rotator .thumbnails li.image img{
	display:block;
	border:0;
}
.wt-rotator .thumbnails li.image.curr-thumb img{
	-moz-opacity:.8;
	filter:alpha(opacity=80);
	opacity:0.8;
	cursor:default;
}
.wt-rotator .thumbnails li *{
	display:none;
}
.wt-rotator .thumbnails li div{
	position:absolute;
	color:#FFF;
	background-color:#000;
}
.wt-rotator .play-btn{
	background:#333 url(../images/slider/assets/play.png) no-repeat center;
}
.wt-rotator .pause{
	background:#333 url(../images/slider/assets/pause.png) no-repeat center;
}
.wt-rotator .prev-btn{
	background:#333 url(../images/slider/assets/prev.png) no-repeat center;
}
.wt-rotator .next-btn{
	background:#333 url(../images/slider/assets/next.png) no-repeat center;
}
.wt-rotator .button-over{
	background-color:#0066FF;
}
#rotator-tooltip{
	position:absolute;
	top:0;
	left:0;
	z-index:99999;
	display:none;
}
#rotator-tooltip.txt-up{
	margin-left:-10px;
	margin-bottom:5px;
	background:url(../images/slider/assets/tail.png) no-repeat;
	background-position:10px bottom;
	background-position-x:10px;
	background-position-y:bottom;
}
#rotator-tooltip.txt-down{
	margin-left:-10px;
	margin-top:24px;
	background:url(../images/slider/assets/rev_tail.png) no-repeat;
	background-position:10px top;
	background-position-x:10px;
	background-position-y:top;
}
#rotator-tooltip.img-up{
	background:url(../images/slider/assets/tail.png) center bottom no-repeat;
}
#rotator-tooltip.img-down{
	background:url(../images/slider/assets/rev_tail.png) center top no-repeat;
}
#rotator-tooltip .tt-txt{
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	color:#FFF;
	background-color:#000;
	max-width:300px;
	padding:4px;
	margin:8px 0;
}
#rotator-tooltip .tt-img{
	background-color:#000;
	padding:2px;
	margin:8px 0;
}
.wt-rotator .block,
.wt-rotator .vpiece,
.wt-rotator .hpiece{
	position:absolute;
	z-index:2;
}
/******************************************************************************/
/*
/* LISTENSTIL
/* 
/******************************************************************************/
#left ul {
	width:148px;
	float:left;
	margin-left:-10px;
	list-style-type:none;
}
#left li {
	text-align:left;
	font-weight:bold;
	background-color:#333;
	width:163px;
	float:left;
	margin-left:-30px;
	list-style-type:none;
	margin-top:5px;
	height:35px;
	line-height:35px;
	color:#FFF;
	padding-left:5px;
	border-left:10px solid #333;
}
#left li:hover {
	background-color:#06F;
	padding-left:15px;
	margin-left:-40px;
}
#left a:link {
	font-weight:bold;
	color:#FFF;
}
#left a:hover {
	font-weight:bold;
	color:#FFF;
}
#left a:visited {
	font-weight:bold;
	color:#FFF;
}
/******************************************************************************/
/*
/* JQUERY
/* 
/******************************************************************************/
.jquery-lightbox-overlay
{
  background:#000000;
}
.jquery-lightbox
{
  position:relative;
  padding:17px 0;
}
.jquery-lightbox-border-top-left,
.jquery-lightbox-border-top-right,
.jquery-lightbox-border-bottom-left,
.jquery-lightbox-border-bottom-right
{
  position:absolute;
  height:17px;
  width:12%;
  z-index:7000;
}
.jquery-lightbox-border-top-left
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat 0 0;
  top:0;
  left:0;
}
.jquery-lightbox-border-top-right
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat right 0;
  top:0;
  right:0;
}
.jquery-lightbox-border-top-middle
{
  background:#2b2b2b;
  position:absolute;
  height:7px;
  width:78%;
  top:0;
  left:12%;
  z-index:7000;
  overflow:hidden;
}
.jquery-lightbox-border-bottom-left
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat 0 bottom;
  bottom:0;
  left:0;
}
.jquery-lightbox-border-bottom-right
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat right bottom;
  bottom:0;
  right:0;
}
.jquery-lightbox-border-bottom-middle
{
  background:#2b2b2b;
  height:7px;
  width:78%;
  position:absolute;
  bottom:0;
  left:12%;
  z-index:7000;
  overflow:hidden;
}
.jquery-lightbox-title
{
  background:#2b2b2b;
  color:#FFFFFF;
  font-family:verdana,arial,serif;
  font-size:11px;
  line-height:14px;
  padding:5px 8px;
  margin:3px;
  position:absolute;
  bottom:0;
  z-index:7000;
  opacity:0.9;
}
.jquery-lightbox-html
{
  z-index:7000;
  position:relative;
  border:0;
  border-left:7px solid #2b2b2b;
  border-right:7px solid #2b2b2b;
  padding:0px 15px;
  vertical-align:top;
}
.jquery-lightbox-html embed,
.jquery-lightbox-html object,
.jquery-lightbox-html iframe
{
  vertical-align:top;
}
.jquery-lightbox-background
{
  position:absolute;
  top:7px;
  left:7px;
  z-index:6999;
  float:left;
  padding:0;
}
.jquery-lightbox-background img
{
  display:block;
  position:relative;
  border:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
.jquery-lightbox-mode-image .jquery-lightbox-html
{
  z-index:6998;
  padding:0;
}
.jquery-lightbox-mode-html .jquery-lightbox-background
{
  background:#FFFFFF;
}
.jquery-lightbox-mode-html .jquery-lightbox-html
{
  overflow:auto;
}
.jquery-lightbox-loading
{
  background:#FFFFFF url(../images/loading.gif) no-repeat center center;
}
.jquery-lightbox-button-close
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -190px -115px;
  position:absolute;
  top:12px;
  right:-26px;
  width:29px;
  height:29px;
}
.jquery-lightbox-button-close:hover
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -220px -115px;
}
.jquery-lightbox-button-close span,
.jquery-lightbox-buttons span
{
  display:none;
}
.jquery-lightbox-mode-image .jquery-lightbox-button-close
{
  right:14px;
  z-index:7002;
}
.jquery-lightbox-buttons 
{
  position:absolute;
  top:7px;
  left:7px;
  z-index:7001;
  height:39px;
  display:none;
}
.jquery-lightbox-buttons .jquery-lightbox-buttons-init,
.jquery-lightbox-buttons .jquery-lightbox-buttons-end
{
  width:5px;
  height:39px;
  float:left;
  display:inline;
}
.jquery-lightbox-buttons .jquery-lightbox-buttons-init
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -151px -153px;
  margin:7px 0 0 7px;
}
.jquery-lightbox-buttons .jquery-lightbox-buttons-end
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -244px -153px;
  margin:7px 0 0 0;
}
.jquery-lightbox-buttons .jquery-lightbox-button-left
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -156px -153px;
  width:24px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}
.jquery-lightbox-buttons .jquery-lightbox-button-left:hover
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -156px -194px;
}
.jquery-lightbox-buttons .jquery-lightbox-button-right
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -220px -153px;
  width:24px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}
.jquery-lightbox-buttons .jquery-lightbox-button-right:hover
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -220px -194px;
}
.jquery-lightbox-buttons .jquery-lightbox-button-max
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -182px -153px;
  width:36px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}
.jquery-lightbox-buttons .jquery-lightbox-button-max:hover
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -182px -194px;
}
.jquery-lightbox-buttons .jquery-lightbox-button-min
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -162px -235px;
  width:36px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}
.jquery-lightbox-buttons .jquery-lightbox-button-min:hover
{
  background:url(../images/jquery-lightbox-theme.png) no-repeat -207px -235px;
}
.jquery-lightbox-buttons-custom
{
  height:39px;
  float:left;
  display:inline;
  background:#2b2b2b;
  line-height:39px;
  font-size:10px;
  margin:7px 0 0 0;
}
.jquery-lightbox-buttons-custom a
{
  color:#FFFFFF;
  font-size:10px;
  display:inline;
  font-weight:normal;
  text-decoration:underline;
  padding:0 3px;
}
.jquery-lightbox-mode-image .jquery-lightbox-button-close
{
  opacity:0.7;
}
.jquery-lightbox-mode-image .jquery-lightbox-buttons
{
  opacity:0.3;
}
.jquery-lightbox-mode-image:hover .jquery-lightbox-buttons,
.jquery-lightbox-mode-image:hover .jquery-lightbox-button-close
{
  opacity:0.9;
}
.jquery-lightbox-navigator
{
  display:none;
}
/******************************************************************************/
/*
/* CONTENT
/* 
/******************************************************************************/
.contentheading {
	padding-left:10px;
	margin:-2px;
	width:500px;
	height:30px;
	line-height:30px;
	float:left;
	font-size:18px;
	font-weight:bold;
	color:#fff;
	background-color:#333;
	border-right:#06F 10px solid;
}
.createdate {
	color:#06F;
	font-size:9px;
}
.small {
	color:#666;
	font-size:9px;
}
.modifydate {
	color:#06F;
}
/* Tabellarische Auflistung mit zwei unterschiedlichen Zeilenfarben (u.a. auch im Poll) */
/* Hintergrundfarbe 1 */
.sectiontableentry1 {
	background-color:#C0C0C0;
}
/* Hintergrundfarbe 2 */
.sectiontableentry2 {
	background-color:#FFFFFF;
}
/* PDF-, Drucken-, eMail-Icons */
.buttonheading img {
	border: 0;
}

Marius-Prehn · 17. März 2011

Wenn ich dem Main Tag eine feste höhe von 1000px Beispielsweise gebe, dann erhalte ich das gewünschte Ergebniss. Jedoch funktioniert das nicht bei einer Automatischen Höhe. Ich vermute es liegt an den Floats, aber konnte das Problem bisher nicht beheben.

michael2105 · 17. März 2011

Das liegt daran, dass sich die Höhenangabe eines div-Containers am vorigen Element orientiert.
#left und #center liegen bei dir innerhalb von #main und alle haben eine Höhe von 100%. Von daher ist das richtig.

Jedoch liegt #main nur innerhalb eines div's ohne Höhenangabe. Darum wird #main immer nur so groß sein, wie das div ohne Höhenangabe.

Suche:

HTML:

<div align="center">

Ersetze mit

HTML:

<div align="center" style="height:100%;">

Allerdings empfehle ich eher dem Div eine ID zu geben - z.B. "Wrapper" und es entsprechend in CSS zu formatieren.

Im Anhang liegt noch meine Korrigierte Version. Getestet unter FF 3.6.15 und IE9.

Gruß
Michael

✔ Problem mit CSS im Joomla Template

Marius-Prehn

Marius-Prehn

michael2105

Grünschnabel

Anhänge

Neue Beiträge