| Autor | Zpráva | ||
|---|---|---|---|
| Lucyk Profil |
Prosím, už delší dobu se snažím najít řešení, kdy mám web s hlavičkou a patičkou (tmavě modré pruhy) a pokud není obsah (v červeném rámu) přes celou stránku, tak se mi patička (v mém případě pojmenováno jako "footer") automaticky umístí těsně pod obsah a pak zůstává dole volné místo.
Našla jsem zde řešení plavacka, kdy jsem zkoušela umístit Patičku (footer) "vždy dole". To se mi podařilo, ale pak se mi neroztáhl červený okraj obsahu (zůstalo mi tam volné místo). Přikládám ukázku (je to nyní bez jakékoliv mé úpravy). Dokázal by mi někdo poradit, co je nutné změnit, aby to fungovalo? Nebo jak to lze vyřešit jiným způsobem? Děkuji |
||
| Mlocik97 Profil |
Ja to reším skrz min-height: calc ()
Calc bude obsahovať hodnoty 100% - veľkosť ďalších viditelných prvkov mimo obsahu. Viď moj priklad: web layout Kde si mozete pozriet obsah suboru index.html style.css a vyslednu stranku |
||
| Keeehi Profil |
#3 · Zasláno: 19. 6. 2017, 09:41:27
Mlocik97:
Ale fuj. 1) Málo kdy je potřeba, aby ten prvek byl reálně roztažený. Stačí když to tak vypadá a toho se dá většinou docílit vhodným pozadím jiných prvků. 2) Když už to chceš roztahovat, tak bych na to použil flex-box. Když se to správně napíše, tak to bude mít podobnou podporu v prohlížečích jako calc. |
||
| Mlocik97 Profil |
Keeehi:
Čo je na tom fuj? Alebo teda aké je lepšie riešenie (vyslovene lepšie nie podobne dobré)? Náhodou to takto funguje veľmi dobre. Ale ak tak mi môžeš poradiť aj lepšie, rad sa priučím :) Alebo sa chcem spytať ohladom flex-box ake su jeho vyhody a nevyhody voci calc() |
||
| Kcko Profil |
#5 · Zasláno: 19. 6. 2017, 14:48:11
Mlocik97:
Fuj je asi jen to, že calc má slabší podporu, tuším IE 9/10+. Flexbox na tom není o moc lépe (tuším ještě hůře). Nicméně, abys to dělal takhle, tak musíš znáš výšku ostatních elementů, u Flexu nikoliv, ten to zařídí sám. Co se týká Flexu: rjwebdesign.cz/blog/CSS/20161120-uzitecne-odkazy-k-vlastnosti-flexbox |
||
| Mlocik-sntb Profil * |
Kcko:
hmm, takže flexbox by mi vyrešil problém ten že mám napríklad nejaky element ktorý zaberá vždy inú veľkosť na výšku, a pod ňou stĺpec tak aby jeho veľkosť bola definovaná ako "zvyšok viditelného miesta na webstránke, tzv. 100% (veľkosť výšky okna prehliadača) - veľkosť elementu ktorého veľkosť sa ale vždy mení, a teda spolu so zmenou tohto elementu by sa menil aj daný stĺpec? To by sa mi bodlo. V tomto prípade ide o to že mám stránku horizontálne rozdelenú, a prvá časť je ešte rozdelená na ďalšie 2 časti, a jedna časť sa ukotvuje a druhá mizí skrz vrh okna prehliadača, teda veľkosť prvej časti sa môže meniť v rozmezí veľkosti súčtu oboch k veľkosti len druhého? Ale asi i tak bych radšej zostal u JS a druhú value bych definoval skrz JS a jQuery, zatial som postúpil sem: function isInSection(section)
{
var top = $(window).scrollTop();
var bottom = top + $(window).height();
var elementTop = $(section).offset().top;
var elementBottom = elementTop + $(section).height();
return (bottom >= elementTop && top <= elementBottom);
}Mlocik-sntb: A i to mi poradi párek v rohlíku Mlocik-sntb: teraz čítam Object moved |
||
| Keeehi Profil |
#7 · Zasláno: 19. 6. 2017, 19:44:21
Mlocik-sntb:
„Ale asi i tak bych radšej zostal u JS a druhú value bych definoval skrz JS a jQuery“ Zase fuj. Když to jde řešit s CSS, tak do toho zbytečně netahej javascript. |
||
| Mlocik-sntb Profil * |
#8 · Zasláno: 19. 6. 2017, 20:09:42
Keeehi:
jenže jak čtu tak řešení skrz CSS je jaksi nefunkčné pre každého 5-teho uživatele. (dobrá možno každého 10-teho) |
||
| Keeehi Profil |
#9 · Zasláno: 19. 6. 2017, 23:08:46
Podpora je celkem srovnatelná.
caniuse.com/#search=flex caniuse.com/#search=calc Problémy může dělat hlavně IE (jak už to tak bývá), takže když si ohlídáš, že ten ti nedělá problémy, měl bys být v pohodě i jinde. |
||
| Lucyk Profil |
#10 · Zasláno: 20. 6. 2017, 04:31:48
Mlocik97:
zkoušela jsem také použít min-height, ale nefungovalo mi to a pokud jsem tam dala třeba 100px, tak ano, na tohle to reagovalo. Nicméně asi to není nejvhodnější tam vrazit přímo nějakou hodnotu, protože ně všichni budou mít stejné rozlišení obrazovky. Jak to tak vidím, asi se budu muset spokojit s tím, že tam bude volné místo, a nebo tam nebude rámeček, ale nějaký "barevný" pás mezi hlavičkou a patičkou. Včera se mi také nepodařilo vygooglit něco, co by mě posunulo dále. |
||
| Kcko Profil |
#11 · Zasláno: 20. 6. 2017, 10:20:25
Lucyk:
Mrkni na základní flex layout, třeba Ti to pomůže lab.rjwebdesign.cz/flex Případně lepší podpora bez flexu codepen.io/griffininsight/pen/OMexrW |
||
| Mlocik97 Profil |
Lucyk:
Na ktorom prehliadači ste to testovali? calc() jde vo vätšine... viď i na mojej stránke, cez devtool napr. V chromu si do obsahu mozete furt neco pridavat a uvidite to lip, ataci dat neco do päty a do obsahu. Uvidite ze ked obsah prikratky na scrolling tak je päta furt dole ak je dlhší tak sa päta posúva za obsah tak že po nascrollovaní úplne nadol mate pätu zase na spodku stranky. Nemusi byť pevná veľkosť, skuste napsať: div#obsah { height: calc( 100% - 50px ) } Treba dodržať v calcu medzere v zatvorke hlavne hodnota medzera minus medzera hodnota ak nieje medzera tak calc to nebere ako operaciu ale ako hodnoti (zaporna hodnota). A teda v px zadate cislo sučtu height päty a pripadne dalších divov nad obsahom (napr. Hlavička a/alebo menu). Samozrejme selector upravite podla svojho. |
||
| Tomáš123 Profil |
#13 · Zasláno: 20. 6. 2017, 18:20:13
Lucyk:
„zkoušela jsem také použít min-height, ale nefungovalo mi to“ Pre funkčnosť percentuálnych hodnôt je v prípade tejto CSS vlastnosti nutné, aby mali všetky nadradené prvky nastavenú výšku. Väčšinou stačí deklarovať: html, body {
height: 100%;
}Asi najlepšiu možnú podporu (od IE8) pre tieto požiadavky ide dosiahnuť tabuľkovými hodnotami vlastnosti display*. V prípade nepodpory je obsah stále dobre čitateľný a dostupný.
*Nevýhodou je nemožnosť nastavenia vonkajšieho okraja. Bunky tabuľky ide odsadiť pomocou CSS vlastnosti border-spacing. Neželané odsadenie zo strán ide kompenzovať záporným marginom obalového prvku (elimináciu horizontálneho posuvníka zabezpečí overflow: hidden) – živá ukážka.
|
||
| Lucyk Profil |
#14 · Zasláno: 22. 6. 2017, 06:05:29
Tomáš123:
Děkuji za vysvětlení a ukázku. Našla jsem podobný css kód pro toto řešení a ten Tvůj se mi zdá přehlednější. Asi se spokojím s tím, že to předělám do něj. Pochopila jsem správně, že pokud bych chtěla content mít třeba z levé strany a pravé strany trochu užší než je hlavička a patička, tak to nelze? Pokud jsem zkoušela měnit nějaké hodnoty, tak se mi automaticky odsadila i hlavička s patičkou. |
||
| Tomáš123 Profil |
#15 · Zasláno: 22. 6. 2017, 15:00:44
Lucyk:
„Pochopila jsem správně ...“ Z toho čo som napísal áno, ale nejako to ide. Problém je tam stále s vlastnosťou border-spacing, ktorá odsadí aj hlavičku zhora. Celkom funkčne vyzerá hlavičku a pätu relatívne napoziciovať a trochu posunúť.
Ak by existovalo niečo ako box-sizing: margin-box, nebol by problém situáciu vyriešiť elegantnejšie.
Tomáš123: „elimináciu horizontálneho posuvníka zabezpečí overflow: hidden“
Vlastne overflow-x: hidden.
|
||
|
Časová prodleva: 5 dní
|
|||
| Lucyk Profil |
#16 · Zasláno: 27. 6. 2017, 03:45:35
Tomáš123:
Děkuji za úpravu, zkusím do obou řešení nasadit obsah (jak s odsazením ze stran, tak bez nich) a který se mi bude zdát "na první dojem lepší" tak ten použiju. Jen jsem ještě chtěla poprosit s pomocí o úpravu menu, které se snažím asi týden nějakým způsobem přizpůsobit svým požadavkům, ale ani na základě různých typů menu na internetu se mi toho nedaří docílit. Aktuální stav menu mám tento. Neboť zkouším mít na jednom řádku jak logo, tak i linky a vyhledávací box. Vždy jsem našla jen řešení typu, že se jeden element dal zarovnat vlevo a druhý vpravo, ale se třemi už tápu, jak na to. V mé současné ukázce se mi nedaří nyní upravit to, aby zelené pozadí (je tam jenom pro ilustraci, abych věděla, zda se mi podařilo dosáhnout mého zamýšleného efektu) bylo všude stejně vysoké. A zároveň když klikneš na položku třeba "About", aby byla modrá barva přes celou výšku "buňky" a nikoliv jen za textem na řádku. Na tomto provedení menu se mi libí to, že ještě nemám přesně stanovený počet odkazů, takže pokud odkaz umažu, tak se celé menu tomu přizpůsobí a zarovná na střed. Možná jenom dotaz - jakou část kódu je nutné přidat a na které místo, aby buňky byly stejně široké? Vím, že mi tam ještě trochu kazí "efekt" zarovnání buněk nalevo, ale přišla jsem na to, že tam změním původní kód: .page-menu ul li a {
color:white!important;
padding:0 40px 0 0;
text-decoration:none;
}Nahradím řádek padding následujícím, neboť center mi nijak nefunguje: .page-menu ul li a {
color:white!important;
padding:0 20px 0 20px;
text-decoration:none;
}Zkoušela jsem na různých místech v kódu měnit a nastavovat různé výšky a šířky řádků, abych dosáhla mnou výše požadovaného stavu, ale už si nevím rady, která část kódu mi to tam drží. Budu ráda, když se mi na to koukneš a příp. mi najdeš to kritické místo, proč se to tak chová, jak nechci. Děkuji |
||
|
Časová prodleva: 11 dní
|
|||
| Tomáš123 Profil |
#17 · Zasláno: 7. 7. 2017, 22:28:47
Lucyk:
„Vždy jsem našla jen řešení typu, že se jeden element dal zarovnat vlevo a druhý vpravo, ale se třemi už tápu, jak na to.“ V takom prípade síce je vyžadované špecifické poradie prvkov v kóde, ale situácia je riešiteľná, viď ukážka nižšie (samozrejme je to jedno z viacerých riešení s dôrazom na podporu, existujú iné varianty s horšou podporou a väčšou voľnosťou kódu). „jakou část kódu je nutné přidat a na které místo, aby buňky byly stejně široké?“ V ukážke nižšie stačí položkám <li> nastaviť šírku.
Živá ukážka |
||
|
Časová prodleva: 10 dní
|
|||
| Lucyk Profil |
#18 · Zasláno: 18. 7. 2017, 06:12:01
Tomáš123:
Děkuji moc, podívám se na to a zkusím zakomponovat do stránky. Ještě jsem narazila na jeden "zádrhel" se kterým si nevím rady, která část kódu to "drží". Zkouším u této Ukázky docílit toho, že pokud je obsah stránky např. jen jedna věta, tak aby šířka zůstala zachována přes celou obrazovku. V tomto momentě se mi to vždy automaticky smrskne jen do velikosti dané věty. Zkoušela jsem hledat chybu v těchto částech kódu, ale ničeho jsem nedocílila: html, body {
height: 100%;
margin: 0;
}.container {
display: table;
height: 100%;
border-spacing: 10px;
background-color: #E3F2FD;
}Děkuji za radu. |
||
| Kcko Profil |
#19 · Zasláno: 18. 7. 2017, 14:06:55
Lucyk:
nastav šířku 100% |
||
|
Časová prodleva: 6 dní
|
|||
| Lucyk Profil |
#20 · Zasláno: 24. 7. 2017, 04:26:56
Kcko:
Děkuji, funguje to. Nevím, kde jsem dělala chybu, ale i tuto možnost jsem zkoušela dříve, ale nefungovala. Možná jsem si už při experimentování šablonu rozhodila a už tam dělalo paseku i něco jiného. |
||
|
Časová prodleva: 1 měsíc
|
|||
| Lucyk Profil |
#21 · Zasláno: 2. 9. 2017, 18:43:59
Ahoj,
chtěla bych navázat dotazem na návrh šablony, do které se nyní snažím přenést svůj současný web. Narazila jsem na problém, se kterým si nevím rady. Chtěla jsem vložit do těla stránky stránkování a pomocí třídy ho přizpůsobit. Jenže se mi to nepodařilo tak, jak bych si představovala. Ukázka Kolem stránkování se mi vytvořilo další ohraničení, které se zdá být obrazem contentu (výška x šířka). Pochopila jsem správně, že pokud nyní v rámci contentu budu chtít použít div, tak se mi to bude automaticky orámovávat? Přestože u třídy pagination nemám definované orámování? Proč se tak děje, je tam nějaká souvislost v rámci třídy rodič x dítě? Lze nějak docílit toho, aby to nebylo závislé na contentu? Děkuji za vysvětlení. |
||
| Tomáš123 Profil |
#22 · Zasláno: 2. 9. 2017, 23:29:17
Lucyk:
Namiesto všeobecného selektora .content div, ktorý zameria všetky divy vo vnútri prvku s triedou .content, použi konkrétnejší selektor .content .cell.
|
||
| smiesek Profil |
#23 · Zasláno: 3. 9. 2017, 05:52:26
Lucyk:
já bych to řešila přidáním vlastnosti selektoru border-collapse (do container), protože výchozí hodnotou je separate, která kreslí rámečky buněk oddělené. (Vlastnost border-collapse)
Ukázka ještě mě napadlo, je otázkou, jestli chceš, aby jsi měla stránkování přímo v části cell?
|
||
|
Časová prodleva: 7 let
|
|||
0