MoinMoin.
Ich habe mir das ganz heute morgen noch ein Mal mit Distanz angeschaut und etwas den Code überarbeitet und aufgeräumt und jetzt sitzt das ganze richtig. Bisher habe ich es auf dem PC im IE, Mozilla und Opera getestet.
Jetzt habe ich allerdings das Problem dass der Content über das Template hinausläuft, das ganz soll eigentlich so sein dass die Höhe an den Content angepasst wird.
Wesentlicher Elemente in meiner CSS-Datei:
Code:
body {text-align:center; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
#layoutarea {position:absolute; height: 100%; width: 100%; z-index:1; left:0px; top:0px;}
#crossbar {position:absolute; height:170px; width: 100%; z-index:2; background-color:#99CC33; left:0px; top:15px;}
#workarea {position:relative; height: 100%; width:800px; z-index:3; background-image:url(../images/background.jpg); margin:auto;}
#header {position:relative; height:185px; width:800px; z-index:4; background-image:url(../images/header.jpg);}
#mainmenue {position:absolute; height: 25px; width:800px; z-index:5; left:0px; top:160px; padding-left:130px;}
#content {position:relative; height: 100%; width:500px; z-index:6; float:left; padding-left:60px; padding-top:50px; text-align:left;}
#submenue {position:relative; height: 100%; width:250px; z-index:6; float:right;}
#footer {position:relative; height: 35px; width:800px; z-index:7; background-image:url(../images/footer.jpg); margin:auto;}
a.button_01 {display:block; background-image:url(../images/button_01_normal.jpg); width:070px; height:025px}
a.button_01:hover {display:block; background-image:url(../images/button_01_active.jpg); width:070px; height:025px}
a.button_01:active {display:block; background-image:url(../images/button_01_active.jpg); width:070px; height:025px}
a.button_02 {display:block; background-image:url(../images/button_02_normal.jpg); width:125px; height:025px}
a.button_02:hover {display:block; background-image:url(../images/button_02_active.jpg); width:125px; height:025px}
a.button_02:active {display:block; background-image:url(../images/button_02_active.jpg); width:125px; height:025px}
a.button_03 {display:block; background-image:url(../images/button_03_normal.jpg); width:100px; height:025px}
a.button_03:hover {display:block; background-image:url(../images/button_03_active.jpg); width:100px; height:025px}
a.button_03:active {display:block; background-image:url(../images/button_03_active.jpg); width:100px; height:025px}
a.button_04 {display:block; background-image:url(../images/button_04_normal.jpg); width:090px; height:025px}
a.button_04:hover {display:block; background-image:url(../images/button_04_active.jpg); width:090px; height:025px}
a.button_04:active {display:block; background-image:url(../images/button_04_active.jpg); width:090px; height:025px}
a.button_05 {display:block; background-image:url(../images/button_05_normal.jpg); width:095px; height:025px}
a.button_05:hover {display:block; background-image:url(../images/button_05_active.jpg); width:095px; height:025px}
a.button_05:active {display:block; background-image:url(../images/button_05_active.jpg); width:095px; height:025px}
a.button_06 {display:block; background-image:url(../images/button_06_normal.jpg); width:085px; height:025px}
a.button_06:hover {display:block; background-image:url(../images/button_06_active.jpg); width:085px; height:025px}
a.button_06:active {display:block; background-image:url(../images/button_06_active.jpg); width:085px; height:025px}
Datei des Templates...
PHP-Code:
<?php defined ('_VALID_MOS') or die ('Direct Access to this location is not allowed.'); $iso = explode ('=', _ISO); echo '<?xml version="1.0" encoding="' . $iso[1] .'"?' . '>'; ?>
<!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 if ($my->id) {initEditor();} ?>
<?php mosShowHead(); ?>
<meta **********= "Content-Type" content="text/html; <?php echo _ISO; ?>"/>
<meta **********= "Content-Type" content="text/html; charset=iso-8859-1"/>
<meta **********= "Language" content="de"/>
<meta **********= "pragma" content="no-cache"/>
<meta **********= "content-language" content="de" />
<meta name= "author" content="autor"/>
<meta name= "publisher" content="herausgeber"/>
<meta name= "copyright" content="copyright"/>
<meta name= "audience" content="Alle"/>
<meta name= "page-type" content="Private Homepage"/>
<meta name= "page-topic" content="Dienstleistung"/>
<meta **********= "reply-to" content="sgarbato@sgarbato.de"/>
<meta name= "creation_date" content="2005-01-01"/>
<meta name= "revisit-after" content="1 days"/>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>"; ?>
<?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/favicon.ico\" />"; ?>
</head>
<body>
<div id="layoutarea">
<div id="crossbar"></div>
<div id="workarea">
<div id="header">
<div id="mainmenue">
<table width="565" height="100%" border="0" align="left" cellpadding="0" cellspacing="0" id="buttons">
<tr align="left" valign="top">
<td width="070" height="100%" nowrap><a class="button_01" href="http://sgarbato.de/index.php?option=com_content&task=blogcategory&id=13&Itemid=27"> </a></td>
<td width="125" height="100%" nowrap><a class="button_02" href="http://sgarbato.de/index.php?option=com_content&task=category§ionid=4&id=14&Itemid=28"> </a></td>
<td width="100" height="100%" nowrap><a class="button_03" href="http://sgarbato.de/index.php?option=com_content&task=blogcategory&id=15&Itemid=30"> </a></td>
<td width="090" height="100%" nowrap><a class="button_04" href="http://sgarbato.de/index.php?option=com_content&task=category§ionid=4&id=16&Itemid=31"> </a></td>
<td width="095" height="100%" nowrap><a class="button_05" href="http://sgarbato.de/index.php?option=com_content&task=category§ionid=4&id=17&Itemid=32"> </a></td>
<td width="085" height="100%" nowrap><a class="button_06" href="http://sgarbato.de/index.php?option=com_content&task=blogcategory&id=18&Itemid=33"> </a></td>
</tr>
</table>
</div>
</div>
<div id="content"><?php mosMainBody(); ?></div>
<div id="submenue"><?php mosLoadModules ( 'right' ); ?></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Falls jemand eine Idee oder einen Tipp hat, wäre ich super dankbar.
Grüße sgarbato
Lesezeichen