 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008Centering logo between left and right floats with different widths.
Hi, I would like to center a logo between left and right floats with different widths. The issue is that the logo should be centered with respect to the window, not the area between the left and right floats. Is there an easy way to do this? Amir In article <bd9a4063-49a3-40f6-a6cf-7af9e45d4019@k13g2000hse.googlegroups.com>, > Hi, > [quoted text clipped - 5 lines] > > Is there an easy way to do this? There are a few ways to do this. You might fancy this: <http://netweaver.com.au/alt/left_right_middlePic.html>  Signaturedorayme > In article > <bd9a4063-49a3-40f6-a6cf-7af9e45d4...@k13g2000hse.googlegroups.com>, [quoted text clipped - 13 lines] > > <http://netweaver.com.au/alt/left_right_middlePic.html> This approach doesn't work for me on IE 7 but it's fine with Firefox and Safari: http://chatbotgame.com Here's the html fragment: <div style="float:left">...</div> <div style="float:right">...</div> <div style="margin:auto;width:285px"><A HREF="http:// chatbotgame.com"><img width="285" border="0" src="http:// chatbotgame.com/ChatbotGame/chatbotgamelogo.png"></img></A></div> <div style="clear:both"></div> Amir > -- > dorayme In article <2db21061-cb14-4cb4-a102-6321c1b3de7a@k13g2000hse.googlegroups.com>, > > In article > > <bd9a4063-49a3-40f6-a6cf-7af9e45d4...@k13g2000hse.googlegroups.com>, [quoted text clipped - 27 lines] > chatbotgame.com/ChatbotGame/chatbotgamelogo.png"></img></A></div> > <div style="clear:both"></div> OK, I have not got IE7 right here so can't see what the trouble might be but I assume you are not worried about the middle dropping out of the line of the left and right floats? On my example that should not happen because of the min-width on body. It looks from your implementation that you have not copied this feature. Anyway, as I said, there are other ways and IE can be troublesome as it fails to adhere to standards. Lets try another approach: <http://netweaver.com.au/alt/left_right_middlePic2.html> Let me know how it goes in IE. Signaturedorayme > In article > <2db21061-cb14-4cb4-a102-6321c1b3d...@k13g2000hse.googlegroups.com>, [quoted text clipped - 37 lines] > because of the min-width on body. It looks from your implementation that > you have not copied this feature. It turns out that margin:auto only works in IE7 under certain conditions (see http://www.webdeveloper.com/forum/showthread.php?t=151555), and when it does work, it centers with respect to the available free area and not with respect to the window. > Anyway, as I said, there are other ways and IE can be troublesome as it > fails to adhere to standards. Lets try another approach: > > <http://netweaver.com.au/alt/left_right_middlePic2.html> The problem is that the widths of the left and right divs are unknown so I can't use this solution. Amir > Let me know how it goes in IE. > > -- > dorayme In article <c48e698a-7ba2-4d87-8827-7d1f033884db@p25g2000hsf.googlegroups.com>, > > Anyway, as I said, there are other ways and IE can be troublesome as it > > fails to adhere to standards. Lets try another approach: [quoted text clipped - 3 lines] > The problem is that the widths of the left and right divs are unknown > so I can't use this solution. OK, you want a general solution where either left or right float being wider gets the image dead centre, try this: <http://netweaver.com.au/alt/left_right_middlePic3.html> (There is a combined construction to hide stuff from both IE 6 and 7 in a conditional, I have simply put repeated styles for both) I use the rel positioning for IE because the pic holder div needs to be given a 100% width to tell it to calculate middle from the sides of the viewport (in effect, considering no margins on parents). But this then drops the div because there is no room for the floats any more! Never mind, we can up the images into line by pushing it with rel positioning. There is likely a better solution, but I had fun making this. Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.