Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Зверушь
398 / 317 / 80
Регистрация: 01.05.2010
Сообщений: 1,578
#1

Панель контента выше чем остальные - HTML, CSS

12.11.2012, 13:13. Просмотров 411. Ответов 2
Метки нет (Все метки)

Сверстал макет сайта. Всё хорошо, за исключением того, что панель контента почему-то отображается слегка выше, чем соседние слева... Почему так происходит разобраться не могу... Такая картина наблюдается во всех браузерах, за исключением разве что IE7...
Код сайта и скрин с проблемой прилагаю. Заранее спасибо!

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>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
 
<body>
<div id="container">
    <div id="header">
        <p>Это заголовок сайта.</p>
    </div>
    
    <div id="contentarea">
        <div id="left1"><p>Это первая левая панель сайта</p></div>
        <div id="left2"><p>Это вторая левая панель сайта</p></div>
        <div id="content">
            <p>Это контент сайта</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.</p>
        </div>
    </div>
</div>
 
<div id="footer">
<p>Это подвал сайта</p>
</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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
*, #container, #contentarea {
    margin: 0;
    padding: 0;
    border: none;
}
p {
    padding: 0 0.5em;
}
html, body {
    height: 100%;
    min-width: 600px;
    background: silver;
}
html {
    overflow: scroll;
}
div {
    margin: 5px;
    border: 2px solid black;
}
 
#contentarea {
    width: 100%;
    padding-bottom: 65px;
}
#container {
    min-height: 100%;
}
#footer {
    height: 50px;
    margin-top: -64px;
    clear: both;
}
#left1 {
    width: 250px;
    float: left;
}
#left2 {
    width: 250px;
    float: left;
}
#content {
    margin-left: 528px;
}
 
div:before {
    display:block;
    height: 20px;
    margin: 0;
    padding: 0 0.5em;
    background: black;
    color: white;
    font-weight: bold;
}
#header:before {
    content: 'HEADER';
}
#left1:before {
    content: 'LEFT PANEL 1';
}
#left2:before {
    content: 'LEFT PANEL 2';
}
#content:before {
    content: 'CONTENT';
}
#footer:before {
    content: 'FOOTER';
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.11.2012, 13:13
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Панель контента выше чем остальные (HTML, CSS):

Одна кнопка всегда на строку выше, чем остальные
одна кнопка всегда выше на строку,чем остальные. Если удалю верхнюю кнопку, то...

Css Grid. При добавлении контента в любой див, все остальные дивы расширяются
Суть в чем. Надо чтобы блоки расширялись только в том случае, когда в них есть...

Как сделать панель поверх всего контента?
Привет всем. У меня есть плавающая панель, но она отображается под контентом,...

Боковая панель не изменяет высоту при изменении контента с ajax
Приветствую. Вот что есть &lt;div class=&quot;panel-body&quot;&gt; &lt;div...

Как сделать переход по якорной ссылке на 100 px выше, чем расположен якорь?
Есть якорная ссылка. Как сделать преход по ней не к самому якорю, а выше на...

Панель проставления рейтинга контента
Всем привет. Создала тему в разделе Javascript так как не знаю к какому...

2
Зверушь
398 / 317 / 80
Регистрация: 01.05.2010
Сообщений: 1,578
12.11.2012, 13:15  [ТС] #2
скрин...
0
Миниатюры
Панель контента выше чем остальные  
Зверушь
398 / 317 / 80
Регистрация: 01.05.2010
Сообщений: 1,578
12.11.2012, 15:15  [ТС] #3
Разобрался! Теперь всё отображается как надо!
Нужно было всего-то добавить следующий код:
CSS
1
2
3
#contentarea {
    float: left;
}
Правда, почему возникает такое смещение я такдо конца и не понял....

Добавлено через 1 час 10 минут
Тут появилась еще одна проблема - возник вертикальный скролл... не понимаю, как от него избавиться?

Понятно, что у меня написано
CSS
1
2
3
html {
    overflow: scroll;
}
но и без этого кода вертикальный скролл тоже присутствует...
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.11.2012, 15:15
Привет! Вот еще темы с решениями:

Стоят планки с частотой выше, чем поддерживает чипсет. Чем чревато?
Доброго дня. Недавно по случаю заглянул в AIDA64, поинтересоваться, какую...

Дан массив А(17).Все элементы выше 0 на 5,а остальные заменить на 0
Дан массив А(17).Все элементы выше 0 на 5,а остальные заменить на 0.

Дан массив А (17) все элементы выше 0 на 5, а остальные перенесите на 0
Дан массив А (17) все элементы выше 0 на 5, а остальные перенесите на 0.

Написать программу формирующую матрицу 5×5,у кот-й выше главной диагонали все эл. =0 а остальные эл. =1
Написать программу,формирующую матрицу 5×5,у которой выше главной диагонали все...


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

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

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