Featured Post

[pl] 114 rocznica urodzin Antoine de Saint-Exupéry

Dziś obchodzimy niezwykłą rocznicę, bo 114 rocznicę urodzin (29 czerwca 1900) niezwykłego człowieka: Antoine de Saint-Exupéry, świetnego pilota i autora książki “Mały Książę” oraz opowiadań “Nocny lot”, “Ziemia, planeta ludzi”, “Pilot wojenny”...

Read More

Dodatkowy odstęp od górnej krawędzi w HTML5

Posted by Tomasz Kuter | Posted in Web design, Web development | Posted on 23-04-2013

Tags: , , , , , ,

0

Tym razem po polsku… bo nie tylko po angielsku będę tu pisał ;-)

Swoje pierwsze kroki z HTML5 mam już za sobą i chciałbym podzielić się pewnym zaskakującym działaniem nowych tagów.

Otóż mój przykładowy dokument HTML wyglądał tak:

Przykład użycia SubForm z ZF1 w HTML5

Przykład użycia SubForm z ZF1 w HTML5

Kod źródłowy szablonu tej strony wygląda następująco:

Nowe tagi HTML5

To, na co warto zwrócić uwagę to następujący fragment:

W kodzie styli CSS nie widać żadnych przyczyn, z powodu których mógłby powstać odstęp.
Otóż przyczyna tkwi właśnie w dwóch tagach na początku kodu strony: header oraz nav, które wprowadzono razem z HTML5.

Ustawianie:

nie przynosiło żadnych, spodziewanych rezultatów.

Rozwiązanie

Dopiero ustawienie overflow:auto rozwiązało problem na dobre i odstęp od górnej krawędzi strony zniknął na dobre.

Ustawienie opcji overflow na auto powoduje właściwe przyleganie znaczników blokowych, czyszcząc odstępy występujące, gdy zawartość danego znacznika nie mieści się w jego wymiarach.

Przykład można przetestować na poniższej stronie:
http://zf1-subform-example.comyr.com/

Aktualizacja

Po małym teście okazało się, że rozwiązaniem problemu jest również ustawienie wysokości dla znacznika znajdującego się wewnątrz header > nav, czyli ul.
Jego wysokość wyliczona na podstawie wymiarów elementów listy li wynosci 38 pikseli.

Jak widać jeden problem, a rozwiązań kilka…

Referencje:

Write a comment