Featured Post

Polish Constitution of May 3, 1791

Today, on 3rd May 2014 we are celebrating national holiday in Poland, made in commemoration of Polish Constitution of May 3, 1791, called: Polish: Konstytucja Trzeciego Maja, Belarusian: Канстытуцыя трэцяга мая, Lithuanian: Gegužės trečiosios Konstitucija. Poland was placed...

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