Все елементы по середине

@bookkc · Регистрация: 24.06.2009

Студворк — интернет-сервис помощи студентам

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

Короче как сделать так что бы все слои были всегда по середине?

Взять весь код в тег <center> </center> не катит

@Blizzart · 29.12.2010, 22:43

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
html {
    height : auto;
    margin: 0 auto;
}
body {
    
}
#content{
    margin:0 auto;
    padding:0;
    position:relative;
    width:1000px;
}

@bookkc · 30.12.2010, 09:27 **[ТС]**

Если я правильно понял то это css.

Как прописать в index.html что у меня используется style.css ?

@Sulik78 · 30.12.2010, 10:35

HTML5
1
<link rel="stylesheet" type="text/css" href="style.css" />

@bookkc · 30.12.2010, 14:46 **[ТС]**

Так и сделал

ничего не вышло

вот код html страницы

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
<link rel="stylesheet" type="text/css" href="style.css" />
<html>
 
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Вход</title>
</head>
 
<body background="i/bg.gif">
<div style="position: absolute; width: 230px; height: 189px; z-index: 1; left: 715px; top: 15px" id="layer1">
<p align="center"><u><b><span lang="ru">Вход:</span></b></hr></u></p>
<center>
<hr>
<u></hr>
</u>
<center>
<form method="POST" action="--WEBBOT-SELF--">
    <!--webbot bot="SaveResults" U-File="C:\Users\1\Documents\Сшен Туе\_private\form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
    <p>
    <input name="T1" size="20" style="float: right; "></p>
<center>
    <p><u><b><span lang="ru">Логин:</span></b></u></p>
<center>
    <p>
    <input name="T2" size="20" style="float: right; "></p>
<center>
    <p><u><b><span lang="ru">Пароль:</span></b></u></p>
<center>
    <p>
    <input type="button" value="Вход" name="B1" style="float: right"></p>
</form>
</div>
<center>
<div style="position: absolute; width: 629px; height: 380px; z-index: 5; left: 312px; top: 242px" id="layer5">
&nbsp;</div>
<center>
</hr>
<center>
<div style="position: absolute; width: 299px; height: 190px; z-index: 2; left: 10px; top: 15px" id="layer2">
    <img border="0" src="i/logo.png" width="300" height="190"></div>
 
<center>
 
<center>
 
<div style="position: absolute; width: 203px; height: 377px; z-index: 4; left: 20px; top: 244px" id="layer4">
    <b><span lang="ru">Меню:</span></b><center>
<p><span lang="ru"><b>1) </b></span></p>
<center>
    <p><span lang="ru"><b>2)</b></span></p>
<center>
    <p><span lang="ru"><b>3)</b></span></p>
<center>
    <p><span lang="ru"><b>4)</b></span></p>
<center>
    <p><span lang="ru"><b>5)</b></span></div>
 
</body>
 
</html>

@Feax · 30.12.2010, 15:00

bookkc,

HTML5
1
<link rel="stylesheet" type="text/css" href="style.css" />

пишется между тегами <head> </head>. Ты случаем не в Frontpage делал страницу? Код страшный

@bookkc · 30.12.2010, 21:29 **[ТС]**

Да, в Front Page.

Подскажите программы на подобие Front Page ? а то я только этой и знаю как делать

Добавлено через 2 минуты
Незнаю, не помогло...

HTML5
1
2
3
4
5
6
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Вход</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

@Feax · 31.12.2010, 12:02

bookkc, лучше писать код в текстовом редакторе с функцией подсветки и/или поддержкой снипетов(что то типа патернов) самостоятельно, тогда ты будешь иметь полный контроль на своей страничкой, и будешь знать, что, где и за что отвечает. У тебя все слои(div'ы с id=layer#) имеют атрибут style(присваевание css-свойств для элемента). В каждом style прописано:

CSS
1
position: absolute; width: 230px; height: 189px; z-index: 1; left: 715px; top: 15px

Position - позицонирование элемента( расположение ), в данном случае у тебя стоит абсолютное позиционирование (position:absolute).
Width - ширина элемента
Height - высота элемента
z-index - порядок слоя
left - при абсолютном позиционировании, свойство left отвечает за расстояние между элементом и левой границей области отображения html страницы в браузере. В данном случае у тебя стоит left:715px, что значит - элемент будет всегда распологаться на расстоянии 715px от левой стороны.
top - тот же принцип, что и у свойства left, только отвечает за расстояние элемента от верхней границы.

Для того, чтобы расположить блок по центру, при абсолютном позиционировании, нужно задать left и top не в пикселях, а в процентах, чтобы элемент распологался всегда в центре, независимо от разрешения экрана.
Сделать это нужно так:

CSS
1
2
3
4
#layer1 { 
position:absolute;
left:50%;
margin-left:-115px ; /* margin-left - отступ слева, в данном случае он равен половине ширины элемента*/

p.s.: Вообще лучше переписать код, и разобраться в HTML и CSS поглубже, тогда будет гораздо проще. Лучше верстать не слоями в данном случае, а таблицами или блоками(см. блочная верстка). Почитай про позиционирование блоков, плавающие блоки, блочная верстка ( все это по CSS ).

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 19.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@bookkc 0 / 0 / 1 Регистрация: 24.06.2009 Сообщений: 232

	Все елементы по середине 29.12.2010, 16:13. Показов 4993. Ответов 7 Метки нет (Все метки) Есть страница, на которой всё построено из слоев (Layer) на разных розрешениях слои по разному отображаются на странице, чем розрешение больше, тем больше место от правого угла до начала слов. Короче как сделать так что бы все слои были всегда по середине? Взять весь код в тег <center> </center> не катит 0

@bookkc 0 / 0 / 1 Регистрация: 24.06.2009 Сообщений: 232
	30.12.2010, 09:27 [ТС]
	Если я правильно понял то это css. Как прописать в index.html что у меня используется style.css ? 0