Hoi damnsharp,
Ik heb wat te lezen voor je.
Koppen h1, h2, enz.
De koppenstructuur hoort hiërarchisch in elkaar te zitten: <h2>'s direct binnen de <h1>, <h3>'s binnen de <h2>'s, enz.
Als het voor het schermbeeld nodig is een bepaalde kop groter of afwijkend van de andere te maken, dan kan je dat doen door in de html de kopstructuur te behouden en in de css de opmaak aan te passen: koppen zin niet voor de vormgeving bedoeld!
Verder is het aan te raden de koppen te voorzien van belangrijke trefwoorden voor Google, want Google geeft prioriteit aan woorden die in de koppen worden aangetroffen.
Als je de
Document Heading Structure van nr. #9 hierboven bekijkt zie je dat er behalve de "Consultancy" in een <h2> in geen enkele kop een trefwoord staat waarop iemand op Google zou zoeken om bij deze site uit te komen.
- Voor de <h1>: het beste is herhaling van de <title> van de pagina, met voor de homepage minstens de naam van het bedrijf + omschrijving soort bedrijf in 2 woorden (als dat niet uit de bedrijfsnaam blijkt) + de vestigingsplaats.
- Vooral de vestigingsplaats wordt vaak vergeten te vermelden, zodat de bezoeker niet meteen weet of het bedrijf bij hem/haar in de buurt ligt (wat belangrijk kan zijn voor bv. een kijkje in de winkel, voor een oriënterend gesprek, enz.; en niet te vergeten: de voorrijkosten als iets aan huis moet gebeuren!). Werkt een bedrijf in een (veel) groter gebied dan alleen de vestigingsplaats, bv. "en omstreken" of "de hele provincie ..." of "heel Nederland" enz., dan kan dat meteen op de homepage verteld worden, zodat men weet waar men aan toe is, en wel/niet verder moet gaan zoeken.
- Om de homepage een kop "Home" mee te geven is wellicht handig voor de bezoekers die het logo enz. al op het scherm voor zich zien; maar het is niet bepaald een trefwoord waarop men gaat zoeken. Daar zou je bv van kunnen maken: "<h2><span>Bedrijfsnaam: </span>home</h2>", en dan de bedrijfsnaam als hidden text erbij zetten (niet met {display: none}, maar met absolute positie en een {left: -9999px}; want sommige (tekst)browsers en waarschijnlijk ook de Google-bot beschouwen {display: none} als niet bestaand, en laten er nooit iets van zien).
=======
Quirksmode !
Het begrip "quirksmode" (NL: "fratsentoestand") wordt hier op het forum op twee manieren gebruikt:
- Als aanduiding voor wat Internet Explorer doet als er: (a) iets vóór de <!Doctype...>-regel staat (een commentaar-regeltje of iets anders), of (b) als er géén <!Doctype...> is, of (c) als de <!Doctype...> regel (of bij xhtml de bijbehorende <hrml xmlns="...">) een fout bevat. Dan gaat IE fratsen vertonen: dwz. in plaats van het standaard css-opmaakmodel wordt teruggeschakeld naar het (IE-only) boxmodel van IE5, waarin breedtes, margins en paddings anders gedefinieerd zijn.
Resultaat meestal: hele opmaak naar de filistijnen!
Voor meer over doctypes e.d.: zie dit topic.
- Als aanduiding voor de website www.quirksmode.org van Peter Paul Koch; met de naam ontleend aan de IE-quirksmode. Dit is een bijzonder nuttige site voor webbouwers, want hier staan "Compatibility Tables" voor de browser-ondersteuning in voor alle javascript-bewerkingen die je maar kunt bedenken: de W3C DOM Compatibility Core, de W3C DOM Compatibility - HTML, de W3C DOM Compatibility - CSS en de W3C DOM Compatibility - CSS Object Model View.
En nog veel meer: een onmisbaar naslagwerk, met talloze testpagina's ook!
Aanrader: eens lekker in bladeren, zodat je weet wat er ongeveer in staat, waarop je dan later kunt terugvallen. 
=======
Springende pagina
Ai, ik zie dat de bliksekaters-site opnieuw gehackt is, en er troep-javascript aan de pagina's is toegevoegd.
Het AVG-alarm was dus terecht.
Intussen heb ik het kluitje Springende Pagina-pagina's ontdaan van de bagger (de rest van de >1000 pagina's nog niet...), en het alarm zou nu niet meer moeten afgaan.
=======
2500x2500px plaatje
Als je dit er zonder meer in zet als background-image (met
body {background: url(...) fixed 50% 0}, dan wordt het niet gerekt of gekrompen, want uit zichzelf gaat dat niet met background-images; althans niet zonder css3.
Dan krijg je de
linker-screenshots bij een resolutie van 1280*1024px resp. 1024*768px:
1280*1024 zonder js -------- 1280*1024 met js
1024*768 zonder js ------- 1024*768 met js
Oftewel: bij elke resolutie is het image precies even groot in het middendeel, dat staat exact hetzelfde achter de content-kolommetjes. Bij grotere resoluties blijft dit hetzelfde, alleen aan de linker-, rechter- en onderkant wordt er een stukje aangebreid.
Maar!
Wil je dit 2500*2500 plaatje mee laten schalen met de resolutie, dan kan je het jQuery-script
fullbg() toepassen en zet je (zoals op je testpagina) het img er wel als voorgrond-img in en niet als background-img.
Dan krijg je de
rechter-screenshots bij een resolutie van 1280*1024px resp. 1024*768px.
Oftewel: het plaatjes wordt dan in de breedte altijd beeldvullend, maar achter de content-kolommetjes wordt het plaatje kleiner bij lagere resoluties, en groter bij hogere resoluties.
1024*768px plaatje
Ingeval je scaling met jQuery toepast, hoeft in feite het "aanbrei-gedeelte" dat in het 2500*2500 image zit er niet bij: alles wordt toch beeldvullend gemaakt, en er komen geen lege zij- of onderkanten bij een hogere resolutie.
Effect wordt dan dit:
1280*1024px met js -------- 1024*768px met js
(afbeelding 1024*768px ipv 2500*2500px)
Conclusie: het is maar waar je voor kiest!
- Wil je het img altijd precies even groot onder de inhoud hebben > dan background-img 2500*2500px en niet schalen met jQuery.
- Maakt dat niet uit > dan is een afbeelding van 1024*768px voldoende (eventueel voor de veiligheid aan de onderkant wat toevoegen, voor tablets die in portretstand staan), die je als voorgrond-img met jQuery kan laten schalen.
=======
Verdwenen background-color bij ie-css3.htc op andere site.
Grm-grm, inderdaad, altijd dezelfde die dwars ligt.
De doorgestreepte
#content { background-color: #FFF; } is op zich niet zo erg: dat doet het script, en het zet er een {fillColor: #FFF} voor in de plaats. Die moet dan gaan opvullen wat het script aan extra elementen in de html heeft gezet:
HTML:
<DIV class="rounded v08vnSVo78t4JfjH" id=content ...>
...
<v:roundrect class=vml_border_radius
style="DISPLAY: block; LEFT: 139px; WIDTH: 980px; POSITION: absolute; TOP: 175px; HEIGHT: 1042px; antialias: true"
arcsize = "1004f" coordsize = "21600,21600" fillcolor = "white" stroked = "f" strokecolor = "white" strokeweight = "0">
<v:fill class=vml_border_radius_fill src = "none" type = "tile" opacity = "1"></v:fill>
</v:roundrect>
</DIV>
Maar dat vertikt IE dus ook.
- Gelukkig blijkt een oude truck uit de tijd van IE5 en IE6 te helpen: "alles domweg een {position: relative} geven, ook als dat niet zou hoeven".
- Om de overlappende menu-strook dan boven de #content te houden, komt er een z-index bij.
- Voor de #footer speelt hetzelfde, en daar kan de <div id="footer-copyright"> er tussen uit, als de styles aan de #footer p {...} worden overgedragen.
- Blijft over: de bovenkant van de #content stuitert tegen de onderkant van de nav-balk aan, en wil met geen mogelijkheid de {margin-top: -10px} toepassen om er onder te schuiven.
- Dat kan verholpen worden door de #content margin-top niet naar boven te duwen, maar de margin-bottom van de #nav met dezelfde 10px omhoog te trekken (!); wat volgens Bartjes precies hetzelfde is.
- Maar voor IE bestaat Bartjes niet: IE's wegen zijn ondoorgrondelijk.
Aldus kan de css worden:
Code:
#nav {
position: relative;
z-index: 2;
margin-bottom: -10px;
}
#content {
position: relative;
z-index: 1;
margin-top: 0;
}
#footer {
position: relative;
z-index: 1;
}
#footer p {
float: right;
}
Nu blijkt de ie-css3.htc niet zo'n mooie schaduwrand op te leveren, die wordt veel te donker.
Maar de PIE.htc brengt het er beter van af, met:
Code:
.rounded{
behavior: url(PIE.htc);
}
Met vriendelijke groet,
CSShunter
__________
PS.
Herstel: je test-pagina heeft intussen het 1024*768px plaatje gekregen. :d - Dat zijn dus de laatste 2 screenshotjes.
