WordPress.org

1. mattiecampbell
   Member
   Posted 2 years ago #

   Ok, so I have been searching everywhere for an answer to this and still haven't found anything so anything you can tell me would be great.

   Im currently working on a site, I need to be able to position the logo so it overlaps the corner of the content and spills onto the border (see attached image).

   Im not sure is css is the best way of doing it, but if someone could walk me through, that would be great.

   Please bear in mind that this image is photoshopped to show what i want.
   
   WHAT I WANT IT TO LOOK LIKE

   Cheers in advance.
   Mattie

2. mattiecampbell
   Member
   Posted 2 years ago #

   anyone? :(

3. mechx1
   Member
   Posted 2 years ago #

   Give us a chance here, you have asked a complex question

4. mattiecampbell
   Member
   Posted 2 years ago #

   ok, thanks mechx1 :D

5. mechx1
   Member
   Posted 2 years ago #

   You can't tilt an image in HTML (it would be great if you could). So, you will need to create your logo positioned in a rectangular image with a transparent background, then save as a PNG so you can have a transparent background. This can be absolutely positioned on the page over the background image, but you may need to have a fixed height declared on the containing DIV to take care of the way older versions of IE handle absolute positioning. You will need to assign z-index to the logo and the DIV containing the background so the logo floats over the background.
   Note: IE6 does not support alpha transparency natively, so if your audience includes that browser, you neeed a filter from the Microsoft site.

6. mattiecampbell
   Member
   Posted 2 years ago #

   I understand the theory, but its practically, how do i implement this?
   Im a bit rubbish at css, but i have an ok understanding of it. Could you give me either some code or instructions of how to implement this?

7. mattiecampbell
   Member
   Posted 2 years ago #

   Actually i think i have solved it....

   I put this in the CSS:

   #logo, #logo a { display: block; height: 150px; width: 325px; }
   #logo { position: absolute; top: 0px; left: 0px; }
   #logo a { background: transparent url(images/logo.png) top left no-repeat; text-indent: -9999em; }

   and implemented it through the header.php:

   <div id="logo">
   <div class="logo a">
   <a href="http://www.fracturetheatre.co.uk"></a></div>
   </div>

   Its seems to be working.

   Only problem is that is i shrink the window, the logo moves with the window, not the content. Anyone know how i can fix the logo to the content, while maintaining the positioning?

Topic Closed

This topic has been closed to new replies.