box-shaddow überlagern?

lolhonk

Mitglied
Hallo

ich hab folgendes Problem habe einen Schatten mit box-shaddow in meinem "main-wrapper" erstellt. Wie bekomm ich es hin, dass dieser im footer nicht zu sehen ist? Oder vom Footer background überdeckt wird?

HTML:
#main-wrapper {
   background-color:#ededed
   -webkit-box-shadow: 0px 6px 10px gray; /* webkit browser*/
   -moz-box-shadow: 0px 6px 10px gray; /* firefox */
   box-shadow: 0px 6px 10px gray;
   overflow:hidden;
}

#main {
}

.region-footer {
   background-color:yellow;
   
}


hoffe mir kann jemand helfen ;-)

lg
lolhonk
 

Anhänge

  • css.JPG
    css.JPG
    9,2 KB · Aufrufe: 134
Du könntest dem Footer ein margin-top verpassen:
CSS:
.region-footer
{
  background-color: yellow;
  margin-top: 10px;
}
 
mit margin-top erreiche ich ja nur, dass mein footer einen Abstand nach oben hat. Was ich eigentlich möchte ist jedoch, dass die Farbe des Footers den Schatten quasi überlagert d.h. dass der Schatten nicht mehr sichtbar ist...

gibts da eine möglichkeit?
lg
 
Ich habe mal für ein Beispiel für dich geschrieben: http://jsfiddle.net/xGrmA/
HTML:
<section id="main_wrapper">
    Bla bla bla
</section>
<section id="footer">
    Footer Footer Footer
</section>
CSS:
*{ padding: 0; margin: 0; }

#main_wrapper
{
    border: 1px solid black;
    
    -webkit-box-shadow: 10px 10px 5px 5px rgba(255, 0, 0, 1);
    -moz-box-shadow: 10px 10px 5px 5px rgba(255, 0, 0, 1);
    box-shadow: 10px 10px 5px 5px rgba(255, 0, 0, 1);
}
#footer
{
    border: 1px solid black;
    margin-top: 5px;
    background-color:yellow;
}


Und achte bitte auch Groß- und Kleinschreibung ;)
 
Hallo ich habe versucht den Footer umpositionieren aber leider scheint das auch nichts zu ändern :(

hier mal der code:

PHP:
<?php
?>

<div id="page-wrapper"><div id="page">

  <div id="header"><div class="section clearfix">


    <?php if ($logo): ?>
      <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
    <?php endif; ?>

    <?php if ($site_name || $site_slogan): ?>
      <div id="name-and-slogan">
        <?php if ($site_name): ?>
          <?php if ($title): ?>
            <div id="site-name"><strong>
              <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </strong></div>
          <?php else: /* Use h1 when the content title is empty */ ?>
            <h1 id="site-name">
              <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </h1>
          <?php endif; ?>
        <?php endif; ?>

        <?php if ($site_slogan): ?>
          <div id="site-slogan"><?php print $site_slogan; ?></div>
        <?php endif; ?>
      </div><!-- /#name-and-slogan -->
    <?php endif; ?>

    <?php print theme('links__system_secondary_menu', array(
      'links' => $secondary_menu,
      'attributes' => array(
        'id' => 'secondary-menu',
        'class' => array('links', 'inline', 'clearfix'),
      ),
      'heading' => array(
        'text' => $secondary_menu_heading,
        'level' => 'h2',
        'class' => array('element-invisible'),
      ),
    )); ?>

    <?php print render($page['header']); ?>

  </div></div><!-- /.section, /#header -->

  <div id="main-wrapper"><div id="main" class="clearfix<?php if ($main_menu || $page['navigation']) { print ' with-navigation'; } ?>">

    <div id="content" class="column"><div class="section">
      <?php print render($page['highlighted']); ?>
      <?php print $breadcrumb; ?>
      <a id="main-content"></a>
      <?php print render($title_prefix); ?>
      <?php if ($title): ?>
        <h1 class="title" id="page-title"><?php print $title; ?></h1>
      <?php endif; ?>
      <?php print render($title_suffix); ?>
      <?php print $messages; ?>
      <?php if ($tabs = render($tabs)): ?>
        <div class="tabs"><?php print $tabs; ?></div>
      <?php endif; ?>
      <?php print render($page['help']); ?>
      <?php if ($action_links): ?>
        <ul class="action-links"><?php print render($action_links); ?></ul>
      <?php endif; ?>
      <?php print render($page['content']); ?>
      <?php print $feed_icons; ?>
    </div></div><!-- /.section, /#content -->

    <?php if ($page['navigation'] || $main_menu): ?>
      <div id="navigation"><div class="section clearfix">

        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu',
            'class' => array('links', 'inline', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>

        <?php print render($page['navigation']); ?>

      </div></div><!-- /.section, /#navigation -->
    <?php endif; ?>

    <?php print render($page['sidebar_first']); ?>

    <?php print render($page['sidebar_second']); ?>

  </div></div><!-- /#main, /#main-wrapper -->

  <?php print render($page['footer']); ?>

</div></div><!-- /#page, /#page-wrapper -->

<?php print render($page['bottom']); ?>

also wenn ich die Zeile
PHP:
<?php print render($page['footer']); ?>
ganz nach unten setze, ändert sich auch nicht d.h. der Schatten des main-wrapper ist im footer immernoch zu sehen :-(

lg
 
schöne Beispiele danke hierfür! Ich hätte gern die zweite Variante d.h. footer unter main-wrapper allerdings bekomm ich das mit meinem code (s. post oben) einfach nicht hin bzw. der footer ist schon drunter allerdings überlagert es den schatten des main-wrappers nicht :(

also was muss ich an meinem code ändern, damit das so angeorndet ist wie bei dir?

lg
 
Zurück