1

Тема: Html розташування сторінки у веб браузері

Любі друзі! (як президент) :-) Допоможіть з вирівнюванням сторінки в центрі веб браузера.
Є такий код.
<html>

<head>
  <title></title>
</head>

<body>
<table cellspacing="10"><!-- cellspacing="10" высота отступов между ячейками -->
<tr><!-- 1 строка -->
<td height="290" width="630" bgcolor="#336699">1x2</td><!-- height="высота" width="ширина" -->
<td width="390" bgcolor="#FFCC33">1x3</td>
</tr>
</table>
<table cellspacing="10">
<tr><!-- 2 строка -->
<td height="40" width="460" bgcolor="#FFCC33">1x1</td>
<td width="230" bgcolor="#336699">2x1</td>
<td width="130" bgcolor="#FFCC33">2x2</td>
<td width="180" bgcolor="#336699">2x3</td>
</tr>
</table>
<table cellspacing="10">
<tr><!-- 3 4 5 6 строка -->
<td height="655" width="260" bgcolor="#336699">1x2</td>
<td width="760" bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td height="100" width="260" bgcolor="#FFCC33">2x2</td>
<td width="760" bgcolor="#336699">2x3</td>
</tr>
<tr>
<td height="40" width="260" bgcolor="#336699">1x2</td>
<td width="760" bgcolor="#FFCC33">1x3</td>
</tr>
</table>


</body>

</html>
Але на моніторі 1024 він відображається зліва. Як робити щоб він розташувався в центрі монітора?

2

Re: Html розташування сторінки у веб браузері

зробіть контейнеру фіксовану ширину, і встановіть відступ справа і зліва в auto

тут спілкуються українці (серед них є програмісти)
https://discord.gg/Zk29v4P

3

Re: Html розташування сторінки у веб браузері

FakiNyan написав:

зробіть контейнеру фіксовану ширину, і встановіть відступ справа і зліва в auto

Це добре, але я не розумую як це зробити. Не моглиб ви більш детально, на моему прикладі пояснити як це зробити. В загалі Я не програміст (в програмуванні знаю html та щє декілька мов з освітньої школи) але дуже хочу зрлбити це для моєї сторінки. Або дати ссилку (шпоргалку). Дякую!

4 Востаннє редагувалося Monolith (20.01.2018 16:55:42)

Re: Html розташування сторінки у веб браузері

1. Не "ссилка", а "посилання". Так я зануда, але мене це бісить, навіть більше за "строчка".

2. Можна використати відступи. Якщо Вам треба вирівняти блок по центру, тільки по горизонталі: задаєте для потрібного блоку фіксовану ширину (width), далі прописуєте для нього:

.block { margin: 0 auto; }

Тобто вся фішка в тому, щоб відступ ліворуч і праворуч був auto. Згори, знизу - як хочете. Здається так можна зробити і навпаки (тобто згори/знизу auto). Ще раз повторю - це працює тільки з блоками, які мають фіксовану ширину.

3. Можна використати flexbox: створіть контейнер навколо потрібного блоку. Для контейнера задайте:

display: flex;
align-items: center;
justify-content: center;

Примітка: блок центрується відносно контейнера, а не сторінки. Тобто якщо треба відносно сторінки (всієї ширини й висоти екрану), то зробіть контейнер висотою у 100%, інколи для цього треба й теґи html/body зробити висотою у 100%. Або задайте ті ж властивості відразу для body, також задавши для нього потрібну висоту. І не забувайте, що відносно контейнеру центрується нащадок вкладеності першого рівня. Якщо у контейнері будуть ще нащадки (поруч з потрібним блоком, тобто на тому ж рівні вкладеності), центрування діятиме і на них.

Сподіваюся допоміг, якщо щось незрозуміло описав - пишіть :)

Подякували: 221VOLT, Belyj205, leofun013

5

Re: Html розташування сторінки у веб браузері

Belyj205 написав:
FakiNyan написав:

зробіть контейнеру фіксовану ширину, і встановіть відступ справа і зліва в auto

Це добре, але я не розумую як це зробити. Не моглиб ви більш детально, на моему прикладі пояснити як це зробити. В загалі Я не програміст (в програмуванні знаю html та щє декілька мов з освітньої школи) але дуже хочу зрлбити це для моєї сторінки. Або дати ссилку (шпоргалку). Дякую!

то нащо воно вам треба, якщо то не є вашою спеціяльністю?
вам вже дали напрямок, в котрому копати, гугл у вас працює, гугліть щось типу how to center a container in html, на ютубі відюшки теж є саме про це

тут спілкуються українці (серед них є програмісти)
https://discord.gg/Zk29v4P
Подякували: Belyj2051

6

Re: Html розташування сторінки у веб браузері

Дякую FakiNyan, дякую "зануда" Monolith без образ ;-) але навіть у моєму віці вчитись не пізно! Я впевнений що є фахівці але дуже кортить зробити особисто!
Дякую за допомогу, вибачте за помилки!!!

Подякували: 0xDADA11C71

7

Re: Html розташування сторінки у веб браузері

Belyj205 написав:

Дякую FakiNyan, дякую "зануда" Monolith без образ ;-) але навіть у моєму віці вчитись не пізно! Я впевнений що є фахівці але дуже кортить зробити особисто!
Дякую за допомогу, вибачте за помилки!!!

то скільки вам років?

тут спілкуються українці (серед них є програмісти)
https://discord.gg/Zk29v4P

8

Re: Html розташування сторінки у веб браузері

40 минуло але в душі як Дартаньяну 18! :-)

9

Re: Html розташування сторінки у веб браузері

http://echo.lviv.ua/dev/7199
Не реклама!
Просто цікава стаття на цю тему

Подякували: Belyj205, ReAl, ostap34PHP3

10

Re: Html розташування сторінки у веб браузері

Eff1c написав:

http://echo.lviv.ua/dev/7199
Не реклама!
Просто цікава стаття на цю тему

Дякую!  Обовязково перегляну сторінку!  Гарно що на цьому форумі так багато користувачів які знають цю справу.

11

Re: Html розташування сторінки у веб браузері

2 Belyj205
якщо Ви не плануєте заглиблюватися в нутрощі фронт-енду - може краще використовувавти CSS фреймворки?
фактично це бібліотека готових css класів , організована і підбрана по функціоналу, протестована на різні версіях бровзерів.
скажімо, потративши 1 день на бутсрап чи щось подібне Ви потім багато років зможете творити свої веб-сторінки не задумуючись про центрування чи перескакування блоків, а зосереджуючись над змістом.
приклад з таблицями: https://getuikit.com/docs/table

ну і звісно, можна додавати свої зміни до класів чи створювати свої власні

First, solve the problem. Then, write the code. (c)JJ
Подякували: Eff1c, Belyj205, varkon3

12

Re: Html розташування сторінки у веб браузері

Дуже гарна пропозиція від ping але Я маю бажання змінити HTML на php але сьогодні не маю на це можливостей та досвіду. Web дизайн моє захоплення майже на професійному рівні та є бажання досягти більшого!

13

Re: Html розташування сторінки у веб браузері

а чому сайт московською?
http://remont-poltava.zzz.com.ua/

тут спілкуються українці (серед них є програмісти)
https://discord.gg/Zk29v4P

14

Re: Html розташування сторінки у веб браузері

а ось це що таке?

Прихований текст

зареєстроване нещодавно, і це після 4 років війни з рашкою, і доросла ж людина, і не з донбасу, я в шоці...

Прихований текст
https://cdn.discordapp.com/attachments/333936584481177600/404333408798507038/unknown.png
тут спілкуються українці (серед них є програмісти)
https://discord.gg/Zk29v4P
Подякували: leofun011

15

Re: Html розташування сторінки у веб браузері

FakiNyan написав:

а чому сайт московською?
http://remont-poltava.zzz.com.ua/

до чого цей вибрик в даній темі? створіть свою у відповідному розділі і питайте.

First, solve the problem. Then, write the code. (c)JJ
Подякували: Belyj2051

16

Re: Html розташування сторінки у веб браузері

ping написав:
FakiNyan написав:

а чому сайт московською?
http://remont-poltava.zzz.com.ua/

до чого цей вибрик в даній темі? створіть свою у відповідному розділі і питайте.

чим я вас образив?

тут спілкуються українці (серед них є програмісти)
https://discord.gg/Zk29v4P
Подякували: NagarD1

17

Re: Html розташування сторінки у веб браузері

FakiNyan написав:
ping написав:
FakiNyan написав:

а чому сайт московською?
http://remont-poltava.zzz.com.ua/

до чого цей вибрик в даній темі? створіть свою у відповідному розділі і питайте.

чим я вас образив?

в дані темі людина попросила про допомогу з технічним питанням.

до чого тут цей сайт чи війна з Росією?

First, solve the problem. Then, write the code. (c)JJ
Подякували: Belyj2051

18

Re: Html розташування сторінки у веб браузері

ping написав:
FakiNyan написав:
ping написав:

до чого цей вибрик в даній темі? створіть свою у відповідному розділі і питайте.

чим я вас образив?

в дані темі людина попросила про допомогу з технічним питанням.

до чого тут цей сайт чи війна з Росією?

і це вас так сильно зачепило, що ви назвали мою претензію щодо мови "вибриком" (ніби мені це подобається робити), і почали цю розмову, котра ще більше засрала тему?

тут спілкуються українці (серед них є програмісти)
https://discord.gg/Zk29v4P

19

Re: Html розташування сторінки у веб браузері

ping написав:
FakiNyan написав:
ping написав:

до чого цей вибрик в даній темі? створіть свою у відповідному розділі і питайте.

чим я вас образив?

в дані темі людина попросила про допомогу з технічним питанням.

до чого тут цей сайт чи війна з Росією?

Дякую за те, що зрозуміли. Коли людина мого віку, все життя вчилася в школі з російською мовою, це не означає що їй треба змінити громадянство. В той час було саме так!!!

20

Re: Html розташування сторінки у веб браузері

FakiNyan написав:
ping написав:
FakiNyan написав:

чим я вас образив?

в дані темі людина попросила про допомогу з технічним питанням.

до чого тут цей сайт чи війна з Росією?

і це вас так сильно зачепило, що ви назвали мою претензію щодо мови "вибриком" (ніби мені це подобається робити), і почали цю розмову, котра ще більше засрала тему?

яке відношення має до даної теми мова сайту, який тут навіть не згадувався?

First, solve the problem. Then, write the code. (c)JJ
Подякували: Belyj2051