zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden z-index hoch, dennoch grafik nicht ganz oben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.10.2010, 14:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2010
Beiträge: 4
bergg befindet sich auf einem aufstrebenden Ast
Standard z-index hoch, dennoch grafik nicht ganz oben

Hallo erst mal zusammen, bin über css4you hier angelangt und schon paar mal hilfreiche antworten hier gelesen...

Dennoch, ich dachte ich hab das Prinzip von z-index verstanden, aber mir reicht anscheinend mein lückenhaftes Wissen nicht aus um die vorliegende Störung zu beseitigen:

Es geht um diese Grafik:

http://nb.tonyold.de/templates/nb_v1/images/ritter.png

Auf dieser Seite:

Nideggen Burg

Der Ritter soll über dem Footer liegen wenn der Browser in der Breite verkleinert wird.

Der Footer:

http://nb.tonyold.de/templates/nb_v1/images/Footer.png

Ritter-Grafik eingebunden in die index.php:

Code:
<!-- Ritter Overlay -->

<div class="ritter">
    <div class="ritter-image"></div>
</div>
Mit folgendem CSS:

Code:
/* Ritter */

.ritter
{
    position: absolute;
    z-index: 2;
    width: 100%;
}

.ritter-image
{    
    position: fixed;
    z-index: 2; 
    right: -30px; bottom: 1px;
    background-image: url('../images/ritter.png');
    background-repeat: no-repeat;
    height: 482px;
    width: 269px;
    margin: 0 auto;
}
Jedoch wird die Grafik mit der Footergrafik überdeckt:

Footer-CSS:

Code:
/* begin Footer */

.art-Footer

{

    position: absolute;
    left: -90px;
    
    z-index:0;

    overflow: hidden;

    width: 1006px;
    height: 350px;

    margin: 0px 0px 0px 0px;

}



.art-Footer .art-Footer-inner

{

    height:1%;

    position: relative;
    top: 250px;

    z-index: 0;

    padding: 10px;

    text-align: center;

}



.art-Footer .art-Footer-background

{

    position:absolute;

    z-index:-1;
    
    background-image: url('../images/Footer.png');
        
    background-repeat:no-repeat;
    
    width: 1006px;

    height: 350px;

    bottom:0;

    left:0;

}
Für alle Fälle die ganze Template.css (für den Fall das Störung von woanders kommt). Sonst bitte fragen was ihr braucht, poste ich gerne:

HTML-Code:
/* begin Page */



body

{

    margin: 0 auto;

    padding: 0;

    background-color: #000000;

    background-image: url('../images/Page-BgTexture.jpg');

    background-repeat: repeat-y;

    background-attachment: scroll;

    background-position: top center;

}



#art-main

{

    position: relative;

    width: 100%;

    left: 0;

    top: 0;

}



#art-page-background-glare

{

    position: absolute;

    width: 100%;

    height: 178px;

    left: 0;

    top: 0;

}



#art-page-background-glare-image

{

    background-image: url('../images/Page-BgGlare.png');

    background-repeat: no-repeat;

    height: 178px;

    width: 1006px;

    margin: 0 auto;

}

html:first-child #art-page-background-glare

{

    border: 1px solid transparent; /* Opera fix */

}







#art-page-background-gradient

{

    background-position: top center;

}





.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: 825px;

    min-width:21px;

    min-height:21px;

}



.art-Sheet-body

{

    position: relative;

    z-index: 1;

    padding: 20px;

}







.art-Sheet

{

    margin-top: 152px !important;

}



#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare

{

    min-width:825px;

}



/* 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;

}





ul.art-menu

{

    float:right;

}







/* menu structure */



.art-menu

{

    padding: 0px 5px 0px 5px;

}



.art-nav

{

    position: relative;

    height: 25px;

    z-index: 100;

}





/* end Menu */



/* begin MenuItem */

.art-menu ul li

{

    clear: both;

}



.art-menu a

{

    position:relative;

    display: block;

    overflow:hidden;

    height: 25px;

    cursor: pointer;

    text-decoration: none;

    margin-right: 0px;

    margin-left: 0px;

}





.art-menu a .r, .art-menu a .l

{

    position:absolute;

    display: block;

    top:0;

    z-index:-1;

    height: 75px;



}



.art-menu a .l

{

    left:0;

    right:0px;

}



.art-menu a .r

{

    width:400px;

    right:0;

    clip: rect(auto, auto, auto, 400px);

}



.art-menu a .t 

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

    color: #760000;

    padding: 0 12px;

    margin: 0 0px;

    line-height: 25px;

    text-align: center;

}



.art-menu a:hover .l, .art-menu a:hover .r

{

    top:-25px;

}



.art-menu li:hover>a .l, .art-menu li:hover>a .r

{

    top:-25px;

}



.art-menu li:hover a .l, .art-menu li:hover a .r

{

    top:-25px;

}

.art-menu a:hover .t

{

    color: #A12003;

}



.art-menu li:hover a .t

{

    color: #A12003;

}



.art-menu li:hover>a .t

{

    color: #A12003;

}







/* end MenuItem */



/* begin MenuSeparator */

.art-nav .art-menu-separator

{

    display: block;

    width: 5px;

    height: 25px;

    background-image: url('../images/MenuSeparator.png');

}



/* end MenuSeparator */



/* 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: 0px;

    border-style: solid;

}



.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: #514929;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

}



.art-menu ul ul a

{

    margin-left: auto;

}



.art-menu ul li a:hover

{

    color: #F8F7F1;

    background-position: 0 -20px;

}



.art-menu ul li:hover>a

{

    color: #F8F7F1;

    background-position: 0 -20px;

}



.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span

{

    color: #F8F7F1;

}



.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span

{

    color: #F8F7F1;

}





/* end MenuSubItem */



/* begin Header */

div.art-Header

{

    margin: 0 auto;

    position: relative;

    z-index:0;

    width: 785px;

    height: 225px;

}





div.art-Header-jpeg

{

    position: absolute;

    z-index:-1;

    top: 0;

    left: 0;

    width: 785px;

    height: 225px;

    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: 306px;

    top: 90px;

    width: 479px;

}



h1.art-Logo-name

{

    display: block;

    text-align: left;

}



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: Arial, Helvetica, Sans-Serif;

font-size: 18px;

font-style: normal;

font-weight: normal;

text-decoration: none;

    padding:0;

    margin:0;

    color: #CECE88 !important;

}



.art-Logo-text

{

    display: block;

    text-align: left;

}



.art-Logo-text, .art-Logo-text a

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 18px;

font-style: normal;

font-weight: normal;

    padding:0;

    margin:0;

    color: #CECE88 !important;

}

/* end Logo */



/* begin ContentLayout */

.art-contentLayout

{

    position: relative;



    margin-bottom: 0px;

    width: 785px;

}

/* end ContentLayout */



/* begin Box, Block */

.art-Block /* side menu */ 

{

    position:relative;
    left: -13px; /* edited */
    width: 200px; 

    z-index:0;

    margin:0 auto;

    min-width:3px;

    min-height:3px;

}



.art-Block-body

{

    position: relative;

    z-index: 1;

    padding: 0px;

}



.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: 2px;

    height: 2px;

    background-image: url('../images/Block-s.png');

}



.art-Block-tl

{

    top:0;

    left:0;

    clip: rect(auto, 1px, 1px, auto);

}



.art-Block-tr

{

    top: 0;

    right: 0;

    clip: rect(auto, auto, 1px, 1px);

}



.art-Block-bl

{

    bottom: 0;

    left: 0;

    clip: rect(1px, 1px, auto, auto);

}



.art-Block-br

{

    bottom: 0;

    right: 0;

    clip: rect(1px, auto, auto, 1px);

}



.art-Block-tc, .art-Block-bc

{

    left: 1px;

    right: 1px;

    height: 2px;

    background-image: url('../images/Block-h.png');

}



.art-Block-tc

{

    top: 0;

    clip: rect(auto, auto, 1px, auto);

}



.art-Block-bc

{

    bottom: 0;

    clip: rect(1px, auto, auto, auto);

}



.art-Block-cr, .art-Block-cl

{

    top: 1px;

    bottom: 1px;

    width: 2px;

    background-image: url('../images/Block-v.png');

}



.art-Block-cr

{

    right:0;

    clip: rect(auto, auto, auto, 1px);

}



.art-Block-cl

{

    left:0;

    clip: rect(auto, 1px, auto, auto);

}



.art-Block-cc

{

    position:absolute;

    z-index:-1;

    top: 1px;

    left: 1px;

    right: 1px;

    bottom: 1px;

    background-color: #F7D879;

}





.art-Block

{

    margin: 15px;

}



/* end Box, Block */



/* begin BlockHeader */ /* Menu Header*/

.art-BlockHeader

{

    position:relative;

    z-index:0;

    height: 30px;

    padding: 0 7px;

    margin-bottom: 4px;

}



.art-BlockHeader .t

{

    height: 30px;

    color: #D3CAA7;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: bold;

    white-space : nowrap;

    padding: 0 1px;

    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:0px;

}



.art-BlockHeader .r

{ 

    width:825px;

    right:0;

    clip: rect(auto, auto, auto, 825px);

}









/* 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: 0px; /* edited - Important für swMenuFree */

}







.art-BlockContent-body

{

    color:#1E261B;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

}



.art-BlockContent-body a:link

{

    color: #665C33;

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: underline;

}



.art-BlockContent-body a:visited, .art-BlockContent-body a.visited

{

    color: #7C8778;

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: underline;

}



.art-BlockContent-body a:hover, .art-BlockContent-body a.hover

{

    color: #FFFFFF;

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

}



.art-BlockContent-body ul

{

    list-style-type: none;

    color: #161816;

    margin:0;

    padding:0;

}



.art-BlockContent-body li

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

text-decoration: none;

}



.art-BlockContent-body ul li

{

    padding:0px 0 0px 13px;

    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 /* Content Blcok incl Header*/

{

    position: relative;

    z-index: 1;

    padding: 8px 0px 0px 8px; /* edited */

}







.art-Post

{

    margin: 7px;

}



/* 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

{

    text-align: center;

    vertical-align: middle;

    padding: 7px;

}



/* Finish tables */



pre

{

    overflow: auto;

    padding: 0.1em;

}



/* end Box, Post */



/* begin PostMetadata */

.art-PostMetadataHeader

{

    padding-left: 5px; /* edited */
    width: 100%;
    height: 28px; 

    background-color: #A12003;

    border-color: #760000;

    border-style: solid;

    border-width: 1px;


}

/* end PostMetadata */



/* begin PostHeaderIcon */

.art-PostHeader

{

    text-decoration:none;

    margin: 0.2em 0;

    /* padding: 0; excluded */

    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: Arial, Helvetica, Sans-Serif;

font-size: 18px; /* edited */

font-style: normal;

font-weight: bold;

text-align: left;

    color: #FFFFFF;

}



.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 18px; /* edited */

font-style: normal;

font-weight: bold;

text-align: left;

    margin:0;

    color: #FFFFFF;

}



/* end PostHeaderIcon */



/* begin PostHeader */

.art-PostHeader a:link

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

text-align: left;

  color: #FFFFFF;

}



.art-PostHeader a:visited, .art-PostHeader a.visited

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

text-align: left;

  color: #FFFFFF;

}



.art-PostHeader a:hover, .art-PostHeader a.hovered

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

text-align: left;

  color: #FCFBF8;

}

/* 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: Arial, Helvetica, Sans-Serif;

font-size: 11px;

    color: #000000;

}



.art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover

{

    margin:0;

}



.art-PostHeaderIcons a:link

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: underline;

    color: #760000;

}



.art-PostHeaderIcons a:visited, .art-PostHeaderIcons a.visited

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: underline;

    color: #000000;

}



.art-PostHeaderIcons a:hover, .art-PostHeaderIcons a.hover

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

    color: #F8DD8B;

}

/* end PostIcons */



/* begin PostContent */

/* Content Text Font & Color (Default) */

body

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

  color: #1E261B;

}



.art-PostContent 

{

padding: 0px 10px 0px 5px; /* edited*/ 

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

text-align: justify;

  color: #1E261B;

}



/* 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: Arial, Helvetica, Sans-Serif;

text-decoration: none;

  color: #750000;

}



/* Adds special style to an unvisited link. */

a:link

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

  color: #750000;

}



/* Adds special style to a visited link. */

a:visited, a.visited

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

  color: #750000;

}



/* :hover - adds special style to an element when you mouse over it. */

a:hover, a.hover

{

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: none;

  color: #A12003;

}



/* 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: Arial, Helvetica, Sans-Serif;

font-size: 28px;

font-style: normal;

font-weight: bold;

text-align: left; 

  color: #760000;

}



h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 22px;

font-style: normal;

font-weight: bold;

text-align: left;

  color: #760000;

}



h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 18px;

font-style: normal;

font-weight: bold;

text-align: left;

  color: #760000;

}



h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 16px;

font-style: normal;

font-weight: bold;

text-align: left;

  color: #760000;

}



h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 14px;

font-style: normal;

font-weight: bold;

text-align: left;

  color: #760000;

}



h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 14px;

font-style: normal;

font-weight: bold;

text-align: left;

  color: #760000;

}

/* Finish Content headings Fonts & Colors  */





/* end PostContent */



/* begin PostBullets */

/* Start Content list */

ol, ul

{

    color: #000000;

    margin:1em 0 1em 2em;

    padding:0;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

}



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 10px;

    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:10px;

}





/* Finish Content list */

/* end PostBullets */



/* begin PostQuote */

/* Start blockquote */

blockquote,

blockquote p,

.art-PostContent blockquote p

{

    color:#0F100E;

font-family: Arial, Helvetica, Sans-Serif;

font-style: italic;

font-weight: normal;

text-align: left;

}



blockquote,

.art-PostContent blockquote

{

        border:solid 1px #D4CCAA; 

        margin:10px 10px 10px 50px;

    padding:5px 5px 5px 41px;

    background-color:#E9E4D3;

    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:21px;

    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: 21px;

    overflow:hidden;

    white-space: nowrap;

    width: auto;

    z-index:0;

}



.firefox2 .art-button-wrapper

{

    display:block;

    float:left;

}



.art-button-wrapper .art-button

{

    display:block;

    height: 21px;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

    white-space: nowrap;

    text-align: left;

    padding: 0 5px !important;

    line-height: 21px;

    text-decoration: none !important;

    color: #000000 !important;

}



input, select

{

font-family: Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

}



.art-button-wrapper.hover .art-button, .art-button:hover

{

    color: #BBC1B9 !important;

    text-decoration: none !important;

}



.art-button-wrapper.active .art-button

{

    color: #FDF7E2 !important;

}



.art-button-wrapper .l, .art-button-wrapper .r

{

    display:block;

    position:absolute;

    z-index:-1;

    height: 63px;

    background-image: url('../images/Button.png');

}



.art-button-wrapper .l

{

    left:0;

    right:1px;

}



.art-button-wrapper .r

{

    width:403px;

    right:0;

    clip: rect(auto, auto, auto, 402px);

}



.art-button-wrapper.hover .l, .art-button-wrapper.hover .r

{

    top: -21px;

}



.art-button-wrapper.active .l, .art-button-wrapper.active .r

{

    top: -42px;

}





/* end Button */

/* Ritter */

.ritter
{
    position: absolute;
    z-index: 2;
    width: 100%;
}

.ritter-image
{    
    position: fixed;
    z-index: 2; 
    right: -30px; bottom: 1px;
    background-image: url('../images/ritter.png');
    background-repeat: no-repeat;
    height: 482px;
    width: 269px;
    margin: 0 auto;
}

/* begin Footer */

.art-Footer

{

    position: absolute;
    left: -90px;
    
    z-index:0;

    overflow: hidden;

    width: 1006px;
    height: 350px;

    margin: 0px 0px 0px 0px;

}



.art-Footer .art-Footer-inner

{

    height:1%;

    position: relative;
    top: 250px;

    z-index: 0;

    padding: 10px;

    text-align: center;

}



.art-Footer .art-Footer-background

{

    position:absolute;

    z-index:-1;
    
    background-image: url('../images/Footer.png');
        
    background-repeat:no-repeat;
    
    width: 1006px;

    height: 350px;

    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: 25px;

    width: 25px;

    cursor: default;

}









.art-Footer .art-Footer-text p

{

    margin: 0;

}



.art-Footer .art-Footer-text

{

    display:inline-block;

    color:#1E261B;

font-family: Arial, Helvetica, Sans-Serif;

font-size: 11px;

}



.art-Footer .art-Footer-text a:link

{

    text-decoration: none;

    color: #760000;

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: underline;

}



.art-Footer .art-Footer-text a:visited

{

    text-decoration: none;

    color: #750000;

font-family: Arial, Helvetica, Sans-Serif;

text-decoration: underline;

}



.art-Footer .art-Footer-text a:hover

{

    text-decoration: none;

    color: #A12003;

font-family: 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

{
    position: fixed;
    left: 750px; bottom: 20px;

    
    z-index:1;

    white-space: nowrap;

    font-family:Arial;

    font-size:10px;

    letter-spacing:normal;

    word-spacing:normal;

    font-style:normal;

    font-weight:normal;

    text-decoration:underline;

    color:#F4C63E;

}



.art-page-footer

{

    margin:1em;

    text-align:center;

    text-decoration:none;

    color:#BBAD77;

}

/* end PageFooter */



/* begin LayoutCell */

.art-contentLayout .art-sidebar1

{

    position: relative;

    margin: 0;

    padding: 0;

    border: 0;

    float: left;

    overflow: hidden;

    width: 203px;

}

/* end LayoutCell */



/* begin LayoutCell */

.art-contentLayout .art-content

{

    position: relative;

    margin: 0;

    padding: 0;

    border: 0;

    float: left;

    overflow: hidden;

    width: 580px;

}

.art-contentLayout .art-content-wide

{

    position: relative;

    margin: 0;

    padding: 0;

    border: 0;

    float: left;

    overflow: hidden;

    width: 783px;

}

/* end LayoutCell */







table.moduletable th

{

    font-size: 140%;

    padding: .5em 0em;

}



.firefox2 table.poll tr td div

{

    font-size:0;

}



#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;

    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: 14px;

    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: Arial, Helvetica, Sans-Serif;

    font-size: 18px;

    font-style: normal;

    font-weight: bold;

    text-align: left;

    color: #760000;

}



/* Plugin compatilibity. */



/* 152316, DOCman */



.dm_taskbar ul

{

    background-image: none;

    margin: 0px;

    padding: 0px;

}



.dm_taskbar ul li

{

    background-image: none;

}
Hoffe, es ist verständlich. Sonst gerne nachfragen.

LG Tony
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.10.2010, 14:35
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

warum das ganze jetzt nicht funktioniert, kann ich dir leider auch nicht sagen. Allerdings hätte ich da einen Lösungsvorschlag für dich.
Nimm mal die z-index-zeilen raus und setze den ritter-div über <div class="art-Footer-background"></div> dann klappt das....
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.10.2010, 15:04
Benutzerbild von Quco
Webmaster eigener Natur
neuer user
 
Registriert seit: 14.03.2010
Ort: /www/htdocs
Beiträge: 29
Quco befindet sich auf einem aufstrebenden Ast
Standard

Versuche es mit dem Minus: zB so:

div: z-index: 55;
grafik: z-index: -20;

So geht es bei mir auch.
__________________
Viele Grüße,
Nico

Xperia Smartphones
Mit Zitat antworten
  #4 (permalink)  
Alt 08.10.2010, 15:44
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von bergg Beitrag anzeigen
Dennoch, ich dachte ich hab das Prinzip von z-index verstanden, aber mir reicht anscheinend mein lückenhaftes Wissen nicht aus um die vorliegende Störung zu beseitigen:
Schau dir mal ein paar Grundlagen zur korrekten Stapelung an, dann fange an neu zu gestalten.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 14.10.2010, 01:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2010
Beiträge: 4
bergg befindet sich auf einem aufstrebenden Ast
Standard

Danke Leute, ich werds probieren!
Mit Zitat antworten
  #6 (permalink)  
Alt 14.10.2010, 22:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2010
Beiträge: 4
bergg befindet sich auf einem aufstrebenden Ast
Standard

pre ps: neue Adresse ist jetzt Burg-Nideggen

also letztendlich hat der Vorschlag von @zeji funktioniert,
ich habs nur ".art-Footer .art-Footer-background" - z-index: -1; beibehalten,
sonst ist mein Copyright-div weg.

Das Problem ist jetzt nur, der Ritter befindet sich unter dem Content und unter dem ArticleHeader/ MetaHeader (.art-PostMetadataHeader)!

Ich hab schon versucht den Contentblock (.art-PostContent ) diesbezüglich zu manipulieren, allerdings was kann ich groß machen - position: x; und z-index: x; für .art-PostContent & .art-PostMetadataHeader zu vergeben scheint mir als verrückt.

Weiß nicht ob "Grundlagen zur korrekten Stapelung" mir noch auf die schnelle eine Erleuchtung bringen,
wäre aber für weitere Vorschläge ganz Ohr.

Danke euch noch mal, ich hoffe ich habt etwas Geduld mit mir!

Geändert von bergg (15.10.2010 um 10:31 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 27.10.2010, 16:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.10.2010
Beiträge: 4
bergg befindet sich auf einem aufstrebenden Ast
Standard Lösung

Ich finde jetzt nicht diese Stelle, aber letztendlich habe ich den Ritter noch zusätzlich auf z-index: 10000; gestellt und es geht jetzt.

Danke noch mal für Anregungen!

Burg-Nideggen.ru
Mit Zitat antworten
Antwort

Stichwörter
z-index

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
eine grafik über andere legen keyboardY CSS 6 23.01.2010 17:53
Text-Positionierung oben mit Null Pixeln nicht nicht möglich ikezen CSS 3 25.08.2007 17:00
Grafik unten rechts im div? rene090965 (X)HTML 11 09.08.2006 09:02
Grafik zu groß angezeigt im IE rabenau CSS 2 09.04.2006 23:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:14 Uhr.