Autor Zpráva
pavlik123
Profil
Rád bych věděl, proč není text <ul class="navbar"> dole v bílém proužku, ale úplně dole na stránce. Dále bych rád věděl, jak docílit toho, aby byl horní proužek úplně nahoře a až po okraj prohlížeče (tj. bez viditelných okrajů jako nyní).


http://usazoday.com/
shaggy
Profil
1. pre #header nastav position: relative
2. pretože má body nastavený margin (defaultné štýly prehliadača), vynuluj mu ho.
pavlik123
Profil
Takže body má defaultně nastavené určité parametry? Jsou tam i nějaké další? Proč má mít header relativní pozici?
shaggy
Profil
pavlik123:
Proč má mít header relativní pozici?
CSS pozicování - časť Vnořené pozice.

Jsou tam i nějaké další?
Áno, je ich viac. Skús si urobiť jednoduchú stránku bez štýlov a zistíš, že napr. nadpisy (H1 až H6) majú nastavenú veľkosť písma, sú tučné a pod.
Alebo nečíslované zoznamy (UL) majú defaultne nastavené odrážky, odsadenie.
pavlik123
Profil
O těch h1 ... to vím a chápu, ale proč má něco přednastaveno i body?
Chamurappi
Profil
Reaguji na pavlika123:
Protože jinak by obsah nenastylované stránky byl nalepený na okraje zobrazovací plochy prohlížeče.
polonium
Profil
A to pozicování je pro to top menu co tam máš úplně zbytečný. Jestli chceš mít stránku bez odsazení od okraje okna, použij body {padding: 0;}. Pozicování je v tomhle případě zbytečný, lepší by bylo použít float a pokud budeš chtít to levé menu níž a pravé víš tak použiješ margin


A jestli se chceš naučit css a html najdi si nějakou hotovou templatu nebo webovou stránku a aniž by ses podíval do zdrojáku, tak celej design napiš u sebe. Skoušením možností se toho moc nenaučíš, praktický příklad ti dá mnohem víc. A když jich udělás pár, tak si to i zapamatuješ :)
pavlik123
Profil
polonium, když jsem použil padding, udělalo mi to znovu ty okraje.//Přesně takhle se učím, jen mi to zatím moc nejde.

Dále by mne zajímalo, proč nemá div main mnou definované rozměry, ale je přes celou šířku.
polonium
Profil
pavlik123:
Tak skus margin :0; pořád si to pletu :D Vím, že se takhle učíš jen jsem ti chtěl navrhnout, abys udělal konkrétní template, abys věděl co je ještě potřeba dodělat a neskákal od jednoho ke druhému, v praxi budeš taky řešit právě fakt, že dostaneš hotový template a budeš ho muset převést do html, css.

Div je přes celou šířku protože je nastaven na display: block;. Když divu (nebo jinému bloku) nastavíš float, tak se smrskne na šířku svého obsahu. Nebo musíš použít width nebo max-width.
pavlik123
Profil
I když má float, stále je na celou stránku. Čím to?


Vysvětleno, zapomněl jsem na dvojtečku :)
margin
Profil *
pavlik123:
by mne zajímalo, proč nemá div main mnou definované rozměry, ale je přes celou šířku.
Protože ti v zápise chyběla dvojtečka #main 800px; správně je #main: 800px;

I když má float, stále je na celou stránku. Čím to?
Je v něm více textu, než vejde na šířku stránky.

Mimo téma:
Nepoužíváš doctype, prohlížeče stránku zobrazí ve quirk režimu, ve kterém obzvlášť IE zobrazuje stránku odlišně, nepodporuje zobrazení moderních vymožeností. Až se na stránku podíváš v IE, budeš se hodně divit a bezdůvodně nadávat na celý Microsoft.

Až použiješ doctype pro standardní režim, třebas <!doctype html>, tak se budeš divit znova, protože se ti stránka rozpadne (ve všech prohlížečích). Bude to tím, že nenulové délkové rozměry v CSS se musí psát i s jednotkou, pro pixeky je to px. Například:
padding-left: 10; je špatně, ale zatím ti chybný zápis prochází
padding-left: 10px; je správně
pavlik123
Profil
Jak dostanu nastavím divu main vlastní pozici? Předpokládal jsem, že když stanovím top+left (případně další parametry) a position nastavím na absolute, půjde to.
margin
Profil *
pavlik123:
Jak dostanu nastavím divu main vlastní pozici?
Nyní těžko, když není v HTML deklarovaný.
Co vůbec myslíš pod pojmem vlastní pozici? Já znám pozici absolutní , relativní, fixní a vnořenou.

Důrazně nedoporučuji začínat s pozicovaným layoutem, není to tak jednoduché, jak se na první pohled zdá a doporučuji udělat layout pomocí obtékání (float).
Výrokem nedoporučuji začínat s pozicovaným layoutem mám na mysli, že pozicovaný layout není vhodný pro začátečníky bez zkušeností s CSS, pokročilejší ať si dělají, co se jim zlíbí.
pavlik123
Profil
A když mám parametr float, můžu vedle sebe tři a více divů?
margin
Profil *
Můžeš mít vedle sebe tolik elementů (třebas DIVů), kolik se jich na šířku vedle sebe vejde.
pavlik123
Profil
A proč nevidím div adv?
margin
Profil *
pavlik123:
A proč nevidím div adv?
Já zmíněný DIV vidím, ale neaplikuje se na něj žádný styl, protože jsi předešlé CSS pravidlo neukončil složenou závorkou.
pavlik123
Profil
Proč není div navbar souběžně se spodním okrajem bílého rámačku, když má bottom padding i margin na 0?
shaggy
Profil
Pretože sa prvky štandardne zarovnávajú k vrchnému okraju (nie k spodnému). Ak ho chceš mať s k spodnému okraju, tak máš viac možností - nastaviť mu horný margin, pozicovať ho atď. Ale ešte predtým by som navbar-u zrušil defaultný margin a aj padding (zostal ti tam horný margin a ľavý padding).
Nauč sa používať vývojárske nástroje, ako je firebug pre Firefox (treba ho doinštalovať), prípadne jeho ekvivalent v Chrome (zobrazí sa po stlačení F12), tam ti všetko ukáže.
A hlavne - doštuduj si základy, aby si sa nevypytoval na každú jednu zmenu, ktorú urobíš.
pavlik123
Profil
Chrome s F12 používám, ale některým věcem nerozumím. Nechápu jak mám definovat lépe rozměry. Chci aby měl div promo pozadí jako je to vyznačené červeně. To stejné platí pro div news, nechápu, proč není odsazený celý.


http://usazoday.com/obr.png (odkaz nutno zkopírovat)
shaggy
Profil
Nerozumiem celkom, aké pozadie by malo mať "promo" a ako nie je "news" celý odsadený.
Možno by bolo dobré, keby si nám dal grafický návrh, aby sme vedeli, ako to má byť (a ako to nie je).
A ešte lepšie by bolo, keby si sa naozaj naučil základy a popritom si skúšal urobiť web. Nemôžeš chcieť, že od začiatku budeš zvládať ťažšie veci.
pavlik123
Profil
V tuto chvíli žádný návrh nemám. Chci například, aby bílé pozadí bylo pouze pod textem. Nechápu, proč je pozadí až u levého okraje.
shaggy
Profil
pavlik123:
Nechápu, proč je pozadí až u levého okraje.
Pretože si tomu boxu nastavil ľavý padding 30px. Je to tvoj kód, tak hádam vieš, čo robíš.
A keby si používal ten "firebug" v chrome (neviem ako sa to tam volá, chrome nepoužívam), tak by si sám na to prišiel.
Ja neviem, ale keď som sa ja učil kódovať, tak som skúšal a tak som sa učil (nikdy som sa na nič nepýtal). Keby si ty inspectol element, zistil by si, prečo je taký široký a prečo to pozadie je tak, ako je teraz. Je to hlavne o tom skúšaní.
pavlik123
Profil
Ok, ale v tom případě nevím, jak docílit toho, aby promo bylo uprostřed a zároveň byl celý div odsazen zhora o 30px
margin
Profil *
Ptáš se na základní věci, na které bys měl přijít sám. Tobě něco nejde, pak dáš dotaz, dostaneš kousek kódu, ale nic se nenaučíš.

Zdržuješ zájemce o odpověď, dáš dotaz „jak docílit toho, aby promo bylo uprostřed a zároveň byl celý div odsazen zhora o 30px“, ale já nevím, které stránky se dotaz týká, uprostřed čeho má být promo a který DIV chceš mít odsazen shora o 30px. Uvědom si, že nejsi jediný, kdo se ve zdejší diskusi na něco ptá a že se mi (a pravděpodobně i ostatním) mnohem lépe odpovídá na dotaz přinesený na zlatém podnose a nemusím mít náladu pročítat celé tvé vlákno od začátku.
pavlik123
Profil
Ok, ale v tom případě nevím, jak docílit toho, aby DIV promo bylo uprostřed a zároveň byl celý odsazen zhora od body o 30px
margin
Profil *
Nahoře máš #header, ve kterém máš .logo a .navbar (menu). Pokud bys měl #promo 30px od horního okraje, tak odhadem u 1/3 oživatelů, co nemají tak široký monitor, jako ty, bude promo překrývat menu.
Promo není na širokých monitorech uprostřed proto, že nemáš ukončené obtékání (float) v #header.
pavlik123
Profil
Já teda nevím, ale na iMac 27, iPadu i iPhone mi promo nic nepřekrývá, ale s tím nastaví float si tedy nevím rady. Co mu mám nastavit?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: