X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Горизонтальная прокрутка в окне при переполнении
klim_webcoder
klim_webcoder
Topic Starter сообщение 16.8.2008, 20:42; Ответить: klim_webcoder
Сообщение #1


привет :rolleyes:

вот есть такой 2-колоночный макет: ссылка
В левый div добавлена картинка шириной 1000px.
Сейчас эта картинка обрезается почти во всех браузерах, а в IE6 правый div просто перескакивает вниз.

Как сделать так, чтобы при добавлении таких картинок появлялась горизонтальная прокрутка в окне браузера,
а не в самих контейнерах (что делается путем добавления overflow)?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 16.8.2008, 22:40; Ответить: Exterior
Сообщение #2


klim_webcoder, я бы вот так сделал:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Overflow</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--
body, p {
margin: 0px;
padding: 0px;
}

#content {
width: 67%;
float: left;
background: red;
}

#navigation {
width: 33%;
float: right;
background: blue;
}
--
>
</style>

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<style type="text/css">
#wrapper {
width: expression(((document.documentElement.clientWidth||document.body.clientWidth)<1495)?"1495px":"100%");
}
</style>
<![endif]>
<![endif]--
>

</head>

<body>

<div id="wrapper">

<div id="content">
<p>
column long long column very long fill fill fill long text text column text silly very make
long very fill silly make make long make text fill very long text column silly silly very
column long very column filler fill long make filler long silly very long silly silly silly
long filler make column filler make silly long long fill very.
<br />
<img src="images/width1000.gif" width="1000" height="50" alt=" 1000px" />
<br />
very make make fill silly long long filler column long make silly silly column filler fill
fill very filler text fill filler column make fill make text very make make very fill fill
long make very filler column very long very filler silly very make filler silly make make column column.
</p>
</div>

<div id="navigation">
<p>
column long long column very long fill fill fill long text text column text silly very make
long very fill silly make make long make text fill very long text column silly silly very
column long very column filler fill long make filler long silly very long silly silly silly
long filler make column filler make silly long long fill very.
very make make fill silly long long filler column long make silly silly column filler fill
fill very filler text fill filler column make fill make text very make make very fill fill
long make very filler column very long very filler silly very make filler silly make make column column.
</p>
</div>

</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klim_webcoder
klim_webcoder
Topic Starter сообщение 16.8.2008, 22:54; Ответить: klim_webcoder
Сообщение #3


(' post='10403 @ 17.8.2008, 01:40)
я бы вот так сделал

И получилось бы, что работает это только в IE6...
а надо, чтобы прокрутка в окне появлялась во всех браузерах.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 16.8.2008, 23:39; Ответить: Exterior
Сообщение #4


(' post='10405 @ 17.8.2008, 01:54)
а надо, чтобы прокрутка в окне появлялась во всех браузерах

тогда можно просто указать жесткие размеры ширины для body
или,
если надо чтобы скролл появлялся при достижении определенной ширины, то делать на JavaScript по аналогии expression для IE.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klim_webcoder
klim_webcoder
Topic Starter сообщение 17.8.2008, 0:06; Ответить: klim_webcoder
Сообщение #5


Я, наверно, плохо объяснил суть проблемы.

Exterior
, вообще задача вот в чем.
Допустим, после верстки макета из него делается сайт и в див контента добавляется слишком большая картинка или таблица.
Бывают же случаи, когда делать это неизбежно (например, схема метро или таблица из 20 колонок).
Так вот хотелось бы, чтобы в макете было предусмотрено добавление
горизонтальной прокрутки в окне (что хоть как-то спасет сайт).

Так что, ваши варианты не подходят.

Думал, что это возможно сделать средствами html+css...

P.S. JavaScript пока не знаю.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 17.8.2008, 18:50; Ответить: Exterior
Сообщение #6


(' post='10407 @ 17.8.2008, 03:06)
Я, наверно, плохо объяснил суть проблемы

я все прекрасно понял,
еще раз повторюсь: что для кроссбраузерного решения этой задачи делать придется на JS, средств html+css будет малова-то. Работать этот вариант будет примерно как expression для IE с некоторыми доворотами, т.е., допустим нормальная ширина элементов на странице будет ~760-780px (для 800х600), если на странице появляется элемент с размером больше чем заранее установленный константой, функция проходится по всем элементам страницы, вычисляет самый широкий и, исходя из этого определяет явную ширину страницы, вследствии чего появится горизонтальная прокрутка. Что-то вроде такого... Более разумный способ - просто не допускать вставку таких больших объектов, а делать миниатюру (если это изображение) с ссылкой на полный размер в отдельной странице, тоже самое с большой таблицей. Обычно делают именно так.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klim_webcoder
klim_webcoder
Topic Starter сообщение 17.8.2008, 22:32; Ответить: klim_webcoder
Сообщение #7


Спасибо, все понял.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Google отдает приоритет YouTube при ранжировании
8 VinogradOFF 801 21.11.2020, 19:18
автор: AffGun
Горячая тема (нет новых ответов) тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе.
Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО
60 VIMstat 52682 17.11.2020, 11:11
автор: VIMstat
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОшибка при оформлении заказа на сайте Опенкарт
2 павелЯ 233 19.10.2020, 18:30
автор: павелЯ
Открытая тема (нет новых ответов) Максимальное количестве внешних ссылок на странице при покупке
10 Mansurka 443 8.10.2020, 23:35
автор: Latinos
Открытая тема (нет новых ответов) При открытии админки WP выпадает просто белый лист
2 Telnor 357 5.10.2020, 17:23
автор: bekett


 



RSS Текстовая версия Сейчас: 29.11.2020, 13:39
Дизайн