J
jimp
Bekanntes Mitglied
Hi Leute,
da ich mich seit neustem mit Joomla! beschäftige, versuche ich nun eigene Templates zu erstellen. Jedoch habe ich ein kleines Problem:
Ich habe ein Layout erstellt, welches einen variablen Content-Bereich (also Menü links und rechts, und der eigentliche Inhalt in der mitte) hat. Mir gelingt es jedoch nicht den Footer ans untere Ende des Contentbereiches zu hängen, sondern entweder nur ans Ende des Browsers oder mitten in der Seite hinter dem Content oder darüber oder sonstwoanders nur nicht unter dem Content.
Ich habe mich schon durch verschiedenste Foren und Tutorials gelesen, aber leider ohne Erfolg.
Index-PHP:
Ich wäre sehr dankbar für eure Hilfe
MfG Jimp
PS: der Seitenaufbau ist noch nicht ganz fertig, daher warscheinlich noch ein paar kleine Fehler
PPS: Die Seite soll in etwa so aussehen:
da ich mich seit neustem mit Joomla! beschäftige, versuche ich nun eigene Templates zu erstellen. Jedoch habe ich ein kleines Problem:
Ich habe ein Layout erstellt, welches einen variablen Content-Bereich (also Menü links und rechts, und der eigentliche Inhalt in der mitte) hat. Mir gelingt es jedoch nicht den Footer ans untere Ende des Contentbereiches zu hängen, sondern entweder nur ans Ende des Browsers oder mitten in der Seite hinter dem Content oder darüber oder sonstwoanders nur nicht unter dem Content.
Ich habe mich schon durch verschiedenste Foren und Tutorials gelesen, aber leider ohne Erfolg.
Index-PHP:
Code:
<body>
<a name="up" id="up"></a>
<div id="overall">
<div id="container">
<!-- Header -->
<div id="header">
</div>
<!-- Breadcrumbs -->
<div id="breadcrumbs">
<div class="inbreadcrumbs">
<jdoc:include type="module" name="breadcrumbs" />
</div>
</div>
<!-- Content -->
<div id="content">
<div class="wrapper">
<!-- Menu Left -->
<div id="leftcolumn">
<div class ="inleftcolumn">
<div id="mainmenu">
<div class="inmainmenu">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="user1">
<div class="inuser1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
</div>
<div id="bottom_left"></div>
</div>
</div>
<!-- Center -->
<div id="center">
<div class="incenter">
<div id="articles">
<jdoc:include type="component" />
</div>
</div>
<div id="bottom_center"></div>
</div>
<!-- Menu Right -->
<div id="rightcolumn">
<div class="inrightcolumn">
<div id="rightside">
<div class="inrightside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="user2">
<div class="inuser2">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
</div>
<div id="bottom_right"></div>
</div>
</div>
<!-- Content Close -->
</div>
</div>
</div>
<div id="container2">
<!-- Footer -->
<div id="footer">
<div class="infooter">
<!-- Footer Left -->
<div id="footleft">
<div class="infootleft">
<jdoc:include type="module" name="footleft" />
</div>
</div>
<!-- Footer Center -->
<div id="footcenter">
<div class="infootcenter">
<jdoc:include type="module" name="footcenter" />
</div>
</div>
<!-- Footer Right -->
<div id="footright">
<div class="infootright">
<jdoc:include type="module" name="footright" />
</div>
</div>
<!-- Footer Close -->
</div>
</div>
</div>
</div>
</body>
</html>
Code:
/* start */
html {height:100%; margin-bottom:1px;}
body {background-color:#dedede; color:#000;
font:normal normal normal 11px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
height:100%; text-align:center;}
/* Layout
*********************************************/
div#overall {height:100%; margin:0 auto; text-align:left;
width:1020px; background-color:#dedede}
div#container {float:left; text-align:left; height:auto; width:100%; padding-bottom:115px;}
div#header {background:url(../images/header.jpg); width:900px; height:130px; float:left; margin-top:20px;}
div#breadcrumbs {float:left; margin-top:170px;margin-left:-900px;}
div#content {float:left; margin-top:60px;}
div#leftcolumn {float:left; background:url(../images/header_menuleft.jpg);width:195px; height:20px; margin-top:60px;}
div#mainmenu {float:left; background-color:#c9c9c9; margin-top:20px; width:195px;}
div#user1 {float:left; background-color:#c9c9c9; padding-top:10px; width:195px;}
div#bottom_left {float:left; background:url(../images/bottom_menuleft.jpg); width:195px; height:20px;}
div#center {float:left; background:url(../images/header_content.jpg); width:508px; height:17px;}
div#articles {margin-left: 15px; width:478px;}
div#bottom_center {float:left; background:url(../images/bottom_content.jpg); width:508px; height:17px; margin-bottom:20px;}
div#rightcolumn {float:right; background:url(../images/header_menuright.jpg); width:195px; height:20px; margin-top:60px;}
div#rightside {float:right; background-color:#c9c9c9; margin-top:20px; width:195px;}
div#user2 {float:right; background-color:#c9c9c9; padding-top:10px; width:195px;}
div#bottom_right {float:right; background:url(../images/bottom_menuright.jpg); width:195px; height:20px;}
div#container2 {clear:both; width:100%;}
div#footer {background:url(../images/bg_footer.jpg); width:905px; height:115px;}
div#footleft { }
div#footcenter { }
div#footright { }
/* Layout Classes */
div.inbreadcrumbs { }
div.incenter {background:url(../images/bg_center.jpg) repeat-y; width:508px; height:auto; margin-top:17px; margin-right:5px; min-height:300px;}
div.inleftcolumn { }
div.inmainmenu {float:right;}
div.inuser1 {float:right; padding-right:15px;}
div.wrapper {height:auto;}
div.inrightcolumn {width:195px;}
div.inrightside {float:left; margin-left:-1px;}
div.inuser2 {float:left; margin-left:-1px;}
div.infooter { }
div.infootleft { }
div.infootcenter { }
div.infootright { }
/* Floats */
.floatLeft {float:left;}
.floatRight {float:right;}
.floatClear {clear:both;}
/* Menus
*********************************************/
#mainmenu ul li {padding-top:5px; padding-bottom:5px;}
#mainmenu h3 {font-size: 20px; background-color:#3e5283; padding-top: 10px; padding-bottom:10px; padding-left: 10px; padding-right:70px;}
#user1 ul li {padding-top:5px; padding-bottom:5px;}
#user1 h3 {font-size: 20px; background-color:#3e5283; padding-top: 10px; padding-bottom:10px; padding-left: 10px; padding-right:70px;}
#rightside ul li {padding-top:5px; padding-bottom:5px;}
#rightside h3 {font-size: 20px; background-color:#3e5283; padding-top: 10px; padding-bottom:10px; padding-left: 10px; padding-right:70px;}
#user2 ul li {padding-top:5px; padding-bottom:5px;}
#user2 h3 {font-size: 20px; background-color:#3e5283; padding-top: 10px; padding-bottom:10px; padding-left: 10px; padding-right:70px;}
/* Links
*********************************************/
a:link, a:visited {color:#666; font-weight:normal;font-size: 12px;
text-decoration:none;}
a:hover {color:#ccc; background-color:#3e5283; padding-top: 5px; padding-bottom:5px; font-size: 12px; text-decoration:none;}Ich wäre sehr dankbar für eure Hilfe
MfG Jimp
PS: der Seitenaufbau ist noch nicht ganz fertig, daher warscheinlich noch ein paar kleine Fehler
PPS: Die Seite soll in etwa so aussehen:
Zuletzt bearbeitet:
