Element HTML umieszczony poza oknem przeglądarki internetowej

W tej części kursu CSS dowiemy się w jaki sposób utworzyć element HTML, który będzie umieszczony poza granicami okna przeglądarki internetowej, który pojawi się gdy najedziemy na jego wystający obszar kursorem myszki, oraz który będzie zawsze umieszczony w tym samym miejscu, w oknie przeglądarki internetowej, nawet gdy będziemy przewijać okno przeglądarki internetowej za pomocą suwaków.

Przystępując do tej części kursu CSS powinniśmy wiedzieć jak ułożyć elementy blokowe obok siebie, za pomocą właściwości float. Jeżeli tego nie wiesz bądź dalej nie rozumiesz, to zapoznaj się jeszcze raz ze sposobem na ułożenie dwóch elementów blokowych "div" obok siebie.

Okno Przeglądarki Internetowej

Najedź kursorem myszki na obszar, w którym znajduje się litera - P

to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML

P

Naszym pierwszym krokiem, który pozwoli nam utworzyć układ elementów HTML, który został zaprezentowany powyżej, będzie stworzenie odpowiedniej struktury elementów w kodzie HTML.

Będziemy potrzebowali jednego elementu blokowego div, w którym umieścimy dwa pozostałe elementy blokowe div. Dla każdego takiego elementu div określimy jakiś przykładowy atrybut id, dzięki czemu będziemy mogli, w łatwy sposób, tworzyć odpowiednie reguły CSS określające wygląd danych elementów div.

<body>

  <div id="caly">
    <div id="blok1"></div>
    <div id="blok2"></div>
  </div>

</body>

Do elementu #blok1 dodajemy kolejny element div, w którym umieścimy jakąś przykładową zawartość (np. element p z przykładowym tekstem). Natomiast do elementu #blok2 dodajemy element div, który będzie służył nam za uchwyt (umieścimy w nim przykładową literę - P).

<body>

  <div id="caly">
    <div id="blok1">
      <div id="blok_na_zawartosc">
        <p id="zawartosc">
          to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML
        </p>
      </div>
    </div>

    <div id="blok2">
      <div id="uchwyt">P</div>
    </div>
  </div>

</body>

Rezultat:

Okno Przeglądarki Internetowej

to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML

P

Nasza struktura elementów HTML jest już gotowa (dla polepszenia widoczności elementów #blok1 oraz #blok2 został dodany do nich przykładowy kolor tła).

Czas zająć się wyglądem poszczególnych elementów HTML. Selektory jakie utworzymy w tej części kursu CSS będą selektorami identyfikatora, czyli będą odwoływać się do każdego elementu HTML, który będzie posiadał atrybut id o danej wartości.

Wspomniane selektory wraz z właściwościami CSS (które powinniśmy już znać, bo pojawiły się w poprzednich częściach tego działu) zostały przedstawione w kodzie, który znajduje się poniżej:

#caly {
  width:300px;
  line-height:30px;
  position:fixed;
}

#blok1 {
  float:left;
  width:270px;
}

#blok2 {
  float:left;
  width:30px;
}

#blok_na_zawartosc {
  background-color:#FDD700;
  border:3px solid #000;
  border-left:none;
  border-bottom-right-radius:6px;
}

#zawartosc {
  margin:0;
  padding:5px;
  height:150px;
  overflow:auto;
}

#uchwyt {
  text-align:center;
  font-weight:bold;
  color:#FFF;
  background-color:#000;
  border-radius:0 6px 6px 0;
}

#uchwyt:hover {
  cursor:pointer;
}

Rezultat:

Okno Przeglądarki Internetowej

to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML

P

Jedyne co może być dla nas nowym zapisem, to właściwość position wraz z wartością fixed. Dzięki wspomnianej właściwości position oraz wartości fixed, dany element HTML zawsze pozostaje w tym samym miejscu, w oknie naszej przeglądarki internetowej, nawet gdy będziemy przewijali jej okno za pomocą suwaków.

Czas umieścić element #caly poza oknem przeglądarki internetowej. Posłuży na do tego właściwość left, dzięki której możemy kontrolować położenie elementu posiadającego właściwość position wraz z wartością fixed, absolute lub relative. Jako wartość wspomnianej właściwości podajemy -270px, dzięki czemu cały element zostanie przesunięty o 270 pikseli w lewą stronę, za lewą krawędź okna przeglądarki internetowej, ponieważ nasza wartość, jaką podaliśmy, jest ujemną wartością.

Czemu akurat wybraliśmy wartość -270px?

Bo właśnie taką wartość szerokości ma element przeznaczony na zawartość w naszym układzie elementów HTML, czyli element #blok1 i to właśnie tą część, naszego układu elementów, chcemy ukryć, po przez przesunięcie w lewą stronę.

#caly {
  width:300px;
  line-height:30px;
  position:fixed;
  left:-270px;
}

Rezultat:

Okno Przeglądarki Internetowej

to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML

P

Teraz wystarczy, że utworzymy regułę CSS posiadającą selektor #caly:hover oraz właściwość left:0; a cały układ elementów HTML ponownie ukaże się naszym oczom, gdy najedziemy kursorem myszki na wystającą krawędź elementu #caly, która została zaznaczona, dla lepszej widoczności, czerwonym kolorem.

#caly:hover {
  left:0;
}

Rezultat:

Okno Przeglądarki Internetowej

to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML

P

Układ elementów HTML, który został zaprezentowany powyżej, będzie dobrze wyświetlał się nawet w naszej ukochanej przeglądarce IE7.

Osoby, które pamiętają jedną z poprzednich części tego działu, która została przeznaczona na opis różnych sposobów na naprawę wysokości elementu HTML, który posiadał w sobie inne elementy blokowe wraz z właściwością float:left; lub float:right; pewnie zastanawiają się czemu wysokość elementu #caly, w naszym układzie elementów HTML, nadal jest poprawnie interpretowana przez przeglądarkę internetową.

Wynika to z pewnej zasady. Ponieważ gdy element rodzic posiada w sobie właściwość position wraz z wartością fixed lub absolute, to jego wysokość "nie popsuje się", nawet gdy dodamy do takiego elementu tylko elementy posiadające właściwość float wraz z wartością left lub right.

W jednej z poprzednich części kursu CSS poznaliśmy w jaki sposób działa właściwość transition, a więc dodamy ją do naszego układu elementów HTML, dzięki czemu uzyskamy efekt przejścia, gdy najedziemy kursorem myszki na element #caly.

#caly {
  width:300px;
  line-height:30px;
  position:fixed;
  left:-270px;
  transition:1s;
}

Finalny rezultat:

Okno Przeglądarki Internetowej

Najedź kursorem myszki na obszar, w którym znajduje się litera - P

to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML

P

Kod całego dokumentu HTML został przedstawiony pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly {
        width:300px;
        line-height:30px;
        position:fixed;
        left:-270px;
        transition:1s;
        -webkit-transition:1s; /* dla Google Chrome, Safari, Opera 15+ */
      }

      #caly:hover {
        left:0;
      }

      #blok1 {
        float:left;
        width:270px;
      }

      #blok2 {
        float:left;
        width:30px;
      }

      #blok_na_zawartosc {
        background-color:#FDD700;
        border:3px solid #000;
        border-left:none;
        border-bottom-right-radius:6px;
      }

      #zawartosc {
        margin:0;
        padding:5px;
        height:150px;
        overflow:auto;
      }

      #uchwyt {
        text-align:center;
        font-weight:bold;
        color:#FFF;
        background-color:#000;
        border-radius:0 6px 6px 0;
      }

      #uchwyt:hover {
        cursor:pointer;
      }
    </style>

  </head>

<body>

  <div id="caly">
    <div id="blok1">
      <div id="blok_na_zawartosc">
        <p id="zawartosc">
          to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML
        </p>
      </div>
    </div>

    <div id="blok2">
      <div id="uchwyt">P</div>
    </div>
  </div>

</body>
</html>

W następnej części kursu CSS utworzymy przykładowa animację CSS, która wykona się na różnych elementach HTML.