CSS cvičení pro vás :-)
Zkuste pomocí CSS napodobit vzhled této stránky:
http://chodci.nikde.eu
Mám samozřejmě na mysli ten "přechod pro chodce" okolo obsahu stránky (pokud váš prohlížeč funguje správně, má ten přechod 4 bílé pruhy, přičemž bílé a černé pruhy se pravidelně střídají a jsou stejně široké). Čím jednodušeji, tím lépe ;-)
(Jsem po dlouhé době zase tady na fóru a připadá mi to že tu není nic zajímavého - žádné záludné problémy ani programátorská cvičení...:-( )
http://chodci.nikde.eu
Mám samozřejmě na mysli ten "přechod pro chodce" okolo obsahu stránky (pokud váš prohlížeč funguje správně, má ten přechod 4 bílé pruhy, přičemž bílé a černé pruhy se pravidelně střídají a jsou stejně široké). Čím jednodušeji, tím lépe ;-)
(Jsem po dlouhé době zase tady na fóru a připadá mi to že tu není nic zajímavého - žádné záludné problémy ani programátorská cvičení...:-( )
obrazek? 100% reseni
jakpsatweb.cz - css - border / padding / background
prvek div, pozor marginy na 0
jakpsatweb.cz - css - border / padding / background
prvek div, pozor marginy na 0
A proč nepoužít css kód té stránky?
Vždyť je to obyčejná kombinace margin-border-background. Případně místo margin padding.
A počet řešení je vícero.
Paradoxně nejjednoduší je právě ta jejich, ale selhává u IE. Jinak lze použít vícenásobný div.
Vždyť je to obyčejná kombinace margin-border-background. Případně místo margin padding.
A počet řešení je vícero.
Paradoxně nejjednoduší je právě ta jejich, ale selhává u IE. Jinak lze použít vícenásobný div.
Osobne bych to resil asi jako vicenasobne vkladany div do sebe (padding nejakych 15px, bile cerne pozadi..) - tohle 100% bude fungovat ve vsech prohlizecich..
Druha alternativa urcite muze byt s pouzivanim border:15px solid #000;
Resit takovyto jednoduchy layout pres obrazek mi prijde na hlavu padle - snad 100% dnes pouzivanych prohlizecu to zvladne vykreslit bez problemu a nejakych (i kdyz malych) 20kB za obrazky jsou zbytecne :)
Druha alternativa urcite muze byt s pouzivanim border:15px solid #000;
Resit takovyto jednoduchy layout pres obrazek mi prijde na hlavu padle - snad 100% dnes pouzivanych prohlizecu to zvladne vykreslit bez problemu a nejakych (i kdyz malych) 20kB za obrazky jsou zbytecne :)
Tak jasně že jsem se nesnažil schovat CSS kód té stránky, není to nějaká soutěž o ceny :-)) Myšlenka byla, že vás něco napadne, a pak se třeba podíváte jak je to dělaný tam...
peta: pokud to dokážeš pomocí obrázků udělat PŘESNĚ tak jak je to tam, rád se podívám :-)
Jinak souhlasím s tím že je blbost dělat přes obrázky věci který jdou bez nich, proto se to jmenuje CSS cvičení :-))
V IE to blbne pač je blbej, kdyby to mělo fungovat správně i v IE, tak bych použil div. Ale mě přišlo kouzelný, že pro ostatní prohlížeče na to neni žádnej div potřeba :-)
A btw ten trik s tim co dělá v IE border kolem body jsem neznal a celkem se mi to líbí, připomíná mi to obrazovku ZX Spectrum :-)
Teď čekám že budu osočen ze spamování na fóru, ale fakt mi jde o to CSS... Mám tady další stránku s netriviálním CSS:
http://www.jsrosa.cz/cs/anglicke-tituly
Pokud se všimnete, tak ten text má obrysy :-) A mě by zajímalo, jak byste tohle dělali vy.
Moje řešení si samozřejmě zase můžete prohlédnout, ale tentokrát má two minor drawbacks (přinejmenším). Samozřejmě na ně můžete poukázat (třeba objevíte nějaké další), ale hlavně mě zajímá, jestli byste to někdo uměl vyřešit lépe...
Jinak že je to od základu blbej nápad si myslím také, a pokud někdo nepřijde s nečím geniálním, tak až dodělám zkoušky tak tomu udělám novej vzhled...
peta: pokud to dokážeš pomocí obrázků udělat PŘESNĚ tak jak je to tam, rád se podívám :-)
Jinak souhlasím s tím že je blbost dělat přes obrázky věci který jdou bez nich, proto se to jmenuje CSS cvičení :-))
V IE to blbne pač je blbej, kdyby to mělo fungovat správně i v IE, tak bych použil div. Ale mě přišlo kouzelný, že pro ostatní prohlížeče na to neni žádnej div potřeba :-)
A btw ten trik s tim co dělá v IE border kolem body jsem neznal a celkem se mi to líbí, připomíná mi to obrazovku ZX Spectrum :-)
Teď čekám že budu osočen ze spamování na fóru, ale fakt mi jde o to CSS... Mám tady další stránku s netriviálním CSS:
http://www.jsrosa.cz/cs/anglicke-tituly
Pokud se všimnete, tak ten text má obrysy :-) A mě by zajímalo, jak byste tohle dělali vy.
Moje řešení si samozřejmě zase můžete prohlédnout, ale tentokrát má two minor drawbacks (přinejmenším). Samozřejmě na ně můžete poukázat (třeba objevíte nějaké další), ale hlavně mě zajímá, jestli byste to někdo uměl vyřešit lépe...
Jinak že je to od základu blbej nápad si myslím také, a pokud někdo nepřijde s nečím geniálním, tak až dodělám zkoušky tak tomu udělám novej vzhled...
<HTML>S tím textem s obrysy - nekoukal jsem do zdrojáku, ale zřejmě používáš trik s vícekrát vykresleným textem - drawbacky jsou podlě mě dva, a ty asi znáš: text je ve stránce víckrát a všechny jeho kopie jdou označit. Bohužel jiný trik (snad s výjimkou filtru, ale ten umí jen IE, protože to je microsoftí vychytávka) mě nenapadá.
Ono skutečně moc možností není ani na tu zebru - tam to jde vnořovanými divy (ale pak jde do kelu sémantika), nebo několika obrázky (zas jako taková blbost mi to nepřijde). Je ale otázka, zda je taková stránka pro člověka čitelná (a tedy zda má takový efekt smysl) - zebrovitý rámeček působí rušivě a odlákává čtenáře od čtení textu (musel jsem si kliknout na alternativní zobrazení černé na bílém).
Spamuješ na fóru! :-D (a spamuj dál, je to zajímavé zpestření od všech těch opakujících se nováčkovských dotazů)</HTML>
Ono skutečně moc možností není ani na tu zebru - tam to jde vnořovanými divy (ale pak jde do kelu sémantika), nebo několika obrázky (zas jako taková blbost mi to nepřijde). Je ale otázka, zda je taková stránka pro člověka čitelná (a tedy zda má takový efekt smysl) - zebrovitý rámeček působí rušivě a odlákává čtenáře od čtení textu (musel jsem si kliknout na alternativní zobrazení černé na bílém).
Spamuješ na fóru! :-D (a spamuj dál, je to zajímavé zpestření od všech těch opakujících se nováčkovských dotazů)</HTML>
Nípal: máš bod :-) Nejvíc mě štve že je tam ten text 5x, to má hodně negativních dopadů. Zatim jediný co mě napadlo bylo, že bych tam ty další texty docpal javascriptem, neboť se imho dá předpokládat, že množiny {klienti s JS a CSS} a {klienti bez JS a bez CSS} výrazně dominují nad jinými průniky. Ale nevím, jak moc mám v tomhle pravdu.
S tím označováním - myslím že se dá udělat trik, kde 4 ty texty by byly pod průhledným obrázkem (1px gif roztažený na ty fixní rozměry co tam jsou?) a pak by třeba nešly označit - am I right? A ten jeden by byl nad ním. Ale tenhle drawback mě nenapadnul, díky :-)
Mě vadí ještě jiná věc: nedokázal jsem to udělat bez fixní výšky toho divu s textem, takže je nahoře text a dole velký prázdno, na který se dá snadno odscrollovat a vypadá to docela blbě...
Zebra: díky žes mi to připomněl, zapomněl jsem se pochlubit tím, že to moje řešení je možná jako jediné sémanticky zcela korektní :-)
Přes ty obrázky nevím sám přesně jak bych to udělal - aneb můj challenge pro petu platí klidně i pro ostatní :-)) Minimálně teda nevím, jak bych to udělal gumově, absolutně napozicovat to umí každej, to je jasný :-) A je vlastně fakt že dvojbarevný obrázky v gifu nezaberou moc místa...
To alternativní zobrazení jsem tam udělal přesně z toho důvodu samozřejmě :-)) Stejně jako alternativní css pro tisk (který jak koukám má jeden bug, ou jé). Vzhledově je to spíš CSS pokus než snaha o pěkný vzhled, mno. :-))
S tím označováním - myslím že se dá udělat trik, kde 4 ty texty by byly pod průhledným obrázkem (1px gif roztažený na ty fixní rozměry co tam jsou?) a pak by třeba nešly označit - am I right? A ten jeden by byl nad ním. Ale tenhle drawback mě nenapadnul, díky :-)
Mě vadí ještě jiná věc: nedokázal jsem to udělat bez fixní výšky toho divu s textem, takže je nahoře text a dole velký prázdno, na který se dá snadno odscrollovat a vypadá to docela blbě...
Zebra: díky žes mi to připomněl, zapomněl jsem se pochlubit tím, že to moje řešení je možná jako jediné sémanticky zcela korektní :-)
Přes ty obrázky nevím sám přesně jak bych to udělal - aneb můj challenge pro petu platí klidně i pro ostatní :-)) Minimálně teda nevím, jak bych to udělal gumově, absolutně napozicovat to umí každej, to je jasný :-) A je vlastně fakt že dvojbarevný obrázky v gifu nezaberou moc místa...
To alternativní zobrazení jsem tam udělal přesně z toho důvodu samozřejmě :-)) Stejně jako alternativní css pro tisk (který jak koukám má jeden bug, ou jé). Vzhledově je to spíš CSS pokus než snaha o pěkný vzhled, mno. :-))
<HTML>To alternativní zobrazení bez zebry je na mě moc alternativní :-) Mně se v Konqueroru bohužel nezobrazí černý text na bílém pozadí, ale bílý text na bílém pozadí a jediné, co je vidět, jsou odkazy různě rozházené na prázdné stránce :-)
Jinak já bych taky použila divy, dělat to s obrázky mi přijde zbytečně pracné. Tvé řešení se mi líbí a nejspíš by mě nenapadlo :-)</HTML>
Jinak já bych taky použila divy, dělat to s obrázky mi přijde zbytečně pracné. Tvé řešení se mi líbí a nejspíš by mě nenapadlo :-)</HTML>
Obrazek je uplne nejlepsi reseni, nemusis se drbat s CSS a v HTMl kodu nemas more zbytecnych divu. existuje nekolik variant s obrazky, osobne davam prednost 1-2-3 obrazkum.
Kdyz dam jako podklad 1k peny obrazek jako backgroud a udelam to tak, aby text nepretekl, tak se to zobrazi 100% dobre.
Pres DIV to resit lze, aby to bylo kompatibilni se vsim, ale je treba vedet, co si muzu a nemuzu dovolit.
Jejich reseni s dvojitym rameckem je naprosto nespolehlive. Kdyby ten clovek vedel, jak se vykresluje v ruznych prohlizecich dvojity ramecek...
Jeden to kresli na stred, druhy okolo a treti dovnitr a ted jeste se tam ruzne resi marginy a paddingy :)
Samozrejme je to pekne a jednoduche, ale urcite bych to na webku nepouzil :)
Kdyz dam jako podklad 1k peny obrazek jako backgroud a udelam to tak, aby text nepretekl, tak se to zobrazi 100% dobre.
Pres DIV to resit lze, aby to bylo kompatibilni se vsim, ale je treba vedet, co si muzu a nemuzu dovolit.
Jejich reseni s dvojitym rameckem je naprosto nespolehlive. Kdyby ten clovek vedel, jak se vykresluje v ruznych prohlizecich dvojity ramecek...
Jeden to kresli na stred, druhy okolo a treti dovnitr a ted jeste se tam ruzne resi marginy a paddingy :)
Samozrejme je to pekne a jednoduche, ale urcite bych to na webku nepouzil :)
heh :-D je to lepší? :-)
(právě jsem změnil hosting, tak záleží na tom kdy se podíváš, neumim se dostat na nový FTP takže tam je ještě ta stará verze)
Díky, konečně mě někdo ocenil :-D
(právě jsem změnil hosting, tak záleží na tom kdy se podíváš, neumim se dostat na nový FTP takže tam je ještě ta stará verze)
Díky, konečně mě někdo ocenil :-D
No s těma obrázka jsem to z toho tvého popisu nepochopil, ale určitě je to jednoduché, tak to udělej a odkaž ;-)
Opera, Firefox i Safari to zobrazujou stejně, IE to zobrazuje špatně, ale nedá se popřít že chyba je na přijímači... Doma nic jinýho nemam a ve škole nevim jestli jsem to zkoušel, tak můžete poreferovat kde to dělá jakej bordel.
Paddingy tam myslim nejsou pač to tomu nedělalo dobře, jsou to jen marginy a bordery.
"nemusis se drbat s CSS" je dobrý, ale když mě to baví žejo :-)) Rád zkoušim, kde jsou hranice možností CSS...
Opera, Firefox i Safari to zobrazujou stejně, IE to zobrazuje špatně, ale nedá se popřít že chyba je na přijímači... Doma nic jinýho nemam a ve škole nevim jestli jsem to zkoušel, tak můžete poreferovat kde to dělá jakej bordel.
Paddingy tam myslim nejsou pač to tomu nedělalo dobře, jsou to jen marginy a bordery.
"nemusis se drbat s CSS" je dobrý, ale když mě to baví žejo :-)) Rád zkoušim, kde jsou hranice možností CSS...
Btw dávat obrázek do stránky jako <img> se má jenom když nese nějaký význam. Když je to jen nějaká grafika, tak by se měl dávat jako pozadí něčeho (třeba divu). Takže pak korektní řešení s obrázky je skoro identické jako řešení s divy.
(Proč? Kdo to neví ať se zamyslí a zagooglí než se začne ptát ;-) )
(Proč? Kdo to neví ať se zamyslí a zagooglí než se začne ptát ;-) )
<HTML>Jo, už to vidím ok :-) Můžeš si doplnit, že v Konqueroru (3.5.9) se to také zobrazuje správně. Schválně jsem spustila i IE a tam to vypadá teda jinak. Nejenže tam není zebra, ale dokonce to vypadá, že je tam pevný div, který scroluje :-) Zajímavé. Řešilo by to asi použití řešení s divy :-)
A taky mi přijde, že peta nepochopil, ze jde o tvuj vytvor - "jejich reseni", "kdyby ten clovek vedel".
<i>Takže pak korektní řešení s obrázky je skoro identické jako řešení s divy.</i><br>
Přesně proto jsem řekla, že s obrázky je to pracnější. Kódu musíš napsat a vyladit prakticky stejně a navíc musíš udělat obrázky :-)</HTML>
A taky mi přijde, že peta nepochopil, ze jde o tvuj vytvor - "jejich reseni", "kdyby ten clovek vedel".
<i>Takže pak korektní řešení s obrázky je skoro identické jako řešení s divy.</i><br>
Přesně proto jsem řekla, že s obrázky je to pracnější. Kódu musíš napsat a vyladit prakticky stejně a navíc musíš udělat obrázky :-)</HTML>
Rád bych se zastal Peti..
Reseni s obrazky tady nebude o nic moc slozitejsi .. (nebudes vkladat zadne img tagy, ale pouzijes background url v CSS..):
Rozdelis si stranku na 3 casti - vrsek, prostredek a spodek..
b)prostredek - jeden div s černým pozadím a obrázkem (repeat-y) u levého okraje, druhý div v prvním s pruhledym pozadim a obrazkem u praveho okraje. Na prostredek je to cele, funguje to ve vsech prohlizecich..
a,c)vrsek a spodek - 3 divy, vsechny maji absolutni vysku, prvni bude mit pozadi zebru (repeat-x) - horizontalni cary - druhy bude v nem, a podobne jako v prostredku bude mit pruhledne pozadi a obrazek rohu vlevo (no-repeat), treti bude zase uvnitr a bude mit zase obrazek v pravo.
To je cele, funguje ve vsech prohlizecich a je jen o malo tezsi, nez zpusobem vymysleni chovani double borderu :)
Reseni s obrazky tady nebude o nic moc slozitejsi .. (nebudes vkladat zadne img tagy, ale pouzijes background url v CSS..):
Rozdelis si stranku na 3 casti - vrsek, prostredek a spodek..
b)prostredek - jeden div s černým pozadím a obrázkem (repeat-y) u levého okraje, druhý div v prvním s pruhledym pozadim a obrazkem u praveho okraje. Na prostredek je to cele, funguje to ve vsech prohlizecich..
a,c)vrsek a spodek - 3 divy, vsechny maji absolutni vysku, prvni bude mit pozadi zebru (repeat-x) - horizontalni cary - druhy bude v nem, a podobne jako v prostredku bude mit pruhledne pozadi a obrazek rohu vlevo (no-repeat), treti bude zase uvnitr a bude mit zase obrazek v pravo.
To je cele, funguje ve vsech prohlizecich a je jen o malo tezsi, nez zpusobem vymysleni chovani double borderu :)
Th: Tomík taky psal "jejich", přemýšlel jsem jestli taky netuší že je to moje práce nebo jestli mi oniká :-) U pety myslím že a) je správně. Nezmínil jsem explicitně že je to moje dílo, ale jednak se to dá tušit a jednak se to dá doklikat... Každopádně mi vypršelo zkušební období placenýho hostingu zdarma, tak jsem to hodil zpět na pipni a to má asi zrovna výpadek nebo co... Asi si brzo zaplatim nějakej pořádnej hosting na onebit nebo tak někde...
Ne že by mi to připadalo jako extra krásný řešení, ale je každopádně funkční, takže beru :-) Místo vymýšlení kejklí s obrázkama jsem se radši naučil Banachovu větu o kontrakci :-))
Myslím že řešení s obrázkama je podobně dobrý jako řešení s divama - člověk se nevyhne určitý zátěži navíc, ale je to celkem neprůstřelný. Ale i tak co jde radši řešim prostředkama jazyků (HTML CSS ATD) než obrázky... Nicméně možná že je to už spíš věc osobních preferencí... Velikost těch obrázků je pár kB, to je imho docela v poho.
zkopíroval jsem to sem:
http://chodci.jsrosa.cz
(pipni nějak blbne)
Myslím že řešení s obrázkama je podobně dobrý jako řešení s divama - člověk se nevyhne určitý zátěži navíc, ale je to celkem neprůstřelný. Ale i tak co jde radši řešim prostředkama jazyků (HTML CSS ATD) než obrázky... Nicméně možná že je to už spíš věc osobních preferencí... Velikost těch obrázků je pár kB, to je imho docela v poho.
zkopíroval jsem to sem:
http://chodci.jsrosa.cz
(pipni nějak blbne)
Tak mě napadlo, že když to budu chtít v prohlížeči zvětšovat/zmenšovat, tak mu asi dá míň práce přepočítat ty bordery a marginy než přepočítávat celej obrázek.
A taky řešení s obrázkama spotřebuje 6 HTTP spojení navíc.
Ale ani tak ty obrázky úplně neodsuzuju :-))
A taky řešení s obrázkama spotřebuje 6 HTTP spojení navíc.
Ale ani tak ty obrázky úplně neodsuzuju :-))
Teda je fakt děsný, kolik lidi se válí doma (a prohlíží tyhle stránky) anebo naopak, kolik lidí se válí v práci (a prohlíží tyhle stránky) - v pracovní den (v době, kdy by většina z nás - z vás měla pracovat). :-))
<HTML>Hele Lamo a čím si jako přispěl k tématu? Když už si nemůžeš odpustit poznámku, tak se snaž pokaždý připojit i něco k tématu. Nebo sis ještě nevšiml, že pár takovýchto tvých poznámek už zmizelo? :-)</HTML>
>> Tomík taky psal "jejich"
No tak sorry. Asi tě nemám dost okoukanýho ;) Navíc to bylo ráno a nějak na rychlo. Na stránku jsem se díval bleskově a na konec jsem se nedostal a stějně bych si tam hned nevšiml © R.U.R. ;) Odradila mně pouze ta adresa. Netušil jsem, že je tvoje.
No tak sorry. Asi tě nemám dost okoukanýho ;) Navíc to bylo ráno a nějak na rychlo. Na stránku jsem se díval bleskově a na konec jsem se nedostal a stějně bych si tam hned nevšiml © R.U.R. ;) Odradila mně pouze ta adresa. Netušil jsem, že je tvoje.
2Lama: Já a pracovat? No od prohlížeče to nemám daleko. Je to jen jeden tab ;)
Dobře, R.U.R., vyhráls - přecejenom ne všechny prohlížeče při zvětšení stránky zvětšují i rozlišení obrázků na pozadí.
Jinak, že chodci.nikde.cz je R.U.R.ova práce jsem osobne zjistil až po vstupu na hlavni doménu nikde.cz :) (když vidím subdomény, tak hned kontroluji i obsah domén :D )
=Lama=
Ja pracovní den nemám, mám ještě pár týdnu volna. (Počítám, že tě v tom případě pořádně naštve, když ti sdělím, že jsem vstával až v 9 :D )
Jinak, že chodci.nikde.cz je R.U.R.ova práce jsem osobne zjistil až po vstupu na hlavni doménu nikde.cz :) (když vidím subdomény, tak hned kontroluji i obsah domén :D )
=Lama=
Ja pracovní den nemám, mám ještě pár týdnu volna. (Počítám, že tě v tom případě pořádně naštve, když ti sdělím, že jsem vstával až v 9 :D )
<HTML>No mně šlo spíš o to, že když peta psal ono zmiňované "jejich reseni" atd., tak už to bylo zcela jasné z příspěvku 29. 01. 2009 11:15, že se jedná o R.U.R.ovu stránku.
BTW já jsem nemocná, takže o pracovní době u mě nyní nelze mluvit. A vstávala jsem v poledne :-D</HTML>
BTW já jsem nemocná, takže o pracovní době u mě nyní nelze mluvit. A vstávala jsem v poledne :-D</HTML>
Cha, dělám si zářez na kabelu své klávesnice :-)) Ale spíš občas člověk něco dělá nevědomky lepším způsobem (to s tím zvětšováním mě napadlo až dnes).
Taky kontroluju domény :-)) Ale tahle je nikde.eu (nikde.cz je ale taky pěkná, nicméně nikoli moje - cz domény jsou strašně moc obsazený).
<OT>Já se učim na zkoušku z analýzy, a když se naučim nějakej důkaz, tak se jdu za odměnu podívat na fórum ;-)</OT>
Btw. nějak zapadla ta jsrosa, dva posty a ticho - čekám geniální nápady nebo aspoň geniální odpovědi! :-)
Taky kontroluju domény :-)) Ale tahle je nikde.eu (nikde.cz je ale taky pěkná, nicméně nikoli moje - cz domény jsou strašně moc obsazený).
<OT>Já se učim na zkoušku z analýzy, a když se naučim nějakej důkaz, tak se jdu za odměnu podívat na fórum ;-)</OT>
Btw. nějak zapadla ta jsrosa, dva posty a ticho - čekám geniální nápady nebo aspoň geniální odpovědi! :-)
...blbinky, bigbeat, trenky do zvonu, bonpari a sex. Na to vás užije. Kdyby ses raději zlepšoval v psychické odolnosti při odpovídání na dotazy méně znalých až blbých a hned je nestřílel ;-)
Nové příspěvky
index.html )
HTML Tabulky
Zalamování textu pomocí CSS
Přesměrování
Arduino - 400 Bad Request
Nastavení českých písmen
POMOC! po druhé!
Pozicování (obrázek na střed).
Jak vycentrovat obrazek, ktery je v prikazu absolute ?
Použití tvůrce webu
katalog
async functions' is only available in es8 (use 'esversion: 8')
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Problém s načítáním
Div pro reklamu překrývá prvky webové stránky
Nezobrazuje se mi lišta s reklamou
ako nahrám na môj web favicon?
JavaScript - nečitelný soubor *.js - jak prohlížet/editovat
Problém s textem
videostream
index.html
GB///refresh///JS
Total Commander - server nenalezen
Mobilní verze webu
Sloučené "hledání"
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami