Position:absolute
- by Andrew
I have I have a div called logo. I want the logo to be on top of other areas and to overlap into the the preface top of a drupal site, the logo currently sits in the header area.
I looked up position absolute and I think that what I need to use but when I use position absolute the logo disappears, I can see it if I use position fixed, relative etc.
I thought the logo was being hidden because I was not using a z-index but even with that I cant see the logo.
What am I doing wrong?
#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 */
}
Also does anyone know of a really good free online css course?
Here is some additional information, namely the CSS and the 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 */
More below but I can't paste that much
Thanks for the suggestion I've tried this
#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;
}
but it's not working. I've taken a screen shot of the div to show the structure.
http://i.stack.imgur.com/ff4DP.png
