Slider Positionierung im Header (Easing SLider)

dermuedejoe

Hallo zusammen,

ich möchte gern zu Lernwecken ein Theme anpassen. Es heißt Piano Black. Auf folgender Seite könnt ihr meinen gegenwärtigen Stand begutachten: http://testblogger.bplaced.net/wordpress/

Ich möchte gern einen Slider einfügen und zwar direkt unterhalb des Headers. Aber ich weiß nicht wie ich ihn dort bündig eingefügt bekomme. Leider wird das in keinem Tutorial richtig erklärt.

Ich habe den Codeschnipsel <?php if (function_exists('easing_slider')){ easing_slider(); }; ?> in einen Div container gepackt und versucht über die CSS mittels margin an die richtige Stelle zu buxieren. Das hatte aber nur begrenzten Erfolg.
Folgend der Code des Headers:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title><?php wp_title(''); if (function_exists('is_tag') and is_tag()) { ?><?php } if (is_archive()) { ?><?php } elseif (is_search()) { ?><?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?><?php _e(' | '); ?><?php } ?><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php if (is_home()): echo bloginfo('description'); else: echo the_title(); endif; ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/comment-style.css" type="text/css" media="screen" />
<?php if (strtoupper(get_locale()) == 'JA') : ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/japanese.css" type="text/css" media="screen" />
<?php elseif (strtoupper(get_locale()) == 'HE_IL' || strtoupper(get_locale()) == 'FA_IR') : ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/rtl.css" type="text/css" media="screen" />
<?php endif; ?>


<!--[if lt IE 7]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/iepngfix.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie6.css" type="text/css" media="screen" />
<![endif]--> 


<?php $options = get_option('pb_options'); if($options['image_style']) { ?>
<style type="text/css">
.post img, .post a img { border:1px solid #222; padding:5px; margin:0;  background:#555; }
.post a:hover img { border:1px solid #849ca0; background:#59847d; }
.post img.wp-smiley { border:0px; padding:0px; margin:0px; background:none; }
</style>
<?php }; ?>


<?php wp_enqueue_script( 'jquery' ); ?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> 
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scroll.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jscript.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/comment.js"></script>
</head>


<body>
<div id="wrapper">
 <div id="contents">


 <div class="header-menu-wrapper clearfix">
 <div id="pngfix-right"></div>
  <?php if($options['use_wp_nav_menu']) { ?>
  <?php if (function_exists('wp_nav_menu')) { wp_nav_menu( array( 'sort_column' => 'menu_order') ); }; ?>
  <?php } else { ?>


  <ul class="menu">
   <li class="<?php if (!is_paged() && is_home()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/"><?php _e('HOME','piano-black'); ?></a></li>
   <?php 
         if($options['header_menu_type'] == 'pages') {
         wp_list_pages('sort_column=menu_order&depth=0&title_li=&exclude=' . $options['exclude_pages']);
         } else {
         wp_list_categories('depth=0&title_li=&exclude=' . $options['exclude_category']);
         }
   ?>
  </ul>
  <?php }; ?>
  <div id="pngfix-left"></div>
  </div>


  <div id="header">
   <?php if ($options['use_logo']) : ?>
   <div id="logo_image">
    <h1><a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/img/<?php echo $options['logo_name']; ?>" title="<?php bloginfo('name'); ?>" alt="<?php bloginfo('name'); ?>" /></a></h1>
   </div>
   <?php else : ?>
   <div id="logo">
    <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
    <h1><?php bloginfo('description'); ?></h1>
   </div>
   <?php endif; ?>


   <div id="header_meta">


    <?php if ($options['header_search']) : ?>
    <div id="search-area"<?php if (!$options['header_rss']&&!$options['header_twitter']) : echo ' style="margin-right:0;"'; endif; ?>>
     <?php if ($options['use_google_search']) : ?>
     <form action="http://www.google.com/cse" method="get" id="searchform">
      <div><input type="text" value="<?php _e('Google Search','piano-black'); ?>" name="q" id="search-input" onfocus="this.value=''; changefc('white');" /></div>
      <div>
       <input type="image" src="<?php bloginfo('template_url'); ?>/img/search-button.gif" name="sa" alt="<?php _e('Search from this blog.','piano-black'); ?>" title="<?php _e('Search from this blog.','piano-black'); ?>" id="search-button" />
       <input type="hidden" name="cx" value="<?php echo $options['custom_search_id']; ?>" />
       <input type="hidden" name="ie" value="UTF-8" />
      </div>
     </form>
     <?php else: ?>
      <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
       <div><input type="text" value="<?php _e('Search','piano-black'); ?>" name="s" id="search-input" onfocus="this.value=''; changefc('white');" /></div>
       <div><input type="image" src="<?php bloginfo('template_url'); ?>/img/search-button.gif" alt="<?php _e('Search from this blog.','piano-black'); ?>" title="<?php _e('Search from this blog.','piano-black'); ?>" id="search-button" /></div>
      </form>
     <?php endif; ?>
    </div>
    <?php endif; ?>


    <?php if ($options['header_rss']) : ?>
    <a href="<?php bloginfo('rss2_url'); ?>" id="rss-feed" title="<?php _e('Entries RSS','piano-black'); ?>" ><?php _e('RSS','piano-black'); ?></a>
    <?php endif; ?>
    <?php if ($options['header_twitter']) : ?>
    <a href="<?php echo $options['twitter_url']; ?>" id="twitter" title="<?php _e('TWITTER','piano-black'); ?>" ><?php _e('Twitter','piano-black'); ?></a>
    <?php endif; ?>
    
   </div><!-- #header_meta end -->
   
<div id="slider">
<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>
</div>


  </div><!-- #header end -->

Alles anzeigen

Und der CSS

Code

/


/*  ------ layout ------------------------ */


#wrapper { background:url(img/back2.png) no-repeat center top; }
#contents { width:959px; margin:0 auto; text-align:left; }
#header { background:url(img/top.png) no-repeat bottom; height:160px; }
#middle-contents { background:url(img/side.png) repeat-y; padding-bottom:50px; }
#left-col { float:left; display:inline; width:584px; margin:0 0 0 5px; }
#right-col { float:right; display:inline; width:330px; margin:70px 5px 0 0; }
#footer { background:url(img/bottom.png) no-repeat top; height:114px; margin-bottom:50px; }




/*  ------ header ---------------------- */


/* Change the number of margin if you are using original logo image */
#logo_image { margin:69px 0 0 30px; float:left; display:inline; }
#logo_image h1 { margin:0; padding:0; }


/* blog title */
#logo { float:left; display:inline; margin:64px 0 0 40px; }
#logo a, #logo a:visited { color:#ccc; font-size:22px; }
#logo a:hover { text-decoration:none; color:#83bac4; }


#logo h1 { font-weight:normal; line-height:100%; margin:0; padding:6px 0; color:#666; font-size:11px; }


#header_meta { float:right; display:inline; margin:0 40px 0 0; }




#rss-feed { font-size:11px; float:left; margin:62px 0 0 20px; display:inline; color:#777; background:url(img/rss.gif) no-repeat left top; height:25px; padding:18px 0 0 55px; }
#rss-feed:hover { background:url(img/rss.gif) no-repeat left bottom; color:#83bac4; text-decoration:none; }


#twitter { font-size:11px; float:left; margin:62px 0 0 20px; display:inline; color:#777; background:url(img/twitter.gif) no-repeat left top; height:25px; padding:18px 0 0 55px; }
#twitter:hover { background:url(img/twitter.gif) no-repeat left bottom; color:#83bac4; text-decoration:none; }


#search-area { float:left; display:inline; width:183px; height:29px; margin:70px 25px 0 0; background:url(img/search-area.gif) no-repeat; position:relative; }
#search-input { position:absolute; top:7px; left:21px; border:0px; height:17px; display:inline; width:125px; font-size:100%; color:#7e7e7e; background:transparent; }
#search-button { position:absolute; right:0px; top:0px; }


#slider {
float: left;
margin: 50px;
}


/*  ------ left-col ------------- */

Alles anzeigen

Kann mir jemand helfen, den Slider an die richtige Stelle zu bekommen? Ich bin mit meinem Latein am Ende.

Falls ihr nebenbei noch rausfindet, warum mir der Slider keine Bilder anzeigt, was früher mal geklappt hat, dann wäre ich euch auch sehr verbunden.

Liebe Grüße
Dermuedejoe

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

dermuedejoe

Das Problem ist noch aktuell. Hat keiner eine Idee?

rehtse89

Ich habe das gleiche Problem. Hast du eine Lösung gefunden?

Haretuerk

Hatte das gleiche Problem. Meine Lösung (eher ein Workaround) ist die Option "Make this slider responsive." zu deaktivieren. Dann kann der Slider mit einem umgebenden DIV positioniert werden.

Grund ist wohl eine ziemlich hartnäckige absolute Positionierung der Bilder. Bin da aber auf die Schnelle nicht rangekommen...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Slider Positionierung im Header (Easing SLider)

Jetzt mitmachen!