melcebu Posted May 20, 2012 Share Posted May 20, 2012 i have done a web using absolute for positioning but had problems and was advised to use float and margins now the pages look ok in the browser until i press the minimise button to compress the page then the images blend into each other is there a simple way to stop this i have noticed with pro web pages if you minimise the page a scroll appears on the bottom. Link to comment Share on other sites More sharing options...
eTianbun Posted May 20, 2012 Share Posted May 20, 2012 Use: min-width in the container of the page content area.e.g: min-width:1200px Link to comment Share on other sites More sharing options...
melcebu Posted May 20, 2012 Author Share Posted May 20, 2012 thanks i will have to look at more of the tutorials on here in future before i do things, thanks again Link to comment Share on other sites More sharing options...
melcebu Posted May 27, 2012 Author Share Posted May 27, 2012 tried using min-width with percentage instead of pix but does not work, can i make page fit on to smaller screen ie older smaller laptop and still scroll Link to comment Share on other sites More sharing options...
dsonesuk Posted May 27, 2012 Share Posted May 27, 2012 Think about it! the point of min-width: is to prevent the page becoming to small width wise that it starts breaking the design layout. using a percentage 50%, on 1024px; means you want it to stop shrinking less than 512px, but when you take it down to 512px, the min-width: rule has changed to 256px, it adjusts to the current 100% width of the parent element. that why you use a pixel unit NOT percentages. parent element of below would be the <body>...</body> #wrapper {min-height: 400px; min-width:800px; width:80%; background-color:#996699; margin: 0 auto;} <div id="wrapper"></div> Link to comment Share on other sites More sharing options...
melcebu Posted May 27, 2012 Author Share Posted May 27, 2012 thanks for that i think this old laptop i'm using could be the problem as when i look at some pro sites like dream templates the page is too big for this screen but ok on a pc. my friends son has asked me to do a site for him for his sons christening pictures could you recomend a tutorial on here that would help me float or position pics and captions to both left and right of a page i tried it with some old pics and it looked ok in ie but not good when you opened it with firefox.thanks again for your help Link to comment Share on other sites More sharing options...
dsonesuk Posted May 27, 2012 Share Posted May 27, 2012 (edited) p {margin: 0.9em 0 }#wrapper {min-height: 400px; min-width:800px; width:80%; background-color:#996699; margin: 0 auto; overflow:hidden;}.left, .right {margin:10px 10px 0;}.left{ float:left;}.right {float:right;} <div id="wrapper"><div class="left"><img src="image01.jpg" alt="" /><p>Some text here</p></div><div class="right"><img src="image02.jpg" alt="" /><p>Some text here</p></div><p>Nisi ut aliquid ex ea commodi consequatur? Vel illum qui dolorem eum fugiat excepturi sint occaecati cupiditate non provident, temporibus autem quibusdam. Id est laborum et dolorum fuga. Aut odit aut fugit, consectetur, adipisci velit, id quod maxime placeat facere possimus. Quo voluptas nulla pariatur? Itaque earum rerum hic tenetur a sapiente delectus, tempora incidunt ut labore et dolore et quasi architecto beatae vitae.</p><p>Quis autem vel eum iure reprehenderit qui in ea voluptate nisi ut aliquid ex ea commodi consequatur? Itaque earum rerum hic tenetur a sapiente delectus, velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat. At vero eos et accusamus et iusto odio praesentium voluptatum deleniti magnam aliquam quaerat voluptatem. Accusantium doloremque laudantium, dignissimos ducimus qui blanditiis id quod maxime placeat facere possimus. Totam rem aperiam, quia voluptas sit aspernatur temporibus autem quibusdam. Et harum quidem rerum facilis est nam libero tempore, ut aut reiciendis voluptatibus maiores alias.</p><p>Cumque nihil impedit quo minus at vero eos et accusamus et iusto odio iste natus error sit voluptatem. Omnis voluptas assumenda est, qui dolorem ipsum quia dolor sit amet, qui ratione voluptatem sequi nesciunt. Totam rem aperiam, sed quia consequuntur magni dolores eos praesentium voluptatum deleniti. Excepturi sint occaecati cupiditate non provident, ###### soluta nobis est eligendi optio id est laborum et dolorum fuga. Eaque ipsa quae ab illo inventore veritatis sed ut perspiciatis unde omnis omnis voluptas assumenda est.</p><p>Itaque earum rerum hic tenetur a sapiente delectus, omnis dolor repellendus. Quis nostrum exercitationem aut odit aut fugit. Omnis dolor repellendus.</p><p>Totam rem aperiam, cumque nihil impedit quo minus neque porro quisquam est. Tempora incidunt ut labore et dolore quo voluptas nulla pariatur? Consequatur aut perferendis doloribus asperiores repellat. Eaque ipsa quae ab illo inventore veritatis et harum quidem rerum facilis est id quod maxime placeat facere possimus. Magnam aliquam quaerat voluptatem. Quo voluptas nulla pariatur? Sed quia consequuntur magni dolores eos omnis dolor repellendus.</p></div> Edited May 27, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now