csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi Joop,
De structuur is erg eenvoudig: elke pagina is een centrale regelkamer, die uit de techniek-map telkens de 3 include-fragmenten aftapt, plus het stylesheet (dat daarmee ook doorwerkt op de geïncludeerde fragmenten).
==========
==========
De theoretische leergang
==========
De praktische toepassing
Dit lijkt misschien bewerkelijk, maar als je het een paar keer gedaan hebt, gaat het razendsnel!
En je weet meteen dat het goed gaat met wat je van plan bent.
==========
Conclusie
Dat gaat dus worden:
De rest van de #apDiv6 styles zou er nu uit mogen, maar het kan geen kwaad als het er in blijft staan: er zit nu toch geen img of link meer in de #apDiv6. *)
Met vriendelijke groet,
CSShunter
______________
*) Eigenlijk zou het hele stylesheet eens opgeschoond moeten worden om oude toch niet gebruikte dingen er uit te verwijderen. Dat zijn nog restanten van de overgangsperiode! - Maar haast heeft dat niet. Eerst Fase 2 maar eens bij de zwemvliezen pakken ...
Dat brengt me er op, dat er eigenlijk nog geen schema is hoe alles in elkaar zit: tot dusverre gaat alles uit het blote hoofd.
- Voor de map techniek: kikkers-website-structuur-schema.png
(om online te bekijken) - Dezelfde als Word-document: kikkers-website-structuur-minischema.doc
(printbaar als A4, kan bv. opgehangen worden in de kombuis) - Bibliotheek-document voor nu en later; kan ook van pas komen bij de overdracht als er ooit eens een opvolger-webmaster mocht komen.
De structuur is erg eenvoudig: elke pagina is een centrale regelkamer, die uit de techniek-map telkens de 3 include-fragmenten aftapt, plus het stylesheet (dat daarmee ook doorwerkt op de geïncludeerde fragmenten).
- Behalve de index.php, die alleen het stylesheet en het kikkers-standaardzaken.htm fragment binnenhaalt, en de twee menu's er rechtstreeks in heeft staan.
==========
Dat kan op twee manieren gebeuren: de theoretische leergang, en de praktische toepassing.
==========
De theoretische leergang
- Men neme: het structuurschema.
- Men kikkert door een pagina plus de ingesloten fragmenten heen, en stelt vast in welke <div> de link naar basketballwear.nl zit opgenomen.
- Men regelt het anders in de betreffende <div>.
- Men gaat naar het stylesheet, en stelt vast hoe de afbeelding en de hover-variant wordt geregeld.
- Men regelt het anders in het stylesheet.
==========
De praktische toepassing
- Men neme: Firefox.
- Men neme: Firebug. Nog niet aan boord? Snel downloaden! - Ik wacht wel even.
...
... - Men opene: een willekeurige pagina, bv. organisatie.php, en klikt rechts op de link naar basketbalwear.
- In het contextmenu staat onderaan: "Element inspecteren met Firebug". Klik!
- In het linkervenster zie je dat deze link het enige element in #apDiv6 is.
- Even proberen er uit te halen: klik in het Firebug-menu op de knop "Bewerken".
- Wis de hele <a target=.... t/m </a>, en klik "Bewerken" weer uit. Wat zie je? - Ik wacht wel even
...
... - Inderdaad, een zwart gat op de plaats van de fotostrook. Hoe komt dat? Even terug naar af: refresh de pagina (daarmee wordt Firebug gereset), en klik in het linkervenster de #apDiv6 open, zodat de link daar weer staat.
- Klik nu in het linkervenster op de link, en kijk in het rechtervenster. Daar staat dat de link (in normale toestand) als achtergrond-afbeelding heeft:
background: url("images/kikkers-header-sprite.jpg") -894px 0 - Als de link weggehaald wordt, verdwijnt dus ook deze achtergrond. Dat mag niet!
- Dus deze achtergrond moet als achtergrond van de #apDiv6 opgenomen worden.
- Dat kan online even uitgeprobeerd worden. Haal eerst de link-regel weer uit de #apDiv6 (> zwart gat).
- Klik in het rechtervenster op #apDiv6. Vervolgens met de tab-toets naar beneden huppelen, tot er een leeg vakje ontstaat. Daar tik je in: background
Enter, en vul dan in: url("images/kikkers-header-sprite.jpg") -894px 0
Hup: daar neemt de fotostrook weer bezit van het zwarte gat!
Dit lijkt misschien bewerkelijk, maar als je het een paar keer gedaan hebt, gaat het razendsnel!
En je weet meteen dat het goed gaat met wat je van plan bent.
==========
Conclusie
- De link zit in de #apDiv6. De #apDiv6 zit in de kikkers-standaardzaken.htm, zegt het structuurschema. Aldus de standaardzaken openen en daar de regel van de link verwijderen (de #apDiv6 zelf blijft bestaan voor de afbeelding).
- De standaardzaken zitten ook in de index.php, dus daar hoeft niet iets aparts voor geregeld te worden.
- De afbeelding zat in het stylesheet kikkers-stylesheet.css, en moet toegevoegd worden aan de styles voor de #apDiv6. Even scrollen tot je de #apDiv6 tegenkomt, waar staat:
Code:
#apDiv6 {
position: absolute;
top: 47px;
left: 176px;
height: 129px;
width: 549px;
z-index:6;
}
Code:
#apDiv6 {
position: absolute;
top: 47px;
left: 176px;
height: 129px;
width: 549px;
z-index:6;
background: url(images/kikkers-header-sprite.jpg) -894px 0;
}- NB: En het stylesheet helemaal bovenaan even een nieuwe versie-datum geven!
Met vriendelijke groet,
CSShunter
______________
*) Eigenlijk zou het hele stylesheet eens opgeschoond moeten worden om oude toch niet gebruikte dingen er uit te verwijderen. Dat zijn nog restanten van de overgangsperiode! - Maar haast heeft dat niet. Eerst Fase 2 maar eens bij de zwemvliezen pakken ...
Laatst bewerkt:
Het moet wel veilig (met php) gebeuren, want voor je het weet blaast en spammer/hacker daarmee je server op. - Die cloudformz ziet er op het lekenoog niet gek uit. Misschien moet je maar eens een nieuw topic openen om naar ervaringen daarmee te hengelen. 
(maar geef toe dat ik de vraag eerlijk neutraal in de lucht heb gegooid 
Succes! Uw bericht is verstuurd naar dekikkers. (en dat had een 9.8 voor nederlands, 30 jaar geleden 
