Jump to content

Resizeing <body>


tal
 Share

Recommended Posts

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

Guest FirefoxRocks

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

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

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

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; }

Edited by tal
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...