| Autor | Zpráva | ||
|---|---|---|---|
| Daniel47 Profil |
Ahojte, chci udělat tohle:
Pomocí dvou obrázku. A nevím jak to udělat v html a css. Budu rád za pomoc! |
||
| Mlocik97 Profil |
#2 · Zasláno: 22. 7. 2019, 04:00:05
Daniel47:
obrazok je rozbitý |
||
| Daniel47 Profil |
#3 · Zasláno: 22. 7. 2019, 13:45:07
Mlocik97:
Opraveno. |
||
| RastyAmateur Profil |
#4 · Zasláno: 22. 7. 2019, 14:40:49
Daniel47:
Youtube to už asi nemá, podle toho, co tam teď vidím (tedy za předpokladu, že chápu, co že vlastně chceš udělat). Každopádně to lze udělat buď záporným marginem, nebo absolutním pozicováním. |
||
| Mlocik97 Profil |
#5 · Zasláno: 22. 7. 2019, 14:47:30
RastyAmateur:
no text to píše stále mimo kruhu. |
||
| Taurus Profil |
#6 · Zasláno: 22. 7. 2019, 15:08:36
text-align: center;
line-height: 200px; |
||
| Daniel47 Profil |
#7 · Zasláno: 24. 7. 2019, 15:37:16
Ahojte, nemůžu dostat první fotku do té druhé. Nevíte jak to udělat?
|
||
| RastyAmateur Profil |
#8 · Zasláno: 25. 7. 2019, 10:33:17
Daniel47:
Jak to myslíš? Pokud myslíš jen nějak posunout na lepší místo, třeba doprostřed, tak ano, lze. Způsoby na to máš zmíněné dokonce dva ([#4]), lze vymyslet i další. Třeba jednu fotku dáš jako pozadí velkému elementu, druhou fotku do něj prostě vložíš a hezky vycentruješ |
||
| Daniel47 Profil |
RastyAmateur:
Díky, funguje. A nevíš jak to posunout dolů tu prostřední fotku? Kód zde: <!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8">ˇ
<style>
.author-daniel-1-logo-pozadi {
background-image: url(http://dettube.wz.cz/img/author-daniel-1-logo-pozadi.png);
background-position: center center;
background-size: cover;
padding: 50px 0;
display: block;
width: 100%;
}
.author-daniel-1-profilovka {
background-image: url(http://dettube.wz.cz/img/author-daniel-1-profilovka.png);
margin: 0 auto;
margin-left: 25px;
width: 128px;
height: 128px;
}
</style>
</head>
<body>
<div class="author-daniel-1-logo-pozadi">
<a href="/author-daniel.php/"><p class="author-daniel-1-profilovka"></p></a></div>
</body>
</html>Budu rád za tvoji radu! |
||
| Daniel47 Profil |
#10 · Zasláno: 26. 7. 2019, 02:50:44
RastyAmateur:
A chci se zeptát mám ten kód správně na psaný? |
||
| RastyAmateur Profil |
#11 · Zasláno: 26. 7. 2019, 07:28:53
Daniel47:
Nevím. Nedodal jsi odkaz na živou ukázku a já si to nechci kopírovat, když nemám ty fotky, co tam mají být... Ale zkus si změnit různě nějaká čísla a uvidíš, co to bude dělat. Buď bude stačit elementu .author-daniel-1-logo-pozadi nastavit margin, nebo mu pozměnit padding: 50px auto 30px auto;. Záleží, jak jsi to myslel.
„A chci se zeptát mám ten kód správně na psaný?“ Napsal bych to jinak. Nevím, jestli do odkazu patří odstavec. Asi spíš ne, když už, tak naopak. Jenže do odstavce patří text a ten ty tu nemáš. Vůbec tedy <p> nepotřebuješ, tu třídu author-daniel-1-profilovka můžeš přiřadit rovnou tomu odkazu.
Hodí se občas ten kód zarovnávat, takhle je to nepřehledné a snadno uděláš chybu Je zvykem CSS oddělit, ale na webu to máš, tak to asi víš. Navíc i CSS jsou dobré, když jsou zarovnané. Opět je pak kód přehlednější. Nakonec si nejsem jistý s atributem lang, jestli tam nemá být pouze cs. Ale tyhle věci jsem nikdy neřešil, jen teď tak narychlo hledal, takže třeba je to správně, nevím. Ale nemyslím si to.
|
||
| Mlocik97 Profil |
RastyAmateur:
lang je spravne len cs, ale aj cs-cz dokaze prohlizec i boti spracovat. Myslim ze len Firefox to jediny nespracuje. |
||
| Daniel47 Profil |
RastyAmateur, Mlocik97:
Ahojte, já jsem ten: <html lang="cs-cz"> viděl na webu: www.itnetwork.cz/html-css/webove-stranky/jak-psat-moderni-web-html-tutorial-uvod-do-html kde sem se naučil HTML. A tam to bylo použíte v kódu a tak to používám i na mojem webu.
|
||
| blaaablaaa Profil |
#14 · Zasláno: 26. 7. 2019, 14:51:35
Daniel47:
lang musí obsahovat BCP47 tag, tzn. "cs", viz www.iana.org/assignments/language-subtag-registry/language-subtag-registry |
||
| Daniel47 Profil |
RastyAmateur:
Já chci tu druhou fotku dolů. Kód zde: <!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8">ˇ
<style>
.author-daniel-1-logo-pozadi {
background-image: url(http://dettube.wz.cz/img/author-daniel-1-logo-pozadi.png);
background-position: center center;
background-size: cover;
padding: 50px 0;
display: block;
width: 100%;
}
.author-daniel-1-profilovka {
background-image: url(http://dettube.wz.cz/img/author-daniel-1-profilovka.png);
margin: 0 auto;
margin-left: 25px;
width: 128px;
height: 128px;
}
</style>
</head>
<body>
<div class="author-daniel-1-logo-pozadi">
<a href="/author-daniel.php/"><p class="author-daniel-1-profilovka"></p></a></div>
</body>
</html>Fotky už by se ti měli zobrazit. |
||
| RastyAmateur Profil |
Daniel47:
„jak-psat-moderni-web-html-tutorial“ Bacha na to. Jako nic špatného v tom článku není, ale píšou tam „moderni“, přičemž první komentář u článku je vydaný v roce 2011 (takže odhaduji, že z této doby i pochází). V této první části vyloženě nic špatně není, ovšem dál jsou věci, které bych již dnes za dvakrát moderní nepovažoval... Ale jako stále to funguje a věřím, že minimálně ty si s tím vystačíš. Jinak stále jsi neuvedl odkaz na živou ukázku. Sice je super, že nám sem dáš nějaký kód, ale existují i lepší způsoby. Takhle najedu na tvůj komentář, vidím kód se scrollbarem, tudíž je dlouhý a mám chuť to přeskočit, protože prostě proč se s tím patlat. Doporučuji stránky jako je jsfiddle.net, nebo zdejší kod.djpw.cz. Vždy tam máš 4 políčka - jedno na HTML body (píšeš rovnou konkrétní část, nemusíš psát <html>, <head> a ostatní zbytečnosti), druhé na CSS, třetí na JS s možností použití nějakého frameworku a poslední je výsledek. V meníčku máš možnost to, co tam napíšeš uložit. Když to tak uděláš (jako jsem to já udělal v [#4]), nám stačí kliknout na odkaz a hned vidíme jak oddělený kód, tak výsledek. Navíc kód hned můžeme upravit, uložit a poslat ti výsledek. Prosím, nauč se s tím pracovat. Bude snazší ti pomoci a ten čas tomu věnuje, troufám si říci, více lidí...
Zpět k tvému dotazu. Stále nechápu, kterou fotku kam chceš dostat. Jestli chceš tu malou fotku s Déčkem dostat dolů, tak už jsme ti poradili, přečti si to znovu. Pro tebe bude asi na pochopení nejsnazší absolutní pozicování (které jsem mimochodem už zmiňoval v [#4]). Vše, co k tomu potřebuješ vědět je na jpw/css/position. Tomu divu s pozadím dáš relativní pozici, do něj prdneš malý obrázek s absolutní pozicí a řekneš mu, kam si má v tom obalu stoupnout. Živá ukázka - do absolutní pozice ( top, left, right, bottom) můžeš zadat všechny možné jednotky. px, em, rem, vh, vw, %, calc() (ty zvýrazněné považuji za užitečné, aby jsi si nastudoval, protože je asi neznáš. Často se můžou hodit)
|
||
| Daniel47 Profil |
|||
| RastyAmateur Profil |
Daniel47:
„Tu malou fotku s tím D potřebují aby šla o trochu dolů.“ Super, tak jí tam dej! Návody tu máš 3. Jeden i v mém posledním příspěvku. Tam máš jednoduchou ukázku, kde není moc věcí co změnit. Kdyby jsi sám vyzkoušel pozměnit pár čísel a koukal, co to dělá, určitě na to přijdeš. Jinak rád bych citoval sám sebe, a hned dvakrát: RastyAmateur: „Vždy tam máš 4 políčka - jedno na HTML body (píšeš rovnou konkrétní část, nemusíš psát <html>, <head> a ostatní zbytečnosti), druhé na CSS, třetí na JS s možností použití nějakého frameworku a poslední je výsledek.“ ([#16])
„Hodí se občas ten kód zarovnávat, takhle je to nepřehledné a snadno uděláš chybu“ ([#11]) Zkus to využít! Do sekce HTML vypiš pouze HTML bez hlavičky a samotného tagu HTML, do CSS dej CSSka. JS tam nyní nemáš, to zůstane prázdné. Takže to, co jsi nám měl poslat, je tady! |
||
| Tomášeek Profil |
#19 · Zasláno: 26. 7. 2019, 20:52:50
Daniel47:
Myšlenka, že kažý uživatel bude mít pro ten box jinou classu, je nesmyslná. Víc se v tom šťourat nechci, to vlákno je plné bordelu a nemám chuť se jím probírat a chápat, co vlastně chceš. RastyAmateur: „nebo mu pozměnit padding: 50px auto 30px auto;“ [#11]
Nic jako padding: auto neexistuje.
„do absolutní pozice ( top, left, right, bottom) můžeš zadat všechny možné jednotky. px, em, rem, vh, vw, %, calc()“
Jak mu v tomto případě pomohou vh či vw? Calc() možná ano, ale v tomto případě se mi jeví jako zbytečný.
|
||
| RastyAmateur Profil |
#20 · Zasláno: 26. 7. 2019, 22:02:45
Tomášeek:
„Nic jako padding: auto neexistuje.“
Jaj, chybička, má tam být místo auto nula O:)
„Jak mu v tomto případě pomohou vh či vw? Calc() možná ano, ale v tomto případě se mi jeví jako zbytečný.“
Nemyslel jsem v tomto případě. V tomto případě bude muset rozhodně použít pixely... Ale zmínil jsem, že tam jdou taky dosadit a zmínil jsem je především proto, že je s největší pravděpodobností nezná, aby si je dostudoval. |
||
| Tomášeek Profil |
#21 · Zasláno: 26. 7. 2019, 22:39:28
RastyAmateur:
„V tomto případě bude muset rozhodně použít pixely“ Což nemusí bý pravda. Můžou to být procenta, kombinace procent a záporného marginu, transformu, možná calc(), atd. Možností je více a rozhodně zde nemusí použít nic. Nevíš, jak se to má chovat na nižších rozlišeních, proto nevíš, jak správně pozicovat. A propos, pozicování možná nebude třeba a začátečník by o něm vůbec nemusel vědět. Pro začátečníka jsou nepozicované možnosti (záporný margin) vhodnější, nebude mít k dispozici nástroj, který je zde sice vhodný, ale v mnoha dalších případech absolutně nevhodný. |
||
|
Časová prodleva: 5 let
|
|||
0