Frage stellen
ich habe folgendes Problem. Ich habe ein eigenes Template für joomla gebaut. Es ist im grunde ein simples 3 Spalten Layout mit footer und header.
Allerdings zieht er die Navigation nicht ganz bis runter, sondern macht sie nur solang wie der Inhalt ist. Ich habe schon gehört, das man einen Container um die Elemente Navileft, Main und Naviright machen soll. Diesen Container gibt man dann noch eine Hintergrundgrafik der Elemente und fertig ist die Laube, laut einigen Tutorials, sofern ich das nicht falsch verstanden habe.
Jetzt hab ich aber das Problem, dass er dies einfach nicht macht. Er lässt die Navi genau so lang wie links dafür drin sind. Meine css Datei sieht wie folgt aus:
- Code: Alles auswählen
.bg_main {
background :url(../images/tech_bg_3.png) repeat-x top #535353;
padding : 0;
margin : 0;
}
#body {
width: 990px;
height: 100%;
margin: 0 auto;
margin-top: 10px;
font-family:Verdana;
font-size:13px;
padding:0px;
background-image: url(../images/bg.jpg);
}
#faux {
background: url(../images/weiss.png) repeat-x top #FFFFFF;
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
}
#header {
width: 990px;
height: 196px;
background-image: url(../images/header.jpg);
}
#navileft {
width: 210px;
border: 1px solid;
height: 100%;
border-color: #3E968B;
float: left;
background: #ffffff;
}
#navileft a:link, a:visited{
display: block;
background-color: #f0f0f0;
color : #000000;
padding : 0px 0px;
text-indent : 5px;
border : 1px solid;
border-color: #FFFFFF;
height:22px;
line-height:22px;
font-weight : bold;
}
#navileft a:hover{
font-weight : bold;
color : #FFFFFF;
background-color: #3E968B;
text-decoration : none;
padding : 0px 0px;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #3E968B;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #3E968B;
text-decoration: none;
}
div.moduletable h3 {
background:url(../images/1.jpg);
color:#FFFFFF;
font-size: 12px;
font-weight: bold;
text-align : center;
height : 24px;
line-height : 24px;
padding-right : 10px;
margin : 5px 0 2px 0;
overflow : hidden;
}
.moduletable_text h3 {
background: #E6D2B5 ;
color:#FFFFFF;
font-size: 12px;
background:url(../images/1.jpg);
font-weight: bold;
text-align : center;
height : 24px;
line-height : 24px;
padding-right : 10px;
margin : 5px 0 2px 0;
overflow : hidden;
}
.moduletable_menu h3 {
background:url(../images/1.jpg);
text-align : center;
font-weight : bold;
height : 24px;
line-height : 24px;
font-size : 12px;
padding-right : 10px;
margin : 5px 0 2px 0;
overflow : hidden;
color:#FFFFFF;
}
.inputbox, .search {
font : bold 11px Arial, Helvetica, sans-serif;
color : #000000;
border : 1px solid #3E968B;
}
select.inputbox {
font : bold 11px Arial, Helvetica, sans-serif;
color : #000000;
border : 1px solid #3E968B;
background : #ffffff;
}
#form {
font : 8px Arial, Helvetica, sans-serif;
}
#maintable {
width: 645px;
height: 100%;
padding-left: 4px;
float: left;
background: #ffffff;
}
#naviright {
width: 125px;
height: 100%;
border: 1px solid;
float: left;
border-color: #3E968B;
padding-left: 2px;
background: #ffffff;
}
#footer {
width: 990px;
background: #ffffff;
text-align: center;
}
Meine index.php bzw. der html code wie folgt:
- Code: Alles auswählen
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!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>
<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/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="shortcut icon" href="http://www.novitas.de/templates/novitastemp/images/novitas.ico" />
<jdoc:include type="head" />
</head>
<body class="bg_main">
<div id="body">
<div id="header"></div>
<div id="faux">
<div id="navileft"><jdoc:include type="modules" name="left" style="xhtml" /></div>
<div id="maintable"><jdoc:include type="message" />
<jdoc:include type="component" /></div>
<div id="naviright"><jdoc:include type="modules" name="right" style="xhtml" /></div></div>
<div id="footer">Copyright 2010 by Novitas AG<jdoc:include type="modules" name="bottom" style="xhtml" /></div>
</div>
<jdoc:include type="modules" name="debug" style="" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7174853-3");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
Vielleicht hat ja noch jemand ne Idee oder hab ich was total falsch gemacht ?
