blog o howrse.pl: Nowe kody do prezentacji

O to nowe kody HTML do ramek na prezentację:

Kod na 1 ramkę

Kod :
Obrazek:
<div style="background-image:url(link do obrazka); width: [szerokość obrazka w pixelach]px; height: [wysokość obrazka w pixelach]px; overflow: auto; margin-top: 0px; margin-left: 0px;">
Ramka:
<div style="width: [szerokość ramki w pixelach]px; height: [wysokość ramki w pixelach]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [odległość ramki od górnej krawędzi obrazka w pixelach ]px; margin-left: [odległość ramki od lewej krawędzi obrazka w pixelach]px;">TEKST

Znaczniki zamykające:
</div> </div>

Pamiętaj!

Jeśli jest napis znajduje się w nawiasach kwadratowych " [ ] " to liczbę lub tekst wpisujemy, usuwając te nawiasy.

Jeśli napis znajduje się w nawiasach " ( ) " nie usuwaj nawiasów i tekst wpisz w te zawiasy.
Trzeba to wszystko połączyć (bez napisu kod, ramka, znaczniki zamykające). Tam gdzie jest pogrubione, trzeba uzupełnić.
W kodzie jest napis " zapis koluru z palecie rbg" . Co to jest ta paleta? Są tam zapisane kody do poszczególnych kolorów. W naszym kodzie potrzebny będzie, aby ustalić kolor czcionki.

Jeśli komuś zależy tylko na jednej ramce to po całym kodzie, wstawia znaczniki zamykające. :)

Kod na 2 ramki.

Tutaj są już gotowe kody do uzupełnienia ;)

<div style="background-image:url( LINK DO OBRAZKA); width: [SZEROKOŚĆ OBRAZKA]px; height:[WYSOKOŚĆ]px; overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="width: [ TAK SAMO JAK SZEROKOŚĆ OBRAZKA]px; height: [TAK SAMO JAK WYSOKOŚĆ OBRAZKA]px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left:0px;">

<div style="width: [ SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD GÓRNEJ KRAWĘDZI W PIKSELACH ]px; margin-left: [ODLEGŁOŚĆ RAMKI OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst </div></div>

</div>

<div style="width: [ SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

Uwaga!

Aby druga ramka nie była pod obrazkiem prezentacji, trzeba zrobić następujące czynności.

1. Skupiamy się na kodzie na drugą ramkę.
2. Patrzymy na fragment kodu, gdzie jest "odległość ramki od górnej krawędzi obrazka w pixelach" .
3. W pierwszym kodzie wpisywaliśmy np. 100 i wtedy ramka była 100 px od górnej krawędzi, ale tu jest inaczej. Jeśli wpiszesz w drugiej ramce "100 px" to pojawi się ona 100px pod obrazkiem prezentacji. Jak temu zapobiec? Ustawiamy ilość pikseli na minusie ! np. (-100px). Będzie to oznaczało, że ramka będzie 100 pikseli od dolnej krawędzi prezentacji.

Tak samo jest z kolejnymi ramkami ! np. z 3, 4, 5 ... W pierwszej pozostawiamy wszystko normalnie.

Kod na 3 ramki.

<div style="background-image:url(LINK DO OBRAZKA); width: [SZEROKOŚĆ OBRAZKA]px; height:[WYSOKOŚĆ]px; overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="width: [TAK SAMO JAK SZEROKOŚĆ OBRAZKA]px; height: [TAK SAMO JAK WYSOKOŚĆ OBRAZKA]px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left:0px;">

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD GÓRNEJ KRAWĘDZI W PIKSELACH ]px; margin-left: [ODLEGŁOŚĆ RAMKI OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst </div></div>

</div>

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

</div>
<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

UWAGA !

Ramki nie mogą nachodzić na siebie, bo nie będą chciały się przesuwać !

Kod na 4 ramki.

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD GÓRNEJ KRAWĘDZI W PIKSELACH ]px; margin-left: [ODLEGŁOŚĆ RAMKI OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst </div></div>

</div>

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

</div>

Strony

Nowe kody do prezentacji

Brak komentarzy:

Prześlij komentarz