Goed: aan alle kanten een continuing story dus.
Tja, in mijn eerdere 15-stappenplan was nog niet de nagekomen wens opgenomen om de footer altijd op de bodem van het venster te krijgen, en dat verandert de structuur aanzienlijk.
In je laatste versie van 't moment (
www.knightsandmerchants.net) zit bv. naast de body{min-height:100%;} ook nog een body{height:100%;}, en dan kan de footer mooi in het midden van de pagina komen te staan.
Een nieuwe Make Over!
Maar als ik het goed begrijp, zit je in concrete5 niet gebakken aan de oude indeling met de <div id="to-center">, de <div id="firstwrap"> en de <div id="secondwrap">? Want die zie ik in de nieuwe versie gelukkig niet meer terugkomen.
Dat schept nieuwe kansen!
Want dan kan mijn oude plan opgehaald worden om het zo simpel mogelijk te doen: een linkerkolom, een rechterblok en een footer.
Dan kan het menu ook in de header van het rechterblok komen met een eronder doorlopende header-background, wat eerst niet ging (omdat de header in z'n horizontale opbouw een vaste hoogte moest hebben, en het omhoog-trek partijtje voor het menu nodig was). Dat hoeft dan niet meer, en maakt het veel makkelijker.
Kortom, de volgende opbouw:
HTML:
<body>
<div id="sidebar">
[inhoud sidebar]
</div>
<div id="main"><!-- is hele rechterblok (excl. footer) -->
<div id="header">
<img src="images/kam_logo.gif" />
<div id="menucontainer">
[alles van het menu]
</div>
</div>
<div id="content">
[de hele pagina-inhoud]
</div>
</div><!-- eind #main -->
<div class="clearB"><!-- hoogste van #sidebar en #main wint --></div>
<div id="footer">
[inhoud footer]
</div>
</body>
Als jij kans ziet dit in je systeem te krijgen, zie ik wel kans om de bijpassende css te verhapstukken.
=====
Ik heb geen problemen met IE op dit moment, jij wel?
Nou en of! Met mijn IE7 kan ik niet bij de items van het submenu onder de twee eerste komen, dan floept het het hele submenu weg.
Dat openbaart zich nu pas, omdat er eerder maar 1 item in het submenu stond, en je er nu een heel rijtje aan hebt toegevoegd.
Ook onhandig kan zijn: het links lijnen van de submenu's. Bij een submenu op een klein hoofdmenu-item aan de rechterkant kan het submenu van de pagina gaan aflopen.
Bij elkaar vraagt dat een complete revisie van het menu waar ik je mee had opgezadeld.
Daarbij komt kijken:
- Het puur met css maken van een horizontaal dropdown-menu is één.
Dat is te doen.
- Het maken van een horizontaal dropdown-menu met variabele item-breedtes is twee.
Ook dat valt te doen.
- Het maken van een gecentreerd horizontaal dropdown-menu met variabele item-breedtes is drie.
Dat is al wat lastiger, maar het is nog steeds te doen.
- Het maken van een gecentreerd horizontaal dropdown-menu met variabele item-breedtes, dat zo nodig automatisch een tweede regel aanmaakt (bij veel items of bij vergroting van het letterformaat): dat is vier.
Dat is niet ongecompliceerd, maar het kan wel (mijn 100%-versie; o.k. in FF, Chrome, Opera en Safari). *)
- Maar ... het maken van een gecentreerd horizontaal dropdown-menu met variabele item-breedtes, dat zo nodig automatisch een tweede regel aanmaakt,
en het ook nog doet in alle IE-versies ...
... dat valt in de categorie "misdadige opdrachten". :d
Maar ik geloof dat ik een heel eind gekomen ben. Met een nieuw menu èn de nieuwe structuur, en deze keer in een 1-staps plan:
Resultaten "Make Over 2"
Opmerkingen over Internet Explorer.
- Eerst de andere browsers: Firefox, Chrome, Opera en Safari doen het probleemloos.
- IE6 heb ik laten schieten.
- IE7: doet het bij het huidige menu probleemloos met de lettergroottes (die IE in het menu Beeld "tekengroote" noemt) normaal, groter, kleiner, en extra klein.
- Voor IE7 is daarvoor een "Conditional Comment" nodig met een afwijkende stijlregel. Deze CC komt in de head van alle pagina's met het menu te staan (zie broncode).
- IE7 heeft een probleem bij de lettergrootte extra groot en als er meer items zijn en een tweede regel nodig is: dan komt het submenu niet boven de hoofdmenu-items op de tweede regel.
- Voor de test heb ik een "netrenderer-versie" gemaakt, waarin het eerste menu opengeklapt is (deze: knights-makeover2-netrenderer.htm), die ingevoerd kan worden in de screenshot-machine van Netrenderer (www.ipinfo.info/netrenderer), waaruit de submenu-resultaten voor IE7, IE8 en IE9 opgemaakt kunnen worden.
- In Netrenderer doen IE8 en IE9 het goed (zonder CC).
Overige opmerkingen
- De header-afbeelding heb ik iets verlengd aan de onderkant, zodat er nooit een zwart gat onderaan het menu kan komen (deze gebruikt).
- Tegelijkertijd de gelegenheid te baat genomen om het middengedeelte wat aan te harken: met minder rommelige achtergrond komt het logo beter uit de verf.
- De content-bg afbeelding heb ik een kopje kleiner gemaakt: scheelt weer 6kB aan overbodige zwarte pixels, en een beetje snellere pagina.
Met vriendelijke groet,
CSShunter
__________
*) Voor gecentreerde horizontale dropdowns zijn verschillende methoden in omloop (zie ook deze
Google).
Maar niet geheel toevallig hebben alle demo's daarvan een uiterst kort lijstje met gecentreerde hoofd-items: ze passen allemaal ruimschoots op één regel. Dan kan je tweeregelige problemen niet zien!
En, no way dat me dat gaat lukken zonder jouw hulp.
