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.

Aktivity

Aleš Novotný

Člen

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

Milan Turyna

Tvůrce

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.

Aleš Novotný

Člen

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

Jaroslav Smrž

Tvůrce

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 */

Ondřej Šrytr

Člen

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č

Nahoru Odpovědět

8.2.2020 22:14

Aleš Novotný

Člen

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

Jaroslav Smrž

Tvůrce

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 */

Lava

Člen

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

Ondřej Šrytr

Člen

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

Peter Mlich

Člen

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.