September 17, 200917 yr Hi I am a total novice to web design and have been trying to create a simple web page for my daughter. She has asked for several randomly placed picture hyperlinks on her home page. I have worked out how to do this using css to place the various images: <style type="text/css"> .lefttop{position: absolute; top: 145px; left: 175px} .leftmiddle{position: absolute; top: 345px; left: 175px} .leftbottom{position: absolute; top: 545px; left: 175px} etc. etc . . . . </style> However, it looks great when using one screen resolution, but on my laptop, which is set to 800 X 600, scroll bars appear as it is too large for the screen. I have trawled existing topics in this forum but cannot find a definitive solution. Therefore any help would be gratefully received. Many thanks, Mark. Edited January 27, 201016 yr by Sam G added [code] tags
September 17, 200917 yr You may need to wrap the page in a div like this: in your CSS: #wrapper { width:100%; min-width:800px; } then in your body... <body> <div id="wrapper"> .....all you pics and html.... </div><!-- end Wrapper --> </body> note: like all useful positioning rules, min-width doesn't work in IE6 of course.
September 17, 200917 yr I suppose the first thing to say is that scrollbars are normal if the viewport resolution isn't big enough. So first you have to decide what resolution you want to desighn for. If it is 800*600 the width should be under 770px to allow for a vertical scrollbar if the content doesn't fit the height. Make a container and center it so that at larger resolutions your page is centered which looks better. <style type="text/css"> #container { width: 770px; position: relative; margin: auto; } .lefttop{position: absolute; top: 145px; left: 175px} .leftmiddle{position: absolute; top: 345px; left: 175px} .leftbottom{position: absolute; top: 545px; left: 175px} etc. etc . . . . </style> and markup:- <div id="container"> <div class="lefttop">.........image content.........</div> <div class="leftmiddle">.........image content.........</div> <div class="leftbottom">.........image content.........</div> </div><!--#container closing tag--> The position: absolute divs will take their positions from the container top left corner instead of the viewport top left corner and so they will move as the container centers but retain their positions inside. Auto margin makes them equal each side. The position: absolute positions plus the width of the images needs to fit inside the 770px container. Edit the #container width if you want to set it for a larger viewport and have the images more spaced out, but then you will get a horizontal scrollbar in 800*600. Edit: Stevo's method is an alternative but with min-width: 800px you will always get a horizontal scrollbar in 800*600 in IE and other browsers which always show a dummy vertical scrollbar.
September 17, 200917 yr Author Stevo and Wickham: I can't thank you guys enough! Probably saved me another day or so pulling my hair out!
Create an account or sign in to comment