By rl on

I have been playing around with the Garland theme and would like some pointers on how to absolutely position a large logo that will "float" over a little into the navigation area. This is probably more of a CSS question, but which class id's would I look to change to make this change.

Thanks.

Rich
(rl)

⋅ Categories: Drupal 5.x

Comments

rl’s picture

rl commented

Adding the following:

#logo {
position: absolute;
top: 0px;
}

This should be placed after the lines:

#wrapper #container #header #logo-floater {
position: absolute;
}

which are about 33% down in the file.

Rich

rl’s picture

rl commented

I tried this with IE7 and the logo way overhangs the navigational block. I am trying to move the logo up tight to the top of the page. Any thoughts?

Rich

fox69’s picture

fox69 commented

There's a special stylesheet of 'fixes' for IE7, so maybe have a look there. It's called fix-ie.css.

The other option is to test for the browser types using php and include alternate code or fixes either in the XHTML or the styles. If you look in page.tpl.php you will see that it includes the fix-ie.css as the result of checking for the IE7 browser:

<!--[if lt IE 7]>
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie.css";</style>
    <![endif]-->

Still you are on your own. I am so newb at Drupal/php when you look up 'Drupal/php newb' in the dictionary it says 'see fox69'.

MatthijsG’s picture

MatthijsG commented

I have also problems with this ... look to http://www.aangeenbrug.org/site/ : in Fx its alright, but not in IE7 :(

The code in style.css is now

#logo {
position: absolute;
top: -66px;
right: -800px;
display: inline;
z-index: 5;
border: 0px solid rgb(0,0,0);

}

Changes in fix-ie.css does not have any effects ??

======
There are 10 people who can count binary
They who can and they who don't

MatthijsG’s picture

MatthijsG commented

Dear Lenn-art,

I found the solution here: http://drupal.org/node/109292#comment-193605

[code]
So, setting the z-index to 10 in "#wrapper #container #header #logo-floater" (line 320) made IE render the logo floating over the other images. This might fix your issue, if the logo image is not too large.
[/code]

O wait, i'm replyin to myself ;-)

There are 10 people who can count digital: they who can and they who don't

======
There are 10 people who can count binary
They who can and they who don't

zahor’s picture

zahor commented

I believe the quote is "There are 10 types of people in the world: Those who understand binary, and those who don't..."