By mrjw on
Hello
Drupal: 4.7
Theme: Bluemarine
File: style.css
I cannot find the part in the style.css that controls the second header block's verticle alignment
Heres a ruff draft of what I mean
*******LOGO*******
-------Header1---------
-------Header2---------
And heres what it looks like now
*******LOGO*******
-------Header1---------
-------Header2---------
The first header block is acting just fine after some style.css editing. But I can't get the "Header2" to move up to the bottom of Header1
Anyhelp would be appreciated!
Heres a list of my style.css
/* $Id: style.css,v 1.13 2006/04/03 22:20:48 unconed Exp $ */
/*
** HTML elements
*/
body {
color: #000;
background-color: #fff;
font: 76% Verdana, Arial, Helvetica, sans-serif;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0em;
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3, h4, h5, h6 {
font-size: 1.1em;
}
p {
margin-top: 0.5em;
margin-bottom: 0.9em;
}
a {
text-decoration: none;
font-weight: bold;
}
a:link {
color: #39c;
}
a:visited {
color: #369;
}
a:hover {
color: #39c;
text-decoration: underline;
}
fieldset {
border: 1px solid #ccc;
}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 1px solid #ddd;
}
table {
font-size: 1em;
}
.form-item label {
font-size: 1em;
color: #222;
}
.item-list .title {
font-size: 1em;
color: #222;
}
.links {
margin-bottom: 0em;
}
.comment .links {
margin-bottom: 0em;
}
#header {
margin-left: 50px;
margin-top: -20px;
background-color: #fff;
}
#logo {
vertical-align: middle;
border: 0;
}
#logo img {
margin-left: -48px;
margin-bottom: -45px;
padding: 0em 1.0em 0em 1em;
border: 0;
}
#menu {
padding: 0.5em 0.5em 0 0.5em;
text-align: right;
vertical-align: middle;
}
#primary {
font-size: 1.0em;
padding: 0em 0.8em 0.5em 0;
color: #9cf;
}
#primary a {
font-weight: bold;
color: #fff;
}
#secondary {
padding: 0 1em 0.5em 0;
font-size: 0.8em;
color: #9cf;
}
#secondary a {
font-weight: bold;
color: #9cf;
}
#search .form-text, #search .form-submit {
border: 1px solid #369;
font-size: 1.1em;
height: 1.5em;
vertical-align: middle;
}
#search .form-text {
width: 8em;
padding: 0 0.5em 0 0.5em;
}
#mission {
background-color: #369;
padding: 1.5em 2em;
color: #fff;
}
#mission a, #mission a:visited {
color: #9cf;
font-weight: bold;
}
.site-name {
margin: 0.6em 0em 0em 0em;
padding: 0em;
font-size: 2em;
}
.site-name a:link, .site-name a:visited {
color: #fff;
}
.site-name a:hover {
color: #369;
text-decoration: none;
}
.site-slogan {
font-size: 1em;
color: #eee;
display: block;
margin: 0em 0em 0em 0em;
font-style: italic;
font-weight: bold;
}
#main {
/* padding in px not ex because IE messes up 100% width tables otherwise */
padding: 1px;
background-color: #EAEAEA;
width: 560px;
margin-left: 0%;
border: 2px solid #C1C1C1;
}
#mission, .node .content, .comment .content {
line-height: 1.4;
}
#help {
font-size: 0.9em;
margin-bottom: 1em;
}
.breadcrumb {
margin-bottom: .5em;
}
.messages {
background-color: #eee;
border: 1px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
#sidebar-left, #sidebar-right {
background-color: #ddd;
width: 374px;
border: 2px solid #C1C1C1;
padding: 10px;
vertical-align: top;
}
#footer {
background-color: #eee;
padding: 1em;
font-size: 0.8em;
}
/*
** Common declarations for child classes of node, comment, block, box, etc.
** If you want any of them styled differently for a specific parent, add
** additional rules /with only the differing properties!/ to .parent .class.
** See .comment .title for an example.
*/
.title, .title a {
font-weight: bold;
font-size: 1.3em;
color: #777;
}
.submitted {
color: #999;
font-size: 0.8em;
}
.links {
color: #999;
}
.links a {
font-weight: bold;
}
.block, .box {
padding: 0 0 1.5em 0;
}
.block {
}
.block .title {
margin-bottom: .25em;
}
.box .title {
font-size: 1.1em;
}
.node {
margin: .5em 0 2em 0;
}
.sticky {
padding: .5em;
background-color: #eee;
border: solid 1px #ddd;
}
.node .content, .comment .content {
margin: .5em 0 .5em 0;
}
.node .taxonomy {
color: #999;
font-size: 0.8em;
padding: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
margin: 0.5em;
}
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title a {
font-size: 1.1em;
font-weight: normal;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 1px solid #abc;
float: right;
margin: 0.5em;
}
/*
** Module specific styles
*/
#aggregator .feed-source {
background-color: #eee;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0 1em 0;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
color: #999;
font-style: italic;
font-size: 0.9em;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#forum table {
width: 100%;
}
#forum td {
padding: 0.5em 0.5em 0.5em 0.5em;
}
#forum td.forum, #forum td.posts {
background-color: #eee;
}
#forum td.topics, #forum td.last-reply {
background-color: #ddd;
}
#forum td.container {
background-color: #ccc;
}
#forum td.container a {
color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #abc;
padding: .5em;
margin: 1em 0em 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
.calendar a {
text-decoration: none;
}
.calendar td, .calendar th {
padding: 0.4em 0;
border-color: #888;
}
.calendar .day-today {
background-color: #69c;
}
.calendar .day-today a {
color: #fff;
}
.calendar .day-selected {
background-color: #369;
color: #fff;
}
.calendar .header-week {
background-color: #ccc;
}
.calendar .day-blank {
background-color: #ccc;
}
.calendar .row-week td a:hover {
background-color: #fff; color: #000;
}
Comments
don't forget includes/drupal.css
don't forget includes/drupal.css
a good tool to get familiar with is the web development module for the firefox browser. this helps distinguish what is going on with css.
Sorry I am a Drupal
Sorry I am a Drupal beginner, include/drupal.css?
what is this? where does it go?
its another .css file that
its another .css file that gets used to render your website and its in the /misc folder not inside includes. my apologies.
And i'd put the line
And i'd put the line "include/drupal.css" in my style.css at the very top?
no. i bring up drupal.css
no.
i bring up drupal.css because there is also css in it that your site uses. I'm trying to make you aware that style.css is not the only css file that drupal uses. Which means if you cant find what you need in style.css, have a look at the drupal.css file in the misc folder of your drupal installation.
using the firefox browser and the web developement add on will show you these kinds of things.
After looking through the
After looking through the drupal.css file I dont think the drupal.css is what I'm needing to edit, I'm pretty sure what im looking for will be in the style.css I just dont know which part of the style.css I should edit for this desired effect
Did you find your answer?
I'm having the same problem in bluemarine...