NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Mezinárodní den IT společnosti je tady! Pouze nyní můžeš získat 90 % extra kreditů při nákupu od 1199 kreditů s promo kódem AJTACI90. Tak neváhej!

Diskuze: Zobrazení stránky na monitoru

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Aleš Novotný
Člen
Avatar
Aleš Novotný:8.2.2020 14:08

Mám vytvořenou internetovou stránku o šířce 960px a nejde mi nastavit aby se na monitoru zobrazovala uprostřed obrazovky.
Teď ji mám zarovnanou na levou stranu.

Zkusil jsem: V css Body jsem nastavil šířku na 960px.

Text-align: center
Float: center
mi to na střed nedají.

Co použít jiného?

Chci docílit: Abych internetovou stránku měl zobrazenou na monitoru v prostředku. Aby nebyla zarovnaná vlevo.

 
Odpovědět
8.2.2020 14:08
Avatar
Milan Turyna
Tvůrce
Avatar
Milan Turyna:8.2.2020 14:21

Float můžeš nastavit pouze na right a left a text-align: center nefunguje protože se to vztahuje na text.
Zarovnání na střed se dělá takto: https://www.w3schools.com/css/tryit.asp?…, a kdyby jsi chtěl použít text-align:center tak první musíš nastavit display:block tomu elementu. Za další, když budeš využívat na všem pixely, tak to moc dobře s responzivitou nedopadne.

Editováno 8.2.2020 14:21
Nahoru Odpovědět
8.2.2020 14:21
Řeš pouze to, co dokážeš ovlivnit.
Avatar
Aleš Novotný
Člen
Avatar
Aleš Novotný:8.2.2020 18:35

Děkuju, vyzkouším.
Mám doma širokoúhlý monitor a ono se mi to na něm roztáhne na celou šířku. A nevypadá to pěkně.
Dočetl jsem se zde, že běžná šířka stránky je těch 960px. Tak jsem to zadal.

Potřeboval bych nastudovat tvorbu menu. Aby na PC byly nabídky v horní liště vedle sebe a na mobilu byl po pravé straně rozvírací seznam. Ale zatím sem to tu nenašel. Pouze menu pevné.

 
Nahoru Odpovědět
8.2.2020 18:35
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Aleš Novotný
Jaroslav Smrž:8.2.2020 20:09

Zarovnání elementu s pevnou šířkou na střed se dělá pomocí

justify-content: center

nebo pomocí flex. Také by se ti asi hodil nějaký framework jako třeba bootstrap. Ten má již breakpointy vyřešené. Menu se ale dá napsat i v html bez JS za pomoci media queries

@media
Nahoru Odpovědět
8.2.2020 20:09
/* Life runs on code */
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Aleš Novotný
Ondřej Šrytr:8.2.2020 22:14

Ahoj,

text-align platí jen pro řádkové elementy, tzn. pro ty, které mají nastavenou vlastnost display na inline, případně inline-block.
float je směr obtékání, takže center je nesmysl. Float má pouze hodnoty left, right a none.
V tvém případě se bude jednat o blokový element, nejjednodušší zarovnání na střed je kombinací CSS vlastností margin-left a margin-right, a hodnotou auto.

margin-left: auto;
margin-right: auto;
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
+1
8.2.2020 22:14
Avatar
Aleš Novotný
Člen
Avatar
Aleš Novotný:10.2.2020 12:14

Moc vám děkuju. Mám to zarovnané na střed.

Ale mám problém s tím menu. V bootstrape jsem stáhl jednoduchou šablonu webu. Ale je tam tolik zbytečného kodu v css, že kdxž tam chci něco trochu upravit, je to nad moje usilí.

 
Nahoru Odpovědět
10.2.2020 12:14
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Aleš Novotný
Jaroslav Smrž:10.2.2020 12:49

Definuj prosím "zbytečný kód" a "něco upravit", pak budeme vědět víc :-)

Nahoru Odpovědět
10.2.2020 12:49
/* Life runs on code */
Avatar
Lava
Člen
Avatar
Odpovídá na Aleš Novotný
Lava:10.2.2020 16:05

Mam pocit, že nepouživaš developer tools v prehliadači, inak by to bola pre teba gombička

Nahoru Odpovědět
10.2.2020 16:05
Aspartám, sacharín, to je môj vitamín
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Aleš Novotný
Ondřej Šrytr:10.2.2020 20:40

Mohl bys dát odkaz na tu šablonu? Lepší bude, když budeš začínat weby s vlastním kódem, ale u samotného Bootstrapu můžeš zůstat. Až se tvoje úroveň zlepší, budeš se v šablonách a cizím kódu lépe orientovat. :)

 
Nahoru Odpovědět
10.2.2020 20:40
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Aleš Novotný
Peter Mlich:11.2.2020 7:55

Muzes napsat rozumny dotaz? Bavis se o jakesi fikci, kterou mas ve svem pocitaci. (dekuji za pomoc) Tak to asi nemas zac :)

 
Nahoru Odpovědět
11.2.2020 7:55
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.