Tworzenie prostej strony za pomocą wtyczki Edit Css
Chciałbym wam zaprezentować bardzo przydatną wtyczkę do przeglądarki Mozilla Firefox, EditCss. Jest to zwykły edytor Css lecz wkomponowany w pasku przeglądarki. Dzięki niemu możemy pisać style w czasie rzeczywistym – czyli gdy zaczynamy wpisywać style od razu widzimy rezultaty w oknie z dokumentem.
Wtyczka jest darmowa oraz wygodna. Można ją pobrać z https://addons.mozilla.org/pl/firefox/addon/179.
Tworzymy dokument HTML
Aby zacząć parce z EditCss, należy najpierw stworzyć „fundament” strony, czyli stworzyć pewien układ strony, zrobimy to przy pomocy divów.
Div, inaczej blok – jest to zwykły prostokąt, któremu można nadać margines, kolor wypełnienia, obramowania, tło itd.
Głównym divem, w którym wszystko będzie się znajowało to Container, następnie stronę podzieliłem na pięć części, Top, Cytat, Content-left (treść w lewej kolumnie), Content-right (treść w prawej kolumnie) oraz Footer.
Struktura strony wygląda następująco:
<div id="container">
<div id="top">
<div id="logo"></div>
<div id="slogan"></div>
</div>
<div id="cytat"></div>
<div id="content-left">
<div id="header-left"></div>
<div id="author-left"></div>
<div class="content-text"></div>
</div>
<div id="content-right">
<div id="header-right"></div>
<div id="author-right"></div>
<div class="content-text"></div>
</div>
<div id="footer"></div>
<div id="author"></div>
</div>
Css
Wszystko jest ukazane na filmie oraz w pliku źródłowym. Chciałbym jedynie wypisać kilka solucji na pewne problemy, które się dość często zdarzają przy opisywaniu divów.
- Na przykładzie footera (w filmie można zauważyć ten problem), gdy nasz footer idzie na górę ponad wszystkie inne divy, należy zastosować w nim parametr “clear: both”.
- Jeśli jakiś element który znajduje się w divie wychodzi za jego granicę, stosujemy parametr “overflow: hidden”, który ucina element za granicą diva.
- Aby wyśrodkować stronę należy głównemu blokowi (w naszym przypadku “container”) przypisać “margin: 0 auto”. Są oczywiście inne sposoby na to jednak ten mnie nigdy nie zawiódł.
- Pamiętaj aby nie ustawiać wysokości (height) dla bloków, które będą służyły jako treść, gdyż może być problem gdy zapełnimy diva zbyt dużą ilością tekstu.
Oryginalna wersja artykułu znajduje się na Vivee.info
Autor: Paweł Bukowski
Chciałbym wam zaprezentować bardzo przydatną wtyczkę do przeglądarki Mozilla Firefox, EditCss. Jest to zwykły edytor Css lecz wkomponowany w pasku przeglądarki. Dzięki niemu możemy pisać style w czasie rzeczywistym – czyli gdy zaczynamy wpisywać style od razu widzimy rezultaty w oknie z dokumentem.
Wtyczka jest darmowa oraz wygodna. Można ją pobrać z https://addons.mozilla.org/pl/firefox/addon/179.
Tworzymy dokument HTML
Aby zacząć parce z EditCss, należy najpierw stworzyć „fundament” strony, czyli stworzyć pewien układ strony, zrobimy to przy pomocy divów.
Głównym divem, w którym wszystko będzie się znajowało to Container, następnie stronę podzieliłem na pięć części, Top, Cytat, Content-left (treść w lewej kolumnie), Content-right (treść w prawej kolumnie) oraz Footer.
Struktura strony wygląda następująco:
<div id="container">
<div id="top">
<div id="logo"></div>
<div id="slogan"></div>
</div>
<div id="cytat"></div>
<div id="content-left">
<div id="header-left"></div>
<div id="author-left"></div>
<div class="content-text"></div>
</div>
<div id="content-right">
<div id="header-right"></div>
<div id="author-right"></div>
<div class="content-text"></div>
</div>
<div id="footer"></div>
<div id="author"></div>
</div>
Css
Wszystko jest ukazane na filmie oraz w pliku źródłowym. Chciałbym jedynie wypisać kilka solucji na pewne problemy, które się dość często zdarzają przy opisywaniu divów.
- Na przykładzie footera (w filmie można zauważyć ten problem), gdy nasz footer idzie na górę ponad wszystkie inne divy, należy zastosować w nim parametr “clear: both”.
- Jeśli jakiś element który znajduje się w divie wychodzi za jego granicę, stosujemy parametr “overflow: hidden”, który ucina element za granicą diva.
- Aby wyśrodkować stronę należy głównemu blokowi (w naszym przypadku “container”) przypisać “margin: 0 auto”. Są oczywiście inne sposoby na to jednak ten mnie nigdy nie zawiódł.
- Pamiętaj aby nie ustawiać wysokości (height) dla bloków, które będą służyły jako treść, gdyż może być problem gdy zapełnimy diva zbyt dużą ilością tekstu.
Oryginalna wersja artykułu znajduje się na Vivee.info
Autor: Paweł Bukowski