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

Разбить страницу на части (header, footer и т.п.)

06.03.2013, 13:18. Показов 12075. Ответов 5
Метки нет (Все метки)

Здравствуйте! Хочу научиться создавать динамические сайты на php (своими руками написанные - без всяких там Joomlf, Wordpress etc.). Но у меня процесс застопорился вот на чем. Я пытаюсь разбить страницу на части (header, left_side, content, footer), в смысле - шапка, 2 столбца (левый меньший - для меню, правый больший - для контента), подвал. Стандарт, вроде как. Но с помощью дивов у меня это не очень-то получается сделать. А таблицы - где не прочитаю - прошедший век.
Вот то, что у меня есть на данный момент.
PHP
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
<?php header('Content-type=text/html; charset=utf_8'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf_8">
<meta http-equiv="Content-Style-Type" content="text/html">
<meta name="" content="">
</head>
<body>
    <div class='all_site'>
        <?php
            include('inc/header_top.php');
            include('inc/header_bottom.php');
        ?>
        <div class="middle">
            <div class="left_side">
                <?php
                    include('inc/v_menu.php');
                ?>
            </div>
        </div>
        <?php
            include('inc/main_content.php');
            include('inc/footer.php');
        ?>
    </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
BODY{
    background: url(../img/~lst/bg_site.jpg);
    background-repeat: repeat;
}
 
.all_site{
    width: 90%;
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
}
 
.header_top{
    width: 100%;
    background-color: white;
    border-radius: 20px 20px 0 0;
}
 
.header_bottom{
    width: 100%;
    background-color: green;
}
 
.middle{
    width: 100%;
    position: relative;
}
 
.left_side{
    width: 280px;
    border-radius: 20px;
}
 
.v_menu{
    width: 280px;
    float: left;
    background: url(../img/~lst/bg_v_menu.jpg);
    background-repeat: repeat;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
 
.main_content{
    background: -o-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: -moz-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: -ms-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    border-radius: 20px;
    border-color: #094FA8;
    border-width: 1px;
    border-style: solid;
    position: static;
    left: 280px;
}
 
.footer{
    width: 100%;
    background-color: brown;
    border-radius: 20px;
}
Подключаемые файлы все аналогичные:
PHP
1
<div class='footer'>footer</div>
Вот примерная схема, каким я хочу видеть этот сайт:
Название: 0263b07eea42.jpg
Просмотров: 1841

Размер: 15.6 Кб
Но у меня получается, что див с контентом на всю ширину сайта, а менюшка левая выглядит, как картинка в контенте, которую обтекает текст с правой стороны и снизу. Я с position запуталась... Как можно сделать так, как на рисунке-схеме?
P.S. Блок на схеме "Еще что-нибудь я пока что не реализовываю, т.к. мне бы хоть с этим сначала разобраться... Тем более, я хочу, чтоб он отображался не на всех страницах.
-----------------------------
Или я вообще все делаю неправильно, и есть более верный способ и решение, как сделать то, что я хочу?
Подскажите, пожалуйста, опытные создатели сайтов, как мне быть. А то у меня творческий кризис (с которого я никак не могу выбраться)
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.03.2013, 13:18
Ответы с готовыми решениями:

Как разбить шапку header на 3 части
Подскажите пожалуйста, как разбить шапку на 3 части без использования тега dev, создал левый...

<header> и <footer>
С моим футером творится, что-то непонятное. Выбрал одинаковый цвет для них (хэдера и футера), но...

header, резиновый content, footer
Задача: Header 120px; Резиновый content (может быть и несколько строчек текста, и вся 1000)...

Как растянуть header и footer
Как heder и footer растянуть, чтобы при уменьшении страницы, чтобы верх и низ сайта оставались на...

5
65 / 65 / 12
Регистрация: 07.03.2013
Сообщений: 198
07.03.2013, 12:32 2
Здравствуйте. По моему, если вы хотите, чтобы "Вертикальное меню" + "Ещё что-нибудь" находилось слева, а "Контент справа", то вам надо для "Контента" прописать float:right; а для подвала clear:both (это отмена обтекания).

И ещё, судя по вашей верстке
Цитата Сообщение от Alhena Посмотреть сообщение
<body> <div class='all_site'> <?php...
вам надо прописать float:left; для .left_side
0
1 / 1 / 0
Регистрация: 05.03.2013
Сообщений: 57
07.03.2013, 16:37  [ТС] 3
Это не помогло((
Нашла ошибку в разбиении:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="middle">
            <div class="left_side">
                <?php
                    include('inc/v_menu.php');
                ?>
            </div>
            <?php
                include('inc/main_content.php');
            ?>
        </div>
        <?php
            include('inc/footer.php');
        ?>
И сделала в стилях так:
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
.middle{
    width: 100%;
    position: relative;
    border: 1px #efaa10 solid;
    height: auto;
 
.v_menu{
    width: 280px;
    background: url(../img/~lst/bg_v_menu.jpg);
    background-repeat: repeat;
    border-radius: 20px;
    padding: 20px;
}
 
.main_content{
    background: -o-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: -moz-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: -ms-linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    background: linear-gradient(top, #BFAC84 0%, #E3D1A9 50%, #ffffff 100%);
    border-radius: 20px;
    border-color: #094FA8;
    border-width: 1px;
    border-style: solid;
    position: absolute;
    left: 330px;
    top: 0px;
    padding: 20px;
    text-align: justify;
}
 
.footer{
    width: 100%;
    background-color: brown;
    border-radius: 20px;
    margin-top: 10px;
}
Теперь вопрос в другом: т.к. левая часть (меню + еще что-то) и контент разной высоты, то подвал получается, что отображается не в конце страницы, а ниже левой части, но под контентом, т.е. контент как бы накладывается поверх подвала. Это, я так понимаю, происходит из-за того, что к контенту применено свойство
CSS
1
position: absolute;
но если его не применять, то не получится расположить дивы так, как нужно.
Может подвал можно опустить вниз как-то по-другому? Может с помощью jQuery или просто JS? Как будет более правильно и валидно?
0
0 / 0 / 0
Регистрация: 14.11.2012
Сообщений: 89
07.03.2013, 16:44 4
Для выравнивания помогут JavaScripts, как вариант CSS Equal Columns Height script, но есть и другие - погуглите
0
65 / 65 / 12
Регистрация: 07.03.2013
Сообщений: 198
07.03.2013, 18:40 5
Попробуйте вот так:

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
<style type="text/css">
html, body {
    height:100%;
}
#container {
    width:700px;
    height:100%;
    background:#7DC89A;
}
#head {
    width: 700px;
    height: 100px;
    background:#AEB6F4;
    position:relative;
    margin:0 auto;
}
#footer {
    width:700px;
    height:100px;
    background:#93DBF3;
    margin-top:-100px;/*высота подвала*/
    clear:both;
}
#_footer {
    width:700px;
    height:100px;/*высота подвала*/
    clear:both;
}
#cont {
    width:700px;
    min-height:100%;
    background:#7DC89A;
    overflow:auto;
}
#left_side {
    width:350px;
    min-height:200px;
    background:#EDBA81;
    float:left;
}
#main_content {
    width:350px;
    min-height:200px;
    background:#E8EE82;
    float:right;
}
</style>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<div id="container">
 
                                    <div id="cont">
                                                    <!-- Здесь будет размещаться голова и контент -->
                                                    <div id="head">Голова</div>
                                                                                                <div id="left_side">
                                                                                                  <p>Вертикальное меню и ещё что-нибудь (в отдельных дивах) </p>
                                      </div>
                                                                                                <div id="main_content">
                                                                                                  <p>Контент</p>
                                      </div>
                                                    <!-- /Здесь будет размещаться голова и контент -->
                                    
                                                                <div id="_footer"></div>
                                    </div>
                                    
                                    
<div id="footer">Подвал</div>
 
</div>
</body>
0
1 / 1 / 0
Регистрация: 05.03.2013
Сообщений: 57
12.03.2013, 13:12  [ТС] 6
Спасибо всем за помощь. В общем, выкрутилась с помощью position и float.
З.Ы. Не прошло и полгода. )))
0
12.03.2013, 13:12
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
12.03.2013, 13:12

Почему footer поднялся к header?
Почему footer поднялся к header? &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta...

Растянуть содержимое между header и footer
Здравствуйте, необходимо сделать примерно следующее: ...

Отступ перед header и после footer
Здравствуйте! Столкнулся вот с какой проблемой. Перед верхней частью сайта и после нижней -...

Прижать footer к нижней части страницы
Помогите прижать footer к нижней части странице, перерыла весь интернет но ни че не подходит:( ...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru