Licence Creative Commons

Doctype versus overflow (html, css)

21. 10. 2011

Jak milé. Dělám po letech zase jedny stránky, na požadavek jsem si vyhrál s integrací galerie o jedné stránce (vynikající Phoenix PHP OnePage) - a pak koukám, že mi zmizely posuvníky kontejneru.
Totiž, abych si poradil s neschopností internet exploderu starších verzí co do CSS vlastnosti Background:position: fixed, mám kontejner (který skrze margin: auto zařizuje vycentrování stránky), v něm další kontejner s height:100%, který zařizuje fixní pozici pozadí, a v něm pak vlastní obsah s height: auto.
Problém: pokud použiji výšku v procentech, overflow je ignorováno a div se roztahuje namísto toho, aby zůstal o fixní výšce a zobrazil posuvník. Fuj.
Příčina: procentuálně udávaná výška blokového prvku se vztahuje k hierarchicky nadřazenému prvku. Tedy se div pro fixní pozadí vztahuje k divu vystřeďovacímu, ten k prvku body a ten k prvku html, který by měl mít výšku implicitně fixní od klienta. Zkusil jsem tedy nastavit html,body {height: 100%} - leč marně. V pixelech natvrdo jsem to zadat nemohl, protože stránky musí fungovat v rozsahu rozlišení od 800x600 do 1600x900 a to je moc velký rozdíl.
Pseudo-řešení: smazal jsem definici DOCTYPE. Browser přepnul do quirk módu (halt nejsem z 90. let zvyklý, že je těžké, ba prakticky nemožné, dostat jej mimo quirk mód) a overflow funguje normálně. Potěší.

Ale alespoň jsem při hledání narazil na pěkný návod, kterak zařídit zvýraznění aktuálně aktivní sekce webu:

10. Same navigation code on every page

Most websites highlight the navigation item of the user's location in the website, to help users orientate themselves.
 This is a fundamental requirement for basic usability, but can be a pain as you'll need to tweak the HTML code behind
 the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation
 highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...

First of all, you'll need to assign a class to each navigation item:

 

You'll then need to insert an id into the  tag. The id should be representative of where users are in the site
 and should change when users move to a different site section. When in ‘Home’ it should read , in 
‘About Us’ it should be  and in ‘Contact Us’ .

Next, you create a new CSS rule:

 #home .home, #about .about, #contact .contact
 {
commands for highlighted navigation go here
 } 

This basically creates a rule that only takes effect when class="home" is contained within id="home", and when 
class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user
 is in the appropriate site section, seamlessly creating our highlighted navigation item.




Vzkaz autoru

Na článek můžete reagovat použitím následujícího formuláře.
Váš komentář:

Váš e-mail (očekáváte-li reakci z mé strany):

Níže prosím opište dvě zdeformovaná slova z obrázku do rámečku pod nimi.
Jedná se o ochranu proti zasílání spamu, protože počítačoví roboti ona slova nedokáží rozluštit. Pokud je nedokážete rozluštit ani vy, kliknutím na ikonku reproduktoru se vám přehrají.