Diskuze: CSS a bootstrap pozice
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 9 zpráv z 9.
K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookie. Informace o tom, jak náš web používáte, sdílíme se svými partnery pro sociální média, inzerci a analýzy. Partneři tyto údaje mohou zkombinovat s dalšími informacemi, které jste jim poskytli nebo které získali v důsledku toho, že používáte jejich služby.
Používáme nezbytné cookies pro fungování webu a s tvým souhlasem také analytické a marketingové cookies.
Zajišťují základní funkce, bezpečnost a služby, které sis vyžádal. Nelze je vypnout.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| ITnetwork | ITnetwork | Provoz webu, relace, přihlášení a uložení nastavení cookies. | PHPSESSID, auth_token, sid, itn_consent_impression, __Host-itn_consent | Relace až 1 rok |
| Google Tag Manager | Správa značek a načítání měřicích nástrojů webu. | Žádné | Neukládá se | |
| Google Fonts | Načítání typografie webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google Hosted Libraries | Načítání potřebných knihoven a stylů webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google reCAPTCHA | Ochrana formulářů a webu před zneužitím. | _GRECAPTCHA, rc::a, rc::b, rc::c, rc::f | Relace až 180 dní | |
| YouTube | Přehrávání vloženého video obsahu. | localStorage, IndexedDB; cookies after playback interaction | Relace až trvalé úložiště | |
| Vimeo | Vimeo | Přehrávání vloženého video obsahu. | __cf_bm, _cfuvid, vuid, localStorage, IndexedDB | Relace až 2 roky |
| Facebook Login | Meta | Přihlášení pomocí účtu třetí strany. | Úložiště řízené poskytovatelem | Relace až 1 rok |
| GoPay | GoPay | Zpracování uživatelem vyžádané platby. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
Pomáhají nám porozumět používání webu a zlepšovat ho.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Analytics 4 | Měření návštěvnosti a používání webu. | _ga, _ga_* | Až 2 roky | |
| Microsoft Clarity | Microsoft | Měření návštěvnosti a používání webu. | _clck, _clsk, _cltk | Relace až 1 rok |
Slouží k měření kampaní, personalizaci reklamy a marketingové komunikaci.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Ads | Měření kampaní, reklama a remarketing. | _gcl_au, _gcl_ls | Relace až 90 dní | |
| Meta Pixel | Meta | Měření kampaní, reklama a remarketing. | _fbp, _fbc, localStorage | Až 90 dní |
| Sklik | Seznam.cz | Měření kampaní, reklama a remarketing. | retargeting, sid, szn:* | Relace až trvalé úložiště |
| LinkedIn Insight | Měření kampaní, reklama a remarketing. | bcookie, li_gc, lidc, __cf_bm | Relace až 1 rok | |
| Ecomail | Ecomail.cz | Měření kampaní, reklama a remarketing. | ecmid, Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
| Atribuce kampaní ITnetwork | ITnetwork | Přiřazení návštěvy a objednávky ke kampani. | campaign_clid[*], user_session_context | Až 1 rok |
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
<body>
<div class="container">
<h1 style="color: white;">Registrace</h1>
</div>
<form class="container">
<div class="form-group">
<label style="color: white;" for="jmenoid">Jméno:</label>
<input type="text" class="form-control" style="width: 40%;" name="jmeno"
id="jmenoid" placeholder="Jméno">
</div>
<div class="form-group">
<label style="color: white;" for="emailid">Email</label>
<input type="email" class="form-control" style="width: 40%;" name="email"
id="emailid" placeholder="Email">
</div>
<div class="form-group">
<label style="color: white;" for="nickid">Nick ve hře</label>
<input type="text" class="form-control" style="width: 40%;" name="nick"
id="nickid" placeholder="Nick ve hře">
</div>
<div class="form-group">
<label style="color: white;" for="hesloid">Heslo</label>
<input type="password" class="form-control" style="width: 40%;" name="heslo"
id="hesloid" placeholder="Heslo">
</div>
<div class="form-group">
<label style="color: white;" for="hesloznovuid">Znovu
heslo</label>
<input type="password" class="form-control" style="width: 40%;"
name="hesloznovu" id="znovuhesloid" placeholder="Heslo znovu">
</div>
<div class="form-group">
<input type="checkbox" required>
<p style="color: white;">Souhlasím s <a
href="podminky.php">podmínkami</a></p>
</div>
<input type="submit" class="btn btn-primary">
</form>
*** <div class="" style="position: absolute; top: 175; left: 1000;">
<h2 style="color: white;">Už jseš zaregistrovaný?</h2>
</div>***
</body>
Ahoj, tak zaprvé, používej tlačítko pro vkládání kódu - to
"</>", mnohem lépe se to potom luští.
Očividně používáš Bootstrap, tak nepoužívej něco jako absolutní
pozicování, Bootstrap určitě má lepší nástroj.
Kde chceš, aby se to zobrazilo? Přes celý formulář?, nad ním?, pod
ním?
Další věc: takto se atribut style nepoužívá, udělej se css
třídu. Style se ideálně nepoužije vůbec, nebo se použije velice zřídka
na něco, co se třeba generuje dynamicky a nedá se to definovat v CSS souboru.
Tady bys měl udělat něco jako
styles.css
.my-input{
color: white;
}
.my-label{
width: 40%;
}
html:
<div class="form-group">
<label class="my-label" for="hesloid">Heslo</label>
<input type="password" class="form-control my-input" name="heslo" id="hesloid" placeholder="Heslo">
</div>
A ještě jedna věc: "Už jseš zaregistrovaný?" není česky,
předpokládal bych, že to má být "Jsi už zaregistrovaný?" 
Jo neumím česky:D ne teď jsem za totálního idiota ale já se naučil jen základy a šel jsem na php. Potřebuju to dát vedle registračního formuláře. A nevím jak umí Bootstrap pozicovat. Maximálně vím container
Tak se nauč víc než základy, bez toho to vážně nepůjde.
Bootstrap pozicovat umí, doporučuji přečíst si dokumentaci - alespoň
prolistovat si, co to umí, abys to věděl a potom se k tomu vrátil. Jedna z
nejlepších věcí, co Bootstrap umí je grid systém - nastuduj si to a nic
jako pozicování už hodně dlouho potřebovat nebudeš, dokud se nerozhodneš
udělat něco hodně exotického.
o tom jsem něco slyšel. Diky za odpověď a omlouvám za můj dementní
dotaz
.
U bootstrapu jsem si oblibil starou dokmentaci k verzi 2.3
Tady mas krasne vysvetlene, jak se to classuje, abys to mel vedle sebe. Jen si
budes muset dohledat podobnou stranku pro svou verzi
Jo, pripadne si klinki pak v menu
na layout, taky. A pak mas uplne nahore Base CSS, taky zajimave.
https://getbootstrap.com/…folding.html#…
https://getbootstrap.com/…folding.html#…
https://getbootstrap.com/…ase-css.html
Zobrazeno 9 zpráv z 9.
