| Autor | Zpráva | ||
|---|---|---|---|
| Johny97 Profil * |
#1 · Zasláno: 20. 9. 2013, 20:18:05
Čau, začínám tak celkově s tvorbou webu a html již zvládám, ale chtěl bych se zeptat jak mohu udělat třeba proužek v css 10px x 10px s barvou 0088ff.
Díky :) |
||
| Kubo2 Profil |
Johny97:
„proužek 10px x 10px“ To nie je prúžok, ale štvorček :-) Napríklad takto: span {
width: 10px;
height: 10px;
background: #0088ff;
}A do html jednoducho napíšeš <span> </span>.
EDIT: +viď. opravu v [#13]. |
||
| margin Profil * |
#3 · Zasláno: 20. 9. 2013, 20:47:53
Johny97:
Ideální je, pokud je to možné, nepřidávat další element a proužek udělat jako border, nebo, pokud chceš něco hezčího, tak background-image nějakého stávajícího elementu. Kubo2: - inline elementům nemůžeš dávat rozměry (interpretují to jen starší Explorery) - v tomto případě je zbytečné strkat do elementu (spanu) tvrdou mezeru |
||
| Johny97 Profil * |
#4 · Zasláno: 20. 9. 2013, 21:00:48
Mluvím o tomto http://i43.tinypic.com/2588bj7.png ten modrý pruh, tohle jsem vytvořil ve photoshopu a potřeboval bych ten modrý pruh udělat v css.
|
||
| han5vk Profil |
Toto sú základy CSS. Tie by si si mal naštudovať. Konkrétne toto by som osobne riešil jedným divom s polopriehľadným tmavým pozadím, v ňom nadpis h1 naštýlovaný na modrú farbu, nejakú výšku (najlepšie len opaddingovať text, kvôli možným zmenám jeho veľkosti) a šírku, a následne formulár.
|
||
| Johny97 Profil * |
#6 · Zasláno: 20. 9. 2013, 21:13:42
Mě by stačilo jen to samotné vytvoření toho proužku, který mám v plánu udělat, jelikož toto nefunguje.
/* Přihlašovací Panel */
hlavicka {
width: 100px;
height: 100px;
background-color: #0088ff;
}
/* Prihlašovací Panel KONEC */ |
||
| Petr ZZZ Profil |
Johny97 [#6]:
Třídy v CSS musí začínat tečkou: .hlavicka { width:100px; background-color:#08f }A v HTML tu třídu musíš zavolat, třeba: <h2 class="hlavicka">Přihlašovací panel</h2> |
||
| Johny97 Profil * |
#8 · Zasláno: 20. 9. 2013, 21:20:43
Index.html
<html> <head> <title>StrangeR's Official Website</title> <link rel="stylesheet" href="style.css"> </head> <body background="img/bg.png"> <div class="hlavicka"></div> </body> </html> style.css /* Pozadí */
body {background-repeat: no-repeat; background-size: cover;)
/* Pozadí KONEC */
/* Přihlašovací Panel */
.hlavicka {
width: 100px;
height: 100px;
background-color: #0088ff;
}
/* Prihlašovací Panel KONEC */A nikde nic, jakto? |
||
| Petr ZZZ Profil |
#9 · Zasláno: 20. 9. 2013, 21:26:41
Máš ten
<div class="hlavicka"></div> prázdný, něco do něj napiš, třeba:
<div class="hlavicka">Přihlašovací panel</div> |
||
| juriad Profil |
#10 · Zasláno: 20. 9. 2013, 21:29:16
Příklad pro inspiraci; hraj si :)
http://kod.djpw.cz/wbc |
||
| Johny97 Profil * |
#11 · Zasláno: 20. 9. 2013, 21:29:41
Stále nic
<html> <head> <title>StrangeR's Official Website</title> <link rel="stylesheet" href="style.css"> </head> <body background="img/bg.png"> <div class="hlavicka">Přihlašovací Panel Hlavička</div> </body> </html> |
||
| juriad Profil |
#12 · Zasláno: 20. 9. 2013, 21:30:33
Johny97:
v style.css ti 2. řádek končí špatnou závorkou (má tam být složená) |
||
| Kubo2 Profil |
#13 · Zasláno: 20. 9. 2013, 21:58:46
margin:
; ad prvé, ospravedlňujem sa, môj omyl - nedával som pozor, ; ad druhé, to mám už taký zlozvyk :-) EDIT [#2]: Správne by to malo byť takto (ad [#3] margin): css span {
display: block;
width: 10px;
height: 10px;
background: #0088ff;
}<span></span>
a živá ukážka Mal by sa ti zobraziť malý modrý štvorček. Alternatíva <div>, ďaľšie od [#3]. príspevku.
|
||
| kaktuss Profil |
#14 · Zasláno: 20. 9. 2013, 22:45:51
juriad, Kubo2:
osobne by som na login okno h nadpisy nepoužíval... a riešil by som to takto: http://kod.djpw.cz/zbc Pozn. v ukážke som neriešil priehľadné bg v IE7+8 |
||
| Johny97 Profil * |
#15 · Zasláno: 21. 9. 2013, 08:14:49
/* Přihlašovací Panel */
.hlavicka {
width: 650px;
height: 40px;
background-color: #0088ff;
position: absolute; top: 20px; left: 635px;
}
/* Prihlašovací Panel KONEC */Zkoušel jsem i relativní pozici, ale když zvětšuju a změnšuju obraz, tak to ujíždí do stran, proč? |
||
| han5vk Profil |
Prečo to pozicuješ? Stačí použiť margin, a nebude ti to skákať.
.hlavicka {
width: 650px;
height: 40px;
background-color: #0088ff;
margin: 20px auto;
} |
||
| Johny97 Profil * |
#17 · Zasláno: 21. 9. 2013, 09:29:32
A jak to mam pak dávat dolu, aby to neposouvalo obraz?
|
||
| margin Profil * |
#18 · Zasláno: 21. 9. 2013, 09:48:53
Co cheš dávat dolů?
Jaký obraz se ti posouvá? Proč tu dáváš kousek CSS bez dalšího CSS a HTML místo toho, abys udělal živou ukázku? |
||
| Johny97 Profil * |
#19 · Zasláno: 21. 9. 2013, 09:53:46
|
||
| Petr ZZZ Profil |
Reaguji na Johnyho97:
„/* Prihlašovací Panel KONEC */“ V CSS se nesmí používat diakritika a je dobré se jí vyhnout i v komentáři. „Potřebuju tu tabulku dát víc dolu“ Dej jí margin-top třeba 100 nebo 150 pixelů, třeba tím, že si ve třídě .hlavicka upravíš margin: 150px auto 0; (místo současného margin: 20px auto;).
|
||
| kaktuss Profil |
#21 · Zasláno: 21. 9. 2013, 10:37:15
Johny97:
Nuž veci sa dajú robiť aj zložito :-). Ináč uvedomil si si, že opacity v .telo sa ti aplikuje na všetky children elementy a teda budeš v tom okne mať priesvitné všetko? |
||
| Johny97 Profil * |
#22 · Zasláno: 21. 9. 2013, 11:16:24
kaktuss:
Neuvědomil, protože mě nenapadlo jak jinak bych to mohl udělat Petr ZZZ: Když to nastavím třeba na těch 250px a pak ten header tabulky na 240, tak to začne pousouvat i tu tabulku. http://kod.djpw.cz/ccc |
||
| Amunak Profil |
Johny97:
„Neuvědomil, protože mě nenapadlo jak jinak bych to mohl udělat“ Můžeš tomu nastavit barvu pozadí RGBA se zápisem pro starší prohlížeče. Třeba takto: .telo {
background-color: black;
background-color: rgba(0, 0, 0, .5);
}Pokud prohlížeč podporuje "barevný model" RGBA, bude pozadí průhledné. Jinak se ten zápis bude ignorovat a použije se černá z předchozí deklarace. Alternativně bys mohl dát na pozadí průhledný obrázek. |
||
| Petr ZZZ Profil |
#24 · Zasláno: 21. 9. 2013, 11:43:57
Johny97:
Dopsal jsem do kódu v [#20] nulu, asi sis toho nevšiml. Kromě toho je ještě třeba vynulovat horní margin u třídy .telo. Takže si oprav margin v obou třídách:
.hlavicka { margin: 230px auto 0; }
.telo { margin: 0 auto; } |
||
| Johny97 Profil * |
#25 · Zasláno: 21. 9. 2013, 11:44:04 · Upravil/a: Johny97
Amunak:
Ve všech prohlížečích to jde, kromě IE, tam to je černé a nebere to vubec margin, takže to není uprostřed a je to v levo Petr ZZZ: I když tam je ta nula, tak když posunu hlavičku posune to níž i to tělo. |
||
| polonium Profil |
#26 · Zasláno: 21. 9. 2013, 12:00:09
Jak na to tak koukam, tak to mas nejaky login bez dalsiho obsahu na ty strance. Pokud ho chces mit nekde muzes skusit Univerzální vertikální centrování
Pokud skutecne nechces mit ten login na stredu obrazovky, jen ho odsadit od vrsku, tak pouzij treba margin: 0 auto; margin-top: 250px; To pruhledny pozadi muzes resit pruhlednym png obrazkem, treba takto: Obrazek ma rozmer 5x5px, polopruhledny background-image: url('../images/polopruhledny-5x5.png');Opacity Nebo dalsi moznost pro polopruhledne pozadi (fugujici i v ie): background-color: black; opacity: 0.5; filter:alpha (opacity=50); |
||
| kaktuss Profil |
#27 · Zasláno: 21. 9. 2013, 12:03:34
Johny97:
„Neuvědomil, protože mě nenapadlo jak jinak bych to mohl udělat“ Už včera som ti tu poslal ukážku http://kod.djpw.cz/zbc , tak neviem, ty príspevky nečítaš? Či? |
||
| polonium Profil |
#28 · Zasláno: 21. 9. 2013, 12:06:39 · Upravil/a: polonium
[#19] Johny97
Kdyz jsem koukal tady, prijde mi dost zbytecny, abys mel oddelenou tu hlavicku od tabulky. Jsou s tim akorat problemy. Udelej nejaky wrapper, do ktereho zabalis tu hlavicku a telo, takze pak budes posouvat pouze ten wrapper. Ten wrapper tomu da cely tvar ktery potrebujes, rozmery, pozici, pozadi. Zbytek je uz pohoda, nekde v tech zivych ukazkach tady uz jsem to videl. Mel bys to pouzit... Poznamka: Toto nemas zadny smysl, pokud nemas nastaveny pro body weight. body { margin: 0 auto; }[#27] kaktuss Jo to je to o cem mluvim :D |
||
| Petr ZZZ Profil |
Johny97:
„tak když posunu hlavičku posune to níž i to tělo.“ Nerozumím. Ty chceš, aby se tělo hlavičkou překrývalo? polonium: „weight“ Asi width, co?
|
||
| Johny97 Profil * |
#30 · Zasláno: 21. 9. 2013, 12:31:43
Jo takže už to mám, teď je problém ve fontu
.nadpis {
font: url('font/ww.ttf')
color: #ffffff;
text-align: center;
}<div class="nadpis">Login Panel</div> Proč to písmo je černé a proč tam není vidět ten font? |
||
|
Téma pokračuje na další straně.
|
|||
0