Featured Post

SubForms example in Zend Framework 1.x

Today I would like to write something about SubForms available in Zend Framework 1.x. Currently we have Zend Framework 2 released, and there is some similar solution called Form Collections with completely new approach. I will take care that new feature from Zend Framework 2 in the close future, but...

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