I need some help with a problem that I think some css can resolve.
I have this nav bar (click in the link), and when I pass the mouse over it and the submenu appear, the content of the nav mix with the content below. Take a look:
enter image description here
I surrounded the local of the problem with red lines.
The correct nav needs to be like this other image:
enter image description here
Realize that the submenu content overlap the textbox below, and it's correct.
My html code is:
<div class="row">
<div class="containerMenu" *ngIf="usuario !== undefined" >
<nav>
<ul class="wrapper" >
<li class="dropdown" *ngFor="let menu of usuario.menus">
{{menu.nmMenu}}
<div class="dropdown-list">
<a routerLink="{{sub.path}}" *ngFor="let sub of menu.subMenus">{{sub.nmMenu}}</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
And my atual CSS :
nav{
text-align: left;
/* background-color:black; */
margin:0 auto;
}
nav ul{
margin:0;
padding:0;
text-align: center;
list-style-type: none;
display: inline-block;
}
nav ul li{
float:left;
min-height:18px;
font-size:12px !important;
display:table-cell;
font-weight:bold;
}
nav a{
display: inline-block;
padding:8px 17px;
color:#fff;
text-decoration: none;
}
.dropdown{
position: relative;
display: inline;
}
.dropdown-list{
display: none;
position: absolute;
background-color:white;
min-width: 180px;
}
.dropdown-list a{
/* color:black; */
text-decoration: none;
display: block;
color:black;
}
.dropdown-list a:hover {
background-color: #F5F5F5;
color:black;
position: absolute;
}
.dropdown:hover .dropdown-list {
display: block;
}
What can I do to the nav sub Itens appear correctly, like the second image?
Thanks in advance!
You should try add to css code z-index: 1;
I am not able to center my menu in a header-bar.
I've tried display: table-cell and display: table but it doesn't work. The only thing I can do is a fixed margin-top, which I want to avoid.
<header>
<div class="container">
<div id="logo"></div>
<div id="mainnav">
<div class="clearfix">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'depth' => 1)); ?>
</di>
</div>
</div>
</header>
div#mainnav {
height: 120px;
width: 70%;
float: right;
background-color: red;
display:table;
}
div.menu {
background-color: yellow;
display:table-cell;
vertical-align:middle;
text-align:center; }
/* clearfix */
div.menu ul:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
I used cleafix to have a div.menu height (it was 0 before).
The centered (table-cell) div needs to be directly under the container (table) div.
You seem to have no .menu in the code, or maybe the PHP generates it - either way, it's nested inside. You might want to make the #mainnav itself as the clearfix, so that the children below it will be directly there.
<div id="mainnav" class="clearfix">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'depth' => 1)); ?>
</div>
Here's an example:
#mainnav {
height: 50px;
border: 1px solid #ccc;
display: table;
padding: 20px;
}
#mainnav .menu-item {
display: table-cell;
vertical-align: middle;
}
<div id="mainnav">
<div class="menu-item">My menu item</div>
</div>
try the code like this instead of display property. Is there any reason to use "display:table"?
UPDATED CSS
div.menu {
background-color: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 120px;}
Change your css
div.menu {
background-color: yellow;
vertical-align: middle;
text-align: center;
margin: 30px 0;
padding: 0px 20px 0px 0px;
}
and
ul, ol {
margin-top: 0;
margin-bottom: 10px;
margin: 0 auto;
padding: 0px;
}
ul use default margin & padding if not set.
I'm trying to get the Sidebar Menu looking the same on the correct Live version, but working right so it overlaps the border upon Hover of the items, on the Test version (View Page)
The Sidebar Menu on the Live version looks like this (View Page)
I'm guessing the way to get the Hover feature looking like it's overlapped the border line is to increase the width of the Sidebar area and then manually position the menu? I do have some code below if that would help make sense?
<div id="mod_sidebar">
<?php if ( ! dynamic_sidebar( 'Sidebar' )) : ?>
<ul>
<li id="sidebar-nav" class="widget menu">
<h3><?php _e('Navigation'); ?></h3>
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'sidebar-menu' ) );?>
</ul>
</li>
</ul>
<?php endif; ?>
</div><!--mod_sidebar-->
#mod_sidebar {
float: left;
width: 202px;
/*background-color: #F96;*/
background: url(images/sidebar-bg.jpg);
background-repeat: no-repeat;
}
#mod_sidebar .widget-area {
padding-bottom: 20px;
margin-bottom: 20px;
}
#mod_siebar ul,
#mod_sidebar li {
padding: 0;
margin: 0;
list-style: none;
}
#mod_sidebar .children {
padding-left: 10px;
}
#mod_sidebar .children .children {
padding-left: 10px;
}
The CSS is below
#mod_sidebar,
#mod_sidebar ul {list-style: none; padding: 0; margin: 0;}
#mod_sidebar a {display: block; padding: 10px; width: 210px; font-size: 13px; color: #174267;}
#mod_sidebar li {float: left; width: 190px; background-color: #F4F8Fa; border-top: 1px solid #c3ced5;}
#mod_sidebar li:hover {background: url(images/hover_bg.png);}
#mod_sidebar li ul {position: absolute; width: 210px; left: -999em; background-color: #1662a7;}
#mod_sidebar li:hover ul {left: auto; background: url(images/hover_bg.png);}
Just need a bit of guidance on this if possible! Thanks again!
You can start by looking at line 3904 of this file: http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/style.css (The stylesheet belonging to the site that has the layout you seem to be after.
Notice that they are doing a few things here:
1) Using negative margins. So on the menu items hover and active states:
.side-menu a.active, .side-menu a:hover
The elements have a negative right margin of 17px:
margin-right: -17px;
2) The CSS in this sheet is also giving the a.active and a:hover the following background image: http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/images/hover_bg.png
Start by looking at these two bits outlined above and see how close it gets you to what you desire.
You could also just copy the CSS and HTML that is being used in production (LIVE site)...
My container, #topmenu is in fixed position. I just added a phone number (image) that I want to move with this bar, but it doesn't move with the fixed bar.
I've absolutely positioned it within a relatively positioned element, but it just doesn't stick.
If I just make the phone number position:fixed then it moves around with the viewport width. What's the best way to accomplish what I'm doing?
CSS fragment:
.topsocial a { margin-left: 15px; }
#topmenu {position:fixed; z-index:220; }
#topmenu .ktwrap {padding-top: 3px; padding-bottom: 3px; color: #fff;}
#topmenu ul li { display:inline; list-style-type: none; padding: 0px 10px 0 0; font-size: 13px; }
#topmenu .widget-container { margin-top: 5px;}
.topsocial .widget-containter {margin-top: 0px!important;}
#menu-menu li a span {
display:block;
line-height:14px;
margin-right: 4px;
text-transform: lowercase!important;
}
.menu-menu ul li a span {
line-height:14px;
margin-right: 4px;
text-transform: lowercase!important;
}
.topsocial {margin-top: 5px; color: #fff;}
.ktlogo {float: left; width: auto; margin-top:-35px; margin-left: 137px; font-family: 'HoneyScriptLight'; font-size: 60px; padding-top: 22px; }
.ktlogo img:hover {background: none;}
#navigationtop { font-size: 12px; color: #fff;}
#navigationtop ul li strong { display: block; padding-bottom: 7px; font-size: 14px; }
#navigationtop .ktwrap { padding-top: 60px; padding-bottom: 5px; height:71px; }
#floatnumber {
position: absolute;
top: -3px;
right: 150px;
z-index : 270;
}
PHP fragment:
<?php get_template_part( 'includes/template-parts/topbar' ); ?>
<?php } ?>
<?php
$disable_sidebar = of_get_option('disable_footer', '' );
if( $disable_sidebar['navbar']==0 ) { ?>
<div class="ktfullwidth" id="navigationtop">
<div class="ktwrap"> <div id="floatnumber"><img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660"></div>
<div class="ktlogo">
<?php
$disable_sidebar = of_get_option('disable_parts', '' );
if( $disable_sidebar['logo']==0 ) { ?>
<?php if ( of_get_option('logo') ) { ?>
<img src="<?php echo of_get_option('logo'); ?>" />
<?php } else { ?>
<a href="<?php echo home_url() ?>">
<?php if ( of_get_option('logotext') ) { ?>
<?php echo of_get_option('logotext', ''); ?></a>
<?php } else { ?>
Combined Effort</a>
<?php } ?>
<?php } ?>
<?php } ?>
</div>
You can change
<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul>
<div class="topsocial right">...</div>
into
<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul>
<div class="right">
<img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660">
<div class="topsocial right">...</div>
</div>
And then delete the othe image.
Without having read or tested your code in detail: If I got you right and you want to move the number with the bar then you have to put it within this fixed header. In the orignal code you can see that there are two overlapping headers and the number is NOT in the one with position fixed. Which there is
<div id="topmenu" class="ktfullwidth">
but in (and in your code seemingly as well)
<div class="ktfullwidth" id="navigationtop">
Put the number inside the #topmenu-div.
You might also be able to use position fied on the number itself, but i would recommend ot put it in the div.
Edit: I got confused by the names of the navigation-divs. I hope I got it right now.
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">
<?php print t('Skip to Main Content Area'); ?>
</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">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</div>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div id="site-name-wrapper" class="clearfix">
<?php if ($site_name): ?>
<span id="site-name"><?php print $site_name; ?></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
position is always relative to the next parent with an explicitly set position
If your logo is disappearing, it's probably because your header doesn't at least have position:relative set, or something similar occurring. Using Firebug or Chrome's inspect, can you see where the logo is?
Post your HTML, and CSS for the header/body, and we'll get to the bottom of it!
This does not fully answer your question, but as an aside, one thing I've learned since looking at CSS in the past couple weeks is that z-index only works on attributes with a position tag. In other words, in your case it's meaningless since it needs something to compare to. Adding a position: relative and a z-index to whatever is holding #logo should help.