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

Позиционирование

18.01.2020, 20:27. Показов 273. Ответов 0

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

Позиционирование
Позиционирование
Позиционирование


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
<!doctype html>
<html>
<title>Пиццерия</title>
<head>
<meta http-equiv="content-type" charset="utf-8" content="text/html">
<link rel="icon" href="image/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div>
<nav class="p1">
<a href="index.html" target="_self" class="home">Главная</a>
<input type="checkbox" id="1">
<label for="1">Меню
<ul>
<li><a href="pizza.html" target="_self" class="pizza">Пицца</a></li>
<li><a href="roll.html" target="_self" class="roll">Роллы</a></li>
<li><a href="hots.html" target="_self" class="hots">Горячее</a></li>
<li><a href="napit.html" target="_self" class="napit">Напитки</a></li>
</ul>
</label>
<a href="stocks.html" target="_self" class="stocks">Акции</a>
<a href="about.html" target="_self" class="about">О нас</a>
</nav>
</div>
<br>
<hr>
<header><h2>Добро пожаловать!</h2></header>
<p class="p2">Здесь вы можете заказать пиццу на свой вкус и не только!
Вас ждёт широкий ассортимент!
</p>
<div class="timedate">
<table width="200" height="150" border="1" cellpadding="10" cellspacing="1">
<th colspan="7">
<tr><td><td><td><td><td><td><td></tr>
<tr><td><td><td><td><td><td><td></tr>
<tr><td><td><td><td><td><td><td></tr>
<tr><td><td><td><td><td><td><td></tr>
<tr><td><td><td><td><td><td><td></tr>
</table>
</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
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
124
125
126
127
128
129
130
input {
display:none;
}
 input~label {
display:inline-block;
position:ralative;
padding:10px;
border-left: 1px solid black;
width:100px;
text-align:center;
cursor:pointer;
font-size: 16px;
}   
input~label::after {
content: '\003C';
display:inline-block;
position:absolute;
margin-left:20px;
transform:rotate(270deg);
}
input:checked~label::after{
content: '\003C';
transform:rotate(90deg);
}   
nav ul li {
list-style:none;
width:100px;
text-align:center;
margin-left:1px;
}
nav ul {
display:none;
position:absolute;
margin:10px 0px 0px -51px;
width:100px;
}
.p1 {
background-color:Lavender;
}
#Bright {
border-right:1px solid black;   
}
.stocks {
display:inline-block;
width:100px;
text-align:center;
border-left: 1px solid black;
padding:10px;
}
.about {
display:inline-block;
width:100px;
text-align:center;
border-right: 1px solid black;
padding:10px;
border-left: 1px solid black;
}
.home {
display:inline-block;
width:100px;
text-align:center;
padding:10px;
border-left: 1px solid black;
}
nav {
text-align: center;
font-size: 0;
white-space:nowrap;
}
nav ul li a {
display:block;
width:100px;
background-color:Snow;
padding: 10px 10px 10px 10px;
border-bottom: 1px solid black;
text-decoration: none;
}
nav a {
color: black;
text-decoration: none;
font-size: 16px;    
}   
nav a:hover {
background-color:Black;
color:Red;
}
nav label:hover {
background-color:Black;     
color:red;
}
li a:hover {
background-color:Ivory;
color:black;    
}   
nav input:checked+label ul{
display: block;
}   
header {
text-align:center;
font-style:italic;
font-size:30px;
width:60%;
margin:auto;
background-color:red;
min-width:600px;
max-width:600px;
}   
hr {
height:2px;
background-color:black;
border:none;
box-shadow: 2px 2px 3px #777;
}
.timedate {
position:absolute;
right:5px;
background-color:Aqua;  
width:200px;
height:150px;
top:200px;
}
.p2 {
text-align:center;
font-size:24px;
width:60%;
margin:auto;
background-color:red;
min-width:600px;
max-width:600px;    
}
 Комментарий модератора 
Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.01.2020, 20:27
Ответы с готовыми решениями:

Позиционирование
Зачем использовать позицию relative? Я знаю, что если использовать данный метод позиционирования,...

Позиционирование
Здравствуйте. Надо чтобы див, оставался в центре экрана, даже если страницу прокручивают вниз,...

Позиционирование
Здравствуйте. Какое позиционирование будет лучше для сайта? Каким способом позиционирования верхних...

Позиционирование
Запутался Проблема: Надо что бы два блока картинка и блок(div): были выровнинны относительно друг...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.01.2020, 20:27

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

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

Позиционирование
Есть такая нарезка кода html: &lt;article class=&quot;portfolio&quot;&gt; &lt;div class=&quot;block&quot;&gt;&lt;/div&gt; ...

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

позиционирование
есть страница как сделать так, что бы вся информация размещалась на сером фоне?


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

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

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