tal Posted July 9, 2009 Share Posted July 9, 2009 Hello I am building a site with html and css only, and having problems with resizing in the browser I have an image as the content of my page (768px,652px)I place the image at the center top of the page my problem with the browser zoom is, that when i zoom in and my picture becomes bigger then my physical screen <body> tagit does not fit any more with out a scroll bar and then one side of the picture is being cut out (so i can not see it, even when scrolling)how can i still see the hole of my picture when zooming in (and scrolling)what can i do to have my <body> tag be at the middle of the page, and not start counting at one of the sides left/right ? thanks Talmy html file---------------------<html dir=rtl> <head> <title>my page</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body style="height:652px;"> <div class="middle"> <div class="content"> <img src="pictures/mypic.gif"> </div> </div> </body></html>my css file---------------------body { margin:0;padding:0; border-style:solid; border-color:red; }div.middle { border-style:solid; border-color:blue; position:relative; right:50%; height:inherit; width:0px; }div.content { border-style:solid; border-color:green; position:relative; left:384px; width:768px; height:inherit; } Link to comment Share on other sites More sharing options...
glopal Posted July 9, 2009 Share Posted July 9, 2009 Just put width:100%; in the body block. Link to comment Share on other sites More sharing options...
tal Posted July 10, 2009 Author Share Posted July 10, 2009 hello glopalhave you tried doing it your self, because it doesn't work for me there is almost all of the code for it in my first post thankstal Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted July 10, 2009 Share Posted July 10, 2009 Have you tried this? body { margin: 0 auto; padding: 0; border: thin solid red;} I'm assuming that you want to center the body in the browser, but now you have to define a width for the body either less than 100% or in a pixel amount. I'm not really sure what you want to do. Link to comment Share on other sites More sharing options...
tal Posted July 10, 2009 Author Share Posted July 10, 2009 hy FirefoxRockswhat i am trying to do is to have my picture (that is my content for the site)at the top center of the page and be able to zoom-in to the max, and still be able to scroll left right up and down and see my picture (my content)i only added the colored borders in order to see the problem more clearly, they are not part of my design i am doing my tests on firefox mainly thanks for helping tal Link to comment Share on other sites More sharing options...
dsonesuk Posted July 10, 2009 Share Posted July 10, 2009 me thinks its the right 50% causing the problem, try ths<html dir=rtl><head><title>my page</title><link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">body {margin:0;padding:0;border-style:solid;border-color:red;}div.middle{border-style:solid;border-color:blue;width:770px;margin: 0 auto;overflow:hidden;}div.content{border-style:solid;border-color:green;width:768px;} </style></head><body><div class="middle"><div class="content"><img src="pictures/mypic.gif" width="768" height="652"></div></div></body></html> Link to comment Share on other sites More sharing options...
tal Posted July 11, 2009 Author Share Posted July 11, 2009 wow thanks dsonesukthat really helped the thing i was missing is the "margin: 0 auto;"insted of my "right:50%;"now it works as i wanted it thanks againhere is my code as it works i kept the position:relative; as now i can absolute position links and buttons on my content thank you all for helping and thank you dsonesukhtml file-----------<html dir=rtl> <head> <title>my page</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body style="height:652px;"> <div class="content"> <img src="pictures/my_pic.gif" width="768" height="652"> </div> </body></html>css file-----------body { margin:0; padding:0; border-style:solid; border-color:red; }div.content { border-style:solid; border-color:blue; width:768px; margin: 0 auto; position:relative; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.