[joomla] Bekomme Modul-Positionierung nicht hin

maddoccc · 7. Juni 2010

Hallo,

ich bin am verzweifeln. Versuche seit tagen in Joomla per CSS ein neues Modul zu platzieren. Leider kann ich kein Link zur Seite angeben weil ich diese Lokal erstelle.

Das Problem ist ich möchte ein Modul ganz oben über ein anderes Modul legen. (Könnte ich das untere Modul (User3) von der Größe her ändern wäre alles kein Problem, finde aber die Einstellung nicht.)

DIV in der PHP Datei platziert. Alles getestet. Dort wo es geht, meistens in einem anderen oberen Modul, habe ich auf einmal das Mdul doppelt so breit.
relative absolute probiert.
Z Index auf 1000 gesetzt.
Lege ich das DIV außerhalb der inneren DIVs funktioniert es zwar auch aber dann ist die Positionierung nicht mehr gegeben. Heißt wenn ich den Browser kleiner mache verrutscht das Modul.

Solltet ihr ein paar Screenshots benötigen kann ich diese gerne erstellen.

Hier mal die Quellcodes. Im PHP Code ist es das DIV "user9" (neues Modul) und im CSS auch. Dort findet ihr es ganz oben.

PHP

Code:

<?php
defined('_JEXEC') or die('Restricted access'); // no direct access
require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
$document = isset($this) ? $this : null;
$baseUrl = $this->baseurl;
$templateUrl = $this->baseurl . '/templates/' . $this->template;
artxComponentWrapper($document);
?>
<!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>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<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" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" />
  <!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->
  <!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
  <script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
 </head>
<body>
<div id="art-page-background-simple-gradient">
</div>
<div id="art-main">
<div class="art-Sheet">
    <div class="art-Sheet-tl"></div>
    <div class="art-Sheet-tr"></div>
    <div class="art-Sheet-bl"></div>
    <div class="art-Sheet-br"></div>
    <div class="art-Sheet-tc"></div>
    <div class="art-Sheet-bc"></div>
    <div class="art-Sheet-cl"></div>
    <div class="art-Sheet-cr"></div>
    <div class="art-Sheet-cc"></div>
    <div class="art-Sheet-body">
<jdoc:include type="modules" name="user3" />
	
<div id="neues_modul">
<jdoc:include type="modules" name="user9" />
</div>
	
<div class="art-Header">
    <div class="art-Header-jpeg"></div>
<div class="art-Logo">
 <h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">Page </a></h1>
 <div id="slogan-text" class="art-Logo-text">Titel</div>

</div>
</div>
<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
<?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>
<div class="art-contentLayout">
<div class="art-<?php echo artxGetContentCellStyle($document); ?>">

<?php
  echo artxModules($document, 'banner2', 'art-nostyle');
  if (artxCountModules($document, 'breadcrumb'))
    echo artxPost(null, artxModules($document, 'breadcrumb'));
  echo artxPositions($document, array('user1', 'user2'), 'art-article');
  echo artxModules($document, 'banner3', 'art-nostyle');
?>
<?php if (artxHasMessages()) : ?><div class="art-Post">
    <div class="art-Post-body">
<div class="art-Post-inner">
<div class="art-PostContent">

<jdoc:include type="message" />

</div>
<div class="cleared"></div>

</div>

    </div>
</div>
<?php endif; ?>
<jdoc:include type="component" />

<?php echo artxModules($document, 'banner4', 'art-nostyle'); ?>
<?php echo artxPositions($document, array('user4', 'user5'), 'art-article'); ?>
<?php echo artxModules($document, 'banner5', 'art-nostyle'); ?>
</div>
<?php if (artxCountModules($document, 'left')) : ?>
<div class="art-sidebar1"><?php echo artxModules($document, 'left', 'art-block'); ?>
</div>
<?php endif; ?>
<?php if (artxCountModules($document, 'right')) : ?>
<div class="art-sidebar2"><?php echo artxModules($document, 'right', 'art-block'); ?>
</div>
<?php endif; ?>

</div>
<div class="cleared"></div>

<?php echo artxPositions($document, array('bottom1', 'bottom2', 'bottom3'), 'art-block'); ?>
<jdoc:include type="modules" name="banner6" style="artstyle" artstyle="art-nostyle" />
<div class="art-Footer">
 <div class="art-Footer-inner">
  <?php echo artxModules($document, 'syndicate'); ?>
  <div class="art-Footer-text">
  <?php if (artxCountModules($document, 'copyright') == 0): ?>


  <?php else: ?>
  <?php echo artxModules($document, 'copyright', 'art-nostyle'); ?>
  <?php endif; ?>
  </div>
  
 </div>
 <div class="art-Footer-background"></div>
</div>
</div>
</div>
<div class="cleared"></div>
<p>br</p>
</div>
</body> 
</html>

CSS Code

Code:

/* begin Page */

#neues_modul {
height: 30px;
left:0px;
overflow: hidden;
position: relative;
bottom:0px;
width: 110px;
z-index:1000;
}

body
{
	margin: 0 auto;
	padding: 0;
	background-color: #7B6C47;
}

#art-main
{
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
}





#art-page-background-simple-gradient
{
	position: absolute;
	background-image: url('../images/Page-BgSimpleGradient.jpg');
	background-repeat: repeat-x;
	top:0;
	width: 100%;
	height: 1px;
}

.cleared
{
	float: none;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	font-size:1px;
}


form
{
	padding:0 !important;
	margin:0 !important;
}

table.position
{
	position: relative;
	width: 100%;
	table-layout: fixed;
}
/* end Page */

/* begin Box, Sheet */
.art-Sheet
{
	position:relative;
	z-index:0;
	margin:0 auto;
	width: 900px;
	min-width:3px;
	min-height:3px;
	border: 1px solid #000;
}

.art-Sheet-body
{
	position: relative;
	z-index:1;
	padding: 1px;
}

.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
{
	position:absolute;
	z-index:-1;
}

.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
	width: 2px;
	height: 2px;
	background-image: url('../images/Sheet-s.png');
}

.art-Sheet-tl
{
	top:0;
	left:0;
	clip: rect(auto, 1px, 1px, auto);
}

.art-Sheet-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 1px, 1px);
}

.art-Sheet-bl
{
	bottom: 0;
	left: 0;
	clip: rect(1px, 1px, auto, auto);
}

.art-Sheet-br
{
	bottom: 0;
	right: 0;
	clip: rect(1px, auto, auto, 1px);
}

.art-Sheet-tc, .art-Sheet-bc
{
	left: 1px;
	right: 1px;
	height: 2px;
	background-image: url('../images/Sheet-h.png');
}

.art-Sheet-tc
{
	top: 0;
	clip: rect(auto, auto, 1px, auto);
}

.art-Sheet-bc
{
	bottom: 0;
	clip: rect(1px, auto, auto, auto);
}

.art-Sheet-cr, .art-Sheet-cl
{
	top: 1px;
	bottom: 1px;
	width: 2px;
	background-image: url('../images/Sheet-v.png');
}

.art-Sheet-cr
{
	right:0;
	clip: rect(auto, auto, auto, 1px);
}

.art-Sheet-cl
{
	left:0;
	clip: rect(auto, 1px, auto, auto);
}

.art-Sheet-cc
{
	position:absolute;
	z-index:-1;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	background-color: #F9F8F5;
}


.art-Sheet
{
	margin-top: 20px !important;
}

#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
	min-width:900px;
}

/* end Box, Sheet */

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}

.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background:none;
}

.art-menu li:hover
{
	z-index: 10000;
	white-space: normal;
}

.art-menu li li
{
	float: none;
}

.art-menu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
}

.art-menu li:hover>ul
{
	visibility: visible;
	top: 100%;
}

.art-menu li li:hover>ul
{
	top: 0;
	left: 100%;
}

.art-menu:after, .art-menu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.art-menu, .art-menu ul
{
	min-height: 0;
}

.art-menu ul
{
	background-image: url(../images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}





/* menu structure */

.art-menu
{
	padding: 6px 6px 6px 6px;
}

.art-nav
{
	position: relative;
	height: 44px;
	z-index: 100;
}


/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 32px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 3px;
	margin-left: 3px;
}


.art-menu a .r, .art-menu a .l
{
	position:absolute;
	display: block;
	top:0;
	z-index:-1;
	height: 96px;
	background-image: url('../images/MenuItem.png');
}

.art-menu a .l
{
	left:0;
	right:4px;
}

.art-menu a .r
{
	width:408px;
	right:0;
	clip: rect(auto, auto, auto, 404px);
}

.art-menu a .t 
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
	color: #4E4427;
	padding: 0 19px;
	margin: 0 4px;
	line-height: 32px;
	text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
	top:-32px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
	top:-32px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
	top:-32px;
}
.art-menu a:hover .t
{
	color: #695C35;
}

.art-menu li:hover a .t
{
	color: #695C35;
}

.art-menu li:hover>a .t
{
	color: #695C35;
}


.art-menu a.active .l, .art-menu a.active .r
{
	top: -64px;
}

.art-menu a.active .t
{
	color: #0A0905;
}


/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 20px;
	width: 180px;
	overflow:hidden;
	line-height: 20px;
	margin-right: auto;


	background-image: url('../images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 1px;
	border-style: solid;
	border-color: #BEB08E;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 20px;
	color: #344350;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
}

.art-menu ul ul a
{
	margin-left: auto;
}

.art-menu ul li a:hover
{
	color: #E9EDF1;
	border-color: #B7A671;
	background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
	color: #E9EDF1;
	border-color: #B7A671;
	background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #E9EDF1;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
	color: #E9EDF1;
}


/* end MenuSubItem */

/* begin Header */
div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 898px;
	height: 150px;
}


div.art-Header-jpeg
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 898px;
	height: 150px;
	background-image: url('../images/Header.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}
/* end Header */

/* begin Logo */
.art-Logo
{
	display : block;
	position: absolute;
	left: 10px;
	top: 41px;
	width: 249px;
}

h1.art-Logo-name
{
	display: block;
	text-align: center;
}

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 36px;
	text-decoration: none;
	padding:0;
	margin:0;
	color: #CDC2A8 !important;
}

.art-Logo-text
{
	display: block;
	text-align: center;
}

.art-Logo-text, .art-Logo-text a
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 20px;
	padding:0;
	margin:0;
	color: #F9F8F5 !important;
}
/* end Logo */

/* begin ContentLayout */
.art-contentLayout
{
	position: relative;
	margin-bottom: 0px;
	width: 898px;
}
/* end ContentLayout */

/* begin Box, Block */
.art-Block
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:19px;
	min-height:19px;
}

.art-Block-body
{
	position: relative;
	z-index:1;
	padding: 7px;
}

.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl, .art-Block-tc, .art-Block-bc,.art-Block-cr, .art-Block-cl
{
	position:absolute;
	z-index:-1;
}

.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
	width: 26px;
	height: 26px;
	background-image: url('../images/Block-s.png');
}

.art-Block-tl
{
	top:0;
	left:0;
	clip: rect(auto, 13px, 13px, auto);
}

.art-Block-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 13px, 13px);
}

.art-Block-bl
{
	bottom: 0;
	left: 0;
	clip: rect(13px, 13px, auto, auto);
}

.art-Block-br
{
	bottom: 0;
	right: 0;
	clip: rect(13px, auto, auto, 13px);
}

.art-Block-tc, .art-Block-bc
{
	left: 13px;
	right: 13px;
	height: 26px;
	background-image: url('../images/Block-h.png');
}

.art-Block-tc
{
	top: 0;
	clip: rect(auto, auto, 13px, auto);
}

.art-Block-bc
{
	bottom: 0;
	clip: rect(13px, auto, auto, auto);
}

.art-Block-cr, .art-Block-cl
{
	top: 13px;
	bottom: 13px;
	width: 26px;
	background-image: url('../images/Block-v.png');
}

.art-Block-cr
{
	right:0;
	clip: rect(auto, auto, auto, 13px);
}

.art-Block-cl
{
	left:0;
	clip: rect(auto, 13px, auto, auto);
}

.art-Block-cc
{
	position:absolute;
	z-index:-1;
	top: 13px;
	left: 13px;
	right: 13px;
	bottom: 13px;
	background-color: #EEEBE2;
}


.art-Block
{
	margin: 5px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-BlockHeader
{
	position:relative;
	z-index:0;
	height: 30px;
	padding: 0 7px;
	margin-bottom: 2px;
}

.art-BlockHeader .t
{
	height: 30px;
	color: #B5C3CF;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
	white-space : nowrap;
	padding: 0 7px;
	line-height: 30px;
}

.art-BlockHeader .l, .art-BlockHeader .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 30px;
	background-image: url('../images/BlockHeader.png');
}

.art-BlockHeader .l
{
	left:0;
	right:4px;
}

.art-BlockHeader .r
{ 
	width:898px;
	right:0;
	clip: rect(auto, auto, auto, 894px);
}





.art-header-tag-icon
{
	display:inline-block;
	background-position:left top;
	background-image: url('../images/BlockHeaderIcon.png');
	padding:0 0 0 10px;
	background-repeat: no-repeat;
	min-height: 9px;
	margin: 0 0 0 5px;
}


/* end BlockHeader */

/* begin Box, BlockContent */
.art-BlockContent
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:1px;
	min-height:1px;
}

.art-BlockContent-body
{
	position: relative;
	z-index:1;
	padding: 10px;
}



.art-BlockContent-body
{
	color:#77683C;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
}

.art-BlockContent-body a:link
{
	color: #3E5060;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
	color: #AD995C;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	text-decoration: none;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
	color: #85754C;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	text-decoration: none;
}

.art-BlockContent-body ul
{
	list-style-type: none;
	color: #2F2A18;
	margin:0;
	padding:0;
}

.art-BlockContent-body li
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
}

.art-BlockContent-body ul li
{
	padding:0px 0 0px 1em;
	background-image: url('../images/BlockContentBullets.png');
	background-repeat:no-repeat;
	margin:0.5em 0 0.5em 0;
	line-height:1.2em;
}

/* end Box, BlockContent */

/* begin Box, Post */
.art-Post
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:1px;
	min-height:1px;
}

.art-Post-body
{
	position: relative;
	z-index:1;
	padding: 7px;
}



.art-Post
{
	margin: 2px;
}

/* Start images */
a img
{
	border: 0;
}

.art-article img, img.art-article
{
	margin: 1em;
}

.art-metadata-icons img
{
	border: none;
	vertical-align: middle;
	margin:2px;
}
/* Finish images */

/* Start tables */

.art-article table, table.art-article
{
	border-collapse: collapse;
	margin: 1px;
	width:auto;
}

.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
	background-color:Transparent;
}

.art-article th, .art-article td
{
	padding: 2px;
	border: solid 1px #879DB0;
	vertical-align: top;
	text-align:left;
}

.art-article th
{
	text-align:center;
	vertical-align:middle;
	padding: 7px;
}

/* Finish tables */
/* end Box, Post */

/* begin PostMetadata */
.art-PostMetadataHeader
{
	padding:1px;
	background-color: #EEEBE2;
	border-color: #A6B6C5;
	border-style: solid;
	border-width: 1px;
}
/* end PostMetadata */

/* begin PostHeaderIcon */
.art-PostHeaderIcon-wrapper
{
	text-decoration:none;
	margin: 0.2em 0;
	padding: 0;
	font-weight:normal;
	font-style:normal;
	letter-spacing:normal;
	word-spacing:normal;
	font-variant:normal;
	text-decoration:none;
	font-variant:normal;
	text-transform:none;
	text-align:left;
	text-indent:0;
	line-height:inherit;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 20px;
	color: #473E24;
}

.art-PostHeaderIcon-wrapper, .art-PostHeaderIcon-wrapper a, .art-PostHeaderIcon-wrapper a:link, .art-PostHeaderIcon-wrapper a:visited, .art-PostHeaderIcon-wrapper a:hover
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 20px;
	color: #473E24;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.art-PostHeader a:link
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #344350;
}

.art-PostHeader a:visited, .art-PostHeader a.visited
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #77683C;
}

.art-PostHeader a:hover, .art-PostHeader a.hovered
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #85754C;
}
/* end PostHeader */

/* begin PostIcons */
.art-PostHeaderIcons
{
	padding:1px;
}

.art-PostHeaderIcons, .art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	color: #4E4427;
}

.art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
{
	margin:0;
}

.art-PostHeaderIcons a:link
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	text-decoration: none;
	color: #425566;
}

.art-PostHeaderIcons a:visited, .art-PostHeaderIcons a.visited
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-style: italic;
	font-weight: normal;
	text-decoration: none;
	color: #706238;
}

.art-PostHeaderIcons a:hover, .art-PostHeaderIcons a.hover
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-style: italic;
	font-weight: normal;
	text-decoration: underline;
	color: #928054;
}
/* end PostIcons */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 1em;
  color: #695C35;
}

.art-PostContent
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-align: justify;
  color: #695C35;
}

/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  color: #5B748B;
}

/* Adds special style to an unvisited link. */
a:link
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  color: #5B748B;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  color: #4B4126;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  color: #928054;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 35px;
  color: #706238;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 26px;
  color: #99864D;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 21px;
  color: #5B748B;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 18px;
  color: #847443;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 1em;
  color: #847443;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  color: #847443;
}
/* Finish Content headings Fonts & Colors  */


/* end PostContent */

/* begin PostBullets */
/* Start Content list */
ol, ul
{
	color: #4E4427;
	margin:1em 0 1em 2em;
	padding:0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
}

li ol, li ul
{
	margin:0.5em 0 0.5em 2em;
	padding:0;
}

li 
{
	margin:0.2em 0;
	padding:0;
}

ul
{
	list-style-type: none;
}

ol
{
	list-style-position:inside;
	
}



.art-Post li
{
	padding:0px 0 0px 20px;
	line-height:1.2em;
}

.art-Post ol li, .art-Post ul ol li
{
	background: none;
	padding-left:0;
}

.art-Post ul li, .art-Post ol ul li 
{
	background-image: url('../images/PostBullets.png');
	background-repeat:no-repeat;
	padding-left:20px;
}


/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */
blockquote p
{
	color:#14120A;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}

blockquote
{
		margin:10px 10px 10px 50px;
	padding:5px 5px 5px 41px;
	background-color:#D1D9E1;
	background-image:url('../images/PostQuote.png');
	background-position:left top;
	background-repeat:no-repeat;
}


/* Finish blockuote */
/* end PostQuote */

/* begin Button */
.art-button-wrapper .art-button
{
	display:inline-block;
	width: auto;
	outline:none;
	border:none;
	background:none;
	line-height:34px;
	margin:0 !important;
	padding:0 !important;
	overflow: visible;
	cursor: default;
	text-decoration: none !important;
	z-index:0;
}

.art-button-wrapper
{
	display:inline-block;
	position:relative;
	height: 34px;
	overflow:hidden;
	white-space: nowrap;
	width: auto;
	z-index:0;
}

.art-button-wrapper .art-button
{
	display:block;
	height: 34px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
	white-space: nowrap;
	text-align: left;
	padding: 0 19px !important;
	line-height: 34px;
	text-decoration: none !important;
	color: #B5C3CF !important;
}

input, select
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 1em;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
	color: #000000 !important;
	text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
	color: #F2EFE8 !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 102px;
	background-image: url('../images/Button.png');
}

.art-button-wrapper .l
{
	left:0;
	right:9px;
}

.art-button-wrapper .r
{
	width:411px;
	right:0;
	clip: rect(auto, auto, auto, 402px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
	top: -34px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
	top: -68px;
}


/* end Button */

/* begin Footer */
.art-Footer
{
	position:relative;
	z-index:0;
	overflow:hidden;
	width: 898px;
	margin: 5px auto 0px auto;
}

.art-Footer .art-Footer-inner
{
	height:1%;
	position: relative;
	z-index: 0;
	padding: 20px;
	text-align: center;
}

.art-Footer .art-Footer-background
{
	position:absolute;
	z-index:-1;
	background-repeat:no-repeat;
	background-image: url('../images/Footer.png');
	width: 898px;
	height: 150px;
	bottom:0;
	left:0;
}


.art-rss-tag-icon
{
	position: relative;
	display:block;
	float:left;
	background-image: url('../images/livemarks.png');
	background-position: center right;
	background-repeat: no-repeat;
	margin: 0 5px 0 0;
	height: 9px;
	width: 15px;
}




.art-Footer .art-Footer-text p
{
	margin: 0;
}

.art-Footer .art-Footer-text
{
	display:inline-block;
	color:#12171C;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}

.art-Footer .art-Footer-text a:link
{
	text-decoration: none;
	color: #3C4E5D;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	text-decoration: none;
}

.art-Footer .art-Footer-text a:visited
{
	text-decoration: none;
	color: #221E11;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	text-decoration: none;
}

.art-Footer .art-Footer-text a:hover
{
	text-decoration: none;
	color: #615538;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	text-decoration: none;
}
/* end Footer */

/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
	font-family:Arial;
	font-size:10px;
	letter-spacing:normal;
	word-spacing:normal;
	font-style:normal;
	font-weight:normal;
	text-decoration:underline;
	color:#A28E5D;
}

.art-page-footer
{
	margin:1em;
	text-align:center;
	text-decoration:none;
	color:#65819A;
}
/* end PageFooter */

/* begin LayoutCell */
.art-contentLayout .art-content
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 449px;
}
.art-contentLayout .art-content-sidebar1
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 673px;
}
.art-contentLayout .art-content-sidebar2
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 673px;
}
.art-contentLayout .art-content-wide
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 897px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-sidebar1
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 224px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-sidebar2
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 224px;
}
/* end LayoutCell */



.art-contentLayout li
{
	float: none;
}

table.moduletable th
{
	font-size: 140%;
	padding: .5em 0em;
}

#footer
{
	text-align: center;
}

.breadcrumbs
{
	display: block;
	padding: .7em 0em;
}

.contentpaneopen span.small, .contentpaneopen td.createdate, .contentpaneopen td.modifydate
{
	font-size: 75%;
	padding-bottom: 1em;
}

.column_separator 
{
	padding-left: .4em;
}

.pagination span
{
	padding: 2px;
}

.pagination a
{
	padding: 2px;
}

div.offline
{
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

span.pathway
{
	display: block;
	margin: 0 20px;
	height: 16px;
	line-height: 16px;
	overflow: hidden;
}

/* headers */
table.moduletable th, legend
{
	margin: 0;
	font-weight: bold;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 1.5em;
	padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}

/* form validation */
.invalid
{
	border-color: #ff0000;
}

label.invalid
{
	color: #ff0000;
}


/** overlib **/

.ol-foreground
{
	background-color: #f6f6f6;
}

.ol-background
{
	background-color: #666;
}

.ol-textfont
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.ol-captionfont
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}

.ol-captionfont a
{
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}

/* spacers */
span.article_separator
{
	display: none;
}

.column_separator
{
	padding-left: 10px;
}

td.buttonheading img
{
	border: none;
}

.clr
{
	clear: both;
}

div#maindivider
{
	border-top: 1px solid #ddd;
	margin-bottom: 10px;
	overflow: hidden;
	height: 1px;
}

table.blog span.article_separator
{
	display: none;
}

/* edit button */
.contentpaneopen_edit
{
	float: left;
}

/* table of contents */
table.contenttoc
{
	margin: 5px;
	border: 1px solid #ccc;
	padding: 5px;
	float: right;
}

table.contenttoc td
{
	padding: 0 5px;
}


/* content tables */
td.sectiontableheader
{
	background: #efefef;
	color: #333;
	font-weight: bold;
	padding: 4px;
	border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td
{
	padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2
{
	padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane
{
	margin: 0;
	padding: 0;
	width: auto;
}

table.contentpaneopen li
{
	margin-bottom: 5px;
}

table.contentpaneopen fieldset
{
	border: 0;
	border-top: 1px solid #ddd;
}

table.contentpaneopen h3
{
	margin-top: 25px;
}

table.contentpaneopen h4
{
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

.highlight
{
	background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable
{
	margin-bottom: 0px;
}

div.moduletable, div.module
{
	margin-bottom: 25px;
}

div.module_menu h3
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #eee;
	margin: -23px -4px 5px -5px;
	padding-left: 10px;
	padding-bottom: 2px;
}

div.module_menu
{
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
}

div.module_menu div div div
{
	padding: 10px;
	padding-top: 30px;
	padding-bottom: 15px;
	width: auto;
}

div.module_menu div div div div
{
	background: none;
	padding: 0;
}

div.module_menu ul
{
	margin: 10px 0;
	padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited
{
	font-weight: bold;
}

#leftcolumn div.module
{
	padding: 0 10px;
}

#leftcolumn div.module table
{
	width: auto;
}

/* forms */
table.adminform textarea
{
	width: 540px;
	height: 400px;
	font-size: 1em;
	color: #000099;
}

div.search input
{
	width: 145px;
	border: 1px solid #ccc;
	margin: 15px 0 10px 0;
}

form#form-login
{
	text-align: left;
}

form#form-login fieldset
{
	border: 0 none;
	margin: 0;
	padding: 0.2em;
}

form#form-login ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

form#form-login ul li
{
	background-image: none;
	padding: 0;
}

#modlgn_username, #modlgn_passwd
{
	width: 90%;
}

#form-login-username, #form-login-password, #form-login-remember
{
	display: block;
	margin: 0;
}

form#com-form-login
{
	text-align: left;
}

form#com-form-login fieldset
{
	border: 0 none;
	margin: 0;
	padding: 0.2em;
}

form#com-form-login ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

form#com-form-login ul li
{
	background-image: none;
	padding: 0;
}

/* thumbnails */
div.mosimage
{
	margin: 5px;
}

div.mosimage_caption {
	font-size: .90em;
	color: #666;
}

div.caption
{
	padding: 0 10px 0 10px;
}

div.caption img
{
	border: 1px solid #CCC;
}

div.caption p
{
	font-size: .90em;
	color: #666;
	text-align: center;
}

/* Parameter Table */
table.paramlist
{
	margin-top: 5px;
}

table.paramlist td.paramlist_key
{
	width: 128px;
	text-align: left;
	height: 30px;
}

div.message
{
	font-weight: bold;
	font-size: 1em;
	color: #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.banneritem img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Text advert style */

.banneritem_text
{
	padding: 4px;
	font-size: 11px;
}

.bannerfooter_text
{
	padding: 4px;
	font-size: 11px;
	background-color: #f7f7f7;
	text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span
{
	padding: 2px;
}

.pagination a
{
	padding: 2px;
}

/* Polls */
.pollstableborder
{
	margin-top: 8px;
}


.pollstableborder td
{
	text-align: left;
	
}

/* WebLinks */
span.description
{
	display: block;
	padding-left: 30px;
}

/* Frontend Editing*/
fieldset
{
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 15px;
}

legend
{
	margin: 0;
	padding: 0 10px;
}

td.key
{
	border-bottom: 1px solid #eee;
	color: #666;
}

/* Tooltips */

.tool-tip
{
	float: left;
	background: #ffc;
	border: 1px solid #d4d5aa;
	padding: 5px;
	max-width: 200px;
}

.tool-title
{
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text
{
	font-size: 100%;
	margin: 0;
}

/* 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;
	border-top: 3px solid #de7a7b;
	border-bottom: 3px solid #de7a7b;
	margin:0px;
	padding-left: 40px;
	text-indent:0px;
}

/* 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;
	margin: 0px;
	padding-left: 40px;
	text-indent: 0px;
 }

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

/* Component Specific Fixes */

#component-contact table td
{
	padding: 2px 0;
}

.breadcrumbs img
{
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.mceToolbarTop {
	white-space: normal;
}

.mceEditor
{
	background: none;
}

#archive-list
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#archive-list li
{
	list-style-type: none;
	background-image: none;
	margin-left: 0px;
	padding-left: 0px;
}

#navigation
{
	text-align: center;
}

.article h3 img
{
	border: none;
	display: inline;
	margin: 0;
	padding: 0;
}

.art-Footer-text .moduletable
{
	border: none;
	margin: 0;
	padding: 0;
}

.pollstableborder td {
	vertical-align: middle;
}

.img_caption.left
{
	float: left;
	margin-right: 1em;
}

.img_caption.right
{
	float: right;
	margin-left: 1em;
}

.img_caption.left p
{
	clear: left;
	text-align: center;
}

.img_caption.right p
{
	clear: right;
	text-align: center;
}

.img_caption img
{
	margin: 0em;
}

.contentheading
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 21px;
  color: #5B748B;
}

Jan-Frederik Stieler · 7. Juni 2010

Hi,
wenn du ein Div über ein anderes mittels z-index positionieren möchtest mußt du dieses Element mit position positionieren. Als z-index und position muß immer zusammen verwendet werden.

Viele Grüße

maddoccc · 7. Juni 2010

Wow, keine Ahnung was du meinst. Habe nur wenig ausgeprägte CSS - Erfahrung..

Jan-Frederik Stieler · 7. Juni 2010

Hi,
na ich meine das wenn du ein Objekt mit z-index positionieren möchtest reicht es nicht den z-Index anzugeben sondern du mußt auch das Element aus dem normalen Seitenfluss nehmen. Und das machst du mit position:relative; oder position:absolute;

Gruß

[joomla] Bekomme Modul-Positionierung nicht hin

maddoccc

Grünschnabel

Jan-Frederik Stieler

Monsterator

maddoccc

Grünschnabel

Jan-Frederik Stieler

Monsterator

Neue Beiträge