1. Accueil
  2. Question et réponse
  3. Position: absolue

Position: absolue

2011-02-01 8 views
1

J'ai un logo appelé div. Je veux que le logo soit au-dessus des autres zones et se chevaucher dans le dessus de la préface d'un site Drupal, le logo se trouve actuellement dans la zone d'en-tête.Position: absolue

Je levai les yeux position absolue et je pense que ce que je dois utiliser, mais quand j'utilise la position du logo disparait absolu, je peux le voir si j'utilise position fixe, par rapport etc.

Je pensais que le logo était être caché parce que je n'utilisais pas un z-index mais même avec ça je ne peux pas voir le logo.

Qu'est-ce que je fais mal?

#logo { 
position: absolute; 
top: 30px; /* 30 pixels from the top of the page */ 
left: 80px; /* 80 pixels from the left hand side */ 
z-index:1099; 
border: 1px solid red; /* So we can see what is happening */ 
}

Est-ce que quelqu'un connaît un cours de css gratuit en ligne?

Voici quelques informations supplémentaires, à savoir le CSS et le page.tpl.php:

<?php 
// $Id: page.tpl.php,v 1.1.2.5 2010/04/08 07:02:59 sociotech Exp $ 
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>"> 

<head> 
    <title><?php print $head_title; ?></title> 
    <?php print $head; ?> 
    <?php print $styles; ?> 
    <?php print $setting_styles; ?> 
    <!--[if IE 8]> 
    <?php print $ie8_styles; ?> 
    <![endif]--> 
    <!--[if IE 7]> 
    <?php print $ie7_styles; ?> 
    <![endif]--> 
    <!--[if lte IE 6]> 
    <?php print $ie6_styles; ?> 
    <![endif]--> 
    <?php print $local_styles; ?> 
    <?php print $scripts; ?> 
</head> 

<body id="<?php print $body_id; ?>" class="<?php print $body_classes; ?>"> 
    <div id="page" class="page"> 
    <div id="page-inner" class="page-inner"> 
     <div id="skip"> 
     <a href="#main-content-area"><?php print t('Skip to Main Content Area'); ?></a> 
     </div> 

     <!-- header-top row: width = grid_width --> 
     <?php print theme('grid_row', $header_top, 'header-top', 'full-width', $grid_width); ?> 

     <!-- header-group row: width = grid_width --> 
     <div id="header-group-wrapper" class="header-group-wrapper full-width"> 
     <div id="header-group" class="header-group row <?php print $grid_width; ?>"> 
      <div id="header-group-inner" class="header-group-inner inner clearfix"> 
      <?php print theme('grid_block', theme('links', $secondary_links), 'secondary-menu'); ?> 
      <?php print theme('grid_block', $search_box, 'search-box'); ?> 

      <?php if ($logo || $site_name || $site_slogan): ?> 
      <div id="header-site-info" class="header-site-info block"> 
       <div id="header-site-info-inner" class="header-site-info-inner inner"> 
       <?php if ($logo): ?> 
       <div id="logo"> 
        <a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a> 
       </div> 
       <?php endif; ?> 
       <?php if ($site_name || $site_slogan): ?> 
       <div id="site-name-wrapper" class="clearfix"> 
        <?php if ($site_name): ?> 
        <span id="site-name"><a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>"><?php print $site_name; ?></a></span> 
        <?php endif; ?> 
        <?php if ($site_slogan): ?> 
        <span id="slogan"><?php print $site_slogan; ?></span> 
        <?php endif; ?> 
       </div><!-- /site-name-wrapper --> 
       <?php endif; ?> 
       </div><!-- /header-site-info-inner --> 
      </div><!-- /header-site-info --> 
      <?php endif; ?> 

      <?php print $header; ?> 
      <?php print theme('grid_block', $primary_links_tree, 'primary-menu'); ?> 
      </div><!-- /header-group-inner --> 
     </div><!-- /header-group --> 
     </div><!-- /header-group-wrapper --> 

     <!-- preface-top row: width = grid_width --> 
     <?php print theme('grid_row', $preface_top, 'preface-top', 'full-width', $grid_width); ?> 

     <!-- main row: width = grid_width --> 
<div id="main-wrapper" class="main-wrapper full-width<?php if ($is_front) { print ' front'; } ?>">   
<div id="main" class="main row <?php print $grid_width; ?>"> 
      <div id="main-inner" class="main-inner inner clearfix"> 
      <?php print theme('grid_row', $sidebar_first, 'sidebar-first', 'nested', $sidebar_first_width); ?> 

      <!-- main group: width = grid_width - sidebar_first_width --> 
      <div id="main-group" class="main-group row nested <?php print $main_group_width; ?>"> 
       <div id="main-group-inner" class="main-group-inner inner"> 
       <?php print theme('grid_row', $preface_bottom, 'preface-bottom', 'nested'); ?> 

       <div id="main-content" class="main-content row nested"> 
        <div id="main-content-inner" class="main-content-inner inner"> 
        <!-- content group: width = grid_width - (sidebar_first_width + sidebar_last_width) --> 
        <div id="content-group" class="content-group row nested <?php print $content_group_width; ?>"> 
         <div id="content-group-inner" class="content-group-inner inner"> 
         <?php print theme('grid_block', $breadcrumb, 'breadcrumbs'); ?> 

         <?php if ($content_top || $help || $messages): ?> 
         <div id="content-top" class="content-top row nested"> 
          <div id="content-top-inner" class="content-top-inner inner"> 
          <?php print theme('grid_block', $help, 'content-help'); ?> 
          <?php print theme('grid_block', $messages, 'content-messages'); ?> 
          <?php print $content_top; ?> 
          </div><!-- /content-top-inner --> 
         </div><!-- /content-top --> 
         <?php endif; ?> 

         <div id="content-region" class="content-region row nested"> 
          <div id="content-region-inner" class="content-region-inner inner"> 
          <a name="main-content-area" id="main-content-area"></a> 
          <?php print theme('grid_block', $tabs, 'content-tabs'); ?> 
          <div id="content-inner" class="content-inner block"> 
           <div id="content-inner-inner" class="content-inner-inner inner"> 
           <?php if ($title): ?> 
           <h1 class="title"><?php print $title; ?></h1> 
           <?php endif; ?> 
           <?php if ($content): ?> 
           <div id="content-content" class="content-content"> 
            <?php print $content; ?> 
            <?php print $feed_icons; ?> 
           </div><!-- /content-content --> 
           <?php endif; ?> 
           </div><!-- /content-inner-inner --> 
          </div><!-- /content-inner --> 
          </div><!-- /content-region-inner --> 
         </div><!-- /content-region --> 

         <?php print theme('grid_row', $content_bottom, 'content-bottom', 'nested'); ?> 
         </div><!-- /content-group-inner --> 
        </div><!-- /content-group --> 

        <?php print theme('grid_row', $sidebar_last, 'sidebar-last', 'nested', $sidebar_last_width); ?> 
        </div><!-- /main-content-inner --> 
       </div><!-- /main-content --> 

       <?php print theme('grid_row', $postscript_top, 'postscript-top', 'nested'); ?> 
       </div><!-- /main-group-inner --> 
      </div><!-- /main-group --> 
      </div><!-- /main-inner --> 
     </div><!-- /main --> 
     </div><!-- /main-wrapper --> 

     <!-- postscript-bottom row: width = grid_width --> 
     <?php print theme('grid_row', $postscript_bottom, 'postscript-bottom', 'full-width', $grid_width); ?> 

     <!-- footer row: width = grid_width --> 
     <?php print theme('grid_row', $footer, 'footer', 'full-width', $grid_width); ?> 

     <!-- footer-message row: width = grid_width --> 
     <div id="footer-message-wrapper" class="footer-message-wrapper full-width"> 
     <div id="footer-message" class="footer-message row <?php print $grid_width; ?>"> 
      <div id="footer-message-inner" class="footer-message-inner inner clearfix"> 
      <?php print theme('grid_block', $footer_message, 'footer-message-text'); ?> 
      </div><!-- /footer-message-inner --> 
     </div><!-- /footer-message --> 
     </div><!-- /footer-message-wrapper --> 

    </div><!-- /page-inner --> 
    </div><!-- /page --> 
    <?php print $closure; ?> 
</body> 
</html>

CSS

/* $Id: style.css,v 1.1.2.11 2010/07/02 22:11:04 sociotech Exp $ */ 

/* Margin, Padding, Border Resets 
-------------------------------------------------------------- */ 
html, body, div, span, p, 
dl, dt, dd, ul, ol, li, 
h1, h2, h3, h4, h5, h6, 
form, fieldset, input, textarea { 
    margin: 0; 
    padding: 0; 
} 

img, abbr, acronym { 
    border: 0; 
} 


/* HTML Elements 
-------------------------------------------------------------- */ 
p { 
    margin: 1em 0; 
} 

h1, h2, h3, h4, h5, h6 { 
    margin: 0 0 0.5em 0; 
} 

h1 { 
color: white !important; 
text-shadow: black !important; 
} 

ul, ol, dd { 
    margin-bottom: 1.5em; 
    margin-left: 2em; /* LTR */ 
} 

li ul, li ol { 
    margin-bottom: 0; 
} 

ul { 
    list-style-type: disc; 
} 

ol { 
    list-style-type: decimal; 
} 

a { 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
} 

a:link, 
a:visited { 
} 

a:hover, 
a:focus, 
a:active { 
    text-decoration: underline; 
} 

blockquote { 
} 

hr { 
    height: 1px; 
    border: 1px solid gray; 
} 

/* tables */ 
table { 
    border-spacing: 0; 
    width: 100%; 
} 

tr.even td, 
tr.odd td { 
    background-color: #FFFFFF; 
    border: 1px solid #dbdbdb; 
} 

caption { 
    text-align: left; 
} 

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

th.active img { 
    display: inline; 
} 

thead th { 
    padding-right: 10px; 
} 

td { 
    margin: 0; 
    padding: 3px; 
} 

/* Remove grid block styles from Drupal's table ".block" class */ 
td.block { 
    border: none; 
    float: none; 
    margin: 0; 
} 

/* Maintain light background/dark text on dragged table rows */ 
tr.drag td, 
tr.drag-previous td { 
    background: #FFFFDD; 
    color: #000; 
} 


/* Accessibility 
/-------------------------------------------------------------- */ 
/* skip-link to main content, hide offscreen */ 
#skip a, 
#skip a:hover, 
#skip a:visited { 
    height: 1px; 
    left: 0px; 
    overflow: hidden; 
    position: absolute; 
    top: -500px; 
    width: 1px; 
} 

/* make skip link visible when selected */ 
#skip a:active, 
#skip a:focus { 
    background-color: #fff; 
    color: #000; 
    height: auto; 
    padding: 5px 10px; 
    position: absolute; 
    top: 0; 
    width: auto; 
    z-index: 99; 
} 

#skip a:hover { 
    text-decoration: none; 
} 


/* Helper Classes 
/-------------------------------------------------------------- */ 
.hide { 
    display: none; 
    visibility: hidden; 
} 

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

.clear { 
    clear: both; 
} 

/* clear floats after an element */ 
/* (also in ie6-fixes.css, ie7-fixes.css) */ 
.clearfix:after, 
.clearfix .inner:after { 
    clear: both; 
    content: "."; 
    display: block; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    overflow: auto; 
    visibility: hidden; 
} 


/* Grid Layout Basics (specifics in 'gridnn_x.css') 
-------------------------------------------------------------- */ 
/* center page and full rows: override this for left-aligned page */ 
.page, 
.row { 
    margin: 0 auto; 
} 

/* fix layout/background display on floated elements */ 
.row, 
.nested, 
.block { 
    overflow: hidden; 
} 

/* full-width row wrapper */ 
div.full-width { 
    width: 100%; 
} 

/* float, un-center & expand nested rows */ 
.nested { 
    float: left; /* LTR */ 
    margin: 0; 
    width: 100%; 
} 

/* allow Superfish menus to overflow */ 
#sidebar-first.nested, 
#sidebar-last.nested, 
div.superfish { 
    overflow: visible; 
} 

/* sidebar layouts */ 
.sidebars-both-first .content-group { 
    float: right; /* LTR */ 
} 

.sidebars-both-last .sidebar-first { 
    float: right; /* LTR */ 
} 

/* Grid Mask Overlay 
-------------------------------------------------------------- */ 
#grid-mask-overlay { 
    display: none; 
    left: 0; 
    opacity: 0.75; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 997; 
} 

#grid-mask-overlay .row { 
    margin: 0 auto; 
} 

#grid-mask-overlay .block .inner { 
    background-color: #e3fffc; 
    outline: none; 
} 

.grid-mask #grid-mask-overlay { 
    display: block; 
} 

.grid-mask .block { 
    overflow: visible; 
} 

.grid-mask .block .inner { 
    outline: #f00 dashed 1px; 
} 

#grid-mask-toggle { 
    background-color: #777; 
    border: 2px outset #fff; 
    color: #fff; 
    cursor: pointer; 
    font-variant: small-caps; 
    font-weight: normal; 
    left: 0; 
    -moz-border-radius: 5px; 
    padding: 0 5px 2px 5px; 
    position: absolute; 
    text-align: center; 
    top: 22px; 
    -webkit-border-radius: 5px; 
    z-index: 998; 
} 

#grid-mask-toggle.grid-on { 
    border-style: inset; 
    font-weight: bold; 
} 


/* Site Info 
-------------------------------------------------------------- */ 
#header-site-info { 
    width: auto; 
} 

#site-name-wrapper { 
    float: left; /* LTR */ 
} 

#site-name, 
#slogan { 
    display: block; 
} 

#site-name a:link, 
#site-name a:visited, 
#site-name a:hover, 
#site-name a:active { 
    text-decoration: none; 
} 

#site-name a { 
    outline: 0; 
} 


/* Regions 
-------------------------------------------------------------- */ 

/* Header Regions 
-------------------------------------------------------------- */ 
#header-group { 
    overflow: visible; 
} 

/* Content Regions (Main) 
-------------------------------------------------------------- */ 
.node-bottom { 
    margin: 1.5em 0 0 0; 
} 

/* Clear floats on regions 
-------------------------------------------------------------- */ 
#header-top-wrapper, 
#header-group-wrapper, 
#preface-top-wrapper, 
#main-wrapper, 
#preface-bottom, 
#content-top, 
#content-region, 
#content-bottom, 
#postscript-top, 
#postscript-bottom-wrapper, 
#footer-wrapper, 
#footer-message-wrapper { 
    clear: both; 
} 


/* Drupal Core 
/-------------------------------------------------------------- */ 

/* Lists 
/-------------------------------------------------------------- */ 
.item-list ul li { 
    margin: 0; 
} 

.block ul, 
.block ol { 
    margin-left: 2em; /* LTR */ 
    padding: 0; 
} 

.content-inner ul, 
.content-inner ol { 
    margin-bottom: 1.5em; 
} 

.content-inner li ul, 
.content-inner li ol { 
    margin-bottom: 0; 
} 

.block ul.links { 
    margin-left: 0; /* LTR */ 
} 

/* Menus 
/-------------------------------------------------------------- */ 
ul.menu li, 
ul.links li { 
    margin: 0; 
    padding: 0; 
} 

/* Primary Menu 
/-------------------------------------------------------------- */ 
/* use ID to override overflow: hidden for .block, dropdowns should always be visible */ 
#primary-menu { 
    overflow: visible; 
} 

/* remove left margin from primary menu list */ 
#primary-menu.block ul { 
    margin-left: 0; /* LTR */ 
} 

/* remove bullets, float left */ 
.primary-menu ul li { 
    float: left; /* LTR */ 
    list-style: none; 
    position: relative; 
} 

/* style links, and unlinked parent items (via Special Menu Items module) */ 
.primary-menu ul li a, 
.primary-menu ul li .nolink { 
    display: block; 
    padding: 0.75em 1em; 
    text-decoration: none; 
} 

/* Add cursor style for unlinked parent menu items */ 
.primary-menu ul li .nolink { 
    cursor: default; 
} 

/* remove outline */ 
.primary-menu ul li:hover, 
.primary-menu ul li.sfHover, 
.primary-menu ul a:focus, 
.primary-menu ul a:hover, 
.primary-menu ul a:active { 
    outline: 0; 
} 

/* Secondary Menu 
/-------------------------------------------------------------- */ 
.secondary-menu-inner ul.links { 
    margin-left: 0; /* LTR */ 
} 


/* Skinr styles 
/-------------------------------------------------------------- */ 

/* Skinr selectable helper classes */ 
.fusion-clear { 
    clear: both; 
} 

div.fusion-right { 
    float: right; /* LTR */ 
} 

div.fusion-center { 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
} 

.fusion-center-content .inner { 
    text-align: center; 
} 

.fusion-center-content .inner ul.menu { 
    display: inline-block; 
    text-align: center; 
} 

/* required to override drupal core */ 
.fusion-center-content #user-login-form { 
    text-align: center; 
} 

.fusion-right-content .inner { 
    text-align: right; /* LTR */ 
} 

/* required to override drupal core */ 
.fusion-right-content #user-login-form { 
    text-align: right; /* LTR */ 
} 

/* Large, bold callout text style */ 
.fusion-callout .inner { 
    font-weight: bold; 
} 

/* Extra padding on block */ 
.fusion-padding .inner { 
    padding: 30px; 
} 

/* Adds 1px border and padding */ 
.fusion-border .inner { 
    border-width: 1px; 
    border-style: solid; 
    padding: 10px; 
} 

/* Single line menu with separators */ 
.fusion-inline-menu .inner ul.menu { 
    margin-left: 0; /* LTR */ 
} 

.fusion-inline-menu .inner ul.menu li { 
    border-right-style: solid; 
    border-right-width: 1px; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
} 

.fusion-inline-menu .inner ul.menu li a { 
    padding: 0 8px 0 5px; /* LTR */ 
} 

.fusion-inline-menu .inner ul li.last { 
    border: none; 
} 

/* Hide second level (and beyond) menu items */ 
.fusion-inline-menu .inner ul li.expanded ul { 
    display: none; 
} 

/* Multi-column menu style with bolded top level menu items */ 
.fusion-multicol-menu .inner ul { 
    margin-left: 0; /* LTR */ 
    text-align: left; /* LTR */ 
} 

.fusion-multicol-menu .inner ul li { 
    border-right: none; 
    display: block; 
    font-weight: bold; 
} 

.fusion-multicol-menu .inner ul li.last { 
    border-right: none; 
} 

.fusion-multicol-menu .inner ul li.last a { 
    padding-right: 0; /* LTR */ 
} 

.fusion-multicol-menu .inner ul li.expanded, 
.fusion-multicol-menu .inner ul li.leaf { 
    float: left; /* LTR */ 
    list-style-image: none; 
    margin-left: 50px; /* LTR */ 
} 

.fusion-multicol-menu .inner ul.menu li.first { 
    margin-left: 0; /* LTR */ 
} 

.fusion-multicol-menu .inner ul li.expanded li.leaf { 
    float: none; 
    margin-left: 0; /* LTR */ 
} 

.fusion-multicol-menu .inner ul li.expanded ul { 
    display: block; 
    margin-left: 0; /* LTR */ 
} 

.fusion-multicol-menu .inner ul li.expanded ul li { 
    border: none; 
    margin-left: 0; /* LTR */ 
    text-align: left; /* LTR */ 
} 

.fusion-multicol-menu .inner ul.menu li ul.menu li { 
    font-weight: normal; 
} 

/* Split list across multiple columns */ 
.fusion-2-col-list .inner .item-list ul li, 
.fusion-2-col-list .inner ul.menu li { 
    float: left; /* LTR */ 
    width: 50%; 
} 

.fusion-3-col-list .inner .item-list ul li, 
.fusion-3-col-list .inner ul.menu li { 
    float: left; /* LTR */ 
    width: 33%; 
} 

.fusion-2-col-list .inner .item-list ul.pager li, 
.fusion-3-col-list .inner .item-list ul.pager li { 
    float: none; 
    width: auto; 
} 

/* List with bottom border 
    Fixes a common issue when list items have bottom borders and appear to be 
    doubled when nested lists end and begin. This removes the extra border-bottom 
*/ 
.fusion-list-bottom-border .inner ul li { 
    list-style: none; 
    list-style-type: none; 
    list-style-image: none; 
} 

.fusion-list-bottom-border .inner ul li, 
.fusion-list-bottom-border .view-content div.views-row { 
    padding: 0 0 0 10px; /* LTR */ 
    border-bottom-style: solid; 
    border-bottom-width: 1px; 
    line-height: 216.7%; /* 26px */ 
} 

.fusion-list-bottom-border .inner ul { 
    margin: 0; 
} 

.fusion-list-bottom-border .inner ul li ul { 
    border-bottom-style: solid; 
    border-bottom-width: 1px; 
} 

.fusion-list-bottom-border .inner ul li ul li.last { 
    border-bottom-style: solid; 
    border-bottom-width: 1px; 
    margin-bottom: -1px; 
    margin-top: -1px; 
} 

#views_slideshow_singleframe_pager_slideshow-page_2 .pager-item { 
display:block; 
} 

#views_slideshow_singleframe_pager_slideshow-page_2 { 
position:absolute; 
right:0; 
top:0; 
} 

#header-group-wrapper { 
background: none; 
} 

#page { 
background-color:#F3F3F3; 
background-image:url('/sites/all/themes/fusion/fusion_core/images/runswithgradient.jpg'); 
background-repeat:no-repeat; 
background-attachment: fixed; 
width: auto; 
} 

#views_slideshow_singleframe_pager_slideshow-page_2 div a img { 
top:0px; 
height:60px; 
width:80px; 
padding-right:10px; 
padding-bottom:19px; 
} 

#mycontent{ 
width: 720px; 
} 

.product-body { 
    -moz-border-radius: 4px 4px 4px 4px; 
    margin: 0 0 20px; 
    overflow: hidden; 
    padding: 20px; 
    background: none repeat scroll 0 0 #F7F7F7; 
    border: 1px solid #000000; 
    border-style:solid; 
    border-width:thin; 
    color:#000000; 
} 

#product-details { 
    background: none repeat scroll 0 0 #F7F7F7 !important; 
    border: 1px solid #000000 !important; 
    color: #8E8E8E; 
} 

#logo { 
position: relative; 
top: 30px; /* 30 pixels from the top of the page */ 
left: 80px; /* 80 pixels from the left hand side */ 
z-index:1099; 
border: 1px solid red; /* So we can see what is happening */ 
} 

#breadcrumbs-inner { 
    background: none; 
    border-color: transparent; 
    border-style: none; 
} 

#block-views-new_products-block_1{ 
height:200px; 
} 

/* List with no bullet and extra padding 
    This is a common style for menus, which removes the bullet and adds more 
    vertical padding for a simple list style 
*/ 
.fusion-list-vertical-spacing .inner ul, 
.fusion-list-vertical-spacing div.views-row-first { 
    margin-left: 0; 
    margin-top: 10px; 
} 

.fusion-list-vertical-spacing .inner ul li, 
.fusion-list-vertical-spacing div.views-row { 
    line-height: 133.3%; /* 16px/12px */ 
    margin-bottom: 10px; 
    padding: 0; 
} 

.fusion-list-vertical-spacing .inner ul li { 
    list-style: none; 
    list-style-image: none; 
    list-style-type: none; 
} 

.fusion-list-vertical-spacing .inner ul li ul { 
    margin-left: 10px; /* LTR */ 
} 

/* Bold all links */ 
.fusion-bold-links .inner a { 
    font-weight: bold; 
} 

/* Float imagefield images left and add margin */ 
.fusion-float-imagefield-left .field-type-filefield, 
.fusion-float-imagefield-left .image-insert, 
.fusion-float-imagefield-left .imagecache { 
    float: left; /* LTR */ 
    margin: 0 15px 15px 0; /* LTR */ 
} 

/* Clear float on new Views item so each row drops to a new line */ 
.fusion-float-imagefield-left .views-row { 
    clear: left; /* LTR */ 
} 

/* Float imagefield images right and add margin */ 
.fusion-float-imagefield-right .field-type-filefield, 
.fusion-float-imagefield-right .image-insert 
.fusion-float-imagefield-right .imagecache { 
    float: right; /* LTR */ 
    margin: 0 0 15px 15px; /* LTR */ 
} 

/* Clear float on new Views item so each row drops to a new line */ 
.fusion-float-imagefield-right .views-row { 
    clear: right; /* LTR */ 
} 

/* Superfish: all menus */ 
.sf-menu li { 
    list-style: none; 
    list-style-image: none; 
    list-style-type: none; 
} 

/* Superfish: vertical menus */ 
.superfish-vertical { 
    position: relative; 
    z-index: 9; 
} 

ul.sf-vertical { 
    background: #fafafa; 
    margin: 0; 
    width: 100%; 
} 

ul.sf-vertical li { 
    border-bottom: 1px solid #ccc; 
    font-weight: bold; 
    line-height: 200%; /* 24px */ 
    padding: 0; 
    width: 100%; 
} 

ul.sf-vertical li a:link, 
ul.sf-vertical li a:visited, 
ul.sf-vertical li .nolink { 
    margin-left: 10px; 
    padding: 2px; 
} 

ul.sf-vertical li a:hover, 
ul.sf-vertical li a.active { 
    text-decoration: underline; 
} 

ul.sf-vertical li ul { 
    background: #fafafa; 
    border-top: 1px solid #ccc; 
    margin-left: 0; 
    width: 150px; 
} 

ul.sf-vertical li ul li.last { 
    border-top: 1px solid #ccc; 
    margin-bottom: -1px; 
    margin-top: -1px; 
} 

ul.sf-vertical li ul { 
    border-top: none; 
    padding: 4px 0; 
} 

ul.sf-vertical li ul li { 
    border-bottom: none; 
    line-height: 150%; /* 24px */

Plus bas, mais je ne peux pas coller beaucoup

Merci pour le suggestion J'ai essayé cela

#header-group { 
position: relative; 
z-index: 9; 
} 

#logo { 
position: abosolute; 
top: 230px; /* 30 pixels from the top of the page */ 
left: 10px; /* 80 pixels from the left hand side */ 
z-index: 999; 
}

mais cela ne fonctionne pas. J'ai pris une capture d'écran de la div pour montrer la structure.

http://i.stack.imgur.com/ff4DP.png

Source

2011-02-01 Andrew

+1

CSS est plus l'interprétation et l'art que la science. Essayez une liste à part: http://www.alistapart.com/ –

+0

Aussi, si vous pouvez fournir le html avec l'élément #logo, ce serait très utile. –

Répondre

4

position est toujours par rapport au parent à côté d'un ensemble explicitement position

Si votre logo est en train de disparaître, il est probablement parce que votre tête n'a pas au moins avoir position:relative ensemble, ou quelque chose de semblable se produit . En utilisant Firebug ou l'inspection de Chrome, pouvez-vous voir où se trouve le logo? Postez votre code HTML et CSS pour l'en-tête/le corps, et nous allons aller au fond de celui-ci!

Source

2011-02-01 02:25:53 jlmakes

+1

Cette page a une bonne illustration: http://css-tricks.com/absolute-positioning-inside-relative-positioning/ – DarenW

1

Cela ne répond pas complètement à votre question, mais en aparté, une chose que j'ai apprise depuis que j'ai regardé CSS au cours des deux dernières semaines est que z-index ne fonctionne que sur les attributs avec une balise de position. En d'autres termes, dans votre cas, cela n'a pas de sens, car il faut comparer quelque chose. Ajouter une position: relative et un z-index à tout ce qui est #logo devrait aider.

Source

2011-02-01 02:54:05 emragins

+0

Impossible d'ajouter des commentaires aux autres ... il y en a beaucoup là. Essayez de sortir juste l'en-tête et les divs de logo et voyez si vous pouvez le faire fonctionner indépendamment de tout le reste. – emragins

Questions connexes

 Questions connexes