Featured Post

Writing DQL statements

Today I would like to focus on something, what Doctrine 1.x users know, but it looks a little bit different – Doctrine Query Language (DQL) statements. In the last tutorial we had had working Album Controller, which was using Doctrine Entity Manager, to get the Album data. Now we will focus on...

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