Foto-carrousel / Layout slicen zonder tabel

Status
Niet open voor verdere reacties.
Whoow.... Lot of info here... :shocked:

Maar ik kan het volgen, gelukkig... :thumb:

Die schuifdeuren zijn goed geolied volgens mij..

Het is toch wel allemaal geweldig wat er allemaal mogenlijk is met puur html een css!!!!!
Die patrijspoort is ook wel echt een creative uitvinding!!
Soms denk ik dat het allemaal wel wat eenvoudiger had mogen zijn maar dan is ook de lol er weer snel van af mischien. Daarbij zou ik dan niet zo'n goede, leuke en nuttige les van jou krijgen...:D

Verder viel het mij op dat jij eigenlijk alleen ID's (#) gebruikt in je CSS terweil ik standaard een CLASS (.) gebruik.. Mag ik je vragen waarom jij # gebruikt of is dat teveel of-topic en vergt die uitleg veel tijd?

Ben weer nieuwschierig naar fase6....

Wederom een hartelijke dank voor de moeite die je neemt, ik denk dat ik wel kan zeggen; namens iedereen die dit leest
 
Hoi Ivo,
Van #idee's mag je er telkens maar één per pagina gebruiken, en in .schoolclasse's kunnen een heleboel leerlingen zitten.
Tot dusverre zijn er alleen maar unieke dingen op de pagina gebruikt: er is maar één #wrapper, maar één #header, maar één #logo, maar één #menu, enz. - Vandaar heb ik er ID's van gemaakt.

Later, als we groot zijn en aan de #content mogen komen, zullen er ongetwijfeld classes komen voor zich repeterende elementen. :)

Maar als het classes waren geweest, doet ie het net zo goed.
Het is meer zelfbescherming: als je bv. voor de opmaak van een uniek iets een class maakt, dan later dezelfde class gaat gebruiken voor iets anders, dan na 3 maanden bedenkt dat bij het laatste ding toch de kleur moet veranderen: dus even snel de class aanpassen, - en hup: daar gaat ook de kleur van je unieke container! ;)

Met vriendelijke groet,
CSShunter
 
Yes, next step. :)
Deze keer het inhangen van de onderste schuifdeur: het patroonpapier-deel met schaar en koffiekopje.

Om alles goed te kunnen zien, zetten we tijdelijk de middenstuk-achtergrond uit, en beperken we de hoogte van het menu en van de rechterkolom tot een 200px. Als het hiermee goed gaat, gaat het ook goed als dit verandert.
Het hoofdingrediënt is weer een extra div: een <div id="bottom-img">, met hoogte van de afbeelding en de afbeelding als achtergrond, die we in volgorde onder de #main tekst plaatsen. Dan zit deze automatisch in een laag boven het tussenstuk, en zal ie het tussenstuk waar nodig afdekken.
Bij rekken en trekken aan de hoogte van de inhoud schuift onze schuifdeur dan gewoon weer mee.
Even een paar tussenstapjes!

Fase 6a:
  • De <div id="bottom-img"> is geplaatst, maar de afbeelding zit nu een stuk te hoog!
  • Maar dat kunnen we prima verhelpen.
  • Het bovendeel van het patroonpapier t/m de knoppen van het carrousel moeten er in ieder geval boven komen.
We hebben van het bovenstuk gebruikt in de #header: 240px.
Het bovenstuk is hoog: 560px.
Onder de #header zit dus nog 560-240= 320px hoogte van het bovenstuk (= t/m de knoppen van het carrousel). Dat moet dus de minimale hoogte boven het koffiekopje worden.
Daarvoor gebruiken we de rechterkolom-hoogte. Want die heeft precies die 320px nodig om de knoppen van het carrousel te bereiken.
Aldus maken we de hoogte van de rechterkolom: 320px. En we geven de #bottom-img een { clear: right; } om onder de laagste van de gefloate rechterkolom of de main-content uit te komen.
Dan hebben we:

Fase 6b:
  • Aha, dat begint er al aardig op te lijken: alles sluit nu naadloos aan, alsof we er nooit het mes in hebben gezet! :)
  • Tijd om het tijdelijk uitgeschakelde middenstuk weer terug te plaatsen.
Fase 6c:
  • Middenstuk er weer tussen, en wat stippellijntjes weggehaald.
  • Het gaat nog steeds goed!
  • En nu bij veel content? We gaan er meer content in zetten!
Fase 6d:
  • Het tussenstuk doet wat van een goede schuifdeur verwacht kan worden.
  • Maar onder de content zit nog te veel loze ruimte tot aan de schaar. Die knippen we weg!
Fase 6e:
  • Gelukt!
  • Namelijk door de #main een negatieve margin-bottom van 90px te geven, waarmee het element eronder 90px naar boven wordt getrokken.
  • Omdat die <div id="bottom-img"> alleen maar een achtergrond-afbeelding heeft, en zelf geen inhoud, zien we hier niets van: geen overlap.
  • Behalve bij Internet Explorer (IE7 in elk geval): daarvoor moet nog een { position: relative; } toegevoegd worden aan de #main wrapper.
  • Zo hebben we eindelijk:
Fase 6:
  • Alle stippellijntjes schoongemaakt, voettekst weg.
  • Bestand tegen alle inhoud-hoogten, en tegen alle lettergrootte-wijzigingen door de bezoeker.
    Check bv. in FF: Beeld > Zoomen > Alleen tekst zoomen; en dan naar hartelust Ctrl-scrollwieltje draaien om het koffiekopje zonder vlekken over het papier te zien springen. :D
Klaar voor de volgende fase!

Wordt vervolgd,
CSShunter

PS: we gaan het wel redden vóór moederdag, hoop ik. ;)

[edit]Bij kleine inhoud geeft die negatieve margin-bottom niet, want dan botst het koffiekopje tegen de onderkant van het carrousel-papiertje (=rechterkolom), en kan niet verder omhoog om de content te volgen.[/edit]
 
Laatst bewerkt:
Whhiiieeee....:rolleyes:

Das weer een hoop info, maar nog steeds te volgen hier...:thumb:

Het ziet er erg goed uit, nu al!!

Een duidelijke manier van werken, ik kan blijkbaar er nog meer over leren dan dat ik gedacht had. En als ik het zo uitgelegd krijg is het eigenlijk heel eenvoudig. Je moet het allemaal alleen wel weten. Dan de juiste combinaties maken, hier een clear: right, daar een margin-bottom.. Die moeder van mij zou eens moeten weten..

Hoe hou je die veranderingen op dit gebied allemaal bij?

Weer THX, ben REUZE benieuwd naar de volgende fase...


De "hoover" in het logo om naar de begin pagina te gaan mag evt weg.
De eerste kop in het menu links wordt "Inleiding" en dat is ook gelijk de HOME.
 
Laatst bewerkt:
De "hoover" in het logo om naar de begin pagina te gaan mag evt weg.
De eerste kop in het menu links wordt "Inleiding" en dat is ook gelijk de HOME.
Klik om te vergroten...
Zou kunnen, maar baat het niet dan schaadt het niet. Sommigen zijn gewend dat een klik op het logo altijd naar de startpagina gaat, en reizen daar zonder op of om te zien met de muis naar toe. Dat is langzamerhand een ongeschreven wet in de webwereld geworden, en het scheelt tijd om te kijken waar de knop voor de startpagina zit (dat wil per site wel eens verschillen). Met name ook omdat de home-knop vaak onder een andere naam dan "home" gepresenteerd wordt (zoals ook hier: met de schuilnaam "inleiding"). En soms is er ook gewoon geen home-knop, alleen een logo-link. Tenslotte is de logo-link prettig groot, en veel makkelijker aan te klikken zonder precies op een tekst-link te hoeven mikken.
Conclusie: ik zou de logo-link lekker laten staan, het verhoogt de bruikbaarheid voor verschillende typen bezoekers.

Fase 7a:
  • Even een tussenfase. Van de DOCtype variant "Transitional" overgestapt naar "Strict". Wordt aanbevolen voor nieuwe sites, want dat vraagt zuiverder code, houdt zich stricter aan de standaarden, en geeft de beste cross-browser resultaten.
  • En passant schoonheidsfoutje name="SlideShow" gecorrigeerd: id="slideshow". Vroeger gebruikte men de eigenschap "name" voor de identificatie van een uniek element, tegenwoordig is dat "id".
  • Uiterlijk zien we geen enkel verschil, dus de code was al strict genoeg. ;)
Fase 7b:
  • Menu in zijn scharnieren gehangen.
  • Een naald gebruikt als aanwijzer voor de actuele pagina, en een mooi bandje als visuele feedback bij hoveren over de klikbare andere pagina's. - Maar dat kan ook heel anders: het menu kan je zo mooi maken als je zelf wilt.
  • De menu-breedte loopt iets over het patroonpapier heen. Dat is om de layout van de linkerkolom niet te breken als de lettergrootte door de bezoeker opgewaardeerd wordt.
  • Onderin het adres-visitekaartje geplakt. Dit is een afzonderlijk gif'je met transparantie, zodat het desgewenst ook wat hoger kan komen (of meteen onder het menu).
  • Dit visitekaartje had in principe ook aan één van onze achtergronden van het patroonpapier vastgemaakt kunnen worden, maar door er een aparte gif van te maken kunnen we nu andere 256 kleuren gebruiken dan die nodig zijn voor het patroonpapier, dat ook ter verkleining van het bestandsformaat tot gif was gebombardeerd.
  • Daarmee zijn we, met weglating van de stippeltjes, gearriveerd bij:
Fase 7:
  • De linkerkolom is af.
  • Om het effect van een paginawissel te zien, er fluks een tweede pagina bij gemaakt (7c). Je kunt nu alvast tussen de Gevorderden- en Beginners-pagina switchen. :)
Tot zover op heden!
CSShunter
 
Laatst bewerkt:
Ok, zoals ik zei; "MAG" dus mag ook met hoover... :-)

7a, duidelijk.. (in mijn versie was hij nog niet zo "strict" :p )

Ook is de rest duidelijk, ziet er goed uit, mischien een iets ander "bandje" voor hoover in het menu, de naald is wel weer erg leuk (mischien iets bevel geven in Photoshop?)
Dit soort dingen wil ik wel zelf doen hoor, daar ben ik dan weer wel goed in!

Verder echt helemaal super weer!!
Ben weer heel erg benieuwd naar de volgende stap, hoe zou die foto show er toch uit komen te zien ??? :rolleyes:

THX ivo
 
het eind van de tunnel!

Hoihoi Ivo!
Ja, het mag wel, en het lijkt me ook wel handig. ;) Maar er kan natuurlijk ook een heel ander logo hover-effect komen dan het knalgeel.
... misschien een iets ander "bandje" voor hoover in het menu ...
Klik om te vergroten...
Zou ik zeker doen, deze had ik even snel uit een passementenwinkel geGoegeld voor het idee: want een platte bg-kleur bij hover is maar zo plat.
hoe zou die foto show er toch uit komen te zien ??? :rolleyes:
Klik om te vergroten...
Ja, als ik me niet vergis was dat de hier door jou gestelde vraag, en heb ik tot dusverre alleen maar zijpaden bewandeld. :D
Zelf keek ik er ook prettig naar uit tot de randvoorwaarden vervuld zouden zijn: en nu mag het!

Wat gaan we doen?
Nu kunnen we gaan bijschaven. - Nee nog niet, we hebben nog geen pijltjesknoppen!
Dan mogen we nu eindelijk aan de slag!
  • Aan alle javascript hoeven we gelukkig niets te doen, dat blijft onveranderd.
  • In de carrousel-code van de html op de pagina hoeft straks alleen maar de juiste plek van de carrousel-foto's aangegeven te worden.
  • Alleen het "carrousel-byhand.css" moet aangepast worden. Lekker rangeren met de css om alles op z'n plek te krijgen! ;)
  • Zo hebben we na even prutsen (t.o.v. het voorafgaande: in een p**p en een sch**t) een nieuwe "carrousel-byhand.css" en een tussenresultaat:
Fase 8a:
  • Er gebeurt nog niets ... behalve het van kleur verschieten van de pijltjesknoppen bij hoveren.
  • Dat kan kloppen: de plaatjes zitten nog niet in het carrousel.
  • Maar ook zien we: als javascript uitgezet wordt, blijven de pijltjesknopjes er staan; maar die doen dan niets. Ze zaten in het ontwerp van de "tres-bg-boven.gif", en als de met javascript er in geplaatste pijltjesknoppen er niet zijn, zien we die achtergrond.
  • Dus de achtergrond vernieuwd: met zonder pijltjesknoppen. En meteen ook de okeren achtergrond (handig voor het css-rangeren) in de kleur van het carrousel-papierje gezet. Zo krijgen we:
Fase 8b:
  • ... die nu keurig geen knoppen laat zien als javascript uit staat.
En dan ... de css-validator en de html-validator er overheen laten gaan; nog even het DOCtype omgezet naar HtmlStrict, dat iets minder streng is voor javascript in de <head> dan XhtmlStrict (maar verder de browsers ook geheel de standaarden laat volgen).
En dan ... de afbeeldingen er in gezet, en met toch wel enige schroom voorzichtig op de pagina geklikt:

Fase 8:
Hoorde ik nou trompetgeschal der engelen, of verbeeldde ik me dat? Afijn, zeker een half uur bezig geweest met klikken (bij javascript aan) en schuiven (bij javascript uit). Kon er geen genoeg van krijgen. ;)

Wat er nog resteert, is het invullen van wat er moet gebeuren als je op een foto'tje in het carrousel klikt. Kan zijn: niets (dan de link weghalen) of iets (bv. een link naar dezelfde foto in het groot).

Verder hebben we nog over: de plaatjeswisselaar van het "tevreden klanten" visitekaartje helemaal rechts boven.
Dat zou met dezelfde carrousel-machine aangedreven kunnen worden (maar dan op de automaat). Hoewel, ik vraag me af of dat niet wat teveel van het goede wordt? Als je daar al een auto-carrousel wilt neerzetten, zal het heel langzaam moeten draaien, anders wordt de lieve lezer(es) steeds afgeleid bij het lezen van van de tekst waar het om gaat.
Misschien is het op elke pagina tonen van een andere tevreden reactie wel zo rustig? - En het scheelt ook werk. ;)
"Zijn er nog vragen?"

Met vriendelijke groet,
CSShunter
 
:thumb::thumb::thumb::thumb::thumb::thumb:

-------- SUPER ----------​

Het trompetgeschal kwam zeker vanuit hier!!!!! (kan niet zeggen dat ik een engel ben:) )
Ik vind hem/jou geweldig!

Ik ga de tekst er in zetten, de plaatjes finetunen en dan online zetten, voor moederdag nog wel !!!!!!!!!
O, net even zitten kijken hoe het er uit ziet zonder javascript, ook netjes toch, met is mooier maar toch... COOL :p

Ik heb me idd nog al zitten afvragen of die wisselaar bovenin er wel bij moet, het is wel lekker actief, een verandering op de pagina zonder dat men er op heeft/hoeft te klikken. Wel moet er dan idd heel goed nagekeken worden dat hij niet te snel gaat.
Mischien is het beter om alleen bij een refresh een nieuw plaatje te laten zien (evt. dmv. php of ook via javascript)

Ik wil daar toch graag jou mening over vragen, daar jou inbreng al zo enorm (goed) is ;)

Ik vast weer wat sleutelen, echt super dank!
Als ik iets terug kan doen voor je vraag je het maar!!! :thumb:
 
Goeiemorgen Ivo!
Je hebt 'm ontdekt. ;)
Blij dat ie in de smaak valt! (zelf ook pret aan beleefd om alles op z'n plek te krijgen en te laten werken.)

Ja, de wisselaar bovenin. - Misschien ben ik wat te beeld-gevoelig, maar bij mij is het zo:
  • dat ik juist niet kijk naar bewegende dingen (zeker niet als die niet op een belangrijke plaats op de pagina zitten; mijn focus zit op logo links boven, dan menu links en dan inhoud in het midden);
  • dat ik bewegende dingen ook associeer met reclame-banners, waar ik geen trek in heb (en ze dus ook niet ga bekijken);
  • dat ik "de aanblik van de pagina" in mijn korte-termijn geheugen opsla als ik naar een andere pagina op die site klik, en dat ik altijd even in verwarring kom als als terugga en de eerdere pagina ziet er opeens anders uit door een automatische plaatjeswissel: "Hé, was dat de pagina wel waar ik net was?" - Da ga ik 3x kijken of dat klopt... en de pagina een paar keer refreshen om het zeker te weten... en dan "moet dat nou?" te denken (in plaats van lekker door te lezen of te klikken). :rolleyes:
  • dat ik bij een automatische wisselaar (ook al gaat ie langzaam) op een nieuwe pagina al gauw denk: o, dat heb ik al gezien (en er ook niet meer naar omkijk);
  • dat ik met instemming gelezen heb in het Kwaliteitsmodel Webrichtlijnen (waar precies weet ik even niet; het zit ook in de WCAG-richtlijnen), dat er bij automatisch getriggerde veranderingen op een pagina altijd een alternatief moet zijn voor de toegankelijkheid, en mensen de verandering zelf in de hand moeten kunnen houden; oftewel "Net nu ik dat visitekaartje aan het lezen ben, floept ie weg", of "Ik bekijk ze achter elkaar, maar het gaat voor mij te snel" of "Het gaat voor mij te langzaam".
Vandaar mijn idee om de wisselaar te laten vervallen, en voor elke pagina telkens een eigen visitekaartje te nemen: dat verhoogt juist de herkenbaarheid van de aparte pagina's. :)

Succes met het sleutelen!
CSShunter
 
Mogelijk is dit nog nuttig voor de plaats in zoekmachines.
* Elke pagina moet 'n eigen description en title krijgen in de head. Die kunnen het best hetzelfde zijn, want dan hecht in ieder geval Google er meer waarde aan. Ze mogen op de verschillende pagina's best op elkaar lijken, als ze maar niet helemaal hetzelfde zijn.
* Elke pagina moet 'n <h1> krijgen. Liefst met dezelfde tekst als de description en title, maar in ieder geval er zoveel mogelijk op lijkend. En maar 1 <h1> per pagina. Als de letter te groot is en zo, kun je dat met css corrigeren. Aan 'n <h1> wordt door Google ook meer waarde gehecht.
* Probeer in de tekst de woorden waar je op gevonden wilt worden te verwerken, en liefst ook in description, title en h1.
Ik zou bijvoorbeeld zoeken op 'mode' of 'kleding'. En dan zou ik 97.000 zaken tegenkomen. Nadat ik van de schrik ben bijgekomen, zou ik zoeken op 'mode Amsterdam' (daar woon ik). Dus de plaats van de zaak moet op elke pagina terugkomen. In tekst, want 'n zoekmachine leest geen visitekaartjes.
Dit is natuurlijk maar 'n voorbeeld, hoewel de plaatsnaam zeker van belang is.
* Ga niet geforceerd schrijven. Als 'n <h1> echt niet lekker leest als hij hetzelfde is als de description, dan gewoon aanpassen. In je description zou iets kunnen staan als 'Voor al uw mode in Delfzijl' (ik roep maar even wat), maar dat ziet er niet uit in je h1. Niet je h1 (of andere tekst) gaan verbergen. Dat heet cloaking en daarvoor word je subiet uit de zoekmachine gegooid, of op z'n minst heel erg laag geplaatst. De zoekmachine moet hetzelfde te zien krijgen als je bezoekers.
 
Laatst bewerkt:
Whiiieee...

So... das duidelijk!!!! Geen wisselaar !!!!! (en makkelijker!!)
Een aantal "dat"jes kan ik me ook wel in vinden trouwens!!

Leuk trouwens die knopjes (in een blokje)... Ben al weer een beetje aan het sleutelen!
Tot nu toe doen die img. bij mij wat lastig maar vanavond ga ik daar verder mee.. Nu werken :confused:

THX again...

@Goeroeboeroe, thx voor de optimaliserings tips!!
 
Die lastige images heb ik eruit gegooid voor de niet lastige..lol

Nu lekker diverse zaakjes aan elkaar rijgen...

Toch kom ik iets vreemds nu tegen.
Zowel in IE als in FF is er onder de pagina "iets van ruimte" waardoor er een scroll balk aan de rechterzijde verschijnt. :shocked:

Ik ben daar wel even mee bezig geweest, morgen avond wel weer even mee verder.
Mischien dat jij zoiets hebt van o, dat komt door dit ene regeltje... :rolleyes:

Morgen pak ik de draad weer op!

THX NOGMAALS!!!!
 
Yes, die scrollbar heb ik op m'n geweten! :D

Inderdaad 1 regeltje, en wel het eerste regeltje in de css.
Dat heb ik nl. gedaan door te vertellen:
html { height: 101%; }
Bij elke resolutie is dan de hoogte van het scherm net iets tekort (die is immers per definitie 100%), en moet er een scrollbar rechts verschijnen (die misschien 1 mm omhoog of omlaag kan).
Maar waarom dan?
Dat zit zo:
  • Internet Explorer heeft aan de rechterkant van zijn venster altijd ruimte voor een verticale scrollbar gereserveerd. Als geen scrollbar nodig is wordt die ruimte "uitgewit", maar de ruimte blijft wel bestaan.
  • Zo niet in Firefox. Als er geen verticale scrollbar nodig is, denkt FF: "hup, inpikken die ruimte, en gauw gebruiken voor de pagina!"
  • Als een webpagina nu in z'n geheel links uitgelijnd is (en de layout houdt rekening met een langere pagina waarbij wel een rechter scollbar nodig is), dan zit er op een korte pagina wat loze ruimte aan de rechterkant. Geen probleem.
  • Maar als een website gecentreerd is, dan zit het midden bij wel/geen scrollbar op een andere positie op het FF-scherm! Resultaat: als je van een korte naar een hoge pagina klikt (of omgekeerd), verspringt het midden van de pagina, en daarmee de pagina. Als de pagina qua vaste onderdelen helemaal hetzelfde is, valt dat behoorlijk op. Je zou immers verwachten dat alles gewoon op z'n plek blijft staan, en alleen de inhoud van de pagina verandert.
  • Op het moment dat je er voor zorgt dat er altijd in FF een rechter scrollbar is, ook bij een korte pagina, dan heb je dat verspring-probleem niet.
Vandaar!

O ja, wat er nog bij komt: als je een pagina ontwerpt op een prachtig ontwerp-scherm met hoge resolutie, past er altijd veel op. Dan is het misschien helemaal niet nodig, want "er zijn geen te lange pagina's".
Maar op het moment van kijken door de bezoeker met een lagere resolutie kan dat heel anders liggen, en kan er wel degelijk scrollen nodig zijn om het onderste deel van een lange pagina te kunnen zien. Terwijl bij een korte pagina niet gescrolld hoeft te worden. Dan krijgt de bezoeker met het verspringen te maken, terwijl jij misschien denkt dat alles lekker gaat. *) **)
- Evenmin is te voorspellen, of je misschien na een paar maanden de pagina-content zou willen uitbreiden of inkrimpen.
No Risk = Always Scrollbar!

Met vr. groet,
CSShunter

*) Testen van een maaksel in verschillende resoluties hoort standaard in het test-pakket der ontwerper: naast de html- en css-validator, naast de bezichtiging in diverse browsers, en de toegankelijkheidstesten, en de dode-linken-test, en de kleurentest, en de rest van de testbatterij.
**) Om niet in de verleiding te komen een verkeerde layout toe te passen bij de fabricage van bouwsels, heb ik mijn monitor standaard op 1024x768px staan (terwijl deze ook best 1280x1024 aankan): want dat is een resolutie waarop nog veel mensen webpagina's in ogenschouw nemen. - Dat vond ik wel bloemrijk gesproken - zeker voorjaar op komst. ;)
 
Laatst bewerkt:
Okee, duidelijk!

Het testen in div. resolutie deed ik overigens wel al, alleen pas als de site af was. Mischien is het wat handiger om dat in een wat eerdere fase te doen..

Ik ga vanavond weer verder, als je wil kan je mijn stappen volgen via www.dekoweb.nl/tresmode

Als ik nog een vraag tegenkom zal ik hem nog stellen en anders zal ik de uiteindelijke link hier ook plaatsen, rond moederdag.

Dan kan hij erna op slot, en hoop ik dat hij voor HEEEL VEEEEL mensen gebruikt mag worden en jou tijd, moeite en energie voor hun, zoals ook voor mij, een inspiratie mag zijn voor in de toekomstig te maken sites. Met als resultaat, een beter, schoner, sneller en mooier W W W!!! :thumb:

THX
 
als je wil kan je mijn stappen volgen
Klik om te vergroten...
Ga ik zeker doen. 1e bevinding: hij vordert! De hover over het logo is een stuk beter geworden.
Ik zie dat het nog een .htm pagina is. Had je er al aan gedacht er een .php site van te maken (met automatisch invoegen van logo en menu)?
Dat scheelt aan kopieer- en plakwerk op elke pagina, en is ook veel makkelijker om later wijzigingen aan te brengen (bv. in het menu). Dan wordt zo'n wijziging automatisch doorgevoerd op alle pagina's tegelijk, zonder dat je er enige moeite voor hoeft te doen. :)

Ik ga 's een kopje koffie drinken: zal proberen geen vlekken te maken. ;)
CSShunter
 
csshunter zei:
Ik zie dat het nog een .htm pagina is. Had je er al aan gedacht er een .php site van te maken (met automatisch invoegen van logo en menu)?
Klik om te vergroten...

JAAaa.. Tuurlijk.... :o niet

Ik ben toevallig net bezig met een cursus Joomla!
Daar ben ik ook mijn eerste "echte" ontmoeting met PHP aan het ervaren!!! :shocked:

Nee, eerlijk gezegd heb ik daar dus nog niet aan gedacht. Maar op een of andere manier maak je me er wel ENORM nieuwschierig van. Al is het mischien nu wat kort dag om daar in verder te gaan??

Ik krijg hem in puur html wel netjes aan de praat hoor, en het is niet mijn doel jou hier het eene na het andere weekend aan werk te bezorgen :)

Groetjes Ivo
 
... PHP ... wel ENORM nieuwsgierig ... niet mijn doel jou hier het eene na het andere weekend werk te bezorgen :)
Klik om te vergroten...
Kijk, hier kom ik nu eens makkelijk van af. :D
Hoe kan je php gebruiken?

Net zoals je alle styles die eerst in de <head> stonden, hebt vervangen door één regeltje verwijzing naar het stylesheet van dienst:
Code: 
[FONT="Courier New"][SIZE="2"]<link href="css/tresmode.css" rel="stylesheet" type="text/css">[/SIZE][/FONT]     (zie PS)
... kan je een willekeurig code-fragment (zoals het gedeelte voor het menu) vervangen door één regeltje php-verwijzing naar het fragment van dienst:
PHP: 
<?php include("menu-fragment.txt"); ?>
Met één menu-fragment.txt (met de uitgeknipte html-code) worden dan alle pagina's van de hele site bedropen.
Klaar! :)
  • Iets meer uitleg en verwijzingen naar een voorbeeldje staan hier al.
Als je de daar genoemde mini-php-handleiding gaat volgen, kan je de fases 1 t/m 5 voor kennisgeving aannemen en hoef je alleen de laatste pagina met fase 6 goed te verorberen. Want in "het scheppen van de randvoorwaarden voor het carrousel" heb ik hopelijk al alle voorwerk verdisconteerd om makkelijk naar php te kunnen overstappen. Oftewel: als het goed is kan je zo gaan knippen en plakken. ;)

Ik hoor het wel!

Met vriendelijke groet,
CSShunter

PS
De slash ... /> aan het eind moet nu vervallen, omdat het geen xhtml meer is maar gewone html4.01. - Dat vindt de html-validator ook gezellig.
 
Dat ziet er erg leuk, handig en bovenal intresant uit!!!!!
Ik heb het net even vlugjes langs laten komen en ik ga er zodra ik tijd heb me verder in verdiepen!
Ik zal het ZEKER toe gaan passen!!

Ondertussen heb ik het bestudeerd en een HEEL stuk wijzer geworden!!!
De volgende stap is het toepassen! Ik denk dat het in de toekomst een hoop tijd scheeld als ik het onder de knie heb!

Nu toepassen nog......
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan