Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Зверушь
374 / 293 / 47
Регистрация: 01.05.2010
Сообщений: 1,453
#1

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

12.11.2012, 13:13. Просмотров 397. Ответов 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):

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

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

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

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

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

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

2
Зверушь
374 / 293 / 47
Регистрация: 01.05.2010
Сообщений: 1,453
12.11.2012, 13:15  [ТС] #2
скрин...
0
Миниатюры
Панель контента выше чем остальные  
Зверушь
374 / 293 / 47
Регистрация: 01.05.2010
Сообщений: 1,453
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
Привет! Вот еще темы с ответами:

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

Сначала расположить все элементы, отличающиеся от максимального не более чем на 20%, потом — остальные - C++
В общем, вот задание: В одномерном массиве, состоящем из N вещественных элементов, вычислить: 1) количество элементов массива, меньших...

Частота процессора выше, чем указано - Процессоры
и снова привет всем, на процессоре amd athlon x4 750k наблюдается такая фиговина: В электропитании минимальное состояние процессора стоит...

Asus B150M-K и память выше чем 2133мгц? - Материнские платы
Привет всем,ребятки) Очень нужна подсказка. Как то на розетке(магазин) писали что на чипе H110(в рассматриваемой B150) материнские...


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

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

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