Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 27.03.2016
Сообщений: 14
1

Создание блоков с прокрутками

27.03.2016, 21:35. Показов 732. Ответов 4

Пожалуйста, подскажите как как в css создать каркас с 2мя независимыми блоками и прокрутками и неподвижным заголовком при прокрутке:

http://i11.pixs.ru/storage/2/5... 294255.png
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.03.2016, 21:35
Ответы с готовыми решениями:

Создание блоков
Здравствуйте.Возник вопрос с созданием блоков.Как можно сделать "резиновые" блоки?Что лучше...

Как управлять прокрутками скроллбокса тачпадом?
Обычный ноут, с функцией вертикальной/горизонтальной прокрутки тачпадом. В моей программе -...

Создание числовых блоков
Нужно сгенерировать 300 блоков , по 6 строчек и в каждой строчке 6 цифр Пример 23 42 12 15 13...

Создание блоков.Денвер
Добрый вечер! Очень нужна ваша помощь! Начала изучать и сразу застряла! Есть основная страничка...

4
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 607
28.03.2016, 08:35 2
вот тут пример
0
0 / 0 / 0
Регистрация: 27.03.2016
Сообщений: 14
09.04.2016, 21:27  [ТС] 3
Спасибо) а прокрутки как сделать?

Добавлено через 15 минут
И ещё очень важный вопрос, как задать ссылки на первом блоке чтобы они открывались во втором блоке той же страницы? Буду очень признателен за ответы!!!
0
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 607
11.04.2016, 08:18 4
Цитата Сообщение от beha96 Посмотреть сообщение
как задать ссылки на первом блоке чтобы они открывались во втором блоке
ну вот так, для плавности js тут
HTML5
1
2
3
4
5
<div class="menu"><a href="#after_content">Click me</a></div>
<div class="content"></div>
<div id="after_content">
типо ссылка
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.menu {
  width:100%;
  background:green;
  opacity:1;
  height:150px;
}
.fixed {
  position:fixed;
  opacity:0.8;
  top:0;
}
.content {
  height:2000px;
  background:red;
}
Javascript
1
2
3
4
5
6
7
8
$(document).ready(function() {
    $('a[href^="#"]').click(function(){
         var el = $(this).attr('href');
        $('body').animate({
            scrollTop: $(el).offset().top}, 2000);
            return false; 
         });
});
0
0 / 0 / 0
Регистрация: 27.03.2016
Сообщений: 14
14.04.2016, 21:10  [ТС] 5
У меня переходит по ссылке полностью, а не в правом блоке. Где я делаю не так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Документ без названия</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\ArmaGeDon\Desktop\html\HW.css">
</head>
 
<body>
 
<div class="fixed">
    Заголовок
</div>
<div class="menu">
    <ul>
        <li><a href="file:///C:/Users/ArmaGeDon/Desktop/html/CSS1.html">Menu_1</a></li>
        <li><a href="#">Menu_2</a></li>
        <li><a href="#">Menu_3</a></li>
        <li><a href="#">Menu_4</a></li>
        <li><a href="#">Menu_5</a></li>
    </ul>
</div>
<div class="content">
    Информация по ссылке
</div>
 
</body>
 
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
body {
    ackground-image: url('C:/Users/ArmaGeDon/Desktop/Beha/Dealpool/1.jpg');
    background-color: red;
}
.fixed {
    text-align: center;
    width: 100%;
    font-size: 200%;
    height:50px;
    position:fixed;
    opacity:0.8;
    top:0;
    background-color: #9ACD32;
}
 
.menu {
    width:30%;
    background:green;
    opacity:1;
    height:150px;
    margin-top: 43px;
    float: left;
    height: 584px;
    overflow: scroll;
    overflow-x: hidden;
    padding: 3px;
    border: solid 1px black;
}
 
.content {
    word-wrap: break-word;
    padding: 5px;
    margin-top: 43px;
    width:68%;
    height:580px;
    background:re;
    float: right;
    overflow: scroll;
    overflow-x: hidden;
    padding: 5px;
    border: solid 1px black;
    background-image: url('C:/Users/ArmaGeDon/Desktop/Beha/Dealpool/1.jpg');
}
Добавлено через 8 минут
Нет, в смысле не переход на какую-то часть страницы, а чтобы информация поменялась в блоке. Например, сайт о самолётах, и в меню типа разделены серии, и при клике информация по определённому самолёту выводится на правый блок.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.04.2016, 21:10

Создание блоков в коде
Пишу в Visual Studio 2013. Есть ли в с++ возможность создания блоков #region как в c# , или...

Динамическое создание блоков
На одной странице сайта есть форма для отправки сообщения (комментария), а на другой - динамически...

Создание новых блоков
Я уже писал что делаю шаблон на joomlа, и теперь возник вопрос как задать стиль для блока....

Создание блоков в процентах и пикселях
&lt;body&gt; &lt;div id=&quot;wrapper&quot;&gt; &lt;div id=&quot;hat&quot;&gt; &lt;/div&gt; &lt;div id=&quot;container&quot;&gt; &lt;div id=&quot;sidebarL&quot;&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.