| |
|
|
| | Имеем простенький код.
У нас 2 слоя. При уменьшении размера окна браузера, когда расстояние между слоями становится минимальным, они накладываются друг на друга. Как этого избежать?
Вот в таблицах как только расстояние между ячейками становится минимальным, они просто больше не сжимаются-можно такое произвести со слоями? Сам пока не допер :-( А уже давно интересует этот вопрос. Задавать строгий отступ типа left: 400px; не советуйте - т.к. интересует именно резиновость конструкции.
<html>
<head>
<title>лиматстройсервис</title>
<style>
#layer1
{
background-color: #999;
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 200px;
}
#layer2
{
background-color: #ddd;
position: absolute;
top: 0px;
left: 50%;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="layer1"></div>
<div id="layer2"></div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Alex_Keeper
(15.12.2007 в 17:53)
| | | Странный вы, однако.
Первому диву (который color: #999) вы отдали приказ: "Слышь, чёрный, ВСЕГДА стоять с левого краю (left: 0px) и ВСЕГДА иметь ширину 300 пикселей (width: 300px;)!"
Он вам ответил - "Так точно!" и пошел на своё место.
Второму диву (color: #ddd) приказ дали другой: "Серый, ВСЕГДА стоять на середине страницы, какой бы она ни была (left: 50%;) и ВСЕГДА иметь ширину 300 пикселей (width: 300px;)!"
А потом спрашиваете - почему это серый на черного лезет, когда ширина страницы меньше шестисот пикселей?
Отвечаю - согласно вашего приказа - он на середину страницы лезет.
В общем, сами приказ отдали, а потом удивляетесь - почему это серый у вас расистом оказался? :-))
Задача ваша только правилами CSS не решается.
Ибо вы одновременно используете и абсолютные (пиксели) и относительные (проценты) для объектов одной строки.
Вся страница имеет ширину 100 процентов (но неизвестно сколько пикселей, т.е. Х пикселей).
Вы хотите, чтобы второй див был посередине страницы (50%, т.е. Х/2), но не налезал на первый див.
Т.е. вы хотите, чтобы выполнялось условие: Х/2 >= 300 пикселей.
Нет проблем, браузер выполнит это условие, только надо сказать ему - а сколько будет этот самый Х в пикселях. Вы сами это значение не знаете, но хотите, чтобы браузер об этом как-то САМ догадался.
Почему вы думаете, что браузер должен быть умнее вас? | |
| |
|
|
| |
|
|
| |
для: CNT
(15.12.2007 в 18:04)
| | | >Задача ваша только правилами CSS не решается.
>Ибо вы одновременно используете и абсолютные (пиксели) и относительные (проценты) для объектов одной строки.
хотите сказать что такое невыполнимо?
неужели нельзя сделать так чтобы слой слева (ну допустим там будет меню) всегда имел постоянную ширину и был прижат к левому краю, а 2-й слой динамически свою ширину изменял в зависимости от ширины окна или разрешения?
или придется использовать старые методы, привязывать для этого таблицы?
>Почему вы думаете, что браузер должен быть умнее вас?
я так не думаю, вот поэтому здесь и поинтересовался, учитывая что народ здесь поопытнее меня будет. | |
| |
|
|
| |
|
|
| |
для: Alex_Keeper
(15.12.2007 в 18:38)
| | | Некогда глубоко вникать, извините уж, но помоему это можно решить с помощью CSS, только надо не два слоя, а три. Я могу и ошибаться, но помоему полгода назад я что-то подобное делал.
Ещё раз повторюсь память мне может изменять. Опять же кроссбраузерность может "хромать") | |
| |
|
|
| |
|
|
| |
для: Valick
(15.12.2007 в 21:18)
| | | <div style="width:200px;float:left;">
1111
</div>
<div style="float:left;">
222
</div> | |
| |
|
|
| |
|
|
| |
для: AlexSol
(15.12.2007 в 21:29)
| | | ><div style="width:200px;float:left;">
>1111
></div>
><div style="float:left;">
>222
></div>
пока так ладу и не дал как сотворить "Чудо".
Использую только динамическое изменение размера-без статики (по всей длине), тогда да - работает.
Чтобы сделать одну из частей статичную - не получается.
Пример выше-не вариант. Правая часть будет соскакивать вниз как только ей не будет хватать места.
Лично у меня - есть макет. Верхняя часть (ну опустим мелкие детали) состоит их 2-х частей. Левая должна быть статическая (пикселей 200), правая должна тянуться на 100%, недостающее место восполняя фоновым рисунком(заранее который подсунут).
Если только увеличивать размер окна-делая больше чем 1024, то все ок. Если меньше-то эта правая часть накладывается на левую. С таблицами такого не произойдет. Вот хочется научиться (если возможно) проделывать такое и со слоями, т.к. верстаю последнее время в основном ими. | |
| |
|
|
| |
|
|
| |
для: Valick
(15.12.2007 в 21:18)
| | | в первом посте задача звучала по-другому... | |
| |
|
|
| |
|
|
| |
для: Valick
(15.12.2007 в 21:59)
| | | Что-то я не пойму: а что такое слои в ява-скрипт? Я их в этой теме как-то не увидел вообще... Посмотрел в справочнике HTML Javascript CSS - тоже ничего не нашёл. Большая просьба - не вводите в заблуждение людей несуществующими понятиями! Если я ошибаюсь - покажите рабочий код со СЛУЖЕБНЫМ словом языка "слой" или "layer". Буду благодарен.
Если у вас проблема с div - ами, то так и пишите. | |
| |
|
|
| |
|
|
| |
для: coloboc66
(15.12.2007 в 22:39)
| | | их так и называют | |
| |
|
|
| |
|
|
| |
для: bronenos
(15.12.2007 в 22:52)
| | | ><div style="width:200px;float:left;">
>1111
></div>
><div style="float:left;">
>222
></div>
пока так ладу и не дал как сотворить "Чудо".
Использую только динамическое изменение размера-без статики (по всей длине), тогда да - работает.
Чтобы сделать одну из частей статичную - не получается.
Пример выше-не вариант. Правая часть будет соскакивать вниз как только ей не будет хватать места.
Лично у меня - есть макет. Верхняя часть (ну опустим мелкие детали) состоит их 2-х частей. Левая должна быть статическая (пикселей 200), правая должна тянуться на 100%, недостающее место восполняя фоновым рисунком(заранее который подсунут).
Если только увеличивать размер окна-делая больше чем 1024, то все ок. Если меньше-то эта правая часть накладывается на левую. С таблицами такого не произойдет. Вот хочется научиться (если возможно) проделывать такое и со слоями, т.к. верстаю последнее время в основном ими. | |
| |
|
|
| |
|
|
| |
для: Alex_Keeper
(15.12.2007 в 23:25)
| | | посмотри как работает
http://www.alistapart.com/articles/switchymclayout
http://www.alistapart.com/d/switchymclayout/transition_layout_news.html
там скрипт отслеживает ширину и подключает разные стили. вам необходимо при определенной шишине задать body{width:600px} | |
| |
|
|
