Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209

Позиционирование блока навигации

05.09.2016, 10:10. Показов 2117. Ответов 14
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Отдел "Новости" стоит слева, но его нужно подстроить под навигацию, там справа будет место для содержания.

Цель в том, чтобы поставить его под навигацией слева и при этом чтобы он выглядел одинаково на всех вычислительных машинах...

Вот код :

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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<!DOCTYPE html!>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Автошкола ВИРАЖ</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
#footer {
    position: fixed;
    left: 0; bottom: 0;
    color: #000000;
    width: 100%;
   }
   
   #footer div {
    padding: 10px;
    background: #ADD8E6;}
    .img {
    line-height: 1px; /* Межстрочное расстояние */
   }
    
 
   
</style>
</head>
<body style="background: url(images/back.png); height: 1200px">
<div id="bigboss"></div>
<br>
<br>
 
<table width="950px;" style="margin: 0 auto;">
<tr>
<td style="float: left;"><img src="https://www.cyberforum.ru/images/6537811_orig.png" style="width: 108px; height: 101px;"></td>
<td><center><img src="https://www.cyberforum.ru/images/text.png" width="353px" height="41px"></center></td>
<td style="float: right;"><img src="https://www.cyberforum.ru/images/6537811_orig.png" style="width: 108px; height: 101px;"></td>
</tr>
</table>
 
<table width="950px;" style="margin: 0 auto;">
<tr>
<td>
    <ul id="nav" style="width: 100%;float: left;margin: 0 0 3em 0;padding: 0; list-style: none;background-color: #f2f2f2;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;">
      <li style="float: left; padding-left: 7%;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Главная</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Обучение</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Оснащение</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Преподователи</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Рекомендации</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Документы</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;">Контакты</a></li>
    </ul>
</td>
</tr>
</table>
 
<div width="950px;" style="margin: 0 auto;margin-top: 0px; float: left;">
<div>
<table style="margin: 0 auto;">
<tr>
<td>
<img src="https://www.cyberforum.ru/images/news-512.png" width="42" height="42">
</td>
<td style="float: left"><h3>Новости<h3></td>
</tr>
<tr>
<td width="180px" colspan="2">
<div style="width: 180px;height: 180px; border: 1px solid black; background-color: f2f2f2;border-radius: 5px 5px 5px 5px;">
 
</div>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<div style="width: 180px;height: 180px; border: 1px solid black; background-color: f2f2f2;border-radius: 5px 5px 5px 5px;">
 
</div>
<br>
</td>
</tr>
 
<tr>
<td colspan="2">
<div style="width: 180px;height: 180px; border: 1px solid black; background-color: f2f2f2;border-radius: 5px 5px 5px 5px;">
 
</div>
</table>
</div>
<br>
</td>
</tr>
</div>
 
 
 
 
 
 
 
 
 
 
 
<div id="footer">
   <div>
    © АвтошколаВИРАЖ
    <a href="#bigboss"><img src="https://www.cyberforum.ru/images/tomain.png" height="20px;" style="float: right;"></a>
   </div>
  </div>
 
</body>
</html>
Добавлено через 15 секунд
Заранее спасибо!
0
Лучшие ответы (1)
Сообщение: #9517379
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 05.09.2016, 10:10
Ответы с готовыми решениями:

Позиционирование панели навигации
Как сделать так, чтобы при верстке navbar так сильно не смещался? Код такой: &lt;ul class=&quot;nav navbar-nav&quot;&gt; ...

Позиционирование блока
приветствую,у меня блочная структура сайта,все блоки резиновые,всё хорошо,да вот только главный блок где слайдер при маштабирование...

Позиционирование блока
Здравствуйте! Помогите пожалуйста с позиционированием. Мне надо чтобы блок стоял посередине статьи. Сначала блок стоял слева и не хотел...

14
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
05.09.2016, 10:29
HTML5
1

<div width="950px;" style="margin: 0 auto;margin-top: 0px; float: left;">
Замените на:
HTML5
1

<div style="width: 950px; margin: 0 auto;">
У
HTML5
1

<table style="margin: 0 auto;">
Вообще уберите стили. То есть:
HTML5
1

<table>
Как я в той теме сказал -- лучше не пишите стили в атрибутах тегов style. Присваивайте элементам классы и идентификаторы, а в файле стилей уже пишите стили для них.

Да, и таблицы в вёрстке лучше не использовать, а использовать блоки.
0
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209
05.09.2016, 10:55  [ТС]
Para bellum, Проблема в том, что когда я ставлю справа штуку для содержания, даже с rowspan блоки от новостей друг от друга отходят подальше, чем до штуки с содержанием(
0
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
05.09.2016, 11:06
Снимок экрана покажите, как это отображается.
0
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209
05.09.2016, 17:59  [ТС]
Para bellum,
Миниатюры
Позиционирование блока навигации  
0
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209
06.09.2016, 08:30  [ТС]
Para bellum, Ау, молю помогите!!!
0
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
06.09.2016, 08:42
Не пойму -- а как должно быть? По вертикали ближе друг к другу или что?
0
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209
06.09.2016, 09:37  [ТС]
Para bellum, Мелкие блоки раздела "Новости" должны быть по ближе друг к другу
0
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
06.09.2016, 09:47
Ещё раз код скопируйте сюда, вместе с блоком для содержания.
0
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209
06.09.2016, 10:15  [ТС]
Para bellum,

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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

<!DOCTYPE html!>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Автошкола ВИРАЖ</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel= "icon" href= "favicon.ico" type= "ico"> 
<style type="text/css">
#footer {
    position: fixed;
    left: 0; bottom: 0;
    color: #000000;
    width: 100%;
   }
   
   #footer div {
    padding: 10px;
    background: #ADD8E6;}
    .img {
    line-height: 1px; /* Межстрочное расстояние */
   }
    
 
   
</style>
</head>
<body style="background: url(images/back.png); height: 1800px">
<div id="bigboss"></div>
<br>
<br>
 
<table width="950px;" style="margin: 0 auto;">
<tr>
<td style="float: left;"><img src="images/6537811_orig.png" style="width: 108px; height: 101px;"></td>
<td><center><a href="index.html"><img src="images/text.png" width="353px" height="41px"></a></center></td>
<td style="float: right;"><img src="images/6537811_orig.png" style="width: 108px; height: 101px;"></td>
</tr>
</table>
 
<table width="950px;" style="margin: 0 auto;">
<tr>
<td>
    <ul id="nav" style="width: 100%;float: left;margin: 0 0 3em 0;padding: 0; list-style: none;background-color: #f2f2f2;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;">
      <li style="float: left; padding-left: 7%;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Главная</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Обучение</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Оснащение</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Преподователи</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Рекомендации</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;border-right: 1px solid #ccc;">Документы</a></li>
      <li style="float: left;"><a href="#" style="display: block;padding: 8px 15px;text-decoration: none;font-weight:bold;color: #069;">Контакты</a></li>
    </ul>
</td>
</tr>
</table>
 
<div style="width: 950px; margin: 0 auto;">
<div>
<table style="margin: 0 auto;">
<tr>
<td>
<img src="images/news-512.png" width="42" height="42">
</td>
<td style="float: left"><h3>Новости<h3></td>
 
<td rowspan="6">
 
<div style="width: 700px; height: 1000px; border: 1px solid black; background-color: f2f2f2;border-radius: 5px 5px 5px 5px;"></div>
 
</td>
 
</tr>
<tr>
<td width="180px" colspan="2">
<div style="width: 180px;height: 180px; border: 1px solid black; background-color: f2f2f2;border-radius: 5px 5px 5px 5px;">
 
</div>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<div style="width: 180px;height: 180px; border: 1px solid black; background-color: f2f2f2;border-radius: 5px 5px 5px 5px;">
 
</div>
<br>
</td>
</tr>
 
<tr>
<td colspan="2">
<div style="width: 180px;height: 180px; border: 1px solid black; background-color: f2f2f2;border-radius: 5px 5px 5px 5px;">
 
</div>
</td>
</tr>
 
 
</table>
</div>
<br>
 
 
</div>
 
 
 
 
 
 
 
 
 
 
 
<div id="footer">
   <div>
    © АвтошколаВИРАЖ
    <a href="#bigboss"><img src="images/tomain.png" height="20px;" style="float: right;"></a>
   </div>
  </div>
 
</body>
</html>
Спасибо огромное, что возитесь со мной )
0
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
06.09.2016, 12:02
Лучший ответ Сообщение было отмечено korol1337228 как решение

Решение

В общем, всё переделал:
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
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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Автошкола ВИРАЖ</title>
    <link rel="stylesheet" type="text/css" href="/style.css"/>
    <link rel="icon" href= "favicon.ico" type="ico"/>
</head>
<body>
    <div class="container">
        <header class="clearfix">
            <div class="cones pull-left"></div>
            <div class="logo pull-left">
                <a href="/">
                    <img src="images/text.png"/>
                </a>
            </div>
            <div class="cones pull-right"></div>
        </header>
        <ul class="nav clearfix">
            <li>
                <a href="#">Главная</a>
            </li>
            <li>
                <a href="#">Обучение</a>
            </li>
            <li>
                <a href="#">Оснащение
            </a></li>
            <li>
                <a href="#">Преподователи</a>
            </li>
            <li>
                <a href="#">Рекомендации</a>
            </li>
            <li>
                <a href="#">Документы</a>
            </li>
            <li>
                <a href="#">Контакты</a>
            </li>
        </ul>
        <aside class="left">
            <h3>Новости</h3>
            <div class="announce">Анонс номер раз</div>
            <div class="announce">Анонс номер два</div>
        </aside>
        <div class="content">
            <!--ЭТОТ БЛОК ОБЯЗАТЕЛЬНО УДАЛИТЕ, ОН ТОЛЬКО ДЛЯ ПРИМЕРА -->
            <div style="height: 1000px;"></div>
            <!--/ЭТОТ БЛОК ОБЯЗАТЕЛЬНО УДАЛИТЕ, ОН ТОЛЬКО ДЛЯ ПРИМЕРА -->
        </div>
        <div class="clearfix"></div>
    </div>
    <footer>
        &copy; Автошкола &laquo;ВИРАЖ&raquo;
        <a href="#bigboss" class="pull-right">
            <img src="images/tomain.png">
        </a>
    </footer>
</body>
</html>
А это стили для сайта, поместите их в файл "style.css":
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

* {
    margin: 0;
    padding: 0;
}
body {
    background: url(/images/back.png);
    font-family: arial, sans-serif;
}
img {
    vertical-align: middle;
    border: 0;
}
footer {
    margin-top: 30px;
    padding: 10px;
    background: #ADD8E6;
}
.img {
    line-height: 1px; /* Межстрочное расстояние */
}
.left {
    float: left;
    width: 180px;
}
.left h3:before {
    background: url(images/news-512.png);
    content: " ";
    display: inline-block;
    height: 42px;
    margin-right: 10px;
    vertical-align: middle;
    width: 42px;
}
.left .announce {
    height: 180px;
    margin-top: 15px;
    border: 1px solid black;
    background-color: #f2f2f2;
    border-radius: 5px;
}
.left .announce,
.content {
    border: 1px solid black;
    background-color: #f2f2f2;
    border-radius: 5px;
}
.container {
    margin: 0 auto;
    width: 950px;
}
header .cones {
    background: url(images/6537811_orig.png) #CCC;
    height: 101px;
    width: 11.5%;
}
.logo {
    text-align: center;
    width: 77%;
}
.logo img {
    width: 353px;
    height: 41px;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.nav {
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.nav li {
    float: left;
}
.nav a {
    display: block;
    padding: 8px 17px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    color: #069;
}
.nav li:not(:last-of-type) a {
    border-right: 1px solid #ccc;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.content {
    width: 730px;
    float: right;
}
Кое что нужно доработать (например, ту картинку сверху ниже сделать), в целом же думаю понятно.

P.S. Таблицы в вёрстке используйте только по назначению. Не используйте их везде, где только можно, а-то так и будете в тупик заходить -- придётся много чего менять, как сейчас.
1
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209
06.09.2016, 17:51  [ТС]
Para bellum, Спасибо! Я вас услышал и постараюсь исправится!

Добавлено через 32 минуты
Para bellum, Вот только можно ли как-то поставить конусы - как они были в полный размер, а не 1/4 первого конуса?
0
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
06.09.2016, 18:23
У меня просто нет той картинки, размеры её не знаю. Она больше, чем размер блока?
Тогда поможет свойство:
CSS
1

background-size: contain;
Для header .cones. Фон впишется в размеры блока. На самом деле можно и в виде картинки (тег <img>) поместить в тот блок, а не в виде фона.
1
 Аватар для korol1337228
4 / 4 / 0
Регистрация: 06.01.2016
Сообщений: 209
06.09.2016, 19:19  [ТС]
Para bellum, Сработало, спасибо вам больше)
0
Эксперт PHP
5755 / 4134 / 1508
Регистрация: 06.01.2011
Сообщений: 11,276
06.09.2016, 19:24
Не за что. Успехов.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 06.09.2016, 19:24
Помогаю со студенческими работами здесь

Позиционирование блока
Здравствуйте. Я использую блочную верстку. Мне нужно чтобы на странице под заголовком отображалась полоса.Но полоса эта по размерам...

Позиционирование блока
Добрый вечер Люди!вопрос таков - как сделать так,чтоб мой div с любой инфой находился постоянно по центру браузера и при приближении и...

Позиционирование блока (css)
Добрый день! Мучусь несколько дней, не могу нормально создать позицию на сайте joomla. В общем, на сайте: http://www.tetracom.lviv.net/ ...

Позиционирование блока с absolute
Здравствуйте форумчане. Пытаюсь сделать всплывающее окно, куда ajax возвращает данные при наведении на элемент. Проблема в том, что...

Позиционирование блока absolute;
Добрый день. Есть страница доставки http://philipyr.bget.ru/auxpage_dostavka/. Необходимо, чтобы при нажатии на любой город, модальное окно...


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

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Новые блоги и статьи
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru