Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    I'm working on a layout with a floating logo as part of a header.

    I'd like the logo to sit at the top right of the browser no matter how wide the window or screen resolution. But when/if the window is made smaller than a specific width, I'd like it to stop moving.

    I've put together a quick test to show the layout width, a floating logo, and the position I'd like the logo to stop moving. The layout will be a fixed width and be centered in the window, the logo will float to the right, but I don't want it to cover the layout if the window becomes too small.

    http://www.paultrautwein.com/logotest/test.html

    So for clarification: the logo will float to the right, but stop when it overlaps the layout at a specific location.

    Any suggestions would be greatly appreciated.
    Thank you.

  2.  

  3. #2
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    I found a solution, if anyone's interested:

    http://www.paultrautwein.com/logotest/solution.html

    I put a table with a width of 100% within my "logo" class div with a 1x1 pixel gif (green to demo) to hold the logo in place when the window shrinks smaller than the layout.

    If I replace the green spacer with a transparent gif and remove the table border, it should do what I want it to do. I'll just use higher or lower z-indexes to place other objects above or below it.

    Tables, it seems, can still be viable, unless someone can can come up with a more elegant solution using only CSS. A friendly challenge, my attempts at a non-table solution didn't work.

    p

  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Not sure by maybe giving the image a margin-left: value of the maximum it is allowed to go to.

  5. #4
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    Bingo!

    http://www.paultrautwein.com/logotest/solution2.html

    I had to adjust my "logo" class by adding a width of 100% and a text-align to the right, but it worked. A simple and elegant solution. Thanks.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

float logo in header css

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com