All geek questions in one place

The site is wider than the browser without horizontal scrollbars

I have a website that I work on, it has greebles in the upper left, upper right, lower left and lower right corners. Full width is approximately 1100 pixels. The actual content area is in a layout of 960 pixels.

I want the site to be correctly centered to 960 pixels, and additional images disappear on the right and left, but not cause horizontal scrolling, provided that it exceeds 960 pixels.

All four images are separate files (they cannot join them), and there is already a background image. Did I mention that they are added via CSS, and not as images in a file?

Thanks!

Edit: This should really work in IE6. Not my choice: (

+4
source share
4 answers

You can use overflow: hidden in CSS for your body tag (or any other container tag that contains your main content) to prevent scrollbars. Some browsers allow you to limit this only to horizontal or vertical content ( -ms-overflow-x and overflow-x in your case, because you are dealing with horizontal overflow, there are corresponding y styles). I think they / will be part of CSS3, according to this link .

+3
source

I feel sorry for the people, but the only way to see this work, including IE 6 and 7, is to use tables .

Working example: here

Text "Greeble" (I really don’t know what a sinner is :): it slightly distorts the resizing, which will disappear when there are only background images in the columns.

Problems: Columns must contain something IE displays. Created by   prevent the right and left columns from disappearing completely. You will need to find a way around this, possibly with a 1x1 pixel or something like that. You will always have some content - even if only 1 pixel wide - in all columns.

Relying on: Tables with an indefinite width that do the way they do. I think this is pretty reliable, tough.

Tested in: IE 5.5 and higher, Firefox

So that someone dares to do this, because the tables are evil: Find the best CSS-based solution that works in IE6 too, and I will gladly delete mine.

HTML: There is no separation between markup and CSS, without semantics, only a working prototype.

 <body style="margin: 0px"> <table style="width: 100%; height: 100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="background-color: orange; height: 50%; color: white"> Greeble top left </td> <!-- The content area --> <td style="width: 960px" rowspan="2"> <!-- This is important, serves as min-width replacement. --> <div style="width: 960px; text-align: center"> &nbsp; I will always be 960 pixels wide </div> </td> <td style="background-color: blue; color: white"> Greeble top right </td> </tr> <tr> <td style="background-color: blue; height: 50%; color: white"> Greeble bottom left </td> <td style="background-color: green; height: 50%; color: white"> Greeble bottom right </td> </tr> </table> </body>
+2
source

I think I developed a ridiculously simple way to do this: add an empty div for each corner element, position it relatively, and then give it a negative (or high positive for rhs) edge - it seems to work in IE 6 too.

Thanks for all the ideas.

0
source

Not sure if you solved this, but I think this is possible using background images. If you stack images on top of each other without specifying a width for their containing divs, you can turn it off. Here is the basic information:

 <body style="background: url(body-bg.png);"> <div style="background: url(greeble1.png);"></div> <div style="background: url(greeble2.png);"></div> <div style="background: url(greeble3.png);"></div> <div style="background: url(greeble4.png);"></div> <div class="wrapper" style="width: 960px;"> <p>Main Content Area</p> </div> </body

I think you will need to use a little JS to position each of the bright background images depending on the image size and viewing area, but this should be possible.

0
source

Source: https://habr.com/ru/post/1303400/

More articles:


All Articles