LinkBack URL
About LinkBacks
Problem mit footer Position
Hallo,
Ich bin gerade dabei ein eigenes Template zu erstellen, und bin auf ein Problem gestoßen, für das ich mich schon hier tot gesucht habe. Ein anderer User hatte ein ähnliches Problem, aber das wurde schnell von ihm selbst gelöst. Allerdings half mir das nichts.
Nun erstelle ich dafür ein eigenes Thema. Ich habe soweit alles gut platzieren können auser den footer, der will sich einfach nicht unten im Browser platzieren lassen (also passt er sich ja dann auch nicht der länge des Inhaltes an, er bleibt einfach in der mitte des Browsers). Genau das gleiche Problem hab ich mit meinen zwei 'sidebars', die balken links und rechts. Wenn ich den CSS code mit einer reinen HTML seite auf meinem Laptop anschaue, funktioniert alles einwandfrei, aber auf JOOMLA! installiert ignoriert er einfach die Prozent (%) werte die ich einigen Elementen gegeben habe (dem html, body, und container)!
Ich habe 'relative' Positionierung benutzt, und wie ich das aus einem anderen Thema herausgehört habe, passt das nicht gut mit meinem Vorhaben zusammen, aber ich weiss nicht wie ich sonst positionieren soll ohne Tabellen zu benutzen.
Also, ich habe Joomla! 1.0, und mehr wiess ich leider nicht.
Hier ist ein Screenshot wie es im Moment in Firefox aussieht:
Hier der php/html code:
Und hier das doofe CSS:PHP-Code:<?php echo "<?xml version=\"1.0\"?>"; ?>
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this
location is not allowed.' );
?>
<!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">
<head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) initEditor(); ?>
<meta **********="Content-Type" content="text/html;<?php echo _ISO; ?>" />
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\"type=\"text/css\"/>" ; ?>
<?php echo "<!--[if lte IE 5]> <link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_IEcss.css\"type=\"text/css\"/> <![endif]-->" ; ?>
<?php echo "<!--[if lte IE 6]> <link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_IEcss.css\"type=\"text/css\"/> <![endif]-->" ; ?>
<?php echo "<!--[if lte IE 7]> <link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_IEcss.css\"type=\"text/css\"/> <![endif]-->" ; ?>
</head>
<body>
<div id="container">
<!-- HEADER SECTION -->
<div id="header">
<div id="header_bg">
<img src="http://www.joomlaportal.de/images/Header_ImageMap.jpg" width="780" height="189" border="0" alt="" usemap="#Header_ImageMap_Map">
<map name="Header_ImageMap_Map">
<area shape="rect" alt="Shirner Kunst Verlag" coords="461,32,524,73" href="http://www.schirner.com/kunst_verlag/index.php?cPath=1_4" target="_blank">
<area shape="rect" alt="Schirner Verlag" coords="380,51,455,100" href="http://www.schirner.com/schirner_verlag/index1.php4" target="_blank">
<area shape="rect" alt="Schirner Seminare" coords="321,62,372,105" href="http://www.schirner.com/seminare/index.php" target="_blank">
<area shape="rect" alt="Schirner Versand Katalog" coords="240,74,315,117" href="http://www.schirner.com/katalog/" target="_blank">
<area shape="poly" alt="Schirner Buchhandlung" coords="74,10, 165,10, 192,64, 197,99, 165,118, 74,118, 51,98, 53,60" href="http://www.schirner.com/schirner_buch/index.html" target="_self">
</map>
</div>
<!-- MIDDLE SECTION -->
<div id="middle">
<!-- LEFT SIDEBAR -->
<div id="links">
<?php mosLoadModules ('left'); ?>
</div>
<!-- INHALT -->
<div id="inhalt"> ::
<?php mosPathWay(); ?>
<br />
<br />
<?php mosMainBody(); ?>
<br />
<br />
</div>
<!-- RIGHT SIDEBAR -->
<div id="rechts">
<?php mosLoadModules ("right"); ?>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
<div align="center">info und impressum
<a href="<?php echo $mosConfig_live_site; ?>"
accesskey="1"
<?php echo $mosConfig_sitename; ?>
</a>
</div>
</div>
</div>
</body>
</html>
Code:div { border: none; } #header { width: 780px; height: 189px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; z-index: 1; } #header_img { margin-left: auto; margin-right: auto; } #links { position: relative; width: 146px; height:100%; min-height: 100%; margin-left: 0px; color: #324c84; z-index: 4; background-color: #f9fd99; border-right: 2px solid; border-top: none; border-color: #d3e6fc; } #rechts { position: relative; left: 636px; top: -180px; width: 143px; height:100%; min-height: 100%; z-index: 3; color: #324c84; background-color: #f9fd99; border-left: 2px solid; border-top: none; border-color: #d3e6fc; } #inhalt { position: relative; width: 400px; margin: -200px 0 0 190px; color: #324c84; background-color: #ffffff; height:95%; min-height: 95%; z-index: 2; } #footer { clear: both; text-align: center; color: #f9fd99; background-color: #324c84; position: relative; width: 781px; height: 30px; padding-top: 10px; z-index: 5; } #middle { position: relative; height:100%; min-height: 100%; } #container { width: 780px; margin-left: auto; margin-right: auto; height:100%; min-height:100%; } body { height:100%; min-height:100%; width: 100%; } html, body { margin: 0; padding: 0; background-color: #ffffff; color: #324c84; font-family: calibri; height:100%; min-height:100%; width: 100%; } /* LOOK OF LINKS */ a.mainlevel:link, a.mainlevel:visited { font-family: calibri; font-size: 9pt; text-align: left; text-decoration: none; color: #324c84; } a.mainlevel:hover { color: #d3e6fc; } a:link, a:active, a:visited { text-decoration: none; color: #324c84; } a:hover { color: #d3e6fc; } /* JOOMLA! MODULE */ table.moduletable { width: 95%; padding-left: 2px; text-align: left; } table.moduletable.th { text-align: left; font-weight: bold; font-size: 11pt; } table.moduletable.td { font-size: 9pt; font-weight: lighter; } .contentheading, .componentheading { font-weight: bold; font-weight: 13pt; } .pathway { font-family: calibri; font-size: 7pt; color: #324c84; } .button { font-size: 9pt; background-color: #f9fd99; color: #324c84; border: none; width: 100px; } .inputbox { color: #324c84; background: #FFFFFF; border: 2px solid; }
Vielen Dank im Voraus schonmal!!
Zitieren
Lesezeichen