Zarovnání stránky

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Raziel00
Level 1.5
Level 1.5
Příspěvky: 140
Registrován: 06 dub 2006 22:51

Zarovnání stránky

Příspěvek od Raziel00 »

Zdravíčko,
mám takový laický dotaz, tak se na mne prosím nezlobte :smile:
Vytvořil jsem si webovou stránku v určitém designu, ale když ji otevřu např. na širokoúhlém monitoru, nebo použiji klávesovou zkratku CTRL plus -, a stránku v okně zmenším, zůstává mi celá stránka vlevo (->text ani nic jiného se nedeformuje). Já bych ovšem rád, aby se zarovnala na střed. Vytvářet webové stránky jsem se učil sám, takže jsem amatér. Poradil by mi někdo, jak to pomocí CSS vykoumat?
Tedy vycentrovat grafiku, texty, všechno...? (Hlavně mi neříkejte, že stačí dát na začátek a konec <center></center> :lol: )
Moc děkuji :bigups:
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: 20 srp 2008 14:02
Bydliště: Brno
Kontaktovat uživatele:

Re: Zarovnání stránky

Příspěvek od CZechBoY »

a to [syntax lang=xhtml]<center></center>[/syntax]
nejde ? :-))
No pomocí CSS by to možná šlo.
Pokud chceš udělat fakt "pěknou" stránku tak dej left: 50% :D
Pokud chceš řešení docela pěkné tak dej na začátek [syntax lang=xhtml]<div align=center>[/syntax] a na konec dej [syntax lang=xhtml]</div>[/syntax]
Mě to celkem jde :-)
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Raziel00
Level 1.5
Level 1.5
Příspěvky: 140
Registrován: 06 dub 2006 22:51

Re: Zarovnání stránky

Příspěvek od Raziel00 »

Inu, tohle mi nefunguje - patrně proto, že mám kvůli naskládané grafice absolutní pozice vrstev. (Myslím...)
Jen pro upřesnění... tu hodnotu left:50% jsi myslel normálně do definice CSS pod Body?
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: 20 srp 2008 14:02
Bydliště: Brno
Kontaktovat uživatele:

Re: Zarovnání stránky

Příspěvek od CZechBoY »

ne do CSS.
Mě to druhé řešení funguje, to první byla jen sranda ;)
Mrkni do zdroje na té stránce.
normálně dej za <body> tag <div align=center>
na konec stránky (před </body>) dej </div>
nebo ještě můžeš zkusit
[syntax lang=css]<style type="text/css">
body {
text-align: center;
}
</style>[/syntax]
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Raziel00
Level 1.5
Level 1.5
Příspěvky: 140
Registrován: 06 dub 2006 22:51

Re: Zarovnání stránky

Příspěvek od Raziel00 »

Mohu tě ubezpečit, že tohle jsem zkoušel a nic.
Ostatně, zkoušel jsem to podobně už před časem.
To s tím textem je mi k ničemu, potřebuji s ním posunout i dalších 16 vrstev grafiky :smile:
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: 20 srp 2008 14:02
Bydliště: Brno
Kontaktovat uživatele:

Re: Zarovnání stránky

Příspěvek od CZechBoY »

Mě to obrázek posunulo...
Jak to myslíš 16vrstev grafiky ?
Pokud myslíš pozadí tak dej background-image: url('obrazek.png'); background-position: center;
Pošli sem odkaz na web ať se ví o čem je řeč.
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Tholus
Level 5.5
Level 5.5
Příspěvky: 3081
Registrován: 13 pro 2007 16:28

Re: Zarovnání stránky

Příspěvek od Tholus »

Celou stránku obal divem (nebo použij základní div, co ti drží stránku pohromadě) a nějak ho nazvi, pak do CSS vlož:
jmeno_divu {margin-left: auto;margin-right: auto;}
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: 20 srp 2008 14:02
Bydliště: Brno
Kontaktovat uživatele:

Re: Zarovnání stránky

Příspěvek od CZechBoY »

to by mě zajmalo k čemu je ten margin: auto... však to nic neudělá.
Psal jsem mu ať dá na začátek <div align=center> a na konec </div>
to tvoje řešení by mohlo v CSS vypadat takto:
[syntax lang=css]body {margin: auto;}[/syntax]
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Uživatelský avatar
Spectrik
Level 1
Level 1
Příspěvky: 80
Registrován: 11 bře 2009 17:57
Bydliště: Třebíč/Brno
Kontaktovat uživatele:

Re: Zarovnání stránky

Příspěvek od Spectrik »

pokud máš celej web jakoby v nějakém <div> a pak už obsah.. tak klasicky funguje toto:

//obalující DIV

#obsah {
width: např. 200px;
position: absolute;
left: 50%;
margin-left: -100px; // polovina šířky v záporné hodnotě

Mě toto vždy pomůže...
PC sítě, programování(HTML5,CSS3,PHP,Javascript,jQuery,Nette,Bootstrap,SQL),Sci-fi,Fantasy,elektrotechnika,automatizace, umělá inteligence
Tholus
Level 5.5
Level 5.5
Příspěvky: 3081
Registrován: 13 pro 2007 16:28

Re: Zarovnání stránky

Příspěvek od Tholus »

CZechBoY: Dávat margin do body je přece blbost, ne? :smile:
http://www.jakpsatweb.cz/css/margin.html" onclick="window.open(this.href);return false;

Podívej se na můj web, tam to tak mám vyřešený.
Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6991
Registrován: 11 dub 2006 09:09
Bydliště: Praha

Re: Zarovnání stránky

Příspěvek od Myloš »

http://tiso.wz.cz/articles/vycentrovani ... tranky.php" onclick="window.open(this.href);return false;
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)
Raziel00
Level 1.5
Level 1.5
Příspěvky: 140
Registrován: 06 dub 2006 22:51

Re: Zarovnání stránky

Příspěvek od Raziel00 »

Pořád mi to nejde... Patrně se to s něčím tluče.
No nic, to máte jedno, stejně děkuju.
Naposledy upravil(a) Raziel00 dne 12 led 2010 13:20, celkem upraveno 1 x.
Odpovědět
  • Podobná témata
    Odpovědi
    Zobrazení
    Poslední příspěvek

Zpět na „Programování a tvorba webu“