Obrázek s rámečkem v rámečku

[snilekMatej]

První issue od táty

[Bebul]

Ahoj Matěji,

toto je první issue, aby ses naučil pracovat podle zadání, nebo komunikovat. Tady se nepíše v HTML, ale v Markdown, vysvětlím později.

Vím, že chceš vyrobit nový rámeček, do kterého se dá obrázek a který bude sloužit jako hlavička článků.

• nakresli ho v Malování ve Windows
  • třeba v Zoneru musíš udělat průsvitné okolí a vnitřek
• vlož ho před horní část rámečku jako div

  <div style="margin-top:0px; margin-left:0px">...pak ten obrázek...</div>`

• bude to umístěno špatně, tak pomocí Chrome Developer Tools si najdi správné hodnoty pro ty dva margin

Dovnitř toho rámečku pak vložíš nové obrázky. Ty musí mít správnou velikost a taky se s nima budeš prát pomocí margin. Ukážu ti pak jak to udělat chytřeji.

Jsem zvědavej, jak se s tím popereš 😃

[snilekMatej]

už jsem to namaloval a zprůhlednil v zoneru. Ještě mi zbívá to umístění s obrázkem.

[Bebul]

Aha. A můžeš mi sem ten obrázek hodit? Nemusíš commitovat, hoď ho sem, přetáhni ho sem.

[snilekMatej]

[snilekMatej]

Špatně se mi to umísťuje, různě to rozbourává ty rámečky... zkouším position: relative a uvnitř position: absolute. Takže ten jeden div je relativně vzhledem k místu, kde by normálně byl a všechno, co je uvnitř se počítá absulutně od tohoto div. Tím se to přestává rozbourávat a čísla pro pozicování jsou srozumitelnější.

Bez toho position:relative se to pozicovalo absolutně v rámci celé HTML stránky, úplně strašný... cokoli bych změnil, hned se to rozsype.

Tohle mi funguje:

<div><img src="layout/game-frame-top.png"></div>

<div style="position: relative; left:350px; top:-120px; margin-bottom:0px">
  <img src="images/matej.jpg" width="145px" style="position: absolute; left:15px">
  <img src="layout/game-frame.png" style="position: absolute; top:0px">
</div>

<div style="background:url(layout/game-frame-body.png) repeat-y">

[snilekMatej]

mám to vyřešené