Подскажите как организовать по средствам CSS

Статус
В этой теме нельзя размещать новые ответы.
Если под 'эмуляцией фреймов' подразумевается просто блок с полосой прокрутки, и контентом внутри, то это делается с помощью свойств overflow, overflow-x, overflow-y, никакой position:fixed здесь не нужен.
Насколько я знаю - нет. По крайней мере не цсс, можно подумать в сторону джаваскрипта.
Нажмите для раскрытия...
Можно и без скрипта исправить Для просмотра ссылки Войди или Зарегистрируйся
 
Класс =) Вот это я и искал. Большое спасибо.
Теперь точно старый статический фреймовый сайт переделаю под CSS
 
RolCom написал(а):
Если под 'эмуляцией фреймов' подразумевается просто блок с полосой прокрутки, и контентом внутри, то это делается с помощью свойств overflow, overflow-x, overflow-y, никакой position:fixed здесь не нужен
Нажмите для раскрытия...

Ну да это само собой понятно, просто я думал что человеку не контент нужно ограничит в блоке абсолютным позиционированием и прокрутку в этом же блоке сделать. А привесить несколько блоков инфы (скажем банер сверху и блок с контактами сбоку) и чтобы при реальной прокрутке всей страницы они оставались на месте. Стандартными средствами это ЦСС-ом в Ие не реализуется. Только уличной магией, как я уже гворил: )))
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
В таком случае, пример такой 'эмуляци фреймов'. Как видно, position вообще ни причем, у одного блока он по умолчанию static, у другого absolute.
Код: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
  html, body {margin:0; height:100%; overflow:hidden}
  #d1 {position:absolute; left:0; top:0; width:200px; height:100%; overflow:auto;}
  #d2 {margin-left:200px; height:100%; overflow:auto}
</style>
</head>

<body>

<div id="d1">
    <h1>Контент1</h1>
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br /> 
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
</div>

<div id="d2">
    <h1>Контент2</h1>
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br /> 
</div>

</body>
</html>
 
RolCom написал(а):
В таком случае, пример такой 'эмуляци фреймов'. Как видно, position вообще ни причем, у одного блока он по умолчанию static, у другого absolute.
Нажмите для раскрытия...
Ну раз не причем убери position:absolute у первого блока и посмотрим ;)
 
ztztss написал(а):
Ну раз не причем убери position:absolute у первого блока и посмотрим ;)
Нажмите для раскрытия...

Пожалуйста;)
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=widows-1251" />
<title>Untitled Document</title>
<style type="text/css">
  html, body {margin:0; height:100%; overflow:hidden}
  #d1 {float:left; width:200px; height:100%; overflow:auto;}
  #d2 {height:100%; overflow:auto}
</style>
</head>

<body>

<div id="d1">
    <h1>Контент1</h1>
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br /> 
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
</div>

<div id="d2">
    <h1>Контент2</h1>
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br /> 
</div>

</body>
</html>
 
Жулик :D

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

Да даже без позиционирования в ИЕ это только хаками сделать можно.
 
ztztss написал(а):
Жулик :D

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

Да даже без позиционирования в ИЕ это только хаками сделать можно.
Нажмите для раскрытия...
Задача то изначально стояла про фреймы, просто ТС почему-то подумал, что для этого ему нужен position:fixed.
Прикрепить блок- то можно, но без позишина (absolute, relative, fixed- не важно) он будет накладыватся на контент в большинсве браузеров. Вот к примеру- position:fixed, но пашет и в ие тоже:)
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=widows-1251" />
<title>Untitled Document</title>
<style type="text/css">
  html, body {margin:0; height:100%; overflow:auto; }
  #d1 {height:100%; height:100%; overflow:auto; background:#aaf; }
  #d2 {width:200px; height:100px;  background:#f00; margin-top:-100px; position:fixed}
background:#00f;}
  
</style>
</head>

<body>


<div id="d1">
    <h1>Контент1</h1>
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br /> 
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
    Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />Контент<br />
</div>
<div id="d2">
Превед
</div>

</body>
</html>
Если удалить position:fixed, блок останется на томже месте, но станет перекрыватся с контентом. Т.е. position в этом примере только чтобы блок с контентом не перекрывался, вместо fixed подойдет relative и absolute, результат такой же.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху