Как "резиновый" сайт ограничить в его "резиновости"? - Веб-программирование

08.03.2006, 21:44

Ребят, возник вопрос.
Я работаю над новым скином к движку Land Down Under, сделал уже многое, но вот с одним багом никак справиться не могу. Скин - "резиновый", то есть с width=100%. Но при сжимании окна (для тестирования под малое разрешения 800х600) страница продолжает сжиматься до неприличия, в результате чего половина из моих вертикальных менюшек утолщаются в два раза. Штука весьма нехорошая, поскольку текстура под эти меню расчитана только на один ряд, а когда появляются два или больше, то получается полная каша.
Короче: как мне ограничить страницу в "резиновости"?
Вот.

Saruman · 08.03.2006, 22:45

к примеру, вставить пустой гиф, указав ему соответствующую ширину

08.03.2006, 23:29

То есть, по идее, ширина этого гифа и будет пределом суженности для всей страницы? Так?

InsaneX · 08.03.2006, 23:39

postavit v samom konce div s width 900px ili skolko minimum nado, togda ono ne budet s'ezjat'. etot div doljen bit' vnutri samoy strukturi gde width 100%

eshe est min-width max-width.. no eto v IE ne rabotaet

09.03.2006, 00:16

окей, попробуем.

Saruman · 09.03.2006, 01:00

Цитата:

Hector:
ширина этого гифа и будет пределом суженности для всей страницы? Так?

да, именно

aoxyz_30330 · 09.03.2006, 02:42

заключи все ето дело еше в одну внешнюю таблицу с параметром ширины 100%, а внутреннюю уже позиционируй .... вообше ети вещи часто специфичны для браузера, так что експеримент ...

Dmitry S · 15.03.2006, 20:56

<head>
<style>
#general_div {
min-width: 760px; для всех валидных браузеров.
width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 400? "400px": "auto"); для IE
</style>
</head>
<body>
<div id="general_div"> вся страничка внутри этого блока </div>
</body>

Либо тоже самое, только вместо div прописываем все для body
<style>
body {
width: 100%;
min-width: 760px; для всех валидных браузеров.
width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 400? "400px": "auto"); для IE
</style>

width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 760? "760px": "auto");

GoodS · 16.03.2006, 18:41

У меня тоже была такая проблема, когда меню состоящие из нескольких слов сжимались, те становились многострочными. Я просто пробел заменял на символ - ну там зажимаешь Ctrl, потом на доп. клаве 0160 и отпускаешь контрол - типа пробела, но с ним не переносит.
Шестнадцатеричный код символа - A0.

Saruman · 17.03.2006, 02:31

Цитата:

GoodS:
Я просто пробел заменял на символ ... типа пробела, но с ним не переносит.

В html для этого пишут   вместо пробела

Goryn · 17.03.2006, 21:07

Цитата:

Сообщение от Saruman

к примеру, вставить пустой гиф, указав ему соответствующую ширину

Поддерживаю. Я всегда так делаю. Делается прозрачный GIF 1 на 1 пиксел, который ставится в вверху или внизу соответвующей колонки такой ширины, чтобы ограничить сужение до разумного, ну и высотой 1 пиксель.

Кстати, я делаю так, чтобы при разрешении 800х600 сайт все таки не сужался до убогости. Люди на таком сидят, например, на 15' мониторах.

strocks · 18.03.2006, 20:43

GIF, это уже давно не актульно.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Yahoo!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css" media="all">
body {font:84%/1.2em arial,sans-serif;direction:ltr;text-align:center;margin:0;padding:20px;}
.px {display:none;}
#box {position:relative;background:#eee;min-width:760px;width:56.4em;text-align:left;margin:0 auto;}
</style>
<!--[if IE]>
<style>
.px{display:block;width:760px;height:0;font-size:0px;line-height:0px;}
</style>
<![endif]-->

</head>
<body>

<div id=box>
<div class=px></div>
content
</div>
</div>

</body>
</html>

либо так, если не хотите делать CSS для IE отдельно

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Yahoo!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css" media="all">
body {font:84%/1.2em arial,sans-serif;direction:ltr;text-align:center;margin:0;padding:20px;}
#box {position:relative;background:#eee;min-width:760px;width:56.4em;text-align:left;margin:0 auto;}
.px {display:none;}
.px{_display:block;_width:760px;_height:0;_font-size:0px;_line-height:0px;}
</style>

</head>
<body>

<div id=box>
<div class=px></div>
content
</div>
</div>

</body>
</html>

Rio2005 · 25.03.2006, 08:27

Решение использовать CSS самое разумное в LDU это поддерживается ! Опции -"min-width:" и "mах-width:"
никто не отменял просто их придеться ввести, используя - "@import" хотя, все равно, придется использовать javascript . Мораль - угодить под всех нет возможности!!! Хочешь изврата - выдавай под каждое разрешение и тип броузера свою страничку + учти есть еще и наладонники... Тема обсуждалась на везде где есть про веб дизайн... Могут посчитать офтопом

«Резиновая вёрстка»

strocks · 25.03.2006, 16:15

Цитата:

Сообщение от Rio2005

Решение использовать CSS самое разумное в LDU это поддерживается ! Опции -"min-width:" и "mах-width:"
никто не отменял просто их придеться ввести, используя - "@import" хотя, все равно, придется использовать javascript . Мораль - угодить под всех нет возможности!!! Хочешь изврата - выдавай под каждое разрешение и тип броузера свою страничку + учти есть еще и наладонники... Тема обсуждалась на везде где есть про веб дизайн... Могут посчитать офтопом

«Резиновая вёрстка»

min.. max.. не поддерживаются IE
а яваскрипт не очень хорошо, корректнее с помощиью div блоков

Rio2005 · 25.03.2006, 18:32

Цитата:

strocks:
min.. max.. не поддерживаются IE
а яваскрипт не очень хорошо, корректнее с помощиью div блоков

[url=http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths] Visual formating [url]
Для порядка.
1-е Всегда есть возможность точного позиционирования
2-е Если ничего не выходит, я всегда использую старый добрый табличный метод.
даже мелкомягие http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude061198.asp используют дополнительные приблуды для абсолютного позиционирования.......
3-е Есть очередная "шутка" -"OVERFLOW", опа и получили скрол или просто убрали все что не влезло.

Нельзя впихнуть невпихуемое!

Хотя [url=http://msdn.microsoft.com/library/en-us/dndude/html/dudejune3.asp] иногда получается [url] (это из-за простоты конструкции(без боксов и макетов))

08.03.2006, 21:44	# 1
Hector Guest Сообщения: n/a	Как "резиновый" сайт ограничить в его "резиновости"? Ребят, возник вопрос. Я работаю над новым скином к движку Land Down Under, сделал уже многое, но вот с одним багом никак справиться не могу. Скин - "резиновый", то есть с width=100%. Но при сжимании окна (для тестирования под малое разрешения 800х600) страница продолжает сжиматься до неприличия, в результате чего половина из моих вертикальных менюшек утолщаются в два раза. Штука весьма нехорошая, поскольку текстура под эти меню расчитана только на один ряд, а когда появляются два или больше, то получается полная каша. Короче: как мне ограничить страницу в "резиновости"? Вот.

08.03.2006, 22:45	# 2
Saruman ::VIP:: Регистрация: 12.11.2002 Адрес: Nicosia, Cyprus Сообщения: 1 285	к примеру, вставить пустой гиф, указав ему соответствующую ширину __________________ "If people only knew how hard I work to gain my mastery, it wouldn't seem so wonderful at all." Michelangelo Buonarroti

08.03.2006, 23:39	# 4
InsaneX ::VIP:: Регистрация: 15.12.2002 Адрес: Spain Сообщения: 500	postavit v samom konce div s width 900px ili skolko minimum nado, togda ono ne budet s'ezjat'. etot div doljen bit' vnutri samoy strukturi gde width 100% eshe est min-width max-width.. no eto v IE ne rabotaet __________________ hm. I've lost a machine.. literally _lost_. it responds to ping, it works completely, I just can't figure out where in my apartment it is. Последний раз редактировалось InsaneX; 08.03.2006 в 23:44.

16.03.2006, 18:41	# 9
GoodS Newbie Регистрация: 07.03.2006 Сообщения: 43	У меня тоже была такая проблема, когда меню состоящие из нескольких слов сжимались, те становились многострочными. Я просто пробел заменял на символ - ну там зажимаешь Ctrl, потом на доп. клаве 0160 и отпускаешь контрол - типа пробела, но с ним не переносит. Шестнадцатеричный код символа - A0. Последний раз редактировалось GoodS; 16.03.2006 в 18:44.

25.03.2006, 08:27	# 13
Rio2005 Newbie Регистрация: 04.11.2002 Адрес: Korolev,Mos.reg. Пол: Male Сообщения: 42	Решение использовать CSS самое разумное в LDU это поддерживается ! Опции -"min-width:" и "mах-width:" никто не отменял просто их придеться ввести, используя - "@import" хотя, все равно, придется использовать javascript . Мораль - угодить под всех нет возможности!!! Хочешь изврата - выдавай под каждое разрешение и тип броузера свою страничку + учти есть еще и наладонники... Тема обсуждалась на везде где есть про веб дизайн... Могут посчитать офтопом «Резиновая вёрстка» __________________ Шеф-Всё пропало! Интернет Заклинило

08.03.2006, 23:29	# 3
Hector Guest Сообщения: n/a	То есть, по идее, ширина этого гифа и будет пределом суженности для всей страницы? Так?

09.03.2006, 00:16	# 5
Hector Guest Сообщения: n/a	окей, попробуем.

09.03.2006, 02:42	# 7
aoxyz_30330 Junior Member Регистрация: 22.05.2004 Сообщения: 112	заключи все ето дело еше в одну внешнюю таблицу с параметром ширины 100%, а внутреннюю уже позиционируй .... вообше ети вещи часто специфичны для браузера, так что експеримент ...

15.03.2006, 20:56	# 8
Dmitry S Junior Member Регистрация: 15.12.2003 Адрес: Belarus, Minsk Сообщения: 191	<head> <style> #general_div { min-width: 760px; для всех валидных браузеров. width:expression((document.documentElement.clientWidth \|\| document.body.clientWidth) < 400? "400px": "auto"); для IE </style> </head> <body> <div id="general_div"> вся страничка внутри этого блока </div> </body> Либо тоже самое, только вместо div прописываем все для body <style> body { width: 100%; min-width: 760px; для всех валидных браузеров. width:expression((document.documentElement.clientWidth \|\| document.body.clientWidth) < 400? "400px": "auto"); для IE </style> width:expression((document.documentElement.clientWidth \|\| document.body.clientWidth) < 760? "760px": "auto");