Link do prezentacji

http://goo.gl/alvTB8

display: block;

<a href="http://www.google.com">Kliknij!</a>
<a href="http://www.google.com">Tu też!</a>

HTML

CSS

a {
    display: block;
    width: 100px;
    height: 200px;
    margin: 10px;
    background: green;
}

Właściwość display:block; pozwala zmienić elementy wewnątrzwierszowe (inline) na blokowe (block). 

display: inline;

<ul>
    <li>Tekst 1</li>
    <li>Tekst 2</li>
    <li>Tekst 3</li>
</ul>

HTML

CSS

li {
    display: inline;
    border-right: 2px solid red;
    margin-right: 10px;
}

Właściwość display:inline; pozwala zmienić elementy blokowe (block) na wewnątrzwierszowe (inline). 

display: inline-block;

<a href="http://www.google.com">Kliknij!</a>
<a href="http://www.google.com">Tu też!</a>

HTML

CSS

a {
    display: inline-block;
    background-color: #D1DEDE;
    height: 100px;
    width: 100px;
    margin: 10px;
}

Właściwość display:inline-block; sprawi, że elementy te zostaną umieszczone na stronie tak jak elementy wewnątrzwierszowe przy tym zachowując cechy charakterystyczne (width, height itp.) dla elementów blokowych.

Ukrywanie elementów

<p>Paragraf 1</p>
<p class="niewidoczny">Paragraf 2</p>
<p>Paragraf 3</p>
<p class="ukryty">Paragraf 4</p>
<p>Paragraf 5</p>

HTML

CSS

p.niewidoczny{
    display: none;
}
p.ukryty{
    visibility: hidden;
}

display: none - Przeglądarka potraktuje element tak, jakby go w ogóle nie było (będzie on nadal obecny w kodzie źródłowym strony).

visibility: hidden - Przeglądarka nie wyświetli elementu, pozostawi jednak dla niego miejsce na stronie.

Elementy pływające

<div>
    <blockquote>Cytat umieszczony przy prawej krawędzi div</blockquote>
    <p>Tekst, który będzie otaczać (po lewej stronie i na dole) 
ten pływający cytat...</p>
</div>

HTML

CSS

blockquote {
    float: right;
    width: 100px;
    margin: 0px 0px 10px 10px;
    padding: 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

Float pozwala przemieścić element jak najdalej na lewo (float: left;) lub prawo (float: right;) zawierającego go elementu. 
https://css-tricks.com/all-about-floats/

Elementy pływające

<div>
    <div class="float">
        <p>Tekst 1 po lewej stronie</p>
    </div>
    <div class="float">
        <p>Tekst 2 w środku</p>
    </div>
    <div class="float">
        <p>Tekst 3 po prawej stronie</p>
    </div>
</div>

HTML

CSS

div {
    border: 1px solid #000;
}
.float {
    float: left;
    width: 100px;
    margin: 10px;
    padding: 10px;
}

Jeżeli wszystkie dzieci danego elementu mają nadany float, to element ten będzie miał zerową wysokość. Zobacz slajd clearfix

Clear

<div id="main">
    <p>Tekst z lewej strony</p>
</div>
<div id="sidebar">
    <p>Tekst z prawej strony</p>
</div>
<div id="footer">
    <p>Tekst na dole</p>
</div>

HTML

CSS

#main {
    float: left;
    width: 60%;
    background-color: #7FFFD4;
}
#sidebar {
    float: right;
    width: 40%;
    background-color: #FF69B4;
}
#footer{
    clear: both;
    background-color: #87CEFA;
}

Elementy, które mają się znaleźć poniżej obiektów pływających muszą mieć nadany clear  (clear: left; clear: right; clear: both;)

Overflow

<p class="hidden">Treść, która nie mieści
się się w rozmiarach elementu,
zostanie ukryta.</p>

<p class="scroll">Przeglądarka wyświetli
suwak wewnątrz elementu, który pozwoli
przewijać zawartość i wyświetlić 
początkowo niewidoczną treść.</p>

<div class="box">
    <img src="http://goo.gl/b4VQ8T" alt="" 
width="300" height="300">
</div>

HTML

CSS

p.hidden {
    overflow: hidden;
    width: 100px;
    height: 100px;
}
p.scroll {
    overflow: scroll;
    width: 100px;
    height: 100px;
}
.box {
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100px;
    height: 100px;
}

overflow: visible - domyślnie. Przeglądarka pokazuje cała zawartość bez względu na rozmiary elementu podane przez width i height. Zawartość, która nie mieści się, wychodzi poza element. 

Clearfix

<div>
    <p class="float">Tekst</p>
    <p class="float">Tekst</p>
    <div class="clearfix"></div>
</div>

HTML

CSS

.clearfix {
  clear: both;
}

1. Dodatkowy pusty element HTML z właściwością "clear" o wartości "both"

2. Wykorzystanie selektora ":after"

<div class="box">
    <p class="float">Tekst</p>
    <p class="float">Tekst</p>
</div>

HTML

CSS

.box:after {
    content: "";
    display: table;
    clear: both;
}

3. Nadanie właściwości "overflow" o wartości "hidden" lub "auto" rodzicowi

<div class="box">
    <p class="float">Tekst</p>
    <p class="float">Tekst</p>
</div>

HTML

CSS

.box {
    overflow: auto;
}

Ćwiczenie

Dodaj odpowiednia właściwość (float, clear) do css by otrzymać taki układ:

http://codepen.io/anon/pen/wadZzM

http://codepen.io/anon/pen/EjmJWR

position: relative

<div>
    <p>Element wyświetlonym normalnie.</p>
    <p class="relative">Element wyświetlonym w pozycji relatywnej, 
odsunięty od góry o 20px i lewej strony o 40px.</p>
    <p>Element wyświetlonym normalnie.</p>
</div>

HTML

CSS

p.relative {
    position: relative;
    top: 20px;
    left: 40px;
}

position: relative - przesuwa elementy względem miejsca, w którym zostały 
umieszczone domyślnie. Przesuwamy za pomocą właściwości top, left, bottom, right określając kierunek i odległość (minusowe wartości przysuwają, dodatnie wartości odsuwają). 

position: fixed

<ul id="nav">
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link2.html">Link 2</a></li>
    <li><a href="link3.html">Link 3</a></li>
</ul>

HTML

CSS

#nav {
    position: fixed;
    top: 0;
    left: 0;
}

position: fixed - usuwa element z normalnego układu strony, element przestaje mieć wpływ na położenie innych elementów strony. Położenie elementu jest określone względem okna przeglądarki przy pomocy 
właściwości: top, left, bottom, right. Kiedy użytkownik przewija stronę, element ten 
pozostaje w tym samym miejscu. 

position: absolute

<div>
    <p>Element wyświetlonym normalnie.</p>
    <p class="absolute">Element wyświetlony 
w innym miejscu.</p>
    <p>Element wyświetlonym normalnie.</p>
</div>

HTML

CSS

p.absolute {
    position: absolute;
    left: 100px;
    bottom: 0;
}

position: absolute - usuwa element z normalnego układu strony, element przestaje 
mieć wpływ na położenie otaczajacych go elementów. 
Położenie elementu określamy za pomocą właściwości top, left, bottom, right. Pozycja elementu będzie liczona względem pierwszego z przodków z nadaną właściwością 
positon:relative; lub positon:absolute, jeśli nie ma takiego, względem elementu html.

Elementy nachodzące na siebie 

<ul>
    <li class="pierwszy">Tekst wyżej</li>
    <li class="drugi">Tekst niżej</li>
</ul>

HTML

CSS

.pierwszy {
  position: relative;
  z-index: 2;
}

.drugi {
  position: relative;
  left: 10px;
  bottom: 20px;
  z-index: 1;
}

Efekt jest widoczny tylko dla elementów, które posiadają właściwości position różną od static (domyśla dla elementów html).
Za pomocą z-index możemy kontrolować, w jakiej kolejności przesłaniają się nawzajem elementy. Im wyższa liczba, tym wyżej jest umieszczony element.

Ćwiczenie

Dodaj odpowiednia właściwość (position i z-index) do css by otrzymać taki układ:

http://codepen.io/anon/pen/JdNVoZ





 

http://codepen.io/anon/pen/ZGKPgK

Ćwiczenie

Stwórz dwukolumnowy layout strony, dodaj odpowiednie właściwości css do tytułu, tak by był on zawsze widoczny na samej górze okna przeglądarki 

http://codepen.io/anon/pen/KpqqGp

Dziękuję!

</codecarrots>