Foto-carrousel / Layout slicen zonder tabel

Het witte papier wat op tafel ligt is patroon teken papier en is in werkelijkheid ook een heel klein beetje transparant, vandaar...

Klik om te vergroten...

• Dat kan helemaal kloppen, maar 9 van de 10 mensen zal dat ontgaan, en die zien niet de stof-achtergrond er doorheen schijnen, maar alleen een wat smoezelig vel, oneerbiedig gezegd.
• Het hangt ook van de lichtval op het patroonpapier af, en de positie van de kijker t.o.v. het papier en de lichtval.
• In werkelijkheid focust je oog zich op het papier en filtert de 3D doorschijnende achtergrond er uit (behalve als je die echt wilt zien). En als je het papier beweegt, blijft de stof eronder liggen, zodat duidelijk is dat het transparantie is.
• Op een plat scherm heeft de transparantie een ander effect: je kunt niet ontsnappen aan het beeld, en je moet moeite doen om vast te stellen waar de 3D er in zit. En bij verschuiven van het papier (scrollen) beweegt de stof mee, dus daaraan kan je niet ontlenen dat het om transparantie gaat. - Is misschien iets aardigs mee te doen, door voor het stoffen background-image een { background-attachment: fixed; } in te voeren. Dan blijft de stof liggen, en beweegt het papier bij scrollen (en zie je de doorschijnende bobbeltjes op dezelfde plaats blijven zitten). Hoewel, misschien is dat effect heel minimaal.

• Drijfveer: zo'n png is veel groter, en een gif kan enorm in downloadtijd schelen.
• Het logo alleen al (www.dekoweb.nl/tresmode/images/logo.png) is maar liefst 266kB, in mijn gif-variant (www.developerscorner.nl/csshunter/images/treslogo710x230.gif) is het "maar" 63kB.
• In totaal zit er zeker voor 780kB aan images in de pagina, en alles wat daar af kan, is (snelheids)winst. Iemand op een afgelegen boerderij zonder snel internet moet nu ruim 2,5 minuut wachten, voordat zijn/haar telefoonmodem van 56Kbps de pagina op scherm heeft staan (!).

• Om je lekker te maken alvast een screenshotje met kleine lettergrootte, en met grote lettergrootte.

• Achtergrond in de html-css: het tafelkleed-img, in de body-css alvast zoveel mogelijk van de rest van de achtergrond. Inclusief de knopjes voor het carrousel!
• Het tafelkleed is gefixeerd, dan kan het patroon enz. over de tafel heen schuiven als je scrollt. - Ze kunnen desgewenst ook samen omhoog scrollen.
• De stippeltjes-ruimte is voor t.z.t. de reactie-plaatjeswissel.
• In de breedte past ie nu zonder horizontale scrollbar op een beeldscherm met resolutie 1024x768px.
• Bij het logo een link met hover-img aangebracht, zodat je met een klik op het logo naar de startpagina kan gaan.
• De binnenruimte van het carrousel is nu op precies 200x200px gezet, dat is makkelijk te onthouden als er later eens een nieuwe dia aan toegevoegd moet worden.
• Alle afbeeldingen teruggebracht tot gif'jes van [dezelfde!] 256 kleuren: (a) het verschil met 16,7 miljoen kleuren in een png of ongecomprimeerde jpg zie je nauwelijks (!); (b) gif's zijn scherper dan gecomprimeerde jpg's; (c) gif's zijn in dit geval veel kleiner aan kB's; (d) gif's staan transparantie toe (= nog minder kB's, en nodig voor scrollen over de tafel).
• Opmerking-1: later kunnen we met Smush-It kijken of de afbeeldingen nog kleiner kunnen worden met behoud van kwaliteit (en transparantie). Maar dat kunnen we doen als echt alle images klaar zijn, dan gaat dat in één klap. - Ik zag al dat er van de 148kB van de grote afbeelding nog 24 kB af te snoepen zijn. Da's mooi meegenomen voor de snelheidswinst!
• Opmerking-2: het reactie-wisselprogramma script doet het bij mij op de site niet. Maar het is in principe eenzelfde soort carrousel als het andere, en het javascript daarvan is waarschijnlijk zo aan te passen dat het óók deze platenwisselaar kan bedienen. Dat scheelt dan weer code; maar is van later zorg: eerst de rest van de layout in hoofdlijnen op het scherm zien te krijgen!

• Het #menu laten we drijven aan de linkerkant { float: left; }, en krijgt een breedte van iets over de rand van het patroon. Dan past ook het langste woord uit het menu (hier: "Vergevorderden") er altijd in, ook als een bezoeker de voorkeur geeft aan een grotere lettergrootte.
• De #rechterkolom laten we drijven aan de rechterkant { float: right}, en krijgt een breedte die net geboeg is om alles van het carrousel er binnen te krijgen.
• De #main drijft niet, dan komt deze er precies tussen te staan.
• Als je een kort #menu zou hebben (of een #main met veel tekst), zou de #main-tekst onder het menu gaan springen zodra daar ruimte voor is. Dat kan vermeden worden door de #main een margin-left te geven ter breedte van de menu-kolom. In de praktijk: iets meer: dan is er nog wat speling voor het oog.
• Op dezelfde manier krijgt de #main container ook een margin-right, om niet onder het carrousel te kunnen uitlopen.
• Zo is de #main dus een mooi strakke kolom geworden met van boven naar beneden steeds dezelfde breedte.
• Om tekst onder het geheel van de drie kolommen te krijgen (= onder de hoogste van de drie; welke weten we nog niet), komt onder de #wrapper een <div>'je, waarmee onder de drijvende elementen wordt gekomen door deze "op te schonen" (vrij te maken): { clear: both; }. Zo is de ruimte vrijgemaakt voor een voettekst over de volle breedte.
• Bovendien zorgt deze "clear" voor het kunnen opvullen van de achtergrond-ruimte van de kolommen, en dat komt in het vervolg goed van pas.

• Veel tekst (en eigenlijk nog niet eens zo heel erg veel tekst).
• Als de bezoeker grotere letters heeft ingesteld (zonder op het totaal in te zoomen; bv. in Internet Explorer: Beeld > Tekengrootte; of in Firefox: Beeld > Zoomen > Alleen tekst zoomen / Inzoomen) wordt dit verschijnsel alleen maar erger. Zie bv. deze: fase 2b.
• Je zou een vaste lettergrootte kunnen opgeven (in px) om ervan af te zijn. Maar dat werkt alleen in Internet Explorer! Alle andere browsers trekken zich daar niets van aan (zoals het hoort volgens de w3c standaarden). Achterliggende reden: de bezoeker moet de baas kunnen zijn over het formaat van de letters op het scherm; als de bezoeker een grotere letter nodig heeft om een pagina te kunnen lezen, moet de bezoeker dat kunnen instellen. - Anders is voor deze bezoeker de hele website niet te lezen!
• Lettergrootten in de css horen daarom in een relatieve maat opgegeven te worden (in em's bijvoorbeeld; 1em = 100%, en je kan ook bv. .9em en 1.35em opgeven). Dan kan de surfer met IE ook het letterformaat aanpassen.

• Nu zou je de afbeelding van het patroonpapier in z'n totaal wel kunnen rekken in de hoogte (bij behoud van dezelfde breedte), maar dan raakt alles buiten proportie. Een ovaal koffiekopje bijvoorbeeld. :shocked:
• Dat moet het dus niet zijn. Wat wel? Er moet op listige manier een tussenstuk in geflanst worden, waarmee het gat tussen het vaste bovenstuk en het vaste onderstuk gevuld kan worden.
• Dat tussenstuk moet dan net zo hoog worden als nodig is om de hoogte van de tekst boven de schaar te houden. Kan dat? Ja, en daarom was alvast het patroonpapier doormidden geknipt.

• Je maakt twee <div>'s aan: de tweede direct binnen de eerste, en in elk geval de buitenste zonder opgegeven breedte.
• In de eerste ("buitenste") <div> zet je het gedeelte dat erachter mag schuiven: de rechter schuifdeur. Die wordt erin geplaatst als achtergrondfiguur met { background-position: 100% 0; }. Dan is de rechterkant van de rechterdeur altijd aan de rechterkant van de container.
• In de tweede ("binnenste") <div> wordt de linker schuifdeur opgehangen: ook als achtergrondfiguur, maar nu gewoon links beginnend. Omdat deze <div> later in de html staat, overlapt de achtergrondfiguur de achtergrondfiguur van de buitenste <div>.
• De tekst en andere spullen komen nu in de binnenste <div>.
• Als de binnenste <div> nu breder wordt gemaakt, bv. in een liquid layout (met de binnenste <div> een percentage van de breedte van het beeldscherm), dan gaat de rechter schuifdeur mee naar rechts, omdat ook de omvattende buitenste <div> meegroeit in de breedte.

• Een buitenste <div> waar het onderstuk van het patroonpapier in moet komen: d.w.z. de schaar/koffie-onderkant plus een opzetstuk dat de nodige ruimte tussen onderkant en het bovenste deel van het patroonpapier kan opvullen.
• NB: dit "tussenstuk" moet bij elke hoogte van de pagina op de bovenkant kunnen aansluiten! > Alles moet hier verticaal hetzelfde zijn, anders lukt het niet: want de rek gebeurt exact verticaal. > Er mogen dus geen schuine lijnen of mooi extra dingen in het patroonpapier in het tussenstuk komen.
• Een binnenste <div> waarin de bovenkant van het patroonpapier komt, en dat over het tussenstuk heen kan schuiven zonder dat je ergens een grens ziet: naadloos aangenaaid.

Het "tussenstuk" wat "rekbaar" gemaakt word, is dat dan 1px hoog of is dat dan een hoger plaatje wat er daadwerkelijk achter schuift?

Klik om te vergroten...

• Er zijn nu 3 lagen: de onderste laag is de achtergrond van het doorkijkje tussen de deuren (het tussenstuk), de andere twee zijn de linker- en rechterschuifdeur (het bovenstuk en onderstuk van het patroonpapier).
• Voor het zich herhalende tussenstuk kan je in principe een img van 1px hoog gebruiken, maar je kunt er net zo goed iets van een pixel of 60 hoog van maken. In downloadtijd scheelt dat nauwelijks, maar het scheelt wel veel rekenwerk voor de browser. In plaats van 60 keer die 1px-regel te moeten plaatsen, hoeft er nu maar 1x het hele blok ingeplakt te worden, enz. Het hele blok staat na de ene keer downloaden klaar op de computer van de bezoeker, en dan is het inmonteren weinig moeite voor een browser (hebben ze me zelf verteld ).
• In ons geval komt daar nog bij: met 1px hoog wordt alles verticaal in uni-kleuren weergegeven, terwijl op de aansluitende stukken (door het gebruik van gif's) juist spikkeltjes staan om tussentinten weer te geven. Ook voor het oog is het dus beter om een wat hoger tussenstuk te gebruiken, waarop dezelfde spikkeltjes staan. Een lijn op het punt van overlap (boven en beneden) is dan onwaarneembaar.

• Hoe hoog de tekst ook is, deze schuift altijd de #wrapper mee naar beneden.
• En met de grotere #wrapper wordt ook het "tussenstuk" tussen de schuifdeuren groter.
• Hiermee is ons behang klaar (de achterwand die we tussen de schuifdeuren door zien).
• Het bovenstuk dat er al zo mooi stond, is nu achter het behang geplakt!
• Maar dat is niet erg want:

... ideetje om het deel over IvoBookish' site af te splitsen in een nieuw onderwerp?

Klik om te vergroten...

Topic op verzoek afgesplitst

Klik om te vergroten...

• In de <div id="wrapper"> zat al het tussenstuk als achtergrondafbeelding.
• Meteen na de <div id="wrapper"> is een <div id="wrapper-top"> ingevoegd, die met </div> eindigt vlak voor de einde-</div> van de #wrapper.
• De #wrapper-top is nu de binnenste <div>, die precies even groot is als de #wrapper-div.
• Het bovenstuk hadden we al. Dat is ook bij de bezoeker al gedownload, en dat kan dus zonder enige vertraging direct nog eens ingemonteerd worden: we gaan het bovenstuk recyclen!
• Het bovenstuk plaatsen we nu dus in de #wrapper-top, dan komt deze als "vaste schuifdeur" (of meer: als lambrisering) voor de aaneengesmede achtergrond van het zich herhalende tussenstuk.
• Zo! Maar nu hebben we de header er dubbel in staan. :shocked:

• Omdat het om een achtergrondafbeelding gaat, die in de eerder rood gestippelde #wrapper-top staat (en daar dus nooit buiten kan komen!), kunnen we deze in die #wrapper-top omhoog hijsen met het vereiste aantal pixels (hier: 240px).
• Dat gaat met de background-position: horizontaal aan de rechterkant, en verticaal 240px van de hoogte af. In de korte css-notitie wordt dat:

[FONT="Courier New"][SIZE="2"]#wrap-top {
	background: url(images/tres-bg-boven.gif) no-repeat right -240px;
	}[/SIZE][/FONT]

• Uiteraard laten we deze afbeelding zich niet herhalen, anders is het tussenstuk in de laag eronder niet te zien.
• Mocht er heel korte tekst zijn, dan is het bovenstuk al voldoende om voor het tekst-deel als achtergrond te dienen, en is het tussenstuk niet nodig, d.w.z. het wordt nu volledig afgedekt (= schuifdeur 1 zit helemaal achter schuifdeur 2).
• Ook dat gaat vanzelf: fase 5a.