CSS website ziet er soms vreemd uit

Status
Niet open voor verdere reacties.
Bedankt Lauraahh,

Dat ga ik zeker uitproberen.
 
@Ed en Lauraahh:

Hoi-hoi,
Ik ben er altijd vóór om IE een hak te zetten. :D
Maar m'n oude gereedschapskist met IE-hacks staat al jaren stoffig te worden op zolder. O nostalgie van IE5 en IE5.5!
Sindsdien gebruik ik Conditional Comments (CC's). Waarom?


  • Css-hacks kunnen van de ene op de andere dag niet meer werken als IE een nieuwe versie uitbrengt.
  • Als je dan naderhand CC's wilt gaan gebruiken om het in orde te maken, moet je de hele css binnenstebuiten keren om de hacks er weer uit te halen.
  • CC's zijn bestand tegen de tijd. Welke IE-versie er ook gaat verschijnen, ze doen het altijd.
  • Een via een CC opgeroepen speciaal stylesheet voor een bepaalde IE-versie kan je laten vallen, als die versie niet meer actueel is.
  • CC's vervuilen de css niet.
  • Met CC's kan je precies aangeven welke styles je op welke IE-versie wilt loslaten.

Met de backslash-9 hack in de css zelf:
Code: 
#elementId {
    margin: 10px \9; /* voor IE bedoeld */
    margin: 20px;    /* andere browsers */
}
kan je niet regelen welke IE-versies die 10px moeten gebruiken.

En in het overzicht Browser CSS hacks van Paul Irish (in 2009: "I don't use CSS hacks anymore. Instead I use IE's Conditional Comments"; zie z'n "about" voor zijn staat van verdienste) wordt gemeld bij de backslash-9 hack:
/* IE6, IE7, IE8, but also IE9 in some cases :( */
Klik om te vergroten...
Daar begint het gedonder dus al...

Conclusie:
Ik zou nooit voor IE-specifieke css-hacks kiezen als het ook met een CC kan; en dat kan altijd.

En verder is voorkomen natuurlijk beter dan genezen! :)
Vaak valt er met wat gescharrel in de css heel wat recht te breien voor de Internet Explorers (zonder de rest geweld aan te doen en met behoud van valid css): zodat er helemaal geen uitzonderingen voor IE gemaakt hoeven te worden. En dat is het doel waarnaar wij streven!

Met vriendelijke groet,
CSShunter
____________
PS: Al in 2005 riep Microsoft zelf op om geen css-hacks meer te gebruiken.
 
Laatst bewerkt:
ik ben het niet helemaal eens met de vorige post.

Inderdaad is het beter als je een css hebt waar geen uitzonderingen in worden gebruikt.
op me werk bleek het echter de enige mogelijkheid , zonder dat er veel extra tijd in ging zitten.

de \9 is niet voor een versie van IE, maar pakt de IE browser 6 (uit me hoofd gezegd) en hoger mee.


Het zou beter zijn als microsoft IE recht trekt met de andere browsers.
maarja "wij van microsoft raden microsoft aan.
 
Ja, voorlopig zal IE nog wel eens een tik op de vingers nodig hebben. :)

de \9 is niet voor een versie van IE, maar pakt de IE browser 6 (uit me hoofd gezegd) en hoger mee.
Klik om te vergroten...
Dat is precies mijn tegenargument:
IE wordt langzamerhand steeds beter in het volgen van de css-standaarden.
Dat heeft twee consequenties (die je alle twee niet van tevoren kunt weten):
  • Als de hack wel door een nieuwere IE gaat worden opgepakt: dan kan de hack juist de opmaak van die nieuwere IE-versie om zeep helpen (omdat de nieuwere versie wel de standaarden volgt).
  • Als de hack niet door een nieuwere IE gaat worden opgepakt (omdat de hack zelf niet volgens de standaarden was): dan kan het toch nodig zijn om tekortschieten van de nieuwere versie te corrigeren, maar dat lukt dan niet met de hack.
Met Conditional Comments heb je daar geen last van.
  • Voorbeeld: op dit moment hebben IE7, IE8 en IE9 allemaal een verschillende css nodig om met de opacity-eigenschap om te kunnen gaan. IE9 volgt de standaard, IE7 en IE8 niet, maar elk verschillend.

En zou het echt zoveel sneller zijn om de \9 hack toe te passen dan om een CC te maken?
Dan kan je 'm misschien tijdens de ontwikkelfase toepassen (en dan goed testen in alle IE-versies die in omloop zijn).
Maar dan wel bij de definitieve css-versie alle \9 hacks verzamelen en in een CC zetten, om geen risico te lopen voor de toekomst.
En dan is het denk ik net zo snel om die CC's meteen te maken.
In de <head> van je testdocument bv.:
HTML: 
<!--[if lt IE 9]>
<style type="text/css">
    /* de afwijkende styles voor IE's onder IE9	*/
</style>
<![endif]-->
... en dan stop je er telkens iets in als je wat tegenkomt.

Zo heeft ieder zo zijn/haar methodes; ik doe de CC's. :)

O ja, bijkomend maar niet onbelangrijk argument tegen css-hacks: als een hack invalid css oplevert, kan je nooit het Waarmerk Drempelvrij verwerven voor de site.
  • Voor overheidswebsites zijn die hacks dan sowieso uit den boze, volgens het Normatief Document Webrichtlijnen van Drempelvrij: "R-pd.2.6: Gebruik CSS Level-2.1 volgens de W3C specificatie voor het vormgeven van overheidswebsites." - Invalid CSS2.1 kan dan niet door de beugel.

En zo zeilen we aardig af van de website van Ed. ;)
Maar daar kom ik nog op terug.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi CSShunter,

Zo dat was eventjes een portie theorie over css en cc. Het is toch fijn dat anderen hier ook kennis van
kunnen nemen, want ik denk dat heel veel mensen tegen dezelfde problemen oplopen met IE*
Maar goed, er zijn nog veel IE-browsers in omloop en die willen onze websites ook graag bekijken.
 
Hoi Ed,
Even tussendoor om de moed er in te houden: een betere html-structuur voor de site (met bijbehorende css) doet wonderen.
Het gaat helemaal goed komen met de Internet Explorers (IE7, IE8, IE9): en dan zonder dat er CC's of css-hacks nodig zijn! :)

Het principe draait al, maar ik ben nog bezig met wat details.
Ik kijk tegelijk nog even naar het inbouwen van een fatsoenlijk css-uitklapmenu, want dat javascript-gedoe is maar niks.

Wordt vervolgd,
CSShunter
 
Hoi CSShunter,

Ik heb me ook nog even bezig gehouden met een uitklap menu zie: www.aspartaam.nl/menu/menu-066-dl.html
Ik weet niet of dit wel goed is, maar het is niet met CSS opgebouwd.
Het probleem is dat ik het niet in alle artikelen en files wil zetten en zou het eigenlijk aan willen roepen
aan het begin van het artikel. De stylesheet kan ik dan bij de andere stylesheets plaatsen.
Misschien is het te gebruiken.
 
Hoi Ed!
Klusje klaar: ik heb een cross-browser werkend model, dat het prettig doet in resoluties vanaf 800*600px.

Eerst maar het resultaat.
  • Dit is 'm geworden: aspartaam-index-nw.php. :)

  • Internet Explorer 7 akkoord (zelf getest), evenals Firefox, Chrome, Opera en Safari.
  • Internet Explorer 8, 9 en 10 volgens Netrenderer.com ook akkoord.

===========
Wat er nog aan zit te komen:
  • De toelichting wat ik gedaan heb, hoe, en waarom.
  • En niet minder: hoe je het kunt toepassen!

===========
Alvast een paar tipjes van de sluier:
  • Alles is modulair opgebouwd, d.w.z. alle onderdelen zijn moeiteloos wel of niet te gebruiken op andere pagina's (bv: menu wel, advertenties niet).
  • De kop springt niet meer heen en weer tijdens het laden van de pagina.
  • Het er in opgenomen uitklap-menu volgt dezelfde principes als wat jij gemaakt hebt. :)
    (dat is trouwens wel een met css opgebouwd menu, evenals het mijne)
  • Pagina wordt nu meer als eenheid gepresenteerd (maar alles is in de opmaak is makkelijk aan te passen).
  • Ik heb de images wat opgepimpt.
  • Overbodig geworden: de 5 externe scripts met de bende voor het javascript-menu; en ook het interne script om pagina's in een nieuw tabblad te openen (werkte niet, kan beter anders).
  • Zoveel mogelijk vereenvoudigd in de html-code (bv. <br>'s verwijderd en vervangen door css), plus uniforme structuur voor alle onderwerpen op de homepage: makkelijk voor het onderhoud en voor bijplaatsen nieuwe berichten.
  • De "lees verder" images zitten in de css, dan hoeven die niet steeds opnieuw in de html gezet te worden.
  • Voor de twee video's iets nieuws verzonnen (kon het niet laten ;) ).
  • De update-datum is naar onderaan verplaatst, en geautomatiseerd (hoeft dan niet steeds ingevuld te worden, gemak dient de mens).
  • Bij alle links is er "feed-back" als de bezoeker er overheen gaat met de muis; ook bij de images (alweer: css-realisatie).
  • Ook de Google-robot en pure tekst-browsers kunnen er goed mee overweg (die zien dit resultaat).
  • Het model is dus zonder meer ook bruikbaar voor alle andere pagina's (eenheid van vormgeving/herkenbaarheid), maar voor de andere pagina's zal her en der aanvullende opmaak (css) nodig zijn. Die kan dan gewoon toegevoegd worden zonder te schaden wat er nu is.

Achter de schermen is heel wat veranderd. Toch is het nieuwe stylesheet maar 2.5kB (was: 8.8kB; maar dat zitten natuurlijk ook dingen voor andere pagina's in).

Als je alles zo in ene ziet is het nogal gecompliceerd en lastig te volgen, merk ik achteraf. :rolleyes:
Daarom zal ik bij de toelichting de opzet stapje voor stapje verklaren. :)

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi CSShunter,

Wat ziet dat er G E W E L D I G :thumb::thumb: uit, (sorry voor de hoofdletters) maar ander kan ik niet
uitdrukken hoe geweldig ik het vind.
Wat een werk zal je er aan gehad hebben!
Ik zal dat het nu een .php site geworden is maar dat kon ik niet omdat ik niet met php wist om te gaan.

Ik had het uitklapmenu samengesteld omdat ik vond dat ik zelf ook nog iets moest doen, wel in CSS,
maar ik vind dit menu met de spaties ertussen veel mooier dan wat ik gemaakt had.
Ik zie inderdaad dat de images zijn opgepimpt. Trouwens de hele website is opgepimpt.

De externe scripts waren ondingen, maar ik kon het zelf niet beter doen, zoals het er nu uitziet is
het mooi.

Sorry, advertenties staan wel op de site maar ik had "Noscript" nog niet aan staan voor Bliksekater.

Ik ben blij dat ik heb durven vragen of je eens naar mijn site wilde kijken.

De reclames in dit model zullen nog niet werken maar dat lijkt me logisch. De reclames werken dus
wel, maar ik had "noscript" nog instaan voor "bliksekater"

Er lijkt me inderdaad achter de schermen heel wat verandert, maar dat is gelijk ook logisch omdat
de opbouw van de website in de loop der jaren door mij zo is samengesteld.
 
Laatst bewerkt:
Hoi Ed,
Ha, blij toe! :)
Inderdaad, de pagina droeg de sporen van gestage groei: er is steeds iets bijgekomen en alle toegevoegde dingen hebben zich opgestapeld zonder aan de originele opzet iets te veranderen. Met zoals de site nu is uitgebouwd, kan de opzet beter anders aangepakt worden.

Wat je hiervoor aan php nodig hebt is supersimpel, maar dat komt nog.

De reclames in dit model zullen nog niet werken maar dat lijkt me logisch.
Klik om te vergroten...
Die snap ik niet, bij mij doen de Google-advertenties het gewoon. *) Het duurt alleen een paar tellen voor ze binnen zijn. Dat zou er aan kunnen liggen dat mijn server niet de de originele "rechthebbende" is op het reclame-account.
  • Mocht het later blijken op jouw server ook nog zo traag te gaan, dan heb ik nog wel een trucje in petto om de pagina-snelheid te verbeteren.

Wordt vervolgd!
CSShunter
___________
*) En elders ook, bv. bij de test met Netrenderer.com. Die werken met een server in Duitsland, en het leuke is dat Google daar gedeeltelijk Duitse reclame neerzet:

google-de.png

[edit]Ah, nu zie ik je Edit! :) [/edit]
 
Laatst bewerkt:
De reclames werken dus wel, maar ik had "noscript" nog instaan
Klik om te vergroten...
Zo zie je maar weer, de gebruikersvriendelijkheid kan altijd nog opgeschroefd worden:



__________
PS: Dit was het enige, voor de paar andere javascript-dingetjes was alles al afgedekt.

NB: Merk op dat de automatische update-datum voor de inhoud van de pagina ongewijzigd is gebleven: de wijzigingen zaten in de "toebehoren" (in de ingelaste fragmenten voor de advertenties, en in het stylesheet).
 
Laatst bewerkt:
Hoi CSShunter.

Hoe meer ik de nieuwe site en de css bekijk des te meer bewondering ik krijg voor de korte tijd waarin
je dit allemaal voor elkaar hebt gekregen.
Geheel nieuwe images, een geheel nieuwe stylesheet, de snelheid waarmee de site wordt geladen. :)

Ik begrijp niet wat je met het onderstaande bedoeld
NB: Merk op dat de automatische update-datum voor de inhoud van de pagina ongewijzigd is gebleven: de wijzigingen zaten in de "toebehoren" (in de ingelaste fragmenten voor de advertenties, en in het stylesheet).
Klik om te vergroten...

Is het menu zoals het nu is ook op alle andere pagina's toe te passen door een link naar dat menu en de css voor dat menu?
Of moet dan het hele menu op die pagina geplaatst worden!

Bijvoorbeeld
Code: 
<link rel="stylesheet" href="styles/menu.css" type="text/css">
<a href="http://www.aspartaam.nl/menu.html">

Ik dacht trouwens dat ik laat naar bed ging! :d
 
Hoi Ed,
... korte tijd waarin je dit allemaal voor elkaar hebt gekregen ...
Klik om te vergroten...
Ja, maar dat is wel een beetje relatief! De meeste tijd zit in voorgaande jaren, waarin ik langzamerhand de smaak van css goed te pakken kreeg. Nu kan ik regelmatig "citeren uit eigen werk": code plukken uit dingen die ik eerder als eens heb uitgedokterd.
  • Voorbeeld: het menu. Dat heb ik nu niet vanaf niks opgezet, maar overgenomen van dit menu voor de hoofdlijnen. Zo hoefde ik me niet te bekommeren over bv. Internet Explorers die het niet zouden doen, en overgaan tot het op smaak brengen van makkelijker opmaak-zaken als de kleuren e.d.

=======
Automatische update-datum
Zit als volgt in elkaar. Met php wordt datum en tijd van het uploaden van de hoofdpagina (met de inhoud) geregistreerd en in de pagina gezet. Maar in de hoofdpagina zelf zitten niet de advertentieblokken. Die worden (op de server, kan je in de broncode niet zien) geïmporteerd uit andere bestandjes. Als je die import-bestanden gaat wijzigen, verandert niet de datum van de hoofdpagina, want de links naar de met php te importeren onderdelen zijn nog hetzelfde.
  • In dit geval zaten de <noscript>-regeltjes in de fragmenten van de advertentieblokken, dus de hoofdpagina merkte er niets van.
Hetzelfde geldt voor het (externe) stylesheet. Als je de achtergrondkleur via het css-bestand pimpelpaars zou maken, blijft de pagina-datum zelf onveranderd.


  • Terzijde: ook met javascript kan de aanmaakdatum van een bestand opgevraagd worden. Dat gaat goed met gewone html-pagina's. Maar niet met php-pagina's! Want die worden pas als totaal in elkaar gelijmd op het moment dat de bezoeker de pagina opvraagt. Javascript (dwz. een script dat op de pc van de bezoeker werkt) kan alleen dat totaal zien, en niet de onderdelen ervan. Dus een php-pagina datum via javascript geeft altijd een zogenaamde Laatste update: "vandaag".

=======
Is het menu zoals het nu is ook op alle andere pagina's toe te passen?
Klik om te vergroten...
Hoera, ja! :d
Het hoeft niet op elke pagina opnieuw in de html-code ingeplakt te worden (of op elke pagina gewijzigd te worden, als er iets in het menu moet veranderen!).

Je code voor het aanroepen was bijna goed.
Alleen gaat het niet met een gewone link, maar met een php-commando (ook 1 regeltje) voor het "includen" van bv. het menu-fragment.
Maar daar kom ik nog op terug, want voordat het menu uitgeknipt kan worden uit de pagina, moet het er wel op de goede manier inzitten.
En zover ben ik nog niet met de uitleg. ;)

Met vriendelijke groet,
CSShunter
 
Hoi Ed,
Hier komt het vervolgverhaal met de toelichting.

1. Om te beginnen een mooie blanco pagina maken.

Html en css-code van deze stap: aspartaam-bouw-01.htm

We laten niets aan het toeval over:
  • Als Doctype de versie html4.01-Strict genomen, sinds 1999 aanbevolen door w3c. Later kan blijken dat dit op een paar puntyen niet haalbaar is, maar zo komen we niet in de verleiding om oude en afgekeurde tags en html-eigenschappen te gaan gebruiken (en kunnen we onze html-editor bewaken). De html-validator slaat wel alarm als het eens mis mocht gaan.
  • In de html-styles wordt tegengas gegeven aan De Springende Pagina.
  • Als achtergrond is gekozen voor een herhaling van de vieze Aspartaam-kleur uit het logo, want die kleur komt anders nergens terug. Om wat minder plat te zijn, zit het logo er in via een herhalende kleine versie.
  • Nu komt de pagina mooi naar voren; de paginakleur was prima: iets getint en aan de warme kant. Beter leesbaar dan knal zwart wit! En de frisheid van de pagina (met uitstraling naar de inhoud!) staat in schril contrast met de Aspartaam-kleur.
  • Bovenin en onderaan wat background-ruimte vrij gehouden voor het pagina-effect.
  • De pagina-background heeft een fixed positie gekregen, zodat deze stil blijft staan als de pagina omhoog scrollt: maakt het beeld rustiger bij scrollen.
  • De pagina-breedte op 970px gezet, dan beeldvullend op een resolutie van 1024*768px. Met name voor grotere beeldschermen: pagina gecentreerd met de margin-left en margin-right op auto.
  • Daar kan alvast geen browser meer aan ontsnappen, zelfs Internet Explorer niet!
    (Zolang we niet onvoorzichtig omgaan met een {position: absolute;} voor het inwendige van de pagina.)
  • Pagina krijgt een minimale hoogte van het beeldscherm (100%), dan blijft het beeld gelijk als er een pagina is met weinig inhoud.
  • Het algemeen te gebruiken lettertype (Arial) wordt aan de <body> vastgeknoopt, dan hoeven alleen de eventuele uitzonderingen daarop gemeld te worden.
  • Ook in de <body>-styles wordt de lettergrootte en de regelhoogte genormaliseerd voor alle browsers.
  • Alle koppen h1, h2, enz. en de alinea-tag p worden ook genormaliseerd met een margin en padding van 0. Later kunnen die naar behoefte per <div> aangepast worden.
  • Images die in een link zitten, krijgen een verbod op een automatische rand (die voegt IE er anders aan toe).
  • Ook wordt alvast een stijl-class "hiddenText" aangemaakt, die algemeen inzetbaar is.
  • Gebruikt image voor de background (zich herhalend): aspartaam-bg.png van 90*126px en 3kB.

Toch al heel wat voor zo'n lege pagina! :D

Wordt vervolgd!
CSShunter
_______________
PS:
Eigenlijk volg ik dezelfde bouwmethode als die gebruikt is in het Reisverslag uit Cascade-land, waarin een andere site vanaf de grond wordt opgebouwd.
In dit reisverslag staat soms uitgebreidere toelichting: je kunt het ernaast lezen.
Sommige dingen daarin zijn anders/ingewikkelder dan hier, dat kan je gewoon overslaan. :)
 
Laatst bewerkt:
Hoi CSShunter,

Daar ben ik even zoet mee om het Reisverslag uit Cascade-land te bestuderen. Ik neem het het weekend mee
naar de camping, zodat ik wat te doen heb.

Er wordt inderdaad niets aan het toeval overgelaten gezien de hoeveelheid informatie uit je laatste bericht.
 
Hoi Ed,

2. De kop er op

Html en css-code van deze stap: aspartaam-bouw-02.htm

In de horizontale strook <div id="header"> zitten de volgende dingen:

Logo
De originele afbeelding had niet 100% zuiver de achtergrondkleur van de pagina, en was nogal vlekkerig. De vlekkerigheid is veroorzaakt door de methode van opslaan van de afbeelding: als jpg met een behoorlijke compressie. Dat maakt wel kleine bestanden, maar als het om scherp weer te geven objecten gaat (zoals letters), dan komen er behalve vlekken bij de randen ook rare blokkerige dingen in de kleurovergangen middenin.
Dat kan je goed zien als je de afbeelding twee keer zo groot maakt:

aspartaam-logo-oud-nw.png

Ook had de afbeelding in het echt een formaat van 636*133px, maar werd dit in de browser geschaald naar 550*90px. Dat geeft ook altijd een wat minder mooi resultaat, en de bastandsgrootte wordt groter dan nodig is.
Vandaar: het logo tot ware grootte teruggebracht, wat verscherpt, ontvlekt, spiegelschaduw onderaan iets meer laten verdwijnen en opgeslagen als png-bestand met 256 kleuren. Dat is genoeg, en geeft een klein bestand. De andere optie (16 miljoen kleuren) zou een groter bestand opleveren en is niet nodig.
Verder leek het me nuttig om .nl aan het logo toe te voegen, zodat het webadres goed ingebrand wordt in de ogen van de bezoekers. ;)
  • Hierdoor staat het beeldbepalende woord "Aspartaam" niet meer gecentreerd op de pagina. Daaom aan de linkerkant van de afbeelding wat extra breedte aangebracht (maar niet zo breed als de ".nl" breedte): door optisch bedrog lijkt het nu alsof zowel "Aspartaam" als "Aspartaam.nl" gecentreerd staat.
Tenslotte het logo er in gezet als background-afbeelding i.p.v. als voorgrond-afbeelding: dat spaart weer uit op de html-code voor elke pagina.

Verborgen tekst
Zou je het menu er nu zonder meer in plaatsen, dan worden mensen die met een pure tekstbrowser werken (of met een voorleesbrowser!) meteen geconfronteerd met een ellenlang menu met submenu's. En dat op elke pagina opnieuw!
Daarom zijn wat op scherm verborgen teksten ingevoegd. Om te beginnen een <h1> met herhaling van de website-titel. Dan een link om over het menu heen te springen naar de inhoud, en dan een kopje "Menu" voordat het menu echt begint.

Menu
Als gezegd: grotendeels afgetapt van het Reisverslag, pagina 29. Op de voorafgaande pagina's van het Reisverslag staat de toelichting bij de bouw van dat menu. - Ook in de css van de huidige pagina staat wat toelichting bij de onderdelen van het menu.
Tenslotte het menu onder het logo geplaatst i.p.v. erboven: dat is bij de meeste websites zo, en handiger in het gebruik.
  • NB: de submenu's zijn nog niet volledig ingevuld met de vindplaatsen van de gelinkte pagina's. Maar dat is van later zorg, en hoeft nu nog niet. Hoofdzaak is dat het menu in principe compleet is, en dat het werkt in alle browsers.
O ja, ook het woord "Begin" in het menu is vervangen door "Home". In de afgelopen 10 jaar zijn de Nederlandse surfers er wel aan gewend geraakt dat je met "Home" knop naar het begin van een site gaat (en naar die knop zoekt men ook als men daarnaartoe wil).

Controle
De html-validator vindt het nog valid html4.01-Strict. :)

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Hoi Ed,
Hier is weer een brokje.

3. De strook met advertenties bovenin



De advertenties moeten zo weinig mogelijk opvallen, maar wel duidelijk te onderscheiden zijn van de website zelf. Daarom voor de advertenties een afwijkende background-kleur gekozen. De kleur van de links in de advertenties ook aangepast: minder knallend door een verwante kleur t.o.v. de achtergrondkleur te nemen.
Omdat in de advertenties soms ook hele kleurige banners kunnen zitten, die juist veel donkerder van kleur zijn dan de paginakleur, is achter de advertentiestrook een grijze baan gezet die ook wat donkerder is. Dan vallen die banners minder op.
  • De grijze baan heeft een minimum-hoogte gekregen: dan staat deze er in elk geval als de advertenties er wat langer over doen om binnen te komen > de pagina kan niet in de hoogte gaan verspringen door een vertraagde invulling met de advertentie-inhoud.

Er zitten twee types advertenties in: een smal stookje bovenin, en een hogere balk daaronder. In het javascript zitten er voor elk eerst de instellingen in, en daarna wordt het Google-script aangeroepen om de advertenties daadwerkelijk op te halen.
  • NB: in het origineel zat een derde keer een verwijzing naar het Google-script; dat zorgde voor de (spook-)ruimte waar IE niet tegen kon, zodat IE de tweede serie veel lager plaatste dan de bedoeling was. Door die overbodige scriptaanroep weg te halen, loopt nu ook IE in de pas.

Controle
Nog steeds valid html-strict. :)

Wordt vervolgd!
CSShunter
 
O, helemaal vergeten te melden.

3. De strook met advertenties bovenin. Vervolg: lagen stapelen!


  • Dit zat al verwerkt in de pagina van de vorige stap.

Volgens de stapel-principes van een html-pagina is steeds het laatst geplaatste element het bovenste, en overlapt eventueel de eerder in de html-code staande elementen als ze op dezelfde plek staan.

Dat speelt nu bij de submenu's en de advertenties!
De advertentiestrook staat later in de html-volgorde, en komt dus boven het submenu te liggen.

Maar daar kan iets aan gedaan worden, door in te grijpen in de volgorde van stapeling. Dat kan met de css-eigenschap "z-index". Behalve de x-as van het scherm (horizontaal) en de y-as (verticaal) is er dus ook een denkbeeldige z-as, die vanaf de achtergrond van de pagina steeds dichterbij de kijker komt.
Een element met een hoger z-index getal staat dichterbij (overlapt elementen met een lagere z-index).
  • Dat is niet altijd zo, want de stapeling kan bij drijvende elementen of absoluut gepositioneerde elementen afwijken, en dan kan het erg ingewikkeld worden.
  • Voor wie wil hersenkraken: hier is een speciale bijlage van de css-specificatie over, de Appendix E. Elaborate description of Stacking Contexts.
  • Heb ik eens gelezen, en voor kennisgeving en zoete koek aangenomen! ;)

Daar hebben we hier gelukkig geen last van: de elementen van de advertentiestrook krijgen een {z-index: 1;} en de menu-items en de submenu's een {z-index: 2;}.
Zo komen de submenu's toch over de advertenties heen.

Wordt vervolgd!
CSShunter
 
Ik heb in het weekend het hele verhaal doorgenomen van het reisverslag. Het is inderdaad
een geweldige uitleg hoe een pagina zou moeten worden samengesteld, goed lesmateriaal,
zonder ook maar iets aan het toeval over te laten.

Het eerste wat ik deed toen ik thuiskwam was naar het helpmij_forum gaan en de tips en
trucs van je uitleg bekijken.

Ik was al blij dat ik een aardige logo had gemaakt van Aspartaam. Maar er blijkt dan nog
heel veel niet aan te deugen en ook verbeterd te kunnen worden. Ik had de jpg wel verkleind,
maar kende toen nog niet het begrip .png.
Met welk programma zijn dat soort veranderingen mogelijk? Want ik heb nog wel een paar
logo's te gaan in de andere menu's.

Dat de aanpassing van de Google ads ook in de CSS kon worden uitgevoerd is een eye-opener.

En nog steeds valid html-strict is ook prachtig.

De bijlage over de CSS stack is ook interessant op deze manier vervuilt het ook niet de html.

Als ik het goed begrijp blijft er van de oorspronkelijke html-pagina door de php aanroepen maar
een fractie over en dat het dan snel ingeladen wordt kan ik begrijpen.

PS. voor de verkleining van de logo's is w.s. Gimp of Irfanview te gebruiken denk ik.
 
Laatst bewerkt:
Hoi CSShunter,

Hoewel ik lekker aan het stoeien ben met de nieuwe opzet, kom ik er niet achter hoe ik de
includes in het geheel moet invoegen. Een eerste testje liep op niets uit.
zie www.aspartaam.nl/test/aspartaam-nw.html
Ik zou in de footer nog zoiets willen zetten als: "Ontwerp CSShunter"
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan