| Autor | Zpráva | ||
|---|---|---|---|
| pavlik123 Profil |
#1 · Zasláno: 2. 10. 2013, 14:57:23
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 |
#2 · Zasláno: 2. 10. 2013, 15:00:15
1. pre #header nastav position: relative
2. pretože má body nastavený margin (defaultné štýly prehliadača), vynuluj mu ho. |
||
| pavlik123 Profil |
#3 · Zasláno: 2. 10. 2013, 15:03:17
Takže body má defaultně nastavené určité parametry? Jsou tam i nějaké další? Proč má mít header relativní pozici?
|
||
| shaggy Profil |
#4 · Zasláno: 2. 10. 2013, 15:13:32
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 |
#5 · Zasláno: 2. 10. 2013, 15:16:36
O těch h1 ... to vím a chápu, ale proč má něco přednastaveno i body?
|
||
| Chamurappi Profil |
#6 · Zasláno: 2. 10. 2013, 15:33:02
Reaguji na pavlika123:
Protože jinak by obsah nenastylované stránky byl nalepený na okraje zobrazovací plochy prohlížeče. |
||
| polonium Profil |
#7 · Zasláno: 2. 10. 2013, 16:28:33 · Upravil/a: polonium
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š marginA 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 |
#9 · Zasláno: 2. 10. 2013, 16:43:06
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 |
#10 · Zasláno: 2. 10. 2013, 17:01:33 · Upravil/a: pavlik123
I když má float, stále je na celou stránku. Čím to?
Vysvětleno, zapomněl jsem na dvojtečku :) |
||
| margin Profil * |
#11 · Zasláno: 2. 10. 2013, 17:28:48
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 |
#12 · Zasláno: 2. 10. 2013, 17:31:59
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 * |
#13 · Zasláno: 2. 10. 2013, 17:52:22
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 |
#14 · Zasláno: 2. 10. 2013, 18:08:39
A když mám parametr float, můžu vedle sebe tři a více divů?
|
||
| margin Profil * |
#15 · Zasláno: 2. 10. 2013, 18:28:52
Můžeš mít vedle sebe tolik elementů (třebas DIVů), kolik se jich na šířku vedle sebe vejde.
|
||
| pavlik123 Profil |
#16 · Zasláno: 2. 10. 2013, 18:49:30
A proč nevidím div adv?
|
||
| margin Profil * |
#17 · Zasláno: 2. 10. 2013, 20:02:37
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 |
#18 · Zasláno: 3. 10. 2013, 10:32:35
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 |
#19 · Zasláno: 3. 10. 2013, 11:25:55
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 |
#21 · Zasláno: 3. 10. 2013, 15:49:30
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 |
#22 · Zasláno: 3. 10. 2013, 15:58:04
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 |
#23 · Zasláno: 3. 10. 2013, 16:04:49
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 |
#24 · Zasláno: 3. 10. 2013, 16:19:08
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 * |
#25 · Zasláno: 3. 10. 2013, 16:37:25
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 |
#26 · Zasláno: 3. 10. 2013, 16:53:08
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 * |
#27 · Zasláno: 3. 10. 2013, 17:09:01
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?
|
||
|
Časová prodleva: 11 let
|
|||
0