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

3

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

FakiNyan написав:

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

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

4 Востаннє редагувалося Monolith (20.01.2018 15: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, на ютубі відюшки теж є саме про це

Подякували: Belyj2051

6

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

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

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

7

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

Belyj205 написав:

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

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

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

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

Подякували: Eff1c, Belyj205, varkon3

12

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

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

13

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

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

14

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

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

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

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

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

https://cdn.discordapp.com/attachments/333936584481177600/404333408798507038/unknown.png

Подякували: leofun011

15

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

FakiNyan написав:

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

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

Подякували: Belyj2051

16

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

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

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

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

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

Подякували: NaharD1

17

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

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

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

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

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

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

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

Подякували: Belyj2051

18

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

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

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

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

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

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

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

19

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

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

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

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

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

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

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

20

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

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

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

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

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

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

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

Подякували: Belyj2051