« 1 2 »
Autor Zpráva
Johny97
Profil *
Č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>&nbsp;</span>.

EDIT: +viď. opravu v [#13].
margin
Profil *
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 *
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 *
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 *
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
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
Příklad pro inspiraci; hraj si :)
http://kod.djpw.cz/wbc
Johny97
Profil *
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
Johny97:
v style.css ti 2. řádek končí špatnou závorkou (má tam být složená)
Kubo2
Profil
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
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 *
/* 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 *
A jak to mam pak dávat dolu, aby to neposouvalo obraz?
margin
Profil *
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 *
Tady to je.
http://kod.djpw.cz/acc
Potřebuju tu tabulku dát víc dolu
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
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 *
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
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 *
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
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);
Tady je ale problem s tim, ze budes mit polopruhledny vsechno co bude uvnitr toho elementu.
kaktuss
Profil
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
[#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 *
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?
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: