Hello folks,
I using a marinnli giordani theme for my website customslipcovers.ca . I attempted to activate drop down menus today to no sucess. The tabs were squished together and the dropdown went behind my dynamic display block on the front page. However, my problem is that with my attempts to solve those issues I've created even bigger problems for myself. The entire page has shifted up and I can't get it back down. I'm 99% sure that the culprit is layout.css as I downloaded a fresh Marlini theme, uploaded layout.css and had no problems. Of course, I've created custom regions in my theme which I need to preserve. I'm still learning CSS and I'm frustrated at this point and could really use some help. Once again the site is:
The code for layout.css is:
/*- Marinelli styles - Drupal6x - 16/04/09 @ author:signalkuppe: www.signalkuppe.com */
/* ########## Layout ########## */
/* ########## In the css you will find everything about template's layout (positions, margins ecc..) ######## */
* {padding: 0;margin: 0;}
body {margin:40px 0 20px 0;}
#logo{
/* be careful: max height of logo image : 180px (as header's height) */
/* assuming some defaults: modify margins as required */
margin-top: 10px; /* "n px" where n=(180-logo_height)/2 to have image vertically centered */
margin-right: -30px;
margin-bottom: 0px;
margin-left: -550px;
/* logo image on the right */
float: center;
padding:0px;
position: relative;
}
#logo img{
padding:0;
margin:0;
}
#cart {
position:absolute;
top:20px;
right:95px;
}
#top-banner {
float: right;
padding-top: 1px;
padding-bottom: 50px;
margin-right: 35px;
margin-top:1px;
width: 728px;
height: 250px;
}
#page {
margin: 0px auto;
position: relative;
width: 970px; /* The entire template's width is set in this class. */
}
#topcontent1 {
position:relative;
float:right;
top:-5px;
width:765px;
}
#utilities {
padding: 0;
margin: 0px auto;
width:970px; /* match page width */
height:25px;
position:relative;
}
#header {
padding: 0;
padding-bottom:150px;
margin: 0;
height: 180px;
position:relative;
}
#submenu { /*secondary links*/
padding:9px 10px 9px 14px;
}
.wrapper{ /*wrapper:defines whole content margins*/
margin:15px;
}
#primary {
float: left;
margin: 0px;
/* width set with the two classe below */
}
.short{
width:550px; /* if we don't have the second sidebar */
}
.long{
width:745px; /* otherwise go wide... :) */
}
.path{ /*breadcrumb*/
padding-bottom:3px;
}
.path p span { /* you are here text */
padding:5px;
margin-right:10px;
}
#primary .singlepage .path p {
letter-spacing:0px;
margin-top:-2px;
}
#primary .singlepage {
padding:0 0 15px 0px;
}
.preview .node{ /*node preview*/
margin-bottom:10px;
padding:20px;
}
#page #primary .drdot{ /* sistema il float (use this to stop floating elements) */
clear:both;
}
#page #primary .drdot hr{
display:none;
}
#page #primary .tabs{ /* tabs */
margin:20px 0 20px 0;
}
#header h1, #header p.sitetitle { /* site title */
margin: 0px;
padding: 20px 0 12px 35px;
}
#header p.slogan{ /*site slogan*/
padding: 8px 0 10px 60px;
display: block;
}
#utilities form { /*search box*/
position:absolute;
right:0;
bottom:2px;
}
#utilities label{
display:none;
}
#utilities input {
margin-top:10px;
margin-bottom:5px;
float:left;
}
#utilities input.form-submit{ /*search box input*/
margin: 10px 4px 0px 4px;
padding: 1px;
}
#utilities input.form-text {
padding:2px;
}
#utilities #plinks {/*- Primary links in Header */
position:absolute;
left:-7px;
bottom:0px!important;
bottom:-1px;
}
#utilities #plinks ul li {
display: inline;
float:left;
margin-right: -2px;
}
.admintab {
/*_padding: 5px 15px 6px;*/ /* IE hack */
}
* html .admintab { padding: 5px 15px 6px } /* IE hack */
/*- Sidebar Subpages Menu */
.lsidebar {
width: 180px;
float: left;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:15px;
}
.rsidebar {
width: 180px;
float: left;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:15px;
}
.contentleft {
width: 450px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.contentright {
width: 450px;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#sitemission{ /*site mission*/
margin:0px 0 20px 0;
padding:15px;
}
/*block styles*/
.defaultblock{
margin:0px 0 20px 0;
}
.defaultblock .blockcontent{
margin:0px 0 20px 0;
}
.loginblock{
margin:0px 0 20px 0;
padding:0px 0 5px 0;
}
form#user-login-form label{
margin-bottom:3px;
}
.loginblock ul li{
margin:0;
padding:0;
}
.defaultblock .blockcontent, .loginblock .blockcontent{
padding:0 10px 0 10px;
}
.defaultblock h2{
padding:8px 4px 0px 12px;
margin-bottom:10px;
}
.loginblock h2{
padding:4px;
margin:0px 0 10px 0;
}
#primary .item {
margin: 0 0 15px 0;
padding: 0;
}
#primary .item .itemhead {
margin: 0 0 5px 0;
padding: 0;
}
#primary .item .itemhead h3 {
display: block;
margin: 0 0 0 0 !important;
margin: 0 0 0 10px;
padding: 0;
}
#primary .item .itemtext {
margin: 0;
padding: 0;
}
#primary .item .itemtext p,
#primary .item .itemtext ul,
#primary .item .itemtext ol,
#primary .item .itemtext div,
#primary .item .itemtext blockquote {
margin: 0 0 0 0 !important;
margin: 0 0 0 10px;
}
#primary .item .itemhead p.metadata {
display: block;
margin: 2px 0 0 0 !important;
margin: 2px 0 0 10px;
}
/*paragraph */
#primary .singlepage p{margin:0 0 10px 0;}
/*content headings */
#primary .singlepage h1,
#primary .singlepage h2,
#primary .singlepage h3,
#primary .singlepage h4,
#primary .singlepage h5,
#primary .singlepage h6{
margin:0px 0 10px 0;
padding:0;
}
#primary .singlepage h1{margin-bottom:12px;}
#primary .singlepage h2.with-tabs{margin-bottom:30px;}
#primary .singlepage p.small {
margin-top: 10px;
padding-top: 5px;
}
/*images in content */
#primary img {
margin: 0 15px 0px 0;
padding: 4px;
}
#primary .singlepage img.destra { /*use this class to align images to the right*/
margin: 0 0px 0px 15px;
padding: 4px;
float: right;
}
#primary .singlepage img.sinistra { /*use this class to align images to the left*/
margin: 0 15px 0px 0;
padding: 4px;
float: left;
}
#primary .singlepage img.altobasso {
margin:0px;
display:block;
padding: 0px;
float:none;
}
#footer {
width: 970px;
margin: 0 auto;
padding:15px 0;
}
.clear {
clear: both;
margin: 0;
padding: 0;
}
.itemtext ol, .itemtext ul {
padding: 0 0 0 35px;
margin: 0;
}
.itemtext ol li, .itemtext ul li {
margin: 0 0 3px;
padding: 0;
}
.secondary div p {
margin-top: 0.5em;
}
.secondary ul, .secondary ol, .secondary div {
margin: 5px 0 0;
padding-left: 0;
}
/*----------list styles----------*/
.tabs ul li {
background:none;
padding:0;
margin:0;
list-style:none;
}
#primary ul {
margin:10px 0 10px 0;
}
.item-list ul li{
margin:0 0 1px 0px;
padding: 0px 0 0px 22px;
}
#primary .singlepage .node .content li,
#primary .singlepage .comment li{ /* lists in node content and comments */
margin:2px 0 2px 0px;
padding-left:22px;
}
#primary .singlepage .node .content ol li,
#primary .singlepage .comment ol li{ /*ordered lists in node content*/
margin:2px 0 2px 0px;
padding-left:0px;
}
#primary .singlepage .node .content ul,
#primary .singlepage .comment ul,
#primary .singlepage .node .content ol,
#primary .singlepage .comment ol,
#primary .singlepage form ul{
margin:10px 0 10px 25px;
}
#primary .singlepage .comment .links ul{
margin-left:0px;
}
#primary .singlepage .view-og-ghp-ron .node ul.links,
#primary .singlepage .view-og-ghp-ron .meta .terms ul.links
{
margin:10px 0 10px 0px;
}
.rsidebar ul.menu li,
.rsidebar .item-list ul li,
{
padding:none;
}
#user-login-form ul li{
margin:5px 0 5px 0;
}
ul.inline li {
margin: 0;
padding: 0 1em 0 0;
}
ul.links li.comment_add{
padding:0.2em 0 0 23px;
}
/*---------------tables---------------*/
table{
margin:15px 0 15px 0;
}
td{
padding:5px;
}
th{
padding:5px;
}
#primary th img{
margin:0px 0px 0px 5px;
padding:0px;
}
#system-themes-form table img.screenshot /* fix for themes page */{width:80px;}
tr:first-child td.region,tr:first-child td.module,tr:first-child td.container {border-top-width:0;}
.sticky-table { /*fix report tab*/
clear:left;
padding:0px;
overflow:hidden;
}
hr {
margin: 0;
padding: 0;
height: 1px;
}
dl {margin: 0;}
dl dd {margin: 0.5em 0 .5em 1.5em;}
dl dt{
padding:0 0 0 20px;
margin:4px 0 4px 0;
}
.messages ul {margin:0;}
.form-checkboxes, .form-radios,
.form-checkboxes .form-item,
.form-radios .form-item
{margin: 0.25em 0;}
#watchdog-form-overview .form-submit,
.confirmation .form-submit,
.search-form .form-submit,
.poll .form-submit,
fieldset .form-button, fieldset .form-submit,
.sidebar .form-button, .sidebar .form-submit,
table .form-button, table .form-submit
{ margin: 0;}
fieldset ul.clear-block li{
margin: 0;
padding: 0;
}
.box {margin-bottom: 2.5em;}
#primary .content blockquote{
margin:15px;
padding:12px;
}
/*admin panel styles*/
div.admin-panel {
margin: 0;
padding: 5px 0px 15px 5px;
}
div.admin-panel .description {
margin: 0 0 3px;
padding: 2px 0 3px 0;
}
div.admin-panel .body {
padding: 0 0px 2px 0px;
}
div.admin {
padding-top: 15px;
}
div.admin .left {
float: left;
width: 45%;
margin-left: 1em;
}
div.admin .right {
float: right;
width: 45%;
margin-right: 1.1em;
}
/*admin by module*/
div.bymodule ul li{ margin:3px 0 3px 0; padding:0px 0 0 22px;}
#primary .messages{padding:10px;}
#primary .messages .status{padding:10px;}
#primary .help .help{
padding:5px;
margin:15px 0 15px 0;
}
#primary .help .help ul li{padding-left:15px;}
/*comments & links*/
#comments{margin-top: 2em;}
.commentTitle{
margin-bottom:10px;
}
#comments .content{margin-bottom:5px;}
.submitted{margin-bottom:10px;}
.comment{margin:0 0 2em;padding:1em;}
.links{
margin-top:1em;
clear:both;
}
.linksteaser{
padding-bottom:15px;
margin-bottom: 15px;
}
.linksteaser ul li{margin-right: 5px;}
.comment .links ul li{
padding-left: 23px;
padding-top:1px;
padding-bottom:1px;
}
#primary .links li.comment_forbidden,
#primary .links li.comment_comments,
#primary .links li.blog_usernames_blog first
{padding-left:22px;}
.links li.comment_add{padding:0px 0 0 23px;}
.links .node_read_more{padding:1px 0 0 23px;}
/*taxonomy terms in node*/
.taxonomy{
margin:15px 0 25px 0;
padding-top:10px;
clear:left;
}
.taxonomyteaser{
margin:10px 0 15px 0;
padding-bottom:10px;
clear:left;
}
.taxonomy span{
padding-left:21px;
padding-right:10px;
}
p span.tagsteaser{padding-left:23px;}
.preview .node .taxonomy ul li span{
padding-left:3px;
padding-right:3px;
} /*no key icon in preview */
/*meta in nodes*/
.metanode{margin:10px 0 20px 0;}
.metanode span{padding-bottom:5px;}
.metanode span.author,
.submitted a{padding-left:21px;}
.metanode span.date{padding-left:21px;}
/*pager*/
.item-list ul.pager{
margin:0px;
padding-top:10px;
}
.item-list .pager li{
margin:0px;
padding:3px;
}
.item-list .pager li.pager-current{padding:4px;}
/*avatar*/
#primary .picture{
float:right;
margin:8px 0 4px 8px;
}
#primary .picture img{
float:none;
margin:0 0 4px 5px;
padding:4px;
}
/*signature in 6x */
.firma{
margin:15px 0 10px 0px;
padding-top:5px;
}
/*forums*/
#primary .singlepage #forum ul.links li.forum{padding-left:22px;}
.singlepage #forum .name{margin-bottom:8px;}
#forum .links{
margin:0px;
display:inline;
}
/*sticky icon*/
#primary img.sticky{
float:none;
margin:0px 0 0 8px;
padding:0px;
}
/*profile*/
.profile h3{margin-bottom:20px;}
/*book & forum navigation*/
.book-navigation, .forum-topic-navigation{margin-top:10px;}
/*attachments */
#page table#attachments tr td{padding:4px;}
/*pools*/
#page .poll{
clear:both;
margin-top:3px;
}
.poll .title{margin:8px 0 8px 0;}
.poll .percent, .pool .text{margin:1px 0 1px 0;}
#page .poll .form-item{margin:8px 0 8px 0;}
#page .poll .choices{margin:0px;}
/*book links */
.links .book_printer{padding-left:22px;}
.links .book_add_child{padding-left:22px;}
#primary .content .book-navigation .menu li{
padding-left:22px;
margin:4px 0 4px 0;
}
/*search results*/
#primary .singlepage .search-results dt{margin-top:10px;}
/* Collapsible fieldsets*/
fieldset {
margin: 1em 0;
padding: 1em;
display:block;
clear:left;
width:95%;
overflow:visible;
}
/* Targets IE 7. Fixes background image in field sets. */
*:first-child+html fieldset {
padding: 0 1em 1em;
background-position: 0 0.65em;
}
*:first-child+html fieldset > .description, *:first-child+html fieldset .fieldset-wrapper .description {
padding-top: 1em;
}
fieldset legend {
/* Fix disappearing legend in FFox */
display: block;
}
*:first-child+html fieldset legend, *:first-child+html fieldset.collapsed legend {
display: inline;
}
html.js fieldset.collapsible{
margin:5px 0 5px 0;
display:block;
float:left;
}
html.js fieldset.collapsed{
margin:5px 0 5px 0;
display:block;
clear:left; /* avoid fieldset overlapping in ie */
}
fieldset ul.clear-block li {
margin: 0;
padding: 0;
}
/*teaser checkbox */
.teaser-checkbox{margin-bottom:10px;}
/*aggregator styles*/
.feedcontainer{
margin-left:0px;
margin-bottom:10px;
margin-top:10px;
position:relative;
}
#primary .singlepage .feedcontainer h2{margin-bottom:10px;}
#primary .singlepage .feedsummary {padding-bottom:10px;}
#primary .singlepage #aggregator li { /*aggregator list*/
margin:3px 0 3px 18px;
padding:0 0 0 3px;
}
/*taxonomy term page */
.terminfo{
padding:15px;
margin-bottom:10px;
}
/*forms*/
.form-submit{
padding:2px;
margin-top:0px;
}
/*first time homepage */
#first-time{padding:10px;}
#first-time ol li{margin-left:30px;}
/* og */
.og-mission{
margin:15px 0 25px 0;
padding:15px;
}
.view-og-ghp-ron{
margin:25px 0 25px 0;
clear:both;
padding-top:15px;
border-top:1px dashed #ccc;
}
Comments
Marinelli Giordani* helps if
Marinelli Giordani* helps if you spell the theme right!
What look?
Not sure exactly what look you are going for...but by editing the utilities id and putting a top margin on it you could drop those links below the logo.
#utilities {
padding: 0;
margin-top:100px;(or so)
width:970px; /* match page width */
height:25px;
position:relative;
}
Give me more details of the look you are trying to achieve and perhaps I can be of more help. Also download firebug for firefox(and firefox if you dont have it). This is a great web design tool that lets you easily ID different pieces of a template page built by someone else. This makes altering the correct style much easier.
Schnelle, Thank you for the
Schnelle,
Thank you for the help. I have downloaded firebug already and it has helped me but unfortunately I don't always understand what it is telling me. I've edited the site since I posted but I think I've messed it up so bad that I am going to have to do a fresh theme installation. When the menu drops down the drop down items are appearing behind the dynamic block and I want them to appear over the block so they can be viewed.