Сайт шире браузера без горизонтальных полос прокрутки

У меня есть сайт, на котором я работаю, у него есть greebles в верхнем левом, верхнем правом, нижнем левом и нижнем правом углах. Полная ширина составляет примерно 1100 пикселей. Фактическая область содержимого находится в макете 960 пикселей.Сайт шире браузера без горизонтальных полос прокрутки

Я хочу, чтобы сайт был правильно центрирован вплоть до 960 пикселей, а дополнительные изображения исчезали справа и слева, но не вызывали горизонтальной прокрутки при условии, что оно превышает 960 пикселей.

Все четыре изображения являются отдельными файлами (они не могут присоединиться к ним), и уже есть фоновое изображение. Я упоминал, что они добавляются через CSS, а не как изображения в файле?

Спасибо!

Редактировать: Это действительно должно работать в IE6. Не мой выбор :(

источник

2010-03-07 Meep3D

Что вы подразумеваете под «добавлением через CSS»? –

@Pekka: Я предполагаю, что он означает - background-image: url ('url.png'); –

Вы можете использовать overflow: hidden в CSS для своего тега body (или любого другого контейнера, в котором у вас есть основной контент), чтобы предотвратить прокрутки. Некоторые браузеры позволяют ограничивать это только горизонтальным или вертикальным контентом (-ms-overflow-x и overflow-x в вашем случае, потому что вы имеете дело с горизонтальным переливом;. есть соответствующие y стили) Я думаю, что они/собираются быть частью CSS3, согласно this link

источник

2010-03-07 16:22:48

Я не думаю, что это то, что он хочет - он хочет, чтобы окружающий контент не вызывал полосы прокрутки, но он хочет полосы прокрутки, если область просмотра имеет ширину <960 пикселей. –

@Pekka: Это должно быть хорошо, если макет использует 'max-width' или аналогичный и внутренний контейнер с' overflow: scroll'. Не большой поклонник макетов фиксированной ширины, поэтому я не слишком много экспериментировал с ней. –

@ T.J. умное мышление, не думал об этом. Но это приведет к появлению полосы прокрутки * в области содержимого *, а не тела, когда она будет переполняться вертикально. Вы можете предотвратить использование 'overflow-y', но тогда у вас будут проблемы с совместимостью с браузером (я думаю, что IE6 и, возможно, даже IE7, не могут найти информацию прямо сейчас.) –

Мне жаль людей. , но единственный способ увидеть эту работу, включая IE 6 и 7, использует таблицы .

Рабочий пример:Here

В «Greeble» текст (я не знаю, что такое greeble есть :) искажает изменение размера несколько, что исчезнет, когда столбцы имеют только фоновые изображения.

Вопросы: Столбцы должны содержать что-то быть вынесенное IE. Созданный мной   предотвратит полное исчезновение правой и левой колонн. Вам нужно будет найти способ обойти это, возможно, с пикселем 1x1 или что-то в этом роде. Вы всегда должны иметь контент с - даже если всего 1 пиксель в ширину - во всех столбцах.

Опирающийся на: Таблицы с неуказанной шириной, как показано на рисунке. Я думаю, что это довольно надежный, жесткий.

Испытано в: IE 5.5 и более, Firefox

Для любого, кто посмеет downvote это потому, что таблицы зла: Найти меня лучше, CSS-решение, которое работает в IE6, а также, и я с радостью удалит мой.

HTML: Отсутствие разделения между разметкой и CSS, без семантики, только рабочий прототип.

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

источник

2010-03-07 16:40:10

Не сожалейте об использовании таблиц. До тех пор пока/если CSS не соответствует задаче, мы делаем то, что мы должны делать. –

@TJ yup, некоторые вещи не могут быть выполнены без таблиц. По крайней мере, небезопасно. –

@Pekka, Greeble - небольшая часть деталей, добавленная к разбивайте поверхность объекта, чтобы добавить визуальный интерес к поверхности или объекту, особенно в спецэффектах фильма. Они не служат никакой реальной цели, кроме как добавить сложность к объекту и вызвать поток глаза над поверхностью объекта прерываться, обычно giv создавая впечатление увеличенного размера. –

Я думаю, что я разработал смехотворно простой способ сделать это: добавить пустой DIV для каждого углового элемента, поместите его относительно, а затем дать ему отрицательный (или высокий положительный для РИТ) Маржа - похоже, работает и в IE 6.

Спасибо за все идеи.

источник

2010-03-07 16:54:08 Meep3D

Hmmm горизонтальные полосы прокрутки на позиционно выровненных абсолютных предметах. Потерпеть неудачу. :( – Meep3D

Не уверен, что вы решили это, но я думаю, что это возможно с использованием фоновых изображений. Если вы сложите изображения друг над другом, не указав ширину для их содержащих divs, вы сможете ее отключить. Вот основы:

<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

Я думаю, что вы должны были бы использовать немного JS для размещения каждого из greeble фоновых изображений в зависимости от размера изображений и просмотра, но это должно быть возможно.

источник

2011-12-01 20:40:19

Сайт шире браузера без горизонтальных полос прокрутки

ответ

Смежные вопросы