CSS div pozicionálás

display: block – display: inline – display:inline-block – display:none

Mi  a különbség?

block: teljes sort kitölti, előtte-utána sortörés.

inline: csak a szükséges helyet foglalja, tartalomtól függően. Hiába adok meg szélességet-magasságot, az elem mérete a tartalomtól függ.

inline-block: egymás mellett helyezkednek el az elemek, szélességet-magasságot megadhatom, figyelembe veszi.

none: nem jelenik meg az elem, nem foglal helyet.

Függvények gyakorlása – start()

A feladat röviden:

Írj egy star(x,y,a)függvényt (function), amely három paramétert fogad, és egy színnel kitöltött csillagot rajzol.Úgy írd meg a függvényt, hogy a következő kód a képen látható eredményt adja:

filledStar(40,50,75);       filledStar(130,120,100);  filledStar(250,220,150);

A csillag tulajdonképpen egy pentagramma.

filledStar(p1,p2,p3);   ahol p1 az x koordináta, p2 az y, és p3 a csúcsok közötti távolság. 

c.moveTo(p1,p2);                                                  /*kezdő csúcs “a” pont*/
c.lineTo(p1+p3,p2);                                               /*”b” pont*/
c.lineTo(p1+(p3*0.2),p2+(p3/2));                        /*”c” pont*/
c.lineTo(p1+(p3/2),p2-(p3/3));                             /*”d” pont*/
c.lineTo(p1+p3-(p3*0.2),p2+(p3/2));                   /*”e” pont*/
c.lineTo(p1,p2);                                                      /* vissza az “a” pontba*/
c.strokeStyle = ‘pink’;                                           /* vonalak kitöltő színe*/
c.fillStyle = ‘pink’;                                                 /*  csillag kitöltő színe */
c.fill();                                                                      /* a konkrét csillag  színezés*/
c.stroke();                                                               /* a konkrét vonal színezés*/

 

Bootstrap reszponzív rácsszerkezet gyakorló feladatok

Egy konténerbe helyezett 20px magas sorok, kettő oszlop egymás mellett. Bal oldali csökken, jobb oldali növekszik egy egységgel.

 Kettő 6 egység széles oszlop egy konténerben. Az első oszlopba ágyazva 5-4-3 egység széles oszlopok. Másodikban 6-2-4 egység széles oszlopok.

1-2-4-6-8-10 egység széles oszlopok, “offset” segítségével eltolva.

Bootstrap első megakadás…

Eljutottam a Bootstrapig és a Codeberry leírása elsőre “nem jött át”. Nekiugrottam még egyszer és még egyszer, de nem állt össze a kép.

“A col-xs- után álló szám mutatja, hogy milyen széles az oszlop. A fenti példában az első sorban mindkét oszlop 6 széles (összesen 6+6 = 12), a második sorban mindhárom oszlop 4 széles (összesen 4+4+4 = 12), a harmadik sorban mind a négy oszlop 3 széles (összesen 3+3+3+3 = 12).” 6 széles mi?

Ez a szélesség dolog nem volt világos. Félretettem, rápihentem, majd nekiugrottam újra és összeállt.

Megfogalmaztam magam szájíze szerint és ez annyira megtetszett, hogy muszáj volt írni róla egy blog bejegyzést. 🙂

12 egységből áll egy oszlop. A col-xs- után álló szám mutatja hány egységet foglal el egy oszlop. A fenti idézetet átírva: “A col-xs- után álló szám mutatja, hogy hány egység széles az oszlop. A fenti példában az első sorban mindkét oszlop 6 egység széles (összesen 6+6 = 12), a második sorban mindhárom oszlop 4 egység széles (összesen 4+4+4 = 12), a harmadik sorban mind a négy oszlop 3 egység széles (összesen 3+3+3+3 = 12).”

Persze, tudom nem egy hatalmas felfedezés, de Nekem segített ez az egy kis szó.

 

HTML és CSS

HTML

<title>Az oldal címe</title>

<h1>A legfontosabb címsor</h1>
<h6>A legkisebb címsor</h6>

<figure>
  <img src="http://a-kep-cime.jpg" alt="alternatív szöveg">
  <figcaption>Képaláírás</figcaption>
</figure>

<article>
  <p>Bekezdés <a href="http://link-valahova.hu" title="A hivatkozott oldal címe">egy kattintható linkkel</a></p>
  <p>Egy másik bekezdés <strong>kiemelten hangsúlyos tartalommal</strong>.</p>
</article>

CSS

h1 {
  color:          rgba(0,0,0,.8);     // szín, (piros, zöld, kék, átlátszóság)
  font-family:    serif;              // betűtípus
  font-size:      36px;               // betűméret
  line-height:    1.58;               // sormagasság
  letter-spacing: -.003em;            // betűköz
  text-align:     center;             // szöveg igazítása
}

img {
  height:         auto;               // magasság
  width:          100%;               // szélesség
}

figure {
  margin:         0;                  // margó
}

article {
  margin:         0 auto;             // középre rendezett
}

a:hover {
                                      // az egér éppen ide mutat állapot
}