CSS Anpassung NextGen Slideshow und Headerbackground

Hallo WP-Gemeinde,

Ich habe die NextGen Gallery als Plugin in mein Theme eingebunden und nutze diese als Slideshow im Header. Dieses geht auch alles.

Mein Theme enthält ein Headerbild welches ein .png ist. Es ist ein Rahmen damit die Slideshow im Hintergrund läuft. Ich habe das bisher hinbekommen, dass die Slideshow auf der Seite ganz oben ist und das Headerbild.png darunter folgt, aber das Headerbild.png soll über die Slideshow liegen. Das Headerbild.png ist mit

Zitat

<a href="<?php bloginfo('home'); ?>" id="logo">
<img src="<?php echo ts_getoption('ts_logo_url'); ?></a> in der header.php definiert.

Hat jemand eine Idee?

Vielen Dank vorab.

meinst du das headerbild.png in die .css als background-image:; ?

aber dann gehen ja die #maps nicht mehr oder?

Meine code sieht jetzt so aus:

<div id="header"><div id="nggSlideShowHeader"><?php
if (function_exists("nggSlideshowWidget"))
nggSlideshowWidget("3","840","381");
?><a href="<?php bloginfo('home'); ?>" id="logo">
    <img src="<?php echo ts_getoption('ts_logo_url'); ?>" width="930" height="435" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="859,178,913,234" href="http://www.facebook.com" target="_blank" />
  <area shape="rect" coords="858,310,913,366" href="http://twitter.com/" target="_blank" />
  <area shape="rect" coords="857,244,914,302" href="http://www.youtube.com" target="_blank" />
</map></a></div>

also zum Beispiel so:

<div id="header"><div id="nggSlideShowHeader"><?php
if (function_exists("nggSlideshowWidget"))
nggSlideshowWidget("3","840","381");
?><div id="test"><a href="<?php bloginfo('home'); ?>" id="logo">
    <img src="<?php echo ts_getoption('ts_logo_url'); ?>" width="930" height="435" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="859,178,913,234" href="http://www.facebook.com" target="_blank" />
  <area shape="rect" coords="858,310,913,366" href="http://twitter.com/" target="_blank" />
  <area shape="rect" coords="857,244,914,302" href="http://www.youtube.com" target="_blank" />
</map></a></div></div>

Muss ich dann dem div test noch weitere Angaben in der .css geben irgendwie z-index oder so?

Also ich habe jetzt folgenden Code in der header.php:

<div id="header"><div id="nggSlideShowHeader"><?php
if (function_exists("nggSlideshowWidget"))
nggSlideshowWidget("3","840","381");
?><div id="test"><a href="<?php bloginfo('home'); ?>" id="logo">
    <img src="<?php echo ts_getoption('ts_logo_url'); ?>" width="930" height="435" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="859,178,913,234" href="http://www.facebook.com" target="_blank" />
  <area shape="rect" coords="858,310,913,366" href="http://twitter.com" target="_blank" />
  <area shape="rect" coords="857,244,914,302" href="http://www.youtube.com" target="_blank" />
</map></a></div></div>

Und in der .css

Zitat

#test {
position: relative;
}

das headerbild liegt ja im div "logo" (siehe Code oben)

Zitat

#logo {
text-decoration: none;
float: left;
margin-top: -50px;
}

Resultat: Jetzt liegt das Headerbild.png über der Slideshow aber beides ist noch nicht gleich übereinaner/auf einer Höhe ... :( Was kann ich noch einstellen?

Jo das geht ... hab tausend dank aber kann ich die Slideshow auch per margin rücken bzw. verschieben?

Ich hatte die ID ([COLOR=#000000]id="nggSlideShowHeader") und den Code so übernommen und nur die Werte wie ID WIDTH und HEIGHT geändert .. ich geh dann mal auf der Suche .. ich hoffe, dass es dann bei mir auch gibt

Edit:

ich habe mir bei nur das:
[/COLOR]

/* ----------- Slideshow -------------*/
.slideshow {
    margin-left: auto; 
    margin-right: auto;
    text-align:center;
    outline: none;    
}


.slideshowlink {
    
}


/* ----------- JS Slideshow -------------*/
.ngg-slideshow {
    overflow:hidden;
    position: relative;
}


.ngg-slideshow * {
    vertical-align:middle;
}


/* See also : http://www.brunildo.org/test/img_center.html */
.ngg-slideshow-loader{
    display: table-cell;
    text-align: center;
    vertical-align:middle;
}


.ngg-slideshow-loader img{
    background: none !important; 
    border: 0 none !important;
    margin:auto !important; 
}

Ich habe jetzt mal selber was in der style.css definiert aber dann verschiebt sich nicht die Slideshow sondern das Headerbild welches auf der Slideshow liegt. Muss ich das sonst in der .css der gallery machen?

ja das war es ... tausend dank für deinen support